:root {
    --bg: #f4efe6;
    --bg-alt: #fffdf8;
    --ink: #17212b;
    --muted: #5b6470;
    --line: rgba(23, 33, 43, 0.12);
    --accent: #1f7a8c;
    --accent-soft: #d8edf1;
    --accent-deep: #124e5b;
    --warn: #f59e0b;
    --danger: #c2410c;
    --success: #0f766e;
    --shadow: 0 24px 60px rgba(18, 30, 45, 0.12);
}

/* Operator-console visual system: dense control surfaces, quick commands, and door status at a glance. */
.command-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:-34px -34px 28px; padding:12px 28px; background:linear-gradient(180deg,#26344b,#151d2d); color:#eaf0ff; border-bottom:1px solid #4d6080; }
.command-brand { display:flex; align-items:center; gap:10px; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; color:#fff; border-radius:7px; background:linear-gradient(135deg,#3ec6d3,#3169bc); font-size:1.25rem; }
.command-actions { display:flex; flex-wrap:wrap; gap:4px; }
.command-actions a { padding:8px 11px; border-radius:6px; font-size:.86rem; color:#dfe8f9; }
.command-actions a:hover { background:#384b68; color:white; }
.composer-closed { display:none; }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(31, 122, 140, 0.18), transparent 24%),
        radial-gradient(circle at bottom right, rgba(196, 65, 12, 0.12), transparent 22%),
        var(--bg);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 300px 1fr;
}

.sidebar {
    background: linear-gradient(180deg, #11222c 0%, #183643 55%, #10232d 100%);
    color: #f8fafc;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.sidebar h1,
.auth-copy h1,
.page-header h2,
.panel h3,
.auth-card h2 {
    font-family: Georgia, "Times New Roman", serif;
    margin: 0;
}

.sidebar-copy,
.sidebar-user p {
    color: rgba(248, 250, 252, 0.72);
}

.muted,
.device-item p,
.job-item p,
.doc-item p {
    color: var(--muted);
}

.nav-links {
    display: grid;
    gap: 8px;
}

.nav-links a {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
}

.nav-links a.is-active,
.nav-links a:hover {
    background: rgba(216, 237, 241, 0.14);
    border-color: rgba(216, 237, 241, 0.28);
}

.sidebar-user {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 16px;
}

.main-panel {
    padding: 34px;
}

.page-header,
.panel-header,
.button-row,
.table-actions,
.device-item,
.job-item,
.doc-item,
.filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow);
}

.header-chip span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--success);
}

.eyebrow {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    color: var(--muted);
}

.stats-grid,
.content-grid,
.split-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
}

.stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-grid  {
    grid-template-columns: minmax(0, 1fr);
}
.split-grid:has(.composer-closed) {
    grid-template-columns: minmax(0, 1fr);
}
.split-grid:not(:has(.composer-closed)) {
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(320px, 0.6fr);
    align-items: start;
}
.stat-card,
.panel,
.auth-card,
.auth-copy {
    background: rgba(255, 253, 248, 0.86);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow);
    border-radius: 28px;
}

.stat-card,
.panel,
.auth-card,
.auth-copy {
    padding: 24px;
}

