/* =====================================================================
   AJKFi admin console - v3.21
   One stylesheet, written once. Everything below is grouped by what it
   styles, and there are no "refinement" blocks re-overriding earlier
   rules further down the file.

   Layout: a fixed sidebar on desktop, an icon rail on narrow desktops
   and tablets, a bottom bar on phones. Pages never wrap themselves in a
   shell element - the sidebar is fixed and .container simply carries a
   margin, so every page stays plain <header>/<div class="container">.
   ===================================================================== */

:root {
    /* Surfaces, dark to light */
    --bg:        #0a0e18;
    --bg-soft:   #0d1322;
    --panel:     #121a2b;
    --panel-2:   #182134;
    --panel-3:   #202b42;

    --border:      #253048;
    --border-soft: #1b2437;

    --text:      #e9edf7;
    --text-dim:  #8e9cb6;
    --text-mute: #647089;

    /* Brand: deeper indigo, teal for money and uptime */
    --accent:        #4c5cf0;
    --accent-hi:     #6b78ff;
    --accent-soft:   rgba(76, 92, 240, .15);
    --accent-line:   rgba(76, 92, 240, .40);

    --accent-2:      #16bfa6;
    --accent-2-soft: rgba(22, 191, 166, .14);
    --accent-2-line: rgba(22, 191, 166, .38);

    --warn:        #f5a524;
    --warn-soft:   rgba(245, 165, 36, .13);
    --warn-line:   rgba(245, 165, 36, .35);

    --danger:      #f2586b;
    --danger-soft: rgba(242, 88, 107, .13);
    --danger-line: rgba(242, 88, 107, .35);

    --radius:    14px;
    --radius-sm: 9px;

    --shadow:    0 1px 2px rgba(0,0,0,.35), 0 10px 28px -18px rgba(0,0,0,.9);
    --ring:      0 0 0 3px rgba(76, 92, 240, .28);

    --sidebar-w: 236px;
    --rail-w:    76px;

    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background:
        radial-gradient(1100px 520px at 12% -12%, rgba(76,92,240,.10), transparent 62%),
        radial-gradient(760px 420px at 105% 0%, rgba(22,191,166,.07), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-hi); }

::selection { background: rgba(76,92,240,.35); }

:focus-visible {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
}

.icon { flex: none; vertical-align: -2px; }
.hidden { display: none !important; }

/* Slim, unobtrusive scrollbars - the console is full of scrollable
   tables and log panes. */
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--panel-3);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background-color: #2c3a56; background-clip: padding-box; }


/* =====================================================================
   Brand mark
   ===================================================================== */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, var(--accent-hi), var(--accent) 55%, #3a48d6);
    box-shadow: 0 4px 14px -6px rgba(76,92,240,.9);
}

.brand-text strong { color: var(--accent-hi); font-weight: 800; }


/* =====================================================================
   Sidebar (desktop)
   ===================================================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--panel), var(--bg-soft));
    border-right: 1px solid var(--border-soft);
}

.sidebar-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border-soft);
}

.nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px 18px;
}

.nav-group {
    padding: 14px 10px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.nav-group:first-child { padding-top: 4px; }

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.nav-item .icon { color: var(--text-mute); transition: color .12s ease; }
.nav-short { display: none; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item:hover .icon { color: var(--text-dim); }

.nav-item.active {
    background: var(--accent-soft);
    color: #dfe4ff;
    font-weight: 600;
}
.nav-item.active .icon { color: var(--accent-hi); }
.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.sidebar-foot {
    padding: 12px;
    border-top: 1px solid var(--border-soft);
}

.account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
}

.avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--panel-3);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
}

.account-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--text-dim);
}

.iconbtn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-3);
    color: var(--text-dim);
    text-decoration: none;
    cursor: pointer;
}
.iconbtn:hover { color: var(--text); }
.iconbtn.danger { color: var(--danger); }
.iconbtn.danger:hover { background: var(--danger-soft); border-color: var(--danger-line); }


/* =====================================================================
   Top app bar - phones only
   ===================================================================== */

.appbar { display: none; }

.appbar-actions { display: flex; align-items: center; gap: 10px; }

.who-name {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
    font-size: 12px;
}


/* =====================================================================
   Page frame
   ===================================================================== */

.page-head {
    margin-left: var(--sidebar-w);
    border-bottom: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
}

.page-head-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 28px 18px;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-title .icon { color: var(--accent-hi); }
.page-title h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.page-sub {
    margin: 5px 0 0;
    color: var(--text-dim);
    font-size: 13px;
}

.container {
    margin-left: var(--sidebar-w);
    max-width: 1180px;
    padding: 22px 28px 48px;
}
.page-head + .container { padding-top: 20px; }

/* The container is centred within the space beside the sidebar. */
@media (min-width: 901px) {
    .container { margin-left: max(var(--sidebar-w), calc(50% - 590px + var(--sidebar-w) / 2)); }
}


/* =====================================================================
   Panels
   ===================================================================== */

.panel {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.panel h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.005em;
}
.panel h2 .icon { color: var(--accent-hi); }

.panel h3 {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-dim);
    margin: 18px 0 8px;
}

.panel > p:first-of-type { margin-top: -6px; }
/* Long explanatory copy is set to a readable measure instead of running
   the full width of a 1180px panel. */
.panel > p { max-width: 82ch; }

.empty-state {
    color: var(--text-mute);
    font-size: 13px;
    text-align: center;
    padding: 26px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}


