:root {
    --bg: #0f1520;
    --panel: #161e2c;
    --panel-border: #253045;
    --text: #e7ecf5;
    --text-dim: #8b98ad;
    --accent: #4f8cff;
    --accent-dim: #2e4a80;
    --good: #35c76e;
    --fair: #d8c93c;
    --critical: #e0503c;
    --unknown: #5c6a80;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar-backdrop { display: none; }

.sidebar {
    width: 210px;
    flex-shrink: 0;
    background: var(--panel);
    border-right: 1px solid var(--panel-border);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
}

.sidebar .brand {
    font-weight: 700;
    font-size: 16px;
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}
/* min-width: 0 overrides the flex-item default of min-width: auto, which
   otherwise refuses to shrink a flex child below its content's intrinsic
   width — without it, "Keke Connect" (longer than FieldLogger's own brand
   text, which is why this never showed up there) overflowed .brand's
   fixed width entirely, and that overflow silently ate every bit of
   padding-right tried here (16px up to 40px, all visually identical)
   instead of actually pushing the toggle button rightward. brand-name
   (not brand-text itself, which also holds the logo image) gets the
   truncation so a still-longer name later degrades to an ellipsis
   instead of breaking this layout again. */
.brand-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.brand-logo { height: 16px; width: auto; display: block; flex-shrink: 0; }
html.sidebar-collapsed .brand-logo { display: none; }

.sidebar-toggle, .mobile-menu-toggle {
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-dim);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-toggle:hover, .mobile-menu-toggle:hover { color: var(--text); border-color: var(--accent); }
.mobile-menu-toggle { display: none; margin-right: 12px; }
.sidebar-toggle svg, .mobile-menu-toggle svg { width: 16px; height: 16px; }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-dim);
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar nav a:hover { color: var(--text); text-decoration: none; background: rgba(255,255,255,0.03); }
.sidebar nav a.active { color: var(--text); border-left-color: var(--accent); background: rgba(79,140,255,0.08); }
.nav-icon { flex-shrink: 0; width: 20px; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 18px; height: 18px; }

.nav-section-label {
    padding: 16px 16px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
}
.nav-section-label:first-child { padding-top: 4px; }
html.sidebar-collapsed .nav-section-label { display: none; }
.nav-profile { border-top: 1px solid var(--panel-border); margin-top: 8px; padding-top: 14px; }

.sidebar .user-box {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--panel-border);
    font-size: 12px;
    color: var(--text-dim);
}
.user-box-icon { display: none; align-items: center; justify-content: center; }
.user-box-icon svg { width: 18px; height: 18px; }

/* Collapsed (icon-rail) state — toggled on <html> so it applies before the
   sidebar itself has painted (see the blocking script in partials/header.php). */
html.sidebar-collapsed .sidebar { width: 56px; }
html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .user-box-full { display: none; }
html.sidebar-collapsed .brand { justify-content: center; padding: 0 0 16px; }
html.sidebar-collapsed .sidebar nav a { justify-content: center; padding: 10px 0; }
html.sidebar-collapsed .user-box-icon { display: flex; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    padding: 14px 24px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
}
.topbar h1 { font-size: 18px; margin: 0; }

.content { padding: 24px; flex: 1; overflow: auto; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: end; }

/* Fleet Map layout — side list + map, same shape as
   1Mobile 5G App - Server's Device Tracker (map-layout.dt-* naming kept
   identical on purpose, same pattern). */
.dt-layout { display: flex; gap: 16px; height: calc(100vh - 220px); }
.dt-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
.dt-map { border-radius: var(--radius); overflow: hidden; flex: 1; min-width: 0; }
.dt-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--panel-border); font-size: 12px; }
.dt-item:hover { background: rgba(255,255,255,0.04); }
.dt-item.active { background: rgba(79,140,255,0.12); border-left: 3px solid var(--accent); padding-left: 9px; }
.dt-item .dt-label { font-size: 13px; font-weight: 600; color: var(--text); }
.dt-item.offline .dt-label { color: var(--text-dim); }
.dt-item-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-dim); }

.dt-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dt-status-dot.online { background: var(--good); box-shadow: 0 0 4px var(--good); }
.dt-status-dot.offline { background: var(--unknown); }

