:root,
html[data-theme="light"],
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #040507;
    --panel: #090c11;
    --panel-strong: #0b0f15;
    --line: #202632;
    --line-strong: #4e47c4;
    --text: #eef2f7;
    --muted: #7f8b9d;
    --accent: #5f57e8;
    --accent-dark: #4540b5;
    --accent-soft: rgba(95, 87, 232, .12);
    --good: #48ce94;
    --warn: #e8b35b;
    --bad: #ef6b7b;
    --archived: #687487;
    --shadow: none;
    --shadow-soft: none;
    --body-bg: #040507;
    --input-bg: #080b10;
    --code-bg: #07090d;
    --row-bg: #0b0f15;
    --utility-bg: #070a0e;
}

body { background: #040507 !important; color: var(--text); }
body::before, body::after { display: none !important; }
.app-shell { grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
    padding: 22px 16px;
    background: #07080b !important;
    border-right: 1px solid #1c222c !important;
    box-shadow: none !important;
}
.brand { padding: 5px 9px 18px; border-bottom: 1px solid #1b2029; }
.brand-mark { padding: 4px 0 !important; background: transparent !important; }
.brand-logo { width: 178px; max-height: 50px; filter: none !important; }
.nav-section + .nav-section { margin-top: 20px; }
.nav-section-label { color: #515d70; padding: 0 10px 5px; }
.nav-link {
    min-height: 42px;
    padding: 10px 10px 10px 38px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #8792a2;
    background: transparent !important;
}
.nav-link::before { left: 11px; color: #59677a; }
.nav-link:hover { color: #fff; background: #0d1118 !important; }
.nav-link.active {
    color: #fff;
    background: #10131d !important;
    border-color: #1f2633;
    box-shadow: inset 2px 0 #5f57e8 !important;
}
.nav-link.active::before { color: #6e66f5; text-shadow: none !important; }
.nav-link[aria-current="page"] .nav-title::after { color: #7169ff; }
.app-version { color: #444f60; }
.content { padding: 0 28px 32px; overflow: visible; }
.launch-breadcrumbs { margin-top: 14px; }
.utility-bar {
    top: 0;
    min-height: 58px;
    margin: 0 0 20px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #1c222c;
    border-radius: 0;
    background: #040507 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.utility-location::before { background: #48ce94; box-shadow: none; }
.utility-title { letter-spacing: 0; text-transform: none; }
.utility-status { color: #667285; }
.hero, .panel, .module-card, .toggle-card, .filter-card, .summary-chip, .metric-card, .alert-item, .alert-card,
.command-card, .command-stat, .security-hero, .security-stat, .sec-panel, .sec-metrics {
    background: #090c11 !important;
    border: 1px solid #202632 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.hero { padding: 20px 22px; }
.hero-kicker { color: #7169ff !important; letter-spacing: .12em; }
.hero h1 { font-size: 28px; color: #eef2f7; }
.panel { padding: 17px; }
.panel-head { border-color: #202632; }
.button, button {
    min-height: 35px;
    border: 1px solid #4e47c4 !important;
    border-radius: 5px !important;
    color: #f3f2ff !important;
    background: #191730 !important;
    box-shadow: none !important;
}
.button:hover, button:hover { transform: none !important; filter: none !important; background: #211e43 !important; border-color: #6e66f5 !important; }
.button.secondary, button.secondary, .button.ghost, button.ghost {
    color: #bdc6d2 !important;
    background: #0b1017 !important;
    border-color: #303947 !important;
}
.button.danger, button.danger { color: #ffc0c8 !important; background: #241216 !important; border-color: #74313c !important; }
input, textarea, select {
    color: #e1e6ed !important;
    background: #080b10 !important;
    border: 1px solid #303947 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}
input:hover, textarea:hover, select:hover { border-color: #455166 !important; }
input:focus, textarea:focus, select:focus { border-color: #5f57e8 !important; box-shadow: 0 0 0 2px rgba(95,87,232,.18) !important; }
.table-wrap, .tab-link, .legend-item, .stat-card, .stats-strip.compact .stat-card,
.history-row, .quick-item, .filter-box, .empty, .placeholder {
    background: #0b0f15 !important;
    border-color: #202632 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
th { color: #727e90 !important; background: #080b10 !important; }
td, th { border-color: #202632 !important; }
tbody tr:hover td { background: #0d1219 !important; }
.router-row.state-online td, .router-row.state-offline td, .router-row.state-archived td { background: #0b0f15 !important; }
.filter-box summary { background: #0d1118 !important; }
.filter-box summary::after { color: #7169ff; }
.count-pill, .chip, .tag { border-radius: 4px !important; }
.chip-good { color: #48ce94 !important; background: rgba(72,206,148,.07) !important; border-color: rgba(72,206,148,.28) !important; }
.chip-warn { color: #e8b35b !important; background: rgba(232,179,91,.07) !important; border-color: rgba(232,179,91,.28) !important; }
.chip-bad { color: #ef6b7b !important; background: rgba(239,107,123,.07) !important; border-color: rgba(239,107,123,.28) !important; }
.command-stat::after, .security-hero::after { display: none !important; }
.command-stat strong { text-shadow: none !important; }
.dashboard-avatar { border-radius: 6px !important; color: #7169ff !important; background: #111421 !important; box-shadow: none !important; }
.donut::after { background: #090c11 !important; box-shadow: inset 0 0 0 1px #202632 !important; }
.donut-slice { filter: none !important; }
.sec-header, .sec-panel-head, .sec-row, .sec-item { border-color: #202632 !important; }
.sec-action { background: #0c1018 !important; }

/* Login uses the same enterprise visual language without changing its form. */
body.login-enterprise { background: #030405 !important; }
body.login-enterprise::before, body.login-enterprise::after { display: none !important; }
body.login-enterprise .login-shell {
    grid-template-columns: 1fr;
    min-height: 100vh;
}
body.login-enterprise .network-story {
    display: none;
}
body.login-enterprise .network-story::before {
    content: "WIFIPLEX  /  NETWORK OPERATIONS";
    position: absolute;
    top: 42px;
    left: 48px;
    color: #687487;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
}
body.login-enterprise .network-story::after {
    content: "Secure infrastructure access\A\A Router fleet management\A Security intelligence\A Controlled automation\A Audited operations";
    white-space: pre;
    position: absolute;
    left: 48px;
    bottom: 64px;
    padding-left: 18px;
    border-left: 2px solid #5f57e8;
    color: #788598;
    font-size: 13px;
    line-height: 2;
}
body.login-enterprise .login-side {
    width: 100%;
    min-height: 100vh;
    padding: clamp(28px, 5vw, 64px) 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #07080b;
}
body.login-enterprise .login-side::before { display: none; }
body.login-enterprise .brand { width: min(520px, 100%); border: 0; margin: 0 auto 24px; text-align: center; }
body.login-enterprise .wordmark { width: min(340px, 72vw); filter: grayscale(1) brightness(2.2) !important; }
body.login-enterprise .product-name { color: #eef2f7; letter-spacing: .34em; }
body.login-enterprise .product-name::before, body.login-enterprise .product-name::after { background: #394150; }
body.login-enterprise .product-subtitle { color: #687487; }
body.login-enterprise .login-card {
    width: min(520px, 100%);
    padding: clamp(27px, 3vw, 40px);
    border: 1px solid #252d3a;
    border-radius: 8px;
    background: #0b0f15;
    box-shadow: none;
    backdrop-filter: none;
}
body.login-enterprise .login-card h1 { font-size: clamp(28px, 3vw, 38px); }
body.login-enterprise .intro { color: #7f8b9d; }
body.login-enterprise label { color: #aeb8c5; font-size: 12px; }
body.login-enterprise input { min-height: 52px; padding: 12px 48px; }
body.login-enterprise .field-icon, body.login-enterprise .password-toggle { color: #687487; }
body.login-enterprise .password-toggle:hover { color: #eef2f7; background: #141a23 !important; }
body.login-enterprise .sign-in { min-height: 52px; background: #191730 !important; border-color: #4e47c4 !important; font-size: 14px; }
body.login-enterprise .sign-in:hover { background: #211e43 !important; }
body.login-enterprise .security-note { color: #687487; }
body.login-enterprise .security-note svg { color: #48ce94; }
body.login-enterprise .version { color: #4f5a6a; }

/* Operations Teal — restrained network-operations styling inspired by the supplied reference. */
html[data-ui-theme="operations"] {
    --bg: #0e1a1e;
    --panel: #122126;
    --panel-strong: #15272b;
    --line: #29403f;
    --line-strong: #65bfa8;
    --text: #edf7f4;
    --muted: #91aaa7;
    --accent: #79d6bb;
    --accent-dark: #4ea991;
    --accent-soft: rgba(121, 214, 187, .11);
    --good: #79d6bb;
    --warn: #e6be72;
    --bad: #ef7f88;
    --archived: #728c8a;
    --body-bg: #0e1a1e;
    --input-bg: #101d21;
    --code-bg: #0b171a;
    --row-bg: #122126;
    --utility-bg: #101d21;
}
html[data-ui-theme="operations"] body { background: #0e1a1e !important; }
html[data-ui-theme="operations"] .sidebar { background: #0c181b !important; border-right-color: #29403f !important; }
html[data-ui-theme="operations"] .brand { border-bottom-color: #29403f; }
html[data-ui-theme="operations"] .nav-section-label { color: #647d7a; }
html[data-ui-theme="operations"] .nav-link { color: #9bb3b0; }
html[data-ui-theme="operations"] .nav-link::before { color: #66827e; }
html[data-ui-theme="operations"] .nav-link:hover { color: #f3fffc; background: #14262a !important; }
html[data-ui-theme="operations"] .nav-link.active {
    color: #effcf8;
    background: #18302d !important;
    border-color: #31504a;
    box-shadow: inset 2px 0 #79d6bb !important;
}
html[data-ui-theme="operations"] .nav-link.active::before,
html[data-ui-theme="operations"] .nav-link[aria-current="page"] .nav-title::after { color: #79d6bb; }
html[data-ui-theme="operations"] .utility-bar { background: #0e1a1e !important; border-bottom-color: #29403f; }
html[data-ui-theme="operations"] .utility-location::before { background: #79d6bb; }
html[data-ui-theme="operations"] .hero,
html[data-ui-theme="operations"] .panel,
html[data-ui-theme="operations"] .module-card,
html[data-ui-theme="operations"] .toggle-card,
html[data-ui-theme="operations"] .filter-card,
html[data-ui-theme="operations"] .summary-chip,
html[data-ui-theme="operations"] .metric-card,
html[data-ui-theme="operations"] .alert-item,
html[data-ui-theme="operations"] .alert-card,
html[data-ui-theme="operations"] .command-card,
html[data-ui-theme="operations"] .command-stat,
html[data-ui-theme="operations"] .security-hero,
html[data-ui-theme="operations"] .security-stat,
html[data-ui-theme="operations"] .sec-panel,
html[data-ui-theme="operations"] .sec-metrics { background: #122126 !important; border-color: #29403f !important; }
html[data-ui-theme="operations"] .button,
html[data-ui-theme="operations"] button { color: #09201a !important; background: #79d6bb !important; border-color: #79d6bb !important; }
html[data-ui-theme="operations"] .button:hover,
html[data-ui-theme="operations"] button:hover { background: #8be2c9 !important; border-color: #8be2c9 !important; }
html[data-ui-theme="operations"] .button.secondary,
html[data-ui-theme="operations"] button.secondary,
html[data-ui-theme="operations"] .button.ghost,
html[data-ui-theme="operations"] button.ghost { color: #c1d4d1 !important; background: #132328 !important; border-color: #35504f !important; }
html[data-ui-theme="operations"] .button.danger,
html[data-ui-theme="operations"] button.danger { color: #ffd1d5 !important; background: #2a171b !important; border-color: #7a3b44 !important; }
html[data-ui-theme="operations"] input,
html[data-ui-theme="operations"] textarea,
html[data-ui-theme="operations"] select { color: #e5f3ef !important; background: #101d21 !important; border-color: #35504f !important; }
html[data-ui-theme="operations"] input:focus,
html[data-ui-theme="operations"] textarea:focus,
html[data-ui-theme="operations"] select:focus { border-color: #79d6bb !important; box-shadow: 0 0 0 2px rgba(121,214,187,.15) !important; }
html[data-ui-theme="operations"] .table-wrap,
html[data-ui-theme="operations"] .tab-link,
html[data-ui-theme="operations"] .legend-item,
html[data-ui-theme="operations"] .stat-card,
html[data-ui-theme="operations"] .stats-strip.compact .stat-card,
html[data-ui-theme="operations"] .history-row,
html[data-ui-theme="operations"] .quick-item,
html[data-ui-theme="operations"] .filter-box,
html[data-ui-theme="operations"] .empty,
html[data-ui-theme="operations"] .placeholder { background: #122126 !important; border-color: #29403f !important; }
html[data-ui-theme="operations"] th { color: #839b98 !important; background: #0f1c20 !important; }
html[data-ui-theme="operations"] td,
html[data-ui-theme="operations"] th,
html[data-ui-theme="operations"] .sec-header,
html[data-ui-theme="operations"] .sec-panel-head,
html[data-ui-theme="operations"] .sec-row,
html[data-ui-theme="operations"] .sec-item { border-color: #29403f !important; }
html[data-ui-theme="operations"] tbody tr:hover td { background: #17292d !important; }
html[data-ui-theme="operations"] .router-row.state-online td,
html[data-ui-theme="operations"] .router-row.state-offline td,
html[data-ui-theme="operations"] .router-row.state-archived td { background: #122126 !important; }
html[data-ui-theme="operations"] .hero-kicker,
html[data-ui-theme="operations"] .sec-eyebrow,
html[data-ui-theme="operations"] .sec-links a { color: #79d6bb !important; }
html[data-ui-theme="operations"] .sec-page {
    --surface: #122126;
    --line: #29403f;
    --text: #edf7f4;
    --muted: #91aaa7;
    --purple: #79d6bb;
    --blue: #78bde1;
    --green: #79d6bb;
}
html[data-ui-theme="operations"] .sec-item:hover { background: #17292d; }
html[data-ui-theme="operations"] .sec-action { background: #132428 !important; }
html[data-ui-theme="operations"] body.login-enterprise { background: #0c181b !important; }
html[data-ui-theme="operations"] body.login-enterprise .network-story { display: none; }
html[data-ui-theme="operations"] body.login-enterprise .login-side { background: #0c181b; }
html[data-ui-theme="operations"] body.login-enterprise .login-card { background: #122126; border-color: #35504f; }
html[data-ui-theme="operations"] body.login-enterprise .sign-in { color: #09201a !important; background: #79d6bb !important; border-color: #79d6bb !important; }
html[data-ui-theme="operations"] body.login-enterprise .security-note svg { color: #79d6bb; }

.theme-control select { min-width: 174px; }
.operations-brandline, .operations-ready { display: none; }

/* The alternate theme has its own console layout; the Enterprise layout above is untouched. */
html[data-ui-theme="operations"] .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
html[data-ui-theme="operations"] .sidebar {
    width: 250px;
    padding: 0 16px 18px;
    background: #0c181b !important;
}
html[data-ui-theme="operations"] .sidebar .brand {
    min-height: 106px;
    padding: 23px 6px 19px;
    display: flex;
    align-items: center;
}
html[data-ui-theme="operations"] .sidebar .brand-header {
    width: 100%;
    display: block;
}
html[data-ui-theme="operations"] .sidebar .brand-topline { display: none; }
html[data-ui-theme="operations"] .sidebar .brand-mark {
    display: flex;
    align-items: center;
    width: 150px;
    min-height: 32px;
    overflow: visible;
}
html[data-ui-theme="operations"] .sidebar .brand-logo { width: 146px; max-width: 100%; transform: none; }
html[data-ui-theme="operations"] .sidebar .brand-copy { min-width: 0; margin-top: 8px; }
html[data-ui-theme="operations"] .sidebar .brand-title { margin: 0; font-size: 15px; line-height: 1.15; letter-spacing: -.01em; }
html[data-ui-theme="operations"] .sidebar .brand-title span { display: inline; }
html[data-ui-theme="operations"] .sidebar .brand-title-secondary { margin-left: 4px; color: #edf7f4; }
html[data-ui-theme="operations"] .sidebar .operations-brandline {
    display: block;
    margin: 5px 0 0;
    color: #79d6bb;
    font-size: 9px;
    letter-spacing: .055em;
}
html[data-ui-theme="operations"] .nav-group { margin-top: 18px; gap: 0; }
html[data-ui-theme="operations"] .nav-section + .nav-section { margin-top: 25px; }
html[data-ui-theme="operations"] .nav-section-label { padding: 0 12px 8px; font-size: 9px; letter-spacing: .13em; }
html[data-ui-theme="operations"] .nav-link {
    min-height: 42px;
    margin: 2px 0;
    padding: 10px 11px 10px 41px;
    border-radius: 7px;
}
html[data-ui-theme="operations"] .nav-link::before { left: 14px; }
html[data-ui-theme="operations"] .nav-link[aria-current="page"] .nav-title::after { content: "Active"; }
html[data-ui-theme="operations"] .app-version { padding-left: 11px; color: #536c69; }
html[data-ui-theme="operations"] .content { padding: 0 30px 36px; }
html[data-ui-theme="operations"] .utility-bar {
    min-height: 70px;
    margin: 0 -30px 21px;
    padding: 12px 30px;
    background: #101d21 !important;
    border-bottom: 1px solid #29403f;
}
html[data-ui-theme="operations"] .launch-breadcrumbs { margin-top: 12px; }
html[data-ui-theme="operations"] .utility-title { font-size: 14px; font-weight: 750; }
html[data-ui-theme="operations"] .operations-ready {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9adfc9;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
html[data-ui-theme="operations"] .operations-ready i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #79d6bb;
}
html[data-ui-theme="operations"] .theme-control select { min-width: 154px; }
html[data-ui-theme="operations"] .hero { padding: 23px 25px; }
html[data-ui-theme="operations"] .hero h1 { font-size: 27px; }
html[data-ui-theme="operations"] .panel { padding: 18px; }

/* Remove hard-coded Midnight purple from the Operations dashboard. */
html[data-ui-theme="operations"] .dashboard-avatar {
    color: #79d6bb !important;
    background: #132a29 !important;
    border-color: #3e756b !important;
}
html[data-ui-theme="operations"] .command-stat:nth-child(3) {
    --stat-color: #93aaa7 !important;
    --stat-glow: transparent !important;
}
html[data-ui-theme="operations"] .command-stat:nth-child(4) {
    --stat-color: #79d6bb !important;
    --stat-glow: transparent !important;
}
html[data-ui-theme="operations"] .command-stat-head { color: #9bb3b0; }
html[data-ui-theme="operations"] .command-stat small,
html[data-ui-theme="operations"] .command-card-head span,
html[data-ui-theme="operations"] .quick-item small,
html[data-ui-theme="operations"] .donut-center span { color: #78918e; }
html[data-ui-theme="operations"] .command-card-head { border-bottom-color: #29403f; }
html[data-ui-theme="operations"] .donut::after {
    background: #0b171a !important;
    border-color: #35504f !important;
    box-shadow: none !important;
}
html[data-ui-theme="operations"] .donut-slice {
    stroke: #0b171a;
    filter: none;
}
html[data-ui-theme="operations"] .legend-item:last-child .swatch { background: #79d6bb !important; }
html[data-ui-theme="operations"] .quick-icon {
    color: #79d6bb;
    background: rgba(121,214,187,.10);
}
html[data-ui-theme="operations"] .quick-item a { color: #79d6bb; }
html[data-ui-theme="operations"] .count-pill { color: #b8ceca; border-color: #466460; }

@media (max-width: 1180px) {
    html[data-ui-theme="operations"] .app-shell { grid-template-columns: 1fr; }
    html[data-ui-theme="operations"] .sidebar { width: auto; }
    html[data-ui-theme="operations"] .sidebar .brand { min-height: auto; }
}
@media (max-width: 760px) {
    html[data-ui-theme="operations"] .content { padding: 0 14px 26px; }
    html[data-ui-theme="operations"] .utility-bar { margin: 0 -14px 16px; padding: 12px 14px; }
    html[data-ui-theme="operations"] .operations-ready { display: none; }
    .theme-control select { min-width: 0; }
}

@media (max-width: 1180px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
}
@media (max-width: 980px) {
    body.login-enterprise .login-shell { grid-template-columns: 1fr; }
    body.login-enterprise .network-story { display: none; }
}