/* =====================================================================
   Stat cards
   ===================================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 17px 16px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 70%);
    opacity: .55;
}

.stat-card .label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
}
.stat-card .label .icon { color: var(--accent-hi); opacity: .9; }

.stat-card .value {
    font-family: var(--mono);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.stat-card .value.accent { color: var(--accent-2); }
.stat-card .value.accent + .label .icon,
.stat-card .value.accent ~ .label .icon { color: var(--accent-2); }


/* =====================================================================
   In-page tabs (Network sub-sections)
   ===================================================================== */

.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    box-shadow: var(--shadow);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
}
.tab:hover { background: var(--panel-2); color: var(--text); }
.tab.active {
    background: var(--accent-soft);
    color: #dfe4ff;
    box-shadow: inset 0 0 0 1px var(--accent-line);
    font-weight: 650;
}
.tab.active .icon { color: var(--accent-hi); }


/* =====================================================================
   Tables
   ===================================================================== */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.panel table { min-width: 520px; }

thead th {
    position: sticky;
    top: 0;
    background: var(--panel-2);
    padding: 10px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

tbody td {
    padding: 11px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: rgba(255,255,255,.022); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Inputs sitting inside table cells stay compact. type=password was
   missing here, so the SSID password box rendered as a white browser
   default in the middle of a dark table. */
table input[type=number],
table input[type=text],
table input[type=password],
table select {
    padding: 7px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}
table input:focus, table select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }


/* =====================================================================
   Badges
   ===================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .01em;
    background: var(--panel-3);
    border: 1px solid var(--border);
    color: var(--text-dim);
    white-space: nowrap;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 99px;
    background: currentColor;
    opacity: .9;
}
.badge-ok     { background: var(--accent-2-soft); border-color: var(--accent-2-line); color: #6fe6cf; }
.badge-info   { background: var(--accent-soft);   border-color: var(--accent-line);   color: #b9c3ff; }
.badge-warn   { background: var(--warn-soft);     border-color: var(--warn-line);     color: #ffcd7a; }
.badge-danger { background: var(--danger-soft);   border-color: var(--danger-line);   color: #ff97a4; }
.badge-mute::before { opacity: .5; }


/* =====================================================================
   Forms
   ===================================================================== */

.field { margin-bottom: 13px; }

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 550;
    color: var(--text-dim);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder { color: var(--text-mute); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
input[type=checkbox], input[type=radio] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    vertical-align: -2px;
}
.field input[type=checkbox] { width: 15px; }

.form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.form-row .field { margin-bottom: 0; }
.form-row .field.grow { flex: 1 1 240px; min-width: 190px; max-width: 480px; }

.btn-inline { margin-bottom: 1px; }

details {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
details summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-dim);
}
details[open] summary { margin-bottom: 8px; }


/* =====================================================================
   Buttons
   ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: filter .12s ease, transform .06s ease, box-shadow .12s ease;
    box-shadow: 0 2px 10px -6px rgba(76,92,240,.9);
}
.btn:hover { filter: brightness(1.09); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }

.btn-primary { background: var(--accent); }
.btn-success { background: var(--accent-2); color: #04231e; box-shadow: 0 2px 10px -6px rgba(22,191,166,.9); }
.btn-warn    { background: var(--warn);    color: #251900; }
.btn-danger  { background: var(--danger);  color: #2b0409; }
.btn-ghost   { background: var(--panel-2); border-color: var(--border); color: var(--text); box-shadow: none; }
.btn-ghost:hover { background: var(--panel-3); }

.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.btn-sm:hover { filter: brightness(1.09); }

.btn-sm-ghost {
    background: var(--panel-2);
    border-color: var(--border);
    color: var(--text-dim);
}
.btn-sm-ghost:hover { background: var(--panel-3); color: var(--text); filter: none; }

.link-danger {
    background: none;
    border: none;
    padding: 0;
    color: var(--danger);
    font-family: inherit;
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
}
.link-danger:hover { text-decoration: underline; }


/* =====================================================================
   Alerts
   ===================================================================== */

.alert, .error-box, .notice-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    margin-bottom: 13px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid;
}
.alert .icon { margin-top: 1px; }
.alert a, .error-box a, .notice-box a { color: inherit; }

.error-box, .alert-danger {
    background: var(--danger-soft);
    border-color: var(--danger-line);
    color: #ffa3ae;
}
.notice-box, .alert-ok {
    background: var(--accent-2-soft);
    border-color: var(--accent-2-line);
    color: #79e8d2;
}
.alert-warn {
    background: var(--warn-soft);
    border-color: var(--warn-line);
    color: #ffd08f;
}
.alert-info {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: #c3ccff;
}


/* =====================================================================
   Code and log output
   ===================================================================== */

pre {
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

code {
    font-family: var(--mono);
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--panel-2);
    border: 1px solid var(--border-soft);
    color: var(--text-dim);
}


/* =====================================================================
   Login
   ===================================================================== */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    padding: 32px 28px 28px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.95);
}

.login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.login-brand .brand-mark { width: 44px; height: 44px; border-radius: 13px; }

.login-card h1 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -.01em;
}
.login-card p.sub {
    margin: 0 0 22px;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}
.login-card .btn { width: 100%; margin-top: 4px; padding: 12px; font-size: 14px; }

.login-foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-mute);
}


/* =====================================================================
   Narrow desktop / tablet - sidebar collapses to an icon rail
   ===================================================================== */