.stat-card strong {
    display: block;
    margin-top: 12px;
    font-size: 2rem;
    font-family: Georgia, "Times New Roman", serif;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.field,
.stack {
    display: grid;
    gap: 8px;
}

.field span {
    font-size: 0.9rem;
    color: var(--muted);
}

.field input,
.field select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(23, 33, 43, 0.14);
    background: #fff;
    padding: 14px 16px;
    font: inherit;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.field-full {
    grid-column: 1 / -1;
}

.primary-button,
.ghost-button,
.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 12px 16px;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.primary-button {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
}

.ghost-button {
    background: rgba(23, 33, 43, 0.06);
    color: var(--ink);
}

.danger-button {
    background: rgba(194, 65, 12, 0.12);
    color: var(--danger);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 700;
}

.badge-success {
    background: rgba(15, 118, 110, 0.12);
    color: var(--success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #9a6700;
}

.badge-danger {
    background: rgba(194, 65, 12, 0.14);
    color: var(--danger);
}

.badge-neutral {
    background: rgba(23, 33, 43, 0.1);
    color: var(--ink);
}

.flash {
    padding: 14px 18px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.flash-success {
    background: rgba(15, 118, 110, 0.12);
    color: var(--success);
}

.flash-danger {
    background: rgba(194, 65, 12, 0.12);
    color: var(--danger);
}

.flash-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #8a5a00;
}

.device-list,
.job-list,
.doc-list {
    display: grid;
    gap: 14px;
}

.device-item,
.job-item,
.doc-item,
.code-card,
.pass-preview {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
}

.device-status {
    text-align: right;
}

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
}

.auth-shell {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
}

.feature-list {
    padding-left: 18px;
    color: var(--ink);
}

.code-card {
    overflow-wrap: anywhere;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--line);
}

.narrow-panel {
    max-width: 560px;
}

