/* MEKS Network interface — loaded after the selected base theme. */
:root {
  --mk-bg: #0b1120;
  --mk-surface: #121b2e;
  --mk-surface-raised: #17233a;
  --mk-border: rgba(148, 163, 184, .17);
  --mk-text: #e7edf8;
  --mk-muted: #9bacc4;
  --mk-primary: #38bdf8;
  --mk-primary-deep: #0e7490;
}

body {
  color: var(--mk-text);
  background: radial-gradient(circle at 88% -10%, #193e59 0, transparent 32rem), var(--mk-bg);
  letter-spacing: .01em;
}

::-webkit-scrollbar-track { background: var(--mk-bg); border-color: var(--mk-bg); }
::-webkit-scrollbar-thumb { background: #31425d; border-color: var(--mk-bg); border-radius: 99px; }

/* A real flex row instead of the base theme's float-left/float-right +
   absolutely-centered .navbar-center — that combination didn't reserve any
   space for the centered piece, so on a narrow screen it could sit right on
   top of .navbar-right's content instead of sharing the row with it. With
   flex, .navbar-left/.navbar-right size to their own content and
   .navbar-center simply gets whatever's left in between, on any screen. */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background: rgba(11, 17, 32, .92);
  border-bottom: 1px solid var(--mk-border);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.navbar-left, .navbar-right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}
.navbar-left { padding-left: 7px; }
.navbar-center {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  color: var(--mk-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .015em;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* Keep #brand in the DOM with its original text (some app JS checks for it) but drop it visually. */
#brand { display: none; }
.navbar-left a, .navbar-right a { color: var(--mk-text); padding: 18px 16px; }
.navbar-hover:hover { background: rgba(56, 189, 248, .12); color: #fff; }
/* margin-top:0 (not the old 13px) — .navbar-right is a real flex row now
   (align-items:center), so the select centers itself in the row on its own;
   the old margin-top was a hack to nudge it down when nothing else in this
   bar was actually vertically centered. */
/* The browser's own native dropdown arrow doesn't leave a controllable gap
   from the text next to it — at narrow widths on mobile the two ran
   together with nothing between them. appearance:none drops the native
   arrow entirely in favour of one drawn here, positioned with a fixed gap
   from the right edge, so "Switch router"/"Theme" + arrow always has a
   clean, consistent space between the label and the icon. */
.ses {
  height: 34px;
  margin-top: 0 !important;
  padding: 5px 24px 5px 8px;
  color: var(--mk-text);
  background-color: var(--mk-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239bacc4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
  border: 1px solid var(--mk-border);
  border-radius: 7px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.router-switcher { min-width: 145px; }

.sidenav {
  /* Start closed so reloading an admin or router page never opens it. */
  width: 0;
  /* The base theme offsets this fixed box below the navbar with
     margin-top, but also sets height:100% (of the viewport, since this is
     position:fixed) — margin doesn't shrink that height, so the box's own
     bottom edge ends up exactly margin-top's worth below the visible
     viewport. Any menu items that land in that strip (e.g. Upload Logo /
     Template Editor under Settings, or the tail of a long expanded
     dropdown) are then permanently unreachable — overflow-y below only
     scrolls content that overflows the box itself, not the box overflowing
     the screen. top + a matching height reduction keeps the whole box
     on-screen instead, so overflow-y actually has a chance to work. */
  top: 61px;
  height: calc(100% - 61px);
  margin-top: 0;
  background: linear-gradient(180deg, #101a2d, #0c1424);
  border-right: 0;
  box-shadow: 12px 0 28px rgba(0, 0, 0, .12);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sidenav-brand {
  padding: 16px 10px;
  color: #f8fbff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  background: linear-gradient(135deg, #0c7499, #1e3a8a);
}

.sidenav .card-header {
  padding: 14px 10px;
  color: #dbeafe;
  background: rgba(56, 189, 248, .08);
  border-bottom-color: var(--mk-border);
}
.sidenav .card-header h3 { font-size: 14px; letter-spacing: .06em; }
.dropdown-btn, .sidenav a {
  width: calc(100% - 16px);
  margin: 4px 8px;
  color: #b8c6db;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sidenav i { font-size: 17px; width: 24px; padding: 8px 3px 8px 7px; color: #7dd3fc; }
.dropdown-btn:hover, .sidenav a:hover { background: rgba(56, 189, 248, .13); color: #fff; transform: translateX(2px); }
.sidenav .active { background: linear-gradient(90deg, rgba(14, 116, 144, .8), rgba(30, 58, 138, .68)); color: #fff; box-shadow: 0 5px 14px rgba(0, 0, 0, .16); }
.spa { border-bottom-color: var(--mk-border); }

/* Keep the original sidebar menu, with clearer grouping and hierarchy. */
.sidenav { padding: 7px 0 18px; }
.sidenav .dropdown-container { margin: 2px 12px 8px 20px; padding: 3px 0 3px 5px; border-left: 1px solid rgba(125, 211, 252, .22); }
.sidenav .dropdown-container a { width: calc(100% - 4px); margin: 2px; font-size: 12px; }
.sidenav .dropdown-container .dropdown-container { margin-left: 9px; }
.sidenav .dropdown-btn .fa-caret-down { float: right; width: auto; color: var(--mk-muted); }

.router-status { display: inline-block; margin-left: 5px; padding: 2px 7px; font-size: 11px; font-weight: 600; border-radius: 99px; }
.router-status i { font-size: 9px; }
.router-status-checking { color: #fef3c7; background: rgba(217, 119, 6, .25); }
.router-status-online { color: #dbeafe; background: rgba(37, 99, 235, .55); }
.router-status-offline { color: #fee2e2; background: rgba(220, 38, 38, .32); }
.router-voucher-count { display: inline-block; margin-left: 5px; color: #dbeafe; font-size: 11px; }
.router-session-title { color: #f8fbff; font-size: 16px; font-weight: 500; letter-spacing: .015em; }
.router-search-suggestions { min-height: 18px; padding-top: 4px; color: #bae6fd; font-size: 11px; }

/* Bulk Command panel (admin-only, Router List page) and its per-card select
   checkbox — scoped to these new classes plus one narrow, side-effect-free
   addition (position:relative) on the existing .box-group-icon so the
   checkbox can sit in its corner instead of squeezing the big server icon. */
.router-command-panel { margin: 8px 0 10px; padding: 10px 12px; background: rgba(15, 23, 42, .45); border: 1px solid var(--mk-border); border-radius: 10px; }
.router-command-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #f8fbff; font-size: 13px; }
.router-command-header .fa { margin-right: 5px; color: #7dd3fc; }
.router-command-count { color: var(--mk-muted); font-size: 11px; font-weight: 600; }
.router-command-hide-btn { padding: 3px 9px; color: var(--mk-muted); font-size: 10.5px; background: rgba(2, 6, 23, .22); border: 1px solid var(--mk-border); border-radius: 99px; cursor: pointer; }
.router-command-hide-btn:hover { color: #fecaca; background: rgba(220, 38, 38, .22); border-color: rgba(254, 202, 202, .35); }
.router-command-input { min-height: 44px; margin-bottom: 8px; font-family: monospace; font-size: 12px; resize: vertical; }
.router-command-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.router-command-run-btn { color: #1a1405; background: #d4af37; border-color: #d4af37; }
.router-command-run-btn:hover { background: #e6c250; }
.router-command-run-btn:disabled { cursor: not-allowed; opacity: .5; color: var(--mk-muted); background: rgba(2, 6, 23, .22); border-color: var(--mk-border); }
.router-command-results { margin-top: 10px; }
.router-command-summary { margin-bottom: 6px; color: var(--mk-muted); font-size: 11.5px; }
.router-command-summary code { color: #dbeafe; }
.router-command-rows { display: flex; flex-direction: column; gap: 5px; }
.router-command-row { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.router-command-row strong { min-width: 90px; color: #f1f5f9; }
.router-command-row-msg { color: var(--mk-muted); }
.router-command-row-error { color: #fecaca; }
.router-command-output { max-height: 220px; margin: 3px 0 6px 15px; padding: 8px; overflow: auto; color: #cbd5e1; font-size: 10.5px; background: rgba(2, 6, 23, .4); border-radius: 7px; }
.box-group-icon { position: relative; }
/* Hidden by default, same as the command panel itself — only visible once
   the unlock word has revealed the panel, so the router list gives no hint
   this feature exists to anyone who hasn't unlocked it. */
.router-command-check { display: none; position: absolute; top: 2px; left: 2px; z-index: 2; width: 15px; height: 15px; margin: 0; cursor: pointer; }
body.router-command-unlocked .router-command-check { display: block; }
.router-group { margin: 7px 0; border: 1px solid var(--mk-border); border-radius: 10px; overflow: hidden; }
.router-group-toggle { display: flex; align-items: center; width: 100%; padding: 11px 12px; color: var(--mk-text); text-align: left; background: rgba(56, 189, 248, .07); border: 0; cursor: pointer; }
.router-group-toggle > .fa-folder { margin-right: 8px; color: #7dd3fc; }
.router-group-toggle > .fa-chevron-down { margin-left: auto; color: var(--mk-muted); transition: transform .18s ease; }
.router-group-toggle.router-group-open > .fa-chevron-down { transform: rotate(180deg); }
.router-group-count { margin-left: 8px; padding: 2px 7px; color: #bae6fd; font-size: 11px; background: rgba(37, 99, 235, .25); border-radius: 99px; }
.router-group-routers { padding: 5px; }
.router-group-input { max-width: 155px; padding: 3px 6px; color: var(--mk-text); background: rgba(11, 17, 32, .6); border: 1px solid var(--mk-border); border-radius: 5px; }
.router-ungrouped { margin: 12px 0 7px; }
.router-ungrouped h4 { margin: 0 0 6px; padding: 8px 3px; color: var(--mk-muted); font-size: 12px; font-weight: 600; }
.customer-page { max-width: 1080px; margin: 7px auto; }
.customer-page-intro { margin: 0 0 14px; color: var(--mk-muted); }
.customer-editor { padding: 15px; background: linear-gradient(135deg, rgba(14, 116, 144, .2), rgba(30, 58, 138, .15)); border: 1px solid rgba(125, 211, 252, .2); border-radius: 11px; }
.customer-editor h4, .customer-account-list h4 { margin: 0 0 11px; color: #e0f2fe; font-size: 15px; }
.customer-editor label, .customer-account label { display: block; margin: 0 0 4px; color: var(--mk-muted); font-size: 12px; }
.customer-router-label { margin-top: 11px !important; }
.customer-group-picker { margin: 5px 0 13px; padding: 10px; border: 1px solid var(--mk-border); border-radius: 8px; background: rgba(11, 17, 32, .25); }
.customer-group-picker-title { display: block; margin-bottom: 7px; color: #bae6fd; font-size: 12px; font-weight: 600; }
.customer-group-toggle-list { display: flex; flex-wrap: wrap; gap: 7px; }
.customer-editor .customer-group-toggle, .customer-account .customer-group-toggle { display: inline-flex; align-items: center; margin: 0; color: var(--mk-muted); font-size: 12px; cursor: pointer; }
.customer-group-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.customer-group-toggle span { padding: 5px 9px; border: 1px solid var(--mk-border); border-radius: 999px; background: rgba(15, 23, 42, .55); transition: .15s ease; }
.customer-group-toggle:hover span { border-color: rgba(125, 211, 252, .55); color: #e0f2fe; }
.customer-group-toggle.is-active span { color: #f0f9ff; background: rgba(14, 116, 144, .5); border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56, 189, 248, .18); }
.customer-group-empty { color: var(--mk-muted); font-size: 12px; }
.customer-editor .customer-group-manual-label, .customer-account .customer-group-manual-label { margin: 10px 0 4px; color: var(--mk-muted); }
.customer-group-help { display: block; margin-top: 5px; color: var(--mk-muted); font-size: 11px; }
.customer-permissions { margin: 13px 0; padding: 10px; border: 1px solid var(--mk-border); border-radius: 8px; }
.customer-permissions > span { display: block; margin-bottom: 5px; color: #bae6fd; font-size: 12px; font-weight: 600; }
.customer-permissions label { display: inline-block; margin: 3px 14px 3px 0; color: var(--mk-text); }
.customer-account-list { margin-top: 19px; }
.customer-account-list h4 span { display: inline-block; margin-left: 5px; padding: 1px 7px; color: #bae6fd; font-size: 11px; background: rgba(37, 99, 235, .25); border-radius: 20px; }
.customer-account { margin: 7px 0; padding: 11px; border: 1px solid var(--mk-border); border-radius: 9px; background: rgba(11, 17, 32, .3); }
.customer-account summary { display: flex; justify-content: space-between; cursor: pointer; color: #e0f2fe; }
.customer-account summary small { color: #7dd3fc; }
.customer-account form:first-of-type { margin-top: 12px; }
.customer-delete { display: inline-block; margin: 8px 0 0 5px; }
.customer-notice { margin: 0 0 12px; padding: 9px 11px; color: #dbeafe; background: rgba(37, 99, 235, .25); border: 1px solid rgba(125, 211, 252, .25); border-radius: 8px; }
.remember-login { display: inline-block; margin-top: 7px; color: var(--mk-muted); font-size: 13px; cursor: pointer; }

/* Router card actions (Open / Check Status / Edit / Delete) — small gold pill
   buttons instead of plain inline text links. */
.router-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 1px 2px 1px 0;
  padding: 3px 10px;
  color: #f3e6bb;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  background: rgba(212, 175, 55, .12);
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 99px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.router-action-btn:hover { color: #1a1405; background: #d4af37; border-color: #d4af37; transform: translateY(-1px); }
.router-action-btn:disabled { cursor: wait; opacity: .55; transform: none; }
.router-health-check:disabled { cursor: wait; opacity: .58; transform: none; }
.router-health-check .fa { margin-right: 3px; }
/* Small red indicator on the router list's "Check Status" button, shown only
   when that router's last completed check came back Critical. Reflects the
   last real scan result (cached at scan time) — never a guess, and never
   triggers a fresh scan on page load. */
.router-health-alert-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; min-width: 7px; margin-left: 2px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 2px rgba(248, 113, 113, .25); vertical-align: middle; }
body.router-health-open { overflow: hidden; }
.router-health-modal { position: fixed; inset: 0; z-index: 2100; display: none; padding: 22px; }
.router-health-modal.is-open { display: flex; align-items: center; justify-content: center; }
.router-health-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .77); backdrop-filter: blur(4px); }
.router-health-dialog {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  color: var(--mk-text);
  background: linear-gradient(145deg, #15223a, #0c1424);
  border: 1px solid rgba(125, 211, 252, .25);
  border-radius: 14px;
  /* Some Android WebViews auto-inflate text (and anything sized by its
     line-height) inside narrow columns — the nav chips and status badges
     are exactly that shape. Disable that auto-boosting for this dialog. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-shadow: 0 26px 75px rgba(0, 0, 0, .52);
  outline: 0;
}
.router-health-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--mk-border); }
.router-health-eyebrow { display: block; margin-bottom: 2px; color: #7dd3fc; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.router-health-header h3 { margin: 0; color: #f8fbff; font-size: 17px; font-weight: 650; }
.router-health-close { width: 32px; height: 32px; padding: 0; color: #cbd5e1; font-size: 17px; background: rgba(148, 163, 184, .12); border: 1px solid var(--mk-border); border-radius: 8px; cursor: pointer; }
.router-health-close:hover { color: #fff; background: rgba(220, 38, 38, .38); border-color: rgba(254, 202, 202, .45); }
.router-health-content { padding: 16px 18px 20px; }
.router-health-loading, .router-health-error { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.router-health-loading > .fa { margin-bottom: 12px; color: #7dd3fc; font-size: 32px; }
.router-health-loading strong, .router-health-error strong { color: #f8fbff; font-size: 15px; }
.router-health-loading p, .router-health-error p { max-width: 480px; margin: 6px 0 0; color: var(--mk-muted); font-size: 12px; }
.router-health-error { color: #fecaca; }
.router-health-error > .fa { margin-bottom: 10px; color: #f87171; font-size: 30px; }
.router-health-overview, .router-health-system, .router-health-issue-section {
  margin-bottom: 8px;
  padding: 10px;
  background: rgba(15, 23, 42, .52);
  border: 1px solid var(--mk-border);
  border-radius: 10px;
}
.router-health-overview-headline { display: flex; align-items: center; gap: 11px; }
.router-health-overall-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 31px; height: 31px; color: #e0f2fe; font-size: 18px; font-weight: 800; border-radius: 50%; }
.router-health-overall-icon.router-health-ok { background: rgba(22, 163, 74, .26); color: #bbf7d0; }
.router-health-overall-icon.router-health-warning { background: rgba(217, 119, 6, .29); color: #fef3c7; }
.router-health-overall-icon.router-health-error { background: rgba(220, 38, 38, .3); color: #fecaca; }
.router-health-overall-icon.router-health-info { background: rgba(37, 99, 235, .27); color: #dbeafe; }
.router-health-overview h4, .router-health-system h4, .router-health-issue-section h4 { margin: 0; color: #f8fbff; font-size: 14px; }
.router-health-overview p { margin: 3px 0 0; color: var(--mk-muted); font-size: 12px; }
.router-health-quick-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.router-health-quick-check { min-width: 0; padding: 9px; background: rgba(2, 6, 23, .24); border: 1px solid rgba(148, 163, 184, .12); border-radius: 8px; }
.router-health-quick-check .router-health-badge { margin-bottom: 5px; }
.router-health-quick-check strong, .router-health-quick-check small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-health-quick-check strong { color: #e2e8f0; font-size: 12px; }
.router-health-quick-check small { margin-top: 2px; color: var(--mk-muted); font-size: 10px; }
/* Flex + justify-content:center (not grid) so a partial last row of boxes
   is centred as a group instead of left-hugging with empty space. */
.router-health-pairs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.router-health-pair { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 1 1 128px; min-width: 128px; max-width: 220px; padding: 5px 6px; background: rgba(2, 6, 23, .21); border-radius: 7px; }
.router-health-pair-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mk-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
/* Values wrap instead of truncating with an ellipsis — a long IP/hostname or
   timestamp stays fully readable inside the same normal-width box instead of
   needing a forced full-row box (which stranded neighbouring boxes alone on
   their own centred row with big gaps around them). */
.router-health-pair-value { display: block; overflow-wrap: anywhere; white-space: normal; color: #e2e8f0; font-size: 12px; font-weight: 600; }
.router-health-section { margin: 10px 0; overflow: hidden; background: rgba(15, 23, 42, .43); border: 1px solid var(--mk-border); border-radius: 10px; }
.router-health-section-summary { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 12px 14px; cursor: pointer; list-style: none; }
.router-health-section-summary::-webkit-details-marker { display: none; }
.router-health-section-heading { min-width: 0; }
.router-health-section-heading strong, .router-health-section-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.router-health-section-heading strong { color: #f1f5f9; font-size: 13px; }
.router-health-section-heading small { margin-top: 2px; color: var(--mk-muted); font-size: 11px; }
.router-health-section-body { padding: 0 14px 14px; }
/* A small round dot plus plain text, never a filled pill — a colored,
   border-radius:99px pill wrapped around a long phrase like "Action
   Required" is what previously inflated into a huge oval on some Android
   WebViews. The dot alone carries the color; the label stays plain text. */
.router-health-badge { display: inline-flex; flex: 0 0 auto; align-self: center; align-items: center; justify-content: flex-start; gap: 5px; width: fit-content; max-width: 100%; padding: 0; background: none; line-height: 1; white-space: nowrap; border-radius: 0; }
.router-health-badge-dot { flex: 0 0 auto; display: block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(255, 255, 255, .06); }
.router-health-badge-label { flex: 0 0 auto; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.router-health-badge.router-health-ok { color: #4ade80; }
.router-health-badge.router-health-ok .router-health-badge-label { color: #bbf7d0; }
.router-health-badge.router-health-warning { color: #fbbf24; }
.router-health-badge.router-health-warning .router-health-badge-label { color: #fef3c7; }
.router-health-badge.router-health-error { color: #f87171; }
.router-health-badge.router-health-error .router-health-badge-label { color: #fecaca; }
.router-health-badge.router-health-info { color: #7dd3fc; }
.router-health-badge.router-health-info .router-health-badge-label { color: #dbeafe; }
.router-health-empty { margin: 0; padding: 9px; color: var(--mk-muted); font-size: 12px; background: rgba(2, 6, 23, .19); border-radius: 7px; }

/* Check Status: compact filter bar (All / Action Required / Warnings /
   Healthy / Show only problems) plus the Guided/Advanced mode toggle. */
.router-health-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.router-health-filter-btn { padding: 3px 10px; color: var(--mk-muted); font-size: 10.5px; font-weight: 700; background: rgba(2, 6, 23, .22); border: 1px solid var(--mk-border); border-radius: 99px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.router-health-filter-btn:hover { border-color: rgba(212, 175, 55, .4); }
.router-health-filter-btn.is-active { color: #1a1405; background: #d4af37; border-color: #d4af37; }
.router-health-filter-toggle { margin-left: 2px; }
.router-health-mode-toggle { display: inline-flex; gap: 3px; margin-left: auto; padding: 2px; background: rgba(2, 6, 23, .22); border: 1px solid var(--mk-border); border-radius: 99px; }
.router-health-mode-btn { padding: 3px 10px; color: var(--mk-muted); font-size: 10.5px; font-weight: 700; background: transparent; border: 0; border-radius: 99px; cursor: pointer; }
.router-health-mode-btn.is-active { color: #1a1405; background: #d4af37; }

/* Check Status: horizontal, scrollable diagnostic-category navigator. Each
   chip is small and fixed-height regardless of its status text length —
   status color never determines chip size. */
/* Healthy / Warning / Critical spread across the full width — left, middle,
   right — instead of clustered together on one side. */
.router-health-nav { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 12px; padding-bottom: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.router-health-chip { flex: 0 0 auto; flex-wrap: nowrap; align-self: flex-start; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 92px; max-height: 40px; padding: 5px 10px; color: var(--mk-text); background: rgba(2, 6, 23, .24); border: 1px solid var(--mk-border); border-radius: 8px; cursor: pointer; overflow: hidden; white-space: nowrap; box-sizing: border-box; transition: background .15s ease, border-color .15s ease; }
.router-health-chip:hover { border-color: rgba(212, 175, 55, .4); }
/* Same box size as the resting state — only the fill/border colour changes,
   so the clicked chip never grows relative to the other two. */
.router-health-chip.is-active { background: rgba(212, 175, 55, .12); border-color: #d4af37; }
.router-health-chip-label { flex: 0 0 auto; color: #f1f5f9; font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.router-health-chip-status { flex: 0 0 auto; color: var(--mk-muted); font-size: 10px; line-height: 1.2; white-space: nowrap; margin-left: 2px; }
.router-health-chip-status::before { content: '\00b7'; margin-right: 4px; opacity: .6; }
.router-health-chip.is-active .router-health-chip-status { color: #f3e6bb; }
.router-health-chip .router-health-dot { flex: 0 0 auto; align-self: center; width: 7px; height: 7px; min-width: 7px; max-width: 7px; min-height: 7px; max-height: 7px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }

/* Check Status: the ONE shared details panel. Its content is swapped by JS
   whenever a different nav chip is selected — never more than one at a time. */
.router-health-panel { padding: 14px; background: rgba(15, 23, 42, .43); border: 1px solid var(--mk-border); border-radius: 10px; }
.router-health-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.router-health-panel-header h4 { margin: 0; color: #f8fbff; font-size: 15px; }
.router-health-explain { margin: 10px 0; }
.router-health-explain-label { display: block; margin-bottom: 3px; color: var(--mk-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.router-health-explain-text { margin: 0; color: #e2e8f0; font-size: 12.5px; line-height: 1.55; }
.router-health-explain-text.is-muted { color: var(--mk-muted); font-style: italic; }
.router-health-recommend { margin: 4px 0 0 18px; padding: 0; color: #e2e8f0; font-size: 12.5px; line-height: 1.65; }
.router-health-recommend li { margin-bottom: 2px; }
.router-health-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.router-health-action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; color: #f3e6bb; font-size: 11.5px; font-weight: 600; text-decoration: none; background: rgba(212, 175, 55, .12); border: 1px solid rgba(212, 175, 55, .45); border-radius: 7px; cursor: pointer; }
.router-health-action-btn:hover { color: #1a1405; background: #d4af37; border-color: #d4af37; }
.router-health-action-btn:disabled { cursor: wait; opacity: .55; }
.router-health-advanced-details { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--mk-border); }
.router-health-advanced-details > summary { color: var(--mk-muted); font-size: 11.5px; font-weight: 700; cursor: pointer; list-style: none; }
.router-health-advanced-details > summary::-webkit-details-marker { display: none; }
.router-health-advanced-details > summary::before { content: '\25B8  '; }
.router-health-advanced-details[open] > summary::before { content: '\25BE  '; }

/* Scheduler data as a real spreadsheet-style table — centered, spaced-out
   columns so it reads like an actual sheet rather than cramped default
   table markup. */
.router-health-table-wrap { margin-top: 8px; overflow-x: auto; border: 1px solid var(--mk-border); border-radius: 8px; }
.router-health-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 11.5px; }
.router-health-table th, .router-health-table td { padding: 8px 14px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--mk-border); }
.router-health-table thead th { color: var(--mk-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgba(2, 6, 23, .28); }
.router-health-table tbody tr:last-child td { border-bottom: 0; }
.router-health-table tbody tr:hover { background: rgba(212, 175, 55, .06); }
.router-health-table .router-health-badge { justify-content: center; }
.router-health-table-detail { max-width: 320px; overflow-wrap: anywhere; white-space: normal !important; text-align: left !important; }
.router-health-advanced-body { margin-top: 8px; }

/* Legacy — .router-health-rows/-row/-row-fields (replaced by the scheduler
   table) and .router-health-pair-wide/-pair-value-wide (System Information
   no longer needs a full-row box now that .router-health-pair-value wraps
   on its own) are currently unused, but the code that could still reference
   them (addList) is left in place. */
.router-health-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; min-width: 260px; }
.router-health-pair-wide { grid-column: 1 / -1; flex: 1 1 100%; max-width: 100%; }
.router-health-pair-value-wide { white-space: normal !important; overflow-wrap: anywhere; }

/* The severity findings list — a plain compact line per finding, NOT a
   bordered card: a small dot, then its title. The detail/explanation is
   collapsed by default and only shown once the row is clicked, so the list
   stays scannable — a small arrow on the right rotates to show expanded
   state. No background/border box at all, so the row's footprint is just
   the dot + text. */
.router-health-issues { display: flex; flex-direction: column; margin-top: 6px; }
.router-health-issue { border-bottom: 1px solid var(--mk-border); }
.router-health-issue:last-child { border-bottom: 0; }
.router-health-issue-summary {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  padding: 6px 2px 2px;
  cursor: pointer;
}
.router-health-issue-title { min-width: 0; overflow-wrap: anywhere; white-space: normal; color: var(--mk-text); font-size: 12px; font-weight: 600; }
.router-health-issue-arrow { flex: 0 0 auto; margin-left: auto; color: var(--mk-muted); font-size: 10px; transition: transform .15s ease; }
.router-health-issue.is-expanded .router-health-issue-arrow { transform: rotate(90deg); }
.router-health-issue-body { display: none; padding: 0 2px 8px 15px; }
.router-health-issue.is-expanded .router-health-issue-body { display: block; }
.router-health-issue-body p { margin: 0; color: var(--mk-muted); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
/* A finding that is a real problem (warning/critical, not just
   informational) is bolded, plain — no special colour, just the weight. */
.router-health-issue.is-problem .router-health-issue-title { font-weight: 800; }
.router-health-issue.is-problem .router-health-issue-body p { font-weight: 700; color: var(--mk-text); }
/* Small fixed-size state dot instead of a text badge — compact, and its size
   never depends on how long the state label is. flex-shrink/basis, explicit
   height, and align-self are all pinned so the dot can never be stretched
   into a bar by a flex container that ignores align-items (seen as an
   elongated coloured line in some browsers/webviews). */
.router-health-dot { display: block; flex: 0 0 auto; align-self: center; width: 6px; height: 6px; min-width: 6px; max-width: 6px; min-height: 6px; max-height: 6px; border-radius: 50%; background: currentColor; }
.router-health-dot.router-health-ok { color: #4ade80; }
.router-health-dot.router-health-warning { color: #fbbf24; }
.router-health-dot.router-health-error { color: #f87171; }
.router-health-dot.router-health-info { color: #7dd3fc; }

#main { margin-top: 66px; }
.main-container { padding: 12px 14px 24px; }
.box, .card {
  background: rgba(18, 27, 46, .94);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.box { padding: 14px; margin: 7px; }
.card { margin: 7px; overflow: hidden; }
.card-header {
  padding: 12px 15px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, .025);
  border-bottom-color: var(--mk-border);
}
.card-header h3 { font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.card-body { padding: 8px 14px 14px; }
.box-bordered { border-color: var(--mk-border); }
.box-group-icon { color: #7dd3fc; background: rgba(56, 189, 248, .10); border-color: rgba(56, 189, 248, .16); border-radius: 10px; }
/* The router card's text column is a table-cell (base theme), so a long
   unbreakable string — a hostname/DDNS address, a router name with no
   spaces — forces the whole card wider than the screen instead of wrapping.
   Let it break anywhere it needs to rather than pushing the card off-screen. */
.box-group-area, .box-group-area span { overflow-wrap: anywhere; }

.bg-blue, .bg-green, .bg-yellow, .bg-red { border: 0; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.13); transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease; outline: 2px solid rgba(212,175,55,0); outline-offset: 2px; }
.bg-blue:hover, .bg-green:hover, .bg-yellow:hover, .bg-red:hover {
  transform: translateY(-3px);
  outline-color: rgba(212, 175, 55, .75);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 15px 26px rgba(0,0,0,.22), 0 0 18px rgba(212, 175, 55, .45);
}
.bg-blue { background: linear-gradient(135deg, #0e7490, #2563eb); }
.bg-green { background: linear-gradient(135deg, #047857, #16a34a); }
.bg-yellow { background: linear-gradient(135deg, #b45309, #d97706); }
.bg-red { background: linear-gradient(135deg, #be123c, #dc2626); }

.btn, .btn-login { border-radius: 8px; padding: 6px 12px; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.btn:hover, .btn-login:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 7px 16px rgba(0,0,0,.2); }
.form-control, .group-item { color: var(--mk-text); background: #0d1728; border-color: var(--mk-border); border-radius: 8px; padding: 7px 9px; }
.form-control:focus, .group-item:focus { border-color: var(--mk-primary); box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .14); }
.meks-login-logo { width: 82px; height: 82px; object-fit: cover; border-radius: 20px; background: #121b2e; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.table td, .table th { border-color: var(--mk-border) !important; }
.table-hover:hover tbody tr:hover { background: rgba(56, 189, 248, .08); }

@media screen and (min-width: 750px) {
  .sidenav { width: 0; border-right: 0; }
  #main { margin-left: 0; }
  #openNav { display: block; }
  #closeNav { display: none; }
}
@media screen and (max-width: 750px) {
  .navbar { height: 56px; }
  .navbar-center { font-size: 12px; padding: 0 6px; }
  .sidenav { top: 57px; height: calc(100% - 57px); margin-top: 0; }
  #main { margin-top: 62px; }
  .main-container { padding: 7px; }
  .navbar-left, .navbar-right { gap: 3px; }
  /* Logout now lives at the bottom of the sidebar instead of up here — that
     freed the row up for: router name (.navbar-center), then in this exact
     order, Switch router, Theme, Idle time. Switch-account and the language
     switcher are the least-used items in this row, so they're what collapses
     when space is tight instead of any of those four. */
  .navbar-right a[title="Switch account"], .navbar-right .slang { display: none; }
  /* Switch router's option text used to include "· <hotspot name>", which is
     what forced its width so wide — it's now just the static "Switch
     router" label (menu.php), so these can be sized to fit the full label
     text plus the custom arrow's gap (.ses, base rule) instead of clipping. */
  .navbar-right .ses { font-size: 11px; padding: 5px 20px 5px 6px; }
  .navbar-right .router-switcher { order: 1; min-width: 0; width: 116px; }
  .navbar-right .stheme { order: 2; width: 68px; }
  a[title="Idle Timeout"] { order: 3; }
  /* Both nav side groups reuse this padding for touch targets sized for
     desktop; on a phone it's most of what pushes everything else out of the
     row along with the centered router name. */
  .navbar-left a, .navbar-right a { padding: 14px 6px; }
  /* Overrides that span's own inline width:70px (include/menu.php) — a
     fixed width that doesn't shrink like everything else does here. */
  a[title="Idle Timeout"] > span { width: auto !important; }
  .router-health-modal { padding: 7px; }
  .router-health-dialog { max-height: calc(100vh - 14px); border-radius: 10px; }
  .router-health-header { padding: 12px; }
  .router-health-content { padding: 12px; }
  .router-health-quick-checks, .router-health-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .router-health-panel { padding: 11px; }
  .router-health-mode-toggle { margin-left: 0; }
  .router-health-chip { min-width: 88px; }
  /* Router List cards: drop the table/table-cell layout (base theme) for a
     plain stacked block — the icon column's fixed 25% width plus a long
     hostname/router name was forcing the card wider than the screen, which
     cut text and buttons off at the viewport edge instead of wrapping them. */
  .box-group-icon, .box-group-area { display: block; width: auto; }
  .box-group-icon { width: 44px; height: 44px; margin: 0 0 8px; padding: 0; font-size: 22px; line-height: 44px; }
}