@media (max-width: 1180px) and (min-width: 901px) {
    .sidebar { width: var(--rail-w); align-items: center; }
    .sidebar-head { padding: 16px 0 14px; width: 100%; display: flex; justify-content: center; }
    .brand-text { display: none; }
    .nav { width: 100%; padding: 12px 10px; }
    .nav-group {
        height: 1px;
        padding: 0;
        margin: 12px 8px;
        overflow: hidden;
        color: transparent;
        background: var(--border-soft);
    }
    .nav-item { justify-content: center; padding: 11px 0; gap: 0; }
    .nav-item span { display: none; }
    .nav-item.active::before { display: none; }
    .sidebar-foot { width: 100%; }
    .account { justify-content: center; padding: 6px; }
    .account .avatar, .account-name { display: none; }

    .page-head, .container { margin-left: var(--rail-w); }
    .container { margin-left: max(var(--rail-w), calc(50% - 590px + var(--rail-w) / 2)); }
    .page-head-inner { padding-left: 22px; padding-right: 22px; }
}


/* =====================================================================
   Phones - top bar plus a bottom navigation bar
   ===================================================================== */

@media (max-width: 900px) {
    .appbar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: rgba(18, 26, 43, .93);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border-soft);
    }

    .sidebar {
        top: auto;
        right: 0;
        width: auto;
        flex-direction: row;
        align-items: stretch;
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        overflow-x: auto;
        border-right: none;
        border-top: 1px solid var(--border-soft);
        background: rgba(18, 26, 43, .96);
        backdrop-filter: blur(10px);
        box-shadow: 0 -8px 24px -18px #000;
    }
    .sidebar-head, .sidebar-foot, .nav-group { display: none; }

    .nav {
        display: flex;
        gap: 2px;
        width: 100%;
        padding: 0;
        overflow: visible;
    }

    .nav-item {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
        padding: 7px 3px;
        margin: 0;
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0;
    }
    .nav-item span {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }
    .nav-label { display: none; }
    .nav-short { display: block; }
    .nav-item.active::before { display: none; }
    .nav-item.active { background: var(--accent-soft); }

    .page-head, .container { margin-left: 0; }
    .page-head-inner { padding: 16px 16px 14px; }
    .page-title h1 { font-size: 18px; }
    .container { padding: 16px 14px calc(86px + env(safe-area-inset-bottom)); }

    .panel { padding: 15px 15px 16px; border-radius: 12px; }
    .grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .stat-card { padding: 13px 14px; }
    .stat-card .value { font-size: 21px; }

    /* Stacked inline forms: fixed-width fields would otherwise collide.
       flex-basis has to be reset with them. In a column flex container
       `flex: 1 1 240px` is a 240px HEIGHT basis, so every .field.grow was
       coming out 240px tall to hold a 62px label and input - which is
       where the huge blank gaps under the SSID, WAN and update fields
       came from. */
    .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .form-row .field,
    .form-row .field.grow {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex: 0 0 auto;
    }
    .form-row .btn { width: 100%; }

    /* Fixed pixel widths set inline for the desktop table layout leave
       stranded little boxes once the rows stack. */
    .form-row .field input,
    .form-row .field select,
    .form-row .field textarea { width: 100% !important; max-width: none; }

    .tabs { overflow-x: auto; flex-wrap: nowrap; }

    /* Comfortable targets. A 14px text button is not tappable. */
    .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 13px; }
    .link-danger { min-height: 38px; padding: 8px 10px; }
    .iconbtn { min-width: 38px; min-height: 38px; }
}


/* =====================================================================
   Phones - data tables stack into cards

   A table with five columns of controls cannot be made to fit 360px, and
   scrolling it sideways inside a page that already scrolls down puts the
   buttons somewhere nobody finds them. Below 760px each row becomes its
   own little card and each cell gets its column name back from
   data-label, so everything is reachable in one vertical scroll.

   Opt-in: class="table-wrap stackable" on the wrapper, class="table-stack"
   on the table, data-label="..." on every td. Tables without it keep the
   swipe-sideways behaviour. The wrapper carries its own class rather than
   :has(), which the older Android browsers in the field do not have.
   ===================================================================== */