.device-console { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.console-device { border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: #fff; }
.console-device.offline { opacity: .65; }
.console-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: #e9f5ff; color: #176b9b; font-size: 1.5rem; }
.console-device .button-row { grid-column: 1 / -1; margin-top: 4px; }

.console-shell { border:1px solid #aab5cd; background:#f8f9fd; box-shadow:0 12px 34px rgba(18,30,45,.16); }
.console-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; color:#f8fbff; background:linear-gradient(180deg,#8191bb 0%,#4c5c86 48%,#35415f 100%); border-bottom:1px solid #293551; }
.console-header h3 { margin:0; font-family:"Segoe UI",sans-serif; font-size:1.35rem; }
.console-header p { margin:6px 0 0; color:#e2e8f6; }
.console-header .eyebrow { color:#e0e7f7; }
.console-legend { display:flex; gap:14px; font-size:.86rem; white-space:nowrap; }
.console-legend span { display:flex; align-items:center; gap:6px; }
.online-dot,.offline-dot { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(255,255,255,.3); }
.online-dot { background:#53d486; }.offline-dot { background:#e36d74; }
.console-toolbar { padding:11px 18px; display:flex; gap:8px; flex-wrap:wrap; background:linear-gradient(180deg,#68779d,#4c5a7c); border-bottom:1px solid #2e3857; }
.toolbar-action { color:#fff; font-weight:600; font-size:.86rem; padding:9px 12px; border:1px solid rgba(255,255,255,.25); border-radius:5px; background:rgba(20,30,54,.24); }
.toolbar-action:hover { background:rgba(255,255,255,.16); }
.device-console { padding:24px; background:#fff; }
.console-device { position:relative; border:1px solid #c9d0df; border-radius:7px; padding:16px; background:linear-gradient(180deg,#fff,#f2f4f9); box-shadow:0 2px 5px rgba(26,38,61,.12); }
.console-device.online { border-top:4px solid #23985c; }.console-device.offline { border-top:4px solid #bb3c47; opacity:1; }
.console-icon { background:linear-gradient(180deg,#eef3fb,#cfd9e8); border:1px solid #8393ae; }
.door-glyph { width:17px; height:26px; border:3px solid #33445f; border-radius:2px; position:relative; }.door-glyph:after { content:""; position:absolute; width:3px; height:3px; border-radius:50%; background:#33445f; right:2px; top:11px; }
.console-device p,.console-device small { margin:3px 0; color:#5f6b7e; }
.console-device .button-row { border-top:1px solid #d5dbe7; padding-top:12px; }.console-device .primary-button,.console-device .ghost-button { border-radius:5px; padding:9px 11px; font-size:.84rem; }

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .app-shell,
    .auth-shell,
    .content-grid
    {
        grid-template-columns: 1fr;
    }

    .sidebar {
        gap: 20px;
    }
}
@media (max-width: 900px) {
    .split-grid,
    .split-grid:not(:has(.composer-closed)) {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .main-panel,
    .sidebar,
    .auth-card,
    .auth-copy,
    .panel,
    .stat-card {
        padding: 20px;
    }

    .stats-grid,
    .form-grid,
    .check-grid {
        grid-template-columns: 1fr;
    }
}

/* ACMS branded operations desktop - navy base, red control accents. */
:root { --bg:#dce1ec; --bg-alt:#f8f9fc; --ink:#15233b; --muted:#52617a; --line:#bdc7d9; --accent:#d71939; --accent-soft:#fde7eb; --accent-deep:#97142a; --danger:#c81331; --success:#1b9a63; --shadow:0 8px 22px rgba(20,34,58,.18); }
body { font-family:"Segoe UI",Tahoma,Arial,sans-serif; background:linear-gradient(135deg,#c9d2e3,#edf0f6 45%,#ccd5e5); }
.app-shell { grid-template-columns:240px 1fr; }
.sidebar { padding:20px 15px; gap:16px; background:linear-gradient(180deg,#263859 0%,#172641 48%,#111d33 100%); border-right:4px solid #b6122c; }
.sidebar h1,.auth-copy h1,.page-header h2,.panel h3,.auth-card h2 { font-family:"Segoe UI",Tahoma,Arial,sans-serif; font-weight:700; }
.sidebar .eyebrow { color:#f2b6c1; }.sidebar-copy { font-size:.88rem; line-height:1.45; }
.nav-links { gap:2px; }.nav-links a { padding:11px 13px; border-radius:4px; background:transparent; border-left:3px solid transparent; font-size:.9rem; }
.nav-links a.is-active,.nav-links a:hover { background:linear-gradient(90deg,rgba(216,25,57,.85),rgba(216,25,57,.16)); border-color:#ff6278; }
.main-panel { padding:26px; }.command-bar { margin:-26px -26px 22px; padding:11px 22px; background:linear-gradient(180deg,#384c70,#202e4b); box-shadow:inset 0 -1px rgba(255,255,255,.2); }
.command-actions a { border-radius:3px; }.command-actions a:first-child { background:#c91534; color:#fff; }.command-actions a:hover { background:#cb1838; }
.page-header { padding:4px 0 16px; }.page-header h2 { color:#1b2d4a; }.header-chip { padding:8px 12px; border-radius:4px; box-shadow:0 2px 6px rgba(20,34,58,.18); }
.stat-card,.panel,.auth-card,.auth-copy { border-radius:6px; border:1px solid #b9c5d8; background:linear-gradient(180deg,#fff,#f4f6fa); box-shadow:0 4px 12px rgba(30,45,72,.14); }
.stat-card,.panel,.auth-card,.auth-copy { padding:20px; }.stat-card { border-top:4px solid #263b60; }.stat-card:nth-child(2n) { border-top-color:#d71939; }
th { background:#263b60; color:#f7f9ff; font-size:.76rem; } th,td { border-color:#d6dce7; padding:11px 10px; } tbody tr:nth-child(even) { background:#f1f4f9; } tbody tr:hover { background:#fde9ed; }
.primary-button { background:linear-gradient(180deg,#e53450,#b80f2b); border:1px solid #8c0d23; border-radius:4px; box-shadow:inset 0 1px rgba(255,255,255,.35); }.ghost-button { border:1px solid #afbbce; background:linear-gradient(180deg,#fff,#e4e8f0); border-radius:4px; }.danger-button { border-radius:4px; }
.field input,.field select { border-radius:4px; padding:11px 12px; border-color:#aebbd0; }.field input:focus,.field select:focus { outline:2px solid #e94d63; border-color:#c91534; }
.console-shell { border-radius:5px; overflow:hidden; }.console-header { background:linear-gradient(180deg,#4d628c,#2b3e63 50%,#1d2d4a); }.console-toolbar { background:linear-gradient(180deg,#3c517a,#263b60); }.toolbar-action { border-radius:3px; }.toolbar-action:hover { background:#c91534; border-color:#8d0e25; }
.console-device { border-radius:4px; }.console-device.online { border-top-color:#16955c; }.console-device.offline { border-top-color:#d71939; }.console-icon { border-radius:3px; }.badge-success { background:#dff4e9; color:#0b7042; }.badge-danger { background:#fde1e6; color:#a40e26; }
.sidebar-user { border-radius:5px; border:1px solid rgba(255,255,255,.16); }.device-item,.job-item,.doc-item,.code-card,.pass-preview { border-radius:5px; }
@media (max-width:980px) { .app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-top:4px solid #b6122c}.command-bar{margin:-20px -20px 20px}.main-panel{padding:20px} }


/* =========================================================
   SIDEBAR LAYOUT FIX
   Keeps sidebar navigation structurally stable across pages.
   Avoids page-dependent flex rules that can push links into
   the main content area.
   ========================================================= */

/* Base desktop layout */
.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: stretch;
}

.sidebar {
    width: auto;
    min-width: 0;
    min-height: 100vh;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    overflow: hidden;
    position: relative;
    z-index: 20;
}

.sidebar > * {
    width: 100%;
    min-width: 0;
}

.sidebar h1 {
    font-size: 1.02rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sidebar-copy {
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.nav-links a {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 4px;
    font-size: .82rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.sidebar-user {
    margin-top: auto;
    width: 100%;
    min-width: 0;
    padding: 10px;
    overflow-wrap: anywhere;
}

.main-panel {
    width: 100%;
    min-width: 0;
    padding: 22px;
    overflow-x: hidden;
}

/* Top navigation remains responsive without affecting sidebar */
.command-bar {
    margin: -22px -22px 18px;
    padding: 9px 14px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 40;
    flex-wrap: nowrap;
}

.command-brand {
    flex: 0 0 auto;
    min-width: 0;
}

.command-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.command-actions a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 7px 9px;
    font-size: .79rem;
}

/* Medium screens:
   keep a real vertical sidebar instead of turning it into
   a horizontal strip. */
@media (max-width: 1100px) {
    .app-shell {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .sidebar {
        padding: 14px 8px;
    }

    .sidebar-copy {
        display: none;
    }

    .nav-links a {
        padding: 8px;
        font-size: .78rem;
    }

    .sidebar-user {
        font-size: .74rem;
    }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-grid,
    .split-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: 145px minmax(0, 1fr);
    }

    .sidebar {
        min-height: 100vh;
        padding: 12px 7px;
        border-right: 3px solid #b6122c;
        border-top: 0;
    }

    .sidebar h1 {
        font-size: .9rem;
    }

    .sidebar .eyebrow,
    .sidebar-copy {
        display: none;
    }

    .nav-links {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-links a {
        flex: none !important;
        width: 100% !important;
        white-space: normal !important;
        font-size: .74rem;
        padding: 7px 6px;
    }

    .sidebar-user {
        display: block;
        font-size: .7rem;
        padding: 8px;
    }

    .main-panel {
        padding: 14px;
    }

    .command-bar {
        margin: -14px -14px 14px;
        padding: 8px 10px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phone:
   stack sidebar above content only when the screen is genuinely
   too narrow for a side-by-side layout. */
@media (max-width: 620px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        width: 100%;
        min-height: auto;
        padding: 10px;
        border-right: 0;
        border-bottom: 4px solid #b6122c;
    }

    .sidebar h1 {
        font-size: .95rem;
    }

    .nav-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .nav-links a {
        width: 100% !important;
        font-size: .76rem;
        text-align: center;
        padding: 8px 6px;
    }

    .sidebar-user {
        display: none;
    }

    .main-panel {
        padding: 10px;
    }

    .command-bar {
        margin: -10px -10px 12px;
    }

    .stats-grid,
    .form-grid,
    .check-grid {
        grid-template-columns: 1fr;
    }
}

/* Critical reset:
   neutralizes the earlier page-sensitive mobile selector
   ".sidebar > div:first-child { display:flex; ... }" */
@media (max-width: 900px) {
    .sidebar > div:first-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .sidebar > div:first-child > * {
        max-width: 100%;
    }
}