:root {
  --kayna-navy: #141c2b;
  --kayna-petrol: #13282b;
  --kayna-paper: #f9f9f9;
  --kayna-green: #bae253;
  --kayna-cyan: #33bce1;
  --kayna-muted: #4e5959;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--kayna-paper); }
body, .ant-typography, .ant-table, .ant-form, .ant-btn, .ant-input {
  color: var(--kayna-navy);
  font-size: 15px;
  line-height: 1.5;
}

.ant-layout-header {
  background: var(--kayna-navy) !important;
  border-bottom: 3px solid var(--kayna-green);
}
.ant-layout-header::after {
  content: 'LoRaWAN Netzwerk Server';
  display: inline-block;
  margin-left: 14px;
  color: var(--kayna-paper);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
}
.ant-layout-header a, .ant-layout-header .anticon { color: var(--kayna-paper) !important; }
.ant-layout-header img[alt="ChirpStack"], .ant-layout-header img[alt="Kayna-Funkt"] {
  content: url('/kayna-brand/logo.png');
  box-sizing: border-box;
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
  object-position: left center;
  padding: 3px;
  background: var(--kayna-paper);
  border-radius: 24px;
}
.ant-layout-header img[alt="ChirpStack"] + *, .ant-layout-header img[alt="Kayna-Funkt"] + * { color: var(--kayna-paper); }

.ant-layout-sider, .ant-layout-sider-children, .ant-layout-sider .ant-menu,
.ant-menu-submenu-popup > .ant-menu { background: var(--kayna-petrol) !important; }
.ant-layout-sider .ant-menu-item, .ant-layout-sider .ant-menu-submenu-title,
.ant-layout-sider .ant-menu-item a, .ant-layout-sider .ant-menu-item .anticon {
  color: var(--kayna-paper) !important;
}
.ant-layout-sider .ant-menu-item-selected,
.ant-layout-sider .ant-menu-item-active { background: rgba(186, 226, 83, .18) !important; }
.ant-layout-sider .ant-menu-item-selected,
.ant-layout-sider .ant-menu-item-selected a,
.ant-layout-sider .ant-menu-item-selected .anticon { color: var(--kayna-green) !important; }

.ant-btn-primary { background: var(--kayna-green) !important; border-color: var(--kayna-green) !important; color: var(--kayna-navy) !important; }
.ant-btn-primary:hover, .ant-btn-primary:focus { background: #c9ed70 !important; border-color: #c9ed70 !important; }
a, .ant-breadcrumb a, .ant-table a { color: #0b667b; text-decoration-thickness: 1.5px; }
a:hover, a:focus { color: #074b5a; text-decoration: underline; }
/* Seiten-Navigation als deutlich erkennbare, gut lesbare Reiter. */
.ant-tabs > .ant-tabs-nav .ant-tabs-nav-list,
.ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list {
  gap: 8px;
}
.ant-tabs > .ant-tabs-nav .ant-tabs-tab,
.ant-tabs > div > .ant-tabs-nav .ant-tabs-tab {
  margin: 0 !important;
  padding: 9px 15px !important;
  background: #fff !important;
  border: 1.5px solid #69757a !important;
  border-radius: 7px !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ant-tabs .ant-tabs-tab .ant-tabs-tab-btn {
  color: var(--kayna-navy) !important;
  font-size: 17px !important;
  line-height: 1.35;
  font-weight: 650;
}
.ant-tabs .ant-tabs-tab:hover,
.ant-tabs .ant-tabs-tab:focus-within {
  background: #f4f9e8 !important;
  border-color: #617a21 !important;
  box-shadow: 0 1px 4px rgba(20, 28, 43, .18);
}
.ant-tabs .ant-tabs-tab.ant-tabs-tab-active {
  background: #fff !important;
  border-color: #617a21 !important;
  box-shadow: inset 0 -4px 0 var(--kayna-green), 0 1px 4px rgba(20, 28, 43, .18);
}
.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--kayna-navy) !important;
  font-weight: 800;
}
.ant-tabs-ink-bar { display: none !important; }

/* ChirpStack verwendet auf Detailseiten eine horizontale Menu-Navigation. */
.ant-layout-content .ant-menu-horizontal {
  display: flex;
  gap: 8px;
  padding: 10px !important;
  background: transparent !important;
  border: 0 !important;
  line-height: normal !important;
}
.ant-layout-content .ant-menu-horizontal > .ant-menu-item {
  top: 0 !important;
  margin: 0 !important;
  padding: 9px 15px !important;
  background: #fff !important;
  color: var(--kayna-navy) !important;
  border: 1.5px solid #69757a !important;
  border-radius: 7px !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ant-layout-content .ant-menu-horizontal > .ant-menu-item::after {
  display: none !important;
}
.ant-layout-content .ant-menu-horizontal > .ant-menu-item:hover,
.ant-layout-content .ant-menu-horizontal > .ant-menu-item:focus-within {
  background: #f4f9e8 !important;
  color: var(--kayna-navy) !important;
  border-color: #617a21 !important;
  box-shadow: 0 1px 4px rgba(20, 28, 43, .18);
}
.ant-layout-content .ant-menu-horizontal > .ant-menu-item-selected {
  background: #fff !important;
  color: var(--kayna-navy) !important;
  border-color: #617a21 !important;
  box-shadow: inset 0 -4px 0 var(--kayna-green), 0 1px 4px rgba(20, 28, 43, .18);
  font-weight: 800 !important;
}
.ant-switch-checked { background: var(--kayna-green) !important; }

/* Dezente Zebra-Zeilen erleichtern das Verfolgen breiter Listen. */
.ant-table-tbody > tr.ant-table-row:nth-child(odd) > td {
  background: #fff;
}
.ant-table-tbody > tr.ant-table-row:nth-child(even) > td {
  background: #eef3f1;
}
.ant-table-tbody > tr.ant-table-row:hover > td {
  background: #e6f2c9 !important;
}
.ant-table-tbody > tr.ant-table-row-selected > td,
.ant-table-tbody > tr.ant-table-row-selected:hover > td {
  background: #dcebb5 !important;
}
.ant-table-tbody > tr.ant-table-row > td {
  border-bottom-color: #cbd3d0 !important;
}

/* Symbole in hellen Feldern muessen dunkel bleiben. */
.ant-input-affix-wrapper .anticon,
.ant-input-search .ant-input-group-addon .ant-btn .anticon,
.ant-select-selector .anticon,
.ant-picker .anticon,
.ant-btn-default .anticon,
.ant-table-filter-trigger .anticon {
  color: var(--kayna-navy) !important;
}
.ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker {
  background: #fff !important;
  color: #111820 !important;
  border-color: #667277 !important;
}
.ant-input::placeholder { color: #59656b !important; opacity: 1; }
:focus-visible {
  outline: 3px solid var(--kayna-cyan) !important;
  outline-offset: 2px !important;
}

.kayna-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 20px;
  background: var(--kayna-navy);
  color: var(--kayna-paper);
  border-top: 3px solid var(--kayna-green);
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}
.kayna-footer a { color: var(--kayna-paper); font-weight: 700; text-decoration: underline; }
.kayna-footer a:hover, .kayna-footer a:focus { color: var(--kayna-green); }
.kayna-footer .kayna-footer-separator { margin: 0 12px; color: var(--kayna-green); }
.kayna-footer .kayna-github {
  display: inline-flex;
  width: 24px !important;
  height: 24px !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  color: var(--kayna-paper);
}
.kayna-footer .kayna-github svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
}
.kayna-footer .kayna-github:hover, .kayna-footer .kayna-github:focus {
  color: var(--kayna-navy);
  background: var(--kayna-green);
  text-decoration: none;
}

@media (max-width: 900px) {
  body { min-width: 0 !important; overflow-x: hidden; }
  .ant-layout-header { height: 54px !important; line-height: 54px !important; padding: 0 10px !important; }
  .ant-layout-header img[alt="ChirpStack"], .ant-layout-header img[alt="Kayna-Funkt"] { width: 46px !important; height: 42px !important; padding: 2px; background-size: 34px 34px; background-position: center; }
  .ant-layout-header::after { margin-left: 8px; font-size: 16px; }
  .ant-layout-header .ant-input-search { display: none !important; }
  .ant-layout-sider {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: 42vh !important;
    max-width: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    overflow-y: auto !important;
  }
  .ant-layout:has(> .ant-layout-sider) { flex-direction: column !important; }
  .ant-layout-content { margin-left: 0 !important; min-width: 0 !important; padding: 12px !important; }
  .ant-layout { min-width: 0 !important; }
  .ant-breadcrumb { font-size: 12px; overflow-x: auto; white-space: nowrap; }
  h1, .ant-typography h1 { font-size: 24px !important; }
  h2, .ant-typography h2 { font-size: 20px !important; }
  .ant-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ant-table { min-width: 720px; font-size: 12px; }
  .ant-table-cell { padding: 8px !important; white-space: nowrap; }
  .ant-card-body { padding: 14px !important; }
  .ant-tabs > .ant-tabs-nav .ant-tabs-tab,
  .ant-tabs > div > .ant-tabs-nav .ant-tabs-tab { padding: 8px 12px !important; }
  .ant-tabs .ant-tabs-tab .ant-tabs-tab-btn { font-size: 16px !important; }
  .ant-layout-content .ant-menu-horizontal {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ant-layout-content .ant-menu-horizontal > .ant-menu-item {
    flex: 0 0 auto;
    padding: 8px 12px !important;
    font-size: 16px !important;
  }
  .ant-form-item-label { white-space: normal; }
  .ant-modal { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); top: 10px; padding-bottom: 10px; }
  .ant-drawer-content-wrapper { width: min(92vw, 420px) !important; }
  .ant-picker-dropdown { max-width: 100vw; overflow-x: auto; }
  .kayna-footer { padding: 14px 10px; font-size: 15px; }
  .kayna-footer .kayna-footer-separator { display: block; height: 6px; font-size: 0; }
}