@media (max-width: 760px) {
    .table-wrap.stackable {
        overflow-x: visible;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .panel table.table-stack { min-width: 0; }

    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td { display: block; width: auto; }

    .table-stack thead { display: none; }

    .table-stack tr {
        margin-bottom: 10px;
        padding: 4px 12px;
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-sm);
        background: var(--bg-soft);
    }
    .table-stack tr:last-child { margin-bottom: 0; }
    .table-stack tbody tr:hover { background: var(--bg-soft); }

    /* Flex, not grid: a cell holds however many children the page felt
       like putting in it, and in a two-column grid the second one drops
       into the label column and comes out 96px wide. Flex lets the label
       sit beside a short value and lets anything bigger take its own
       full-width line underneath. */
    .table-stack td {
        min-width: 0 !important;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-soft);
    }
    .table-stack tr td:last-child { border-bottom: none; }

    .table-stack td::before {
        content: attr(data-label);
        flex: 0 0 92px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--text-mute);
        overflow-wrap: anywhere;
    }

    .table-stack td > * { min-width: 0; }
    /* A form is a control, not a value - give it the whole line. */
    .table-stack td > form { flex: 1 1 100%; }
    /* ...unless it is one of the empty <form id> anchors the rates table
       uses to attach inputs by their form= attribute. Those have no
       content and would otherwise force a pointless line break. */
    .table-stack td > form:empty { display: none; }

    /* An action cell has no useful column name - let it use the width. */
    .table-stack td[data-label=""] { padding: 10px 0; }
    .table-stack td[data-label=""]::before { display: none; }
    .table-stack td[data-label=""] > div,
    .table-stack td[data-label=""] > form { flex: 1 1 100%; }

    /* Inside an action cell the little forms are buttons, not fields:
       keep them on the same line rather than letting one text box grow
       and push every button onto a line of its own. */
    .table-stack td[data-label=""] div > form {
        display: inline-flex;
        flex: 0 1 auto;
        width: auto;
        gap: 6px;
    }
    .table-stack td[data-label=""] div > form input[type=text] { flex: 0 1 110px; }

    /* Inputs inside a stacked row share the line with their button
       instead of sitting at whatever pixel width the desktop needed. */
    .table-stack td form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    /* Not "td form input" - the rates table attaches its inputs to a
       form by id, so they are direct children of the cell and would keep
       their desktop pixel widths. */
    .table-stack td input[type=number],
    .table-stack td input[type=text],
    .table-stack td input[type=password],
    .table-stack td select {
        flex: 1 1 80px;
        width: auto !important;
        min-width: 0;
        min-height: 38px;
    }
    .table-stack td .btn-sm,
    .table-stack td .link-danger { flex: 0 0 auto; }
}

@media (max-width: 420px) {
    .grid { grid-template-columns: 1fr 1fr; }
    .stat-card .value { font-size: 19px; }
    .who-name { display: none; }
    .nav-item { font-size: 9px; }
    .table-stack td::before { flex-basis: 84px; }
    .table-stack td { gap: 6px 8px; }
}


/* =====================================================================
   Print - Diagnostics and income tables are the pages people print or
   screenshot for a supplier.
   ===================================================================== */