.dt-marker-label {
    background: rgba(15,20,30,0.85); border: 1px solid var(--panel-border); color: var(--text);
    font-size: 11px; padding: 1px 6px; border-radius: 4px; box-shadow: none;
}
.dt-marker-label.offline { color: var(--text-dim); }
.dt-marker-label::before { display: none; } /* Leaflet's default tooltip arrow — not needed for a label that always sits above its own dot */

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-admin { background: rgba(79,140,255,0.15); color: var(--accent); }
.badge-soon { background: rgba(216,201,60,0.15); color: var(--fair); }
.badge-good { background: rgba(53,199,110,0.15); color: var(--good); }
.badge-poor { background: rgba(216,201,60,0.15); color: var(--fair); }
.badge-critical { background: rgba(224,80,60,0.15); color: var(--critical); }
.badge-unknown { background: rgba(92,106,128,0.15); color: var(--unknown); }
.badge-viewer { background: rgba(255,255,255,0.06); color: var(--text-dim); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 18px 20px; }
.stat-card h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.stat-card .stat-main { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-card .stat-sub { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.stat-card .stat-sub b { color: var(--text); }

.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--panel-border); font-size: 13px; }
.attention-list li:last-child { border-bottom: none; }
.attention-list a { color: var(--text); }

.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { padding: 8px 0; border-bottom: 1px solid var(--panel-border); font-size: 12px; color: var(--text-dim); }
.activity-list li:last-child { border-bottom: none; }
.activity-list .activity-action { color: var(--text); font-weight: 600; }

@media (max-width: 768px) {
    .mobile-menu-toggle { display: inline-flex; }

    /* Collapsed (icon rail, the default on first mobile visit) stays
       inline. Expanded becomes an overlay drawer instead of pushing
       content into a sliver: taken out of flow via fixed positioning, so
       .main (the other flex child) reclaims the full width underneath,
       with a backdrop to close on outside tap. */
    html:not(.sidebar-collapsed) .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 2001;
        width: 230px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }
    html:not(.sidebar-collapsed) .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
    }

    .topbar { padding: 12px 16px; }
    .content { padding: 16px; }
    table { display: block; overflow-x: auto; white-space: nowrap; }

    /* .dt-side's fixed 320px width otherwise leaves .dt-map's flex:1
       nothing to size itself against on a narrow screen. */
    .dt-layout { flex-direction: column; height: auto; }
    .dt-side { width: 100%; max-height: 40vh; }
    .dt-map { flex: none; height: 50vh; }
}

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

.code-viewer {
    background: #0a0e16;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.code-viewer-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 14px;
    background: var(--panel);
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.code-viewer-header::-webkit-details-marker { display: none; }
.code-viewer-header .arrow {
    display: inline-block;
    transition: transform 0.15s ease;
    flex: none;
}
.code-viewer[open] .code-viewer-header {
    border-bottom: 1px solid var(--panel-border);
}
.code-viewer[open] .code-viewer-header .arrow {
    transform: rotate(90deg);
}
.code-viewer-header .label-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.code-viewer-header .filename {
    color: var(--text);
    font-family: 'SF Mono', Consolas, Menlo, monospace;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.code-viewer pre {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: 'SF Mono', Consolas, Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    color: #c9d6e8;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
th { color: var(--text-dim); font-weight: 600; }
tr:hover td { background: rgba(255,255,255,0.02); }

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.btn:hover { background: #3f78e0; text-decoration: none; }
.btn-secondary { background: transparent; border: 1px solid var(--panel-border); color: var(--text); }
.btn-danger { background: var(--critical); }
.btn-sm { padding: 5px 12px; font-size: 12px; }

input[type=text], input[type=password], input[type=email], input[type=tel], select {
    background: #0c1119;
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

.form-row { margin-bottom: 14px; }
.form-row label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 12px; text-transform: uppercase; font-weight: 600; }

.error-box {
    background: rgba(224,80,60,0.12);
    border: 1px solid var(--critical);
    color: #ff8f7d;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
}
.notice-box {
    background: rgba(53,199,110,0.1);
    border: 1px solid var(--good);
    color: var(--good);
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
}

/* Native <dialog> — no JS modal library needed, but it defaults to a
   plain white box + no backdrop dimming, which clashes with this app's
   dark theme. Used by users.php's "Add admin" / "Manage permissions"
   dialogs. */
dialog.modal {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    padding: 20px;
    color: var(--text);
    width: min(460px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
}
dialog.modal::backdrop { background: rgba(0,0,0,0.55); }
dialog.modal h3 { margin-top: 0; }
dialog.modal input[type=text], dialog.modal input[type=email], dialog.modal input[type=password], dialog.modal select {
    width: 100%;
}

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    width: 340px;
    max-width: 90vw;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 28px;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.login-logo { display: block; height: 26px; width: auto; }
.login-card h1 { font-size: 18px; margin: 0; }

.portal-countdown {
    font-size: 48px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--good);
    margin: 12px 0 4px;
}
.sub { color: var(--text-dim); margin: 0 0 20px; font-size: 13px; }
.login-card .btn { width: 100%; margin-top: 6px; }