@media print {
    .sidebar, .appbar { display: none !important; }
    body { background: #fff; color: #000; }
    .page-head, .container { margin-left: 0; }
    .panel { border-color: #ccc; box-shadow: none; break-inside: avoid; }
}

/* --- 3.40 live values ------------------------------------------------
 * The dashboard no longer reloads itself. Values are replaced in place,
 * so a change needs to be noticeable without anything moving: a brief
 * tint, no size or weight change, nothing that shifts layout. */
@keyframes ajkfi-bump { 0% { background-color: rgba(108,120,255,.30); } 100% { background-color: transparent; } }
.live-bump { animation: ajkfi-bump 1s ease-out; border-radius: 4px; }

.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%;
            vertical-align:middle; margin-left:8px; background:var(--text-dim); }
.live-dot.live-ok    { background:#39d98a; box-shadow:0 0 0 0 rgba(57,217,138,.6); animation: ajkfi-pulse 2.4s ease-out infinite; }
.live-dot.live-stale { background:var(--warn,#e8b339); animation:none; }
.live-dot.live-idle  { background:var(--text-dim); animation:none; }
@keyframes ajkfi-pulse { 0% { box-shadow:0 0 0 0 rgba(57,217,138,.55); } 70% { box-shadow:0 0 0 6px rgba(57,217,138,0); } 100% { box-shadow:0 0 0 0 rgba(57,217,138,0); } }

/* Someone who prefers less motion still gets the value, just no animation. */
@media (prefers-reduced-motion: reduce) {
  .live-bump, .live-dot.live-ok { animation: none; }
  .live-bump { background-color: rgba(108,120,255,.18); }
}

/* =====================================================================
   3.45: saves without reloading - result pop-ups (assets/js/admin.js)
   ===================================================================== */
#toasts {
    position: fixed; z-index: 9998; right: 18px; top: 18px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    width: min(380px, calc(100vw - 24px)); pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border-radius: 11px; border: 1px solid;
    font-size: 13.5px; line-height: 1.45; font-weight: 500;
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
    pointer-events: auto; cursor: pointer; word-break: break-word;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast-ok   { background: #0f2a2a; border-color: var(--accent-2-line); color: #8ff0dc; }
.toast-err  { background: #2e1419; border-color: var(--danger-line);   color: #ffb3bc; }
.toast-work { background: #151c33; border-color: var(--accent-line);   color: #c3ccff; }
.toast-ic {
    flex: none; display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 12px; font-weight: 800; line-height: 1; margin-top: 0;
}
.toast-ok .toast-ic  { background: var(--accent-2); color: #04211c; }
.toast-err .toast-ic { background: var(--danger);   color: #2a060c; }
.toast-work .toast-ic {
    border: 2px solid var(--accent-line); border-top-color: var(--accent-hi);
    animation: ajkfi-spin .8s linear infinite;
}
@keyframes ajkfi-spin { to { transform: rotate(360deg); } }

/* The button that was pressed, while the router works on it. */
.is-busy { position: relative; opacity: .65; cursor: progress !important; }

@media (max-width: 900px) {
    /* Above the bottom navigation bar, where a thumb is. */
    #toasts {
        top: auto; right: 12px; left: 12px; width: auto; align-items: stretch;
        bottom: calc(80px + env(safe-area-inset-bottom));
        flex-direction: column-reverse;
    }
    .toast { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    .toast { transition: none; }
    .toast-work .toast-ic { animation: none; }
}

/* =====================================================================
   3.45: Settings - every section folded, tap a heading to open it
   ===================================================================== */
details.panel.fold {
    margin-top: 0; padding: 0;
    background: var(--panel); border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
details.panel.fold > summary {
    display: block; list-style: none; cursor: pointer;
    padding: 15px 20px; margin: 0;
    font-size: inherit; color: var(--text);
    border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
}
details.panel.fold > summary::-webkit-details-marker { display: none; }
details.panel.fold > summary:hover { background: var(--panel-2); }
details.panel.fold[open] > summary { margin-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
details.panel.fold > summary h2 { margin: 0; padding: 0; border: 0; }
details.panel.fold > summary h2::after {
    content: ''; flex: none; margin-left: auto;
    width: 8px; height: 8px; margin-right: 4px;
    border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim);
    transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
details.panel.fold[open] > summary h2::after { transform: translateY(2px) rotate(-135deg); }
details.panel.fold > .fold-body {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border-soft);
}
@media (max-width: 900px) {
    details.panel.fold > summary { padding: 14px 15px; }
    details.panel.fold > .fold-body { padding: 14px 15px 16px; }
}

/* ------------------------------------------------------------------
   3.47: ZeroTier live install progress
   ------------------------------------------------------------------ */
.zt-progress { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; background: var(--panel-2); }
.zt-now { font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zt-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: zt-spin .8s linear infinite; flex: none; }
@keyframes zt-spin { to { transform: rotate(360deg); } }
.zt-bar { height: 6px; border-radius: 3px; background: var(--border-soft); margin: 10px 0 12px; overflow: hidden; }
.zt-bar > span { display: block; height: 100%; background: var(--accent); transition: width .6s ease; }
.zt-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-mute); }
.zt-steps li::before { content: '\25CB'; margin-right: 6px; }
.zt-steps li.now { color: var(--text); font-weight: 600; }
.zt-steps li.now::before { content: '\25CF'; color: var(--accent); }
.zt-steps li.done { color: var(--text-dim); }
.zt-steps li.done::before { content: '\2713'; color: var(--accent-2); }
.zt-log { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-dim); white-space: pre-wrap; word-break: break-all; max-height: 90px; overflow: auto; }

/* ---- 3.51: Sales History graph (dashboard) -------------------------- */
.sc-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 11px; }
.sc-tab { padding: 7px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 34px; }
.sc-tab:hover { background: var(--panel-2); color: var(--text); }
.sc-tab.active { background: var(--accent-2-soft); color: #9ff0e1; box-shadow: inset 0 0 0 1px var(--accent-2-line); }
.sc-wrap { position: relative; }
.sc-plot { min-height: 190px; }
.sc-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-grid { stroke: var(--border-soft); stroke-width: 1; }
.sc-base { stroke: var(--border); stroke-width: 1; }
.sc-axis { fill: var(--text-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.sc-bar { fill: var(--accent-2); opacity: .85; }
.sc-hit { cursor: pointer; outline: none; }
.sc-hit:hover .sc-bar, .sc-bar.on, .sc-hit:focus .sc-bar { opacity: 1; fill: #3fe0c6; }
.sc-tip { position: absolute; top: -6px; z-index: 2; padding: 5px 9px; border-radius: 8px; background: var(--panel-3); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }
.sc-msg { display: flex; align-items: center; justify-content: center; min-height: 190px; color: var(--text-dim); font-size: 13px; text-align: center; padding: 0 12px; }
.sc-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.sc-stat { padding: 10px 12px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.sc-stat span { display: block; color: var(--text-dim); font-size: 11px; margin-bottom: 3px; }
.sc-stat strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.sc-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--text-dim); font-size: 12px; }

/* ---- 3.51: Free Time (Rates) ---------------------------------------- */
#freetime h2 { display: flex; align-items: center; }
.ft-status { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.ft-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; }
.ft-dur { display: flex; align-items: center; gap: 6px; }
.ft-dur span { color: var(--text-dim); font-size: 12px; }
.ft-help { margin: 10px 0 0; color: var(--text-mute); font-size: 12px; }

/* ---- 3.51: Hotspot device table ------------------------------------- */
.hs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.hs-tools input[type=search] { flex: 0 1 260px; min-width: 0; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font: inherit; font-size: 13px; }
.hs-tools input[type=search]:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.hs-mactoggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.hs-count { margin-left: auto; font-size: 12px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.hs-batch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
    background: linear-gradient(90deg, var(--accent-soft), rgba(22,191,166,.10)); border: 1px solid var(--accent-line); }
.hs-batch[hidden] { display: none; }
.hs-batch-n { font-size: 13px; color: #dfe4ff; margin-right: 4px; }
.hs-batch select { padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font: inherit; font-size: 13px; max-width: 100%; }
.hs-table { min-width: 760px; }
.hs-table tbody td { padding: 8px 10px; }
.hs-table thead th { padding: 6px 8px; }
.hs-table .hs-c-chk { width: 34px; padding-left: 12px; padding-right: 0; }
.hs-table .hs-c-act { width: 1%; white-space: nowrap; }
.hs-table select.hs-hsel { padding: 5px 6px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text-mute);
    font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.hs-table select.hs-hsel:hover { border-color: var(--border); color: var(--text-dim); }
.hs-table select.hs-hsel.is-on { color: #9ff0e1; border-color: var(--accent-2-line); background: var(--accent-2-soft); }
.hs-table select.hs-hsel option { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); background: var(--panel); }
.hs-table tbody tr.is-sel { background: var(--accent-soft); }
.hs-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; word-break: break-word; }
.hs-host { font-size: 11px; font-weight: 500; color: var(--text-mute); }
.hs-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.hs-priv { padding: 0 6px; border-radius: 99px; font-size: 10px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); cursor: help; }
.hs-mac { display: none; font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.hs-table.show-mac .hs-mac { display: inline; }
.hs-cell { display: flex; align-items: center; gap: 8px; }
.hs-time { min-width: 64px; font-family: var(--mono); font-size: 12.5px; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.hs-time-paused { color: var(--warn); }
.hs-none { color: var(--text-mute); }
.hs-speed { min-width: 64px; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-dim { color: var(--text-mute); }
.hs-table select.hs-dd { padding: 5px 8px; font-size: 12px; background: var(--panel-2); border-color: var(--border); border-radius: 7px; cursor: pointer; }
.hs-table select.hs-dd:hover { border-color: var(--accent-line); }
.hs-custom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.hs-custom[hidden] { display: none; }
.hs-custom input { padding: 6px 8px !important; font-size: 12.5px !important; }
.hs-nomatch { margin-top: 10px; }
.hs-table .badge { font-size: 11px; }
@media (max-width: 760px) {
    .hs-table { min-width: 0; }
    .hs-table thead { display: block; }
    .hs-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; border: 0; background: none; }
    .hs-table thead th { display: block; position: static; padding: 0; background: none; border: 0; }
    .hs-table thead th.hs-c-act { display: none; }
    .hs-table thead th.hs-c-chk { display: flex; align-items: center; padding: 0 4px; }
    .hs-table select.hs-hsel { border-color: var(--border); background: var(--bg); padding: 7px 8px; }
    .hs-table tbody tr { display: grid; grid-template-columns: 24px 1fr 1fr 1fr; grid-template-areas: "chk dev dev st" "time time spd act";
        column-gap: 8px; row-gap: 8px; padding: 10px 12px; }
    .hs-table tbody td { padding: 0 !important; border: 0 !important; display: block; }
    .hs-table tbody td::before { display: none !important; }
    .hs-table tbody td.hs-c-chk { grid-area: chk; padding-top: 2px !important; }
    .hs-table tbody td.hs-c-dev { grid-area: dev; }
    .hs-table tbody td[data-label="Status"] { grid-area: st; text-align: right; }
    .hs-table tbody td[data-label="Time"] { grid-area: time; }
    .hs-table tbody td[data-label="Speed"] { grid-area: spd; }
    .hs-table tbody td.hs-c-act { grid-area: act; width: auto; }
    .hs-table .hs-cell { flex-direction: column; align-items: stretch; gap: 4px; }
    .hs-table .hs-time, .hs-table .hs-speed { min-width: 0; line-height: 18px; }
    .hs-table tbody td.hs-c-act { display: flex; flex-direction: column; justify-content: flex-end; }
    .hs-table tbody td.hs-c-act::after { content: ""; order: -1; height: 18px; }
    .hs-table td select.hs-dd { flex: 0 0 auto !important; width: 100% !important; min-width: 0; height: 34px; min-height: 34px; padding: 0 22px 0 8px; font-size: 12.5px; }
    .hs-table tbody td { min-width: 0 !important; }
    .hs-table tbody td[data-label="Status"] { grid-column: 4; }
    .hs-count { margin-left: 0; width: 100%; }
    .hs-tools input[type=search] { flex: 1 1 100%; }
}

/* ---- 3.51: date + time picker (Free Time Start / End) ---------------- */
.dtp { position: relative; display: inline-block; }
.dtp-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 210px; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 9px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.dtp-btn:hover, .dtp.open .dtp-btn { border-color: var(--accent); box-shadow: var(--ring); }
.dtp-btn .icon { color: var(--accent-hi); }
.dtp-btn.is-empty { color: var(--text-mute); }
.dtp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 292px; padding: 12px; background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); }
.dtp-pop[hidden] { display: none; }
.dtp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; font-size: 13.5px; }
.dtp-head button, .dtp-quick button { background: var(--panel-3); border: 1px solid var(--border); color: var(--text); border-radius: 7px; cursor: pointer; font: inherit; }
.dtp-head button { width: 30px; height: 30px; font-size: 16px; line-height: 1; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.dtp-grid .dow { font-size: 10.5px; font-weight: 700; color: var(--text-mute); padding: 4px 0; }
.dtp-grid button { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-grid button:hover { background: var(--panel-3); }
.dtp-grid button.today { box-shadow: inset 0 0 0 1px var(--accent-line); }
.dtp-grid button.on { background: var(--accent); color: #fff; font-weight: 700; }
.dtp-grid button.past { color: var(--text-mute); }
.dtp-time { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--text-dim); }
.dtp-time select { padding: 6px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font: inherit; font-size: 13px; }
.dtp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dtp-quick button { padding: 6px 10px; font-size: 12px; }
.dtp-quick .dtp-done { margin-left: auto; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
@media (max-width: 760px) {
    .dtp-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
    .dtp-btn { min-width: 0; width: 100%; }
    .dtp { display: block; }
}

/* ---- 3.51: Dashboard "Bold Gradient Pro" ---------------------------- */
.dk { --c1: #16bfa6; --c2: #0e7490; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%) !important; box-shadow: 0 14px 30px -18px var(--c1), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.dk::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 18px 18px; -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 90%); mask-image: linear-gradient(120deg, transparent 20%, #000 90%); }
.dk::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); }
.dk .label { color: rgba(255,255,255,.86) !important; font-weight: 600; letter-spacing: .02em; }
.dk .label .icon { color: #fff !important; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 4px; width: 25px; height: 25px; }
.dk .value { color: #fff !important; font-family: var(--mono); letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.dk-teal   { --c1: #14b8a6; --c2: #0e7490; }
.dk-indigo { --c1: #6366f1; --c2: #4338ca; }
.dk-sky    { --c1: #0ea5e9; --c2: #4f46e5; }
.dk-violet { --c1: #a855f7; --c2: #be185d; }
.dk-amber  { --c1: #f59e0b; --c2: #c2410c; }
.dk-trend { align-self: flex-start; width: max-content; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums; background: rgba(0,0,0,.22); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.dk-trend small { font-weight: 500; opacity: .8; }
.dk-live { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: dk-ping 1.8s infinite; vertical-align: middle; }
@keyframes dk-ping { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .dk-live { animation: none; } }
/* System Health: dark instrument cards with a colored edge, glyph and meter */
.dh { --c1: #6b78ff; --c2: #8b5cf6; position: relative; border-left: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--panel) !important; }
.dh::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 0 12px var(--c1); }
.dh .label .icon { color: var(--c1); }
.dh .value { font-family: var(--mono); }
.dh-cpu { --c1: #818cf8; --c2: #6366f1; } .dh-mem { --c1: #2dd4bf; --c2: #0ea5e9; } .dh-sto { --c1: #fbbf24; --c2: #f97316; }
.dh-tmp { --c1: #fb7185; --c2: #f97316; } .dh-net { --c1: #38bdf8; --c2: #6366f1; } .dh-up { --c1: #c084fc; --c2: #818cf8; }
.dh-meter { height: 6px; margin-top: 10px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.dh-meter > span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 10px var(--c1); transition: width .6s ease; }
.dh-meter.is-high > span { background: linear-gradient(90deg, #fb923c, #ef4444); box-shadow: 0 0 10px #ef4444; }
/* Sales graph: gradient bars and a dashed average line */
.sc-bar { fill: url(#sc-grad); opacity: 1; }
.sc-hit:hover .sc-bar, .sc-bar.on, .sc-hit:focus .sc-bar { fill: url(#sc-grad-hi); filter: drop-shadow(0 0 6px rgba(45,212,191,.55)); }
.sc-avg { stroke: #fbbf24; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .85; }
.sc-avg-t { fill: #fbbf24; font-size: 10.5px; font-weight: 700; }

/* one custom caret on the table dropdowns (the option text carries none) */
.hs-table select.hs-dd, .hs-table select.hs-hsel { -webkit-appearance: none; appearance: none; padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e9cb6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; }
.hs-table select.hs-dd { min-width: 92px; }
.hs-table select.hs-dd-act { min-width: 112px; }

/* =====================================================================
   3.53 - navigation drop-downs. A group (Dashboard, Rates, Settings,
   System) opens a list of its sub-sections; a page shows only the one
   chosen. Wide screens: the list opens under the group in the sidebar.
   Icon rail and phones: the same list floats next to / above the bar
   (.nav-sheet, kept outside the sidebar so nothing clips it).
   ===================================================================== */
.nav-dd { position: relative; }
.nav-chev {
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform .15s ease;
    flex: none;
}
.nav-dd.open .nav-chev, .nav-dd.cur:not(.shut) .nav-chev { transform: translateY(1px) rotate(225deg); }
.nav-sub { display: none; padding: 2px 0 8px 30px; }
.nav-dd.open .nav-sub, .nav-dd.cur:not(.shut) .nav-sub { display: block; }
.nav-subitem {
    display: block;
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: 7px;
    color: var(--text-mute);
    text-decoration: none;
    font-size: 12.8px;
    line-height: 1.3;
}
.nav-subitem:hover { background: var(--panel-2); color: var(--text); }
.nav-subitem.on { color: #dfe4ff; background: var(--accent-soft); font-weight: 600; }
.nav-sheet { display: none; }
.page-crumb {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #dfe4ff;
    font-size: 13px;
    font-weight: 600;
    vertical-align: middle;
}
/* One section per page: a panel is always open, its title is just a title. */
details.panel.fold.tab-only > summary { cursor: default; }
details.panel.fold.tab-only > summary:hover { background: none; }
details.panel.fold.tab-only > summary h2::after { display: none; }

@media (max-width: 1180px) {
    .nav-chev, .nav-sub, .nav-dd.cur:not(.shut) .nav-sub, .nav-dd.open .nav-sub { display: none; }
    .nav-sheet.open {
        display: block;
        position: fixed;
        z-index: 60;
        min-width: 230px;
        max-height: 72vh;
        overflow-y: auto;
        padding: 6px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 22px 48px -14px #000;
    }
    .nav-sheet-title {
        padding: 8px 12px 6px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-mute);
    }
    .nav-sheet .nav-subitem { padding: 10px 12px; font-size: 14px; }
}
@media (max-width: 1180px) and (min-width: 901px) {
    .nav-sheet.open { left: calc(var(--rail-w) + 8px); }
}
@media (max-width: 900px) {
    .nav-dd { flex: 1 1 0; min-width: 0; display: flex; }
    .nav-dd > .nav-item { flex: 1 1 0; }
    .nav-dd.open > .nav-item { background: var(--panel-3); color: var(--text); }
    .nav-sheet.open {
        left: 10px; right: 10px;
        top: auto !important;
        bottom: calc(66px + env(safe-area-inset-bottom));
        max-height: 64vh;
    }
    .nav-sheet .nav-subitem { padding: 12px 14px; font-size: 15px; }
    .page-crumb { font-size: 12px; margin-left: 8px; padding: 2px 9px; }
}
@media print { .nav-sheet { display: none !important; } }

/* 3.53 - show / hide password (assets/js/pw-eye.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap.pw-inline { display: inline-block; vertical-align: middle; }
.pw-wrap > input { padding-right: 38px !important; }
.pw-wrap.pw-inline > input { box-sizing: border-box; }
.pw-eye {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 30px; height: 30px; padding: 0; margin: 0;
    display: inline-grid; place-items: center;
    background: transparent; border: 0; border-radius: 7px;
    color: var(--text-mute); cursor: pointer;
}
.pw-eye:hover { color: var(--text); background: var(--panel-2); }
.pw-eye.on { color: var(--accent-hi); }
.pw-eye:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }

/* ===== 3.56: Light theme "Cool gray" (Aaron picked A, 2026-10-02). Active when
   <html data-theme="light"> - set by PHP from the ajkfi_theme cookie, switched by
   the sun/moon button in the menu. Dark stays the default. ===== */
html[data-theme="light"]{color-scheme:light}
.theme-toggle .tt-light{display:none}
html[data-theme="light"] .theme-toggle .tt-light{display:inline-flex}
html[data-theme="light"] .theme-toggle .tt-dark{display:none}
.theme-toggle span{display:inline-flex}
html[data-theme="light"]{--bg:#e6e9ee;--bg-soft:#e1e5eb;--panel:#f4f6f9;--panel-2:#eceff4;--panel-3:#e3e7ed;
--border:#cfd5de;--border-soft:#dde2e9;--text:#1b2330;--text-dim:#566174;--text-mute:#687386;
--accent:#4453e0;--accent-hi:#5a68f0;--accent-soft:rgba(68,83,224,.12);--accent-line:rgba(68,83,224,.35);
--accent-2:#0b8473;--accent-2-soft:rgba(11,132,115,.12);--accent-2-line:rgba(11,132,115,.35);
--warn:#a66900;--warn-soft:rgba(166,105,0,.12);--warn-line:rgba(166,105,0,.35);
--danger:#d93a50;--danger-soft:rgba(217,58,80,.10);--danger-line:rgba(217,58,80,.32);
--shadow:0 1px 2px rgba(20,30,50,.06),0 8px 24px -16px rgba(20,30,50,.25);}
html[data-theme="light"] body{background-image:none!important}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background-color:var(--border)}
html[data-theme="light"] tbody tr:hover{background:rgba(0,0,0,.035)}
html[data-theme="light"] .panel{background-image:none!important}
html[data-theme="light"] .badge-ok{color:#0b7a68}
html[data-theme="light"] .badge-info{color:#3443c9}
html[data-theme="light"] .badge-warn{color:#8a5a00}
html[data-theme="light"] .badge-danger{color:#b4233a}
html[data-theme="light"] .alert-danger,html[data-theme="light"] .alert-error{color:#a3192f!important}
html[data-theme="light"] .alert-success,html[data-theme="light"] .alert-ok{color:#0b6e5e!important}
html[data-theme="light"] .alert-warn{color:#7a4f00!important}
html[data-theme="light"] .alert-info{color:#2f3db8!important}
html[data-theme="light"] .toast-ok{background:#e3f6f2;color:#0b6e5e}
html[data-theme="light"] .toast-err{background:#fbe7ea;color:#a3192f}
html[data-theme="light"] .toast-work{background:#e8eafc;color:#2f3db8}
html[data-theme="light"] .sc-tab.active{color:#0b7a68}
html[data-theme="light"] .hs-batch-n,html[data-theme="light"] .nav-subitem.on{color:var(--text)}
html[data-theme="light"] .hs-table select.hs-hsel.is-on{color:#0b7a68}
html[data-theme="light"] .dh{background:var(--panel)!important}
html[data-theme="light"] .dh-meter{background:rgba(0,0,0,.08)}
html[data-theme="light"] .btn-success{color:#fff}
html[data-theme="light"] .btn-warn{color:#fff}
html[data-theme="light"] .btn-danger{color:#fff}
@media (max-width: 900px){
html[data-theme="light"] .sidebar,html[data-theme="light"] .bottom-nav,html[data-theme="light"] .mnav,html[data-theme="light"] .nav-sheet{background:var(--panel)!important}
}
html[data-theme="light"] .nav-item.active,html[data-theme="light"] .tab.active{color:var(--accent)!important}
html[data-theme="light"] .page-crumb{color:var(--accent)!important}
@media (max-width:900px){
html[data-theme="light"] .appbar{background:color-mix(in srgb,var(--panel) 94%,transparent)!important;border-color:var(--border)!important}
html[data-theme="light"] .sidebar{box-shadow:0 -8px 24px -18px rgba(20,30,50,.35)!important}
}
html[data-theme="light"] .error-box{color:#a3192f}
html[data-theme="light"] .notice-box{color:#0b6e5e}
html[data-theme="light"] .btn[style*="--panel-2"]{color:var(--text)}