:root {
    --bg: #f7f9fc;
    --panel: #ffffff;
    --line: #e7edf5;
    --line-strong: #d8e2ee;
    --text: #182333;
    --muted: #7a8798;
    --blue: #2f86ff;
    --blue-soft: #eef6ff;
    --purple: #8158d6;
    --purple-soft: #f5f1ff;
    --orange: #e89824;
    --orange-soft: #fff6e8;
    --red: #ef4b5f;
    --red-soft: #fff0f2;
    --green: #20b978;
    --green-soft: #ecfbf4;
    --slate: #56657a;
    --shadow: 0 16px 36px rgba(31, 45, 61, 0.06);
    --radius: 14px;
    --radius-sm: 8px;
}

/* Project delivery and recurring operations */
.project-module-page .dashboard-workspace,
.maintenance-module-page .dashboard-workspace { gap: 18px; }

.project-command-bar,
.project-detail-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #d6e4f1;
    border-radius: 8px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 28px rgba(32,72,111,.08);
}
.project-command-bar > div { display: grid; gap: 3px; }
.project-command-bar strong { color: #082f63; font-size: .92rem; }
.project-command-bar span { color: #55728f; font-size: .72rem; }

.project-metric-grid,
.project-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}
.project-metric-grid article,
.project-detail-metrics article {
    min-height: 112px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 17px 18px;
    border: 1px solid #d8e6f2;
    border-top: 2px solid #1685e8;
    border-radius: 8px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 10px 24px rgba(26,71,112,.07);
}
.project-metric-grid article > span,
.project-detail-metrics article > span { color: #55718e; font-size: .7rem; font-weight: 700; }
.project-metric-grid article > strong,
.project-detail-metrics article > strong { color: #082f63; font-size: 1.45rem; line-height: 1; }
.project-metric-grid article > small,
.project-detail-metrics article > small { color: #607b96; font-size: .66rem; }
.project-metric-grid article.success,
.project-detail-metrics article.success { border-top-color: #22b77b; }
.project-metric-grid article.warning,
.project-detail-metrics article.warning { border-top-color: #f2b632; }
.project-metric-grid article.danger,
.project-detail-metrics article.danger { border-top-color: #e34858; }

.project-filter-heading { align-items: end !important; }
.project-filter-heading h2 { margin: 0; }
.project-filter-heading p { margin: 4px 0 0; color: #5e7892; font-size: .68rem; }
.project-filters { display: grid; grid-template-columns: repeat(2,minmax(180px,240px)); gap: 10px; }
.project-filters label { display: grid; gap: 5px; }
.project-filters select { min-height: 38px !important; }

.project-portfolio-list { display: grid; gap: 8px; }
.project-portfolio-row {
    display: grid;
    grid-template-columns: minmax(180px,1.25fr) minmax(160px,1fr) minmax(88px,.45fr) minmax(115px,.65fr) minmax(90px,.5fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 14px;
    border: 1px solid #dce8f3;
    border-radius: 7px;
    background: #fff;
}
.project-portfolio-row:hover { border-color: #9bc8ee; box-shadow: 0 8px 20px rgba(25,91,151,.08); }
.project-identity { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; }
.project-identity > span { padding: 6px 8px; color: #086dcc; border-radius: 5px; background: #e7f3fd; font-size: .64rem; font-weight: 900; }
.project-identity div,
.project-meta-cell { display: grid; gap: 4px; min-width: 0; }
.project-identity strong { overflow: hidden; color: #082f63; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.project-identity small,
.project-meta-cell small,
.project-progress-cell small { color: #617b96; font-size: .64rem; }
.project-meta-cell > span,
.project-progress-cell span { color: #69839c; font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.project-meta-cell strong { color: #133b66; font-size: .73rem; }
.project-progress-cell { display: grid; gap: 7px; }
.project-progress-cell > div { display: flex; justify-content: space-between; gap: 10px; }
.project-progress-cell > div strong { color: #0a6fca; font-size: .72rem; }
.project-progress-cell > i,
.project-progress-hero > i,
.project-phase header > i { height: 7px; overflow: hidden; border-radius: 999px; background: #e4edf6; }
.project-progress-cell em,
.project-progress-hero em,
.project-phase header em { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#23bc82,#138cff); }
.text-danger { color: #c52f46 !important; font-weight: 800; }

.project-dialog { width: min(760px,calc(100vw - 32px)) !important; }
.project-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.project-form-grid label { display: grid; gap: 6px; }
.project-form-grid .span-two { grid-column: 1 / -1; }
.project-template-note { display: grid; gap: 3px; padding: 12px 14px; color: #174c7c; border: 1px solid #cfe3f5; border-radius: 6px; background: #eef7ff; }
.project-template-note strong { font-size: .72rem; }
.project-template-note span { color: #5b7691; font-size: .65rem; }

.project-detail-command { min-height: 58px; padding: 10px 14px; }
.project-detail-title { display: flex; align-items: center; justify-content: center; gap: 12px; color: #617b96; font-size: .68rem; }
.project-detail-title span { color: #0a72d0; font-weight: 900; }
.project-detail-title strong { color: #0b315d; }
.project-progress-hero { grid-column: span 1; grid-template-columns: minmax(0,1fr); }
.project-progress-hero > div { display: grid; gap: 4px; }
.project-progress-hero > i { width: 100%; }

.project-detail-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(260px,1fr); gap: 16px; align-items: start; }
.project-workstream,
.project-side-panel { display: grid; gap: 16px; }
.project-side-panel .module-card-shell p { margin: 0; color: #516e8b; font-size: .72rem; line-height: 1.65; }
.project-side-panel dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px 14px; margin: 0; }
.project-side-panel dt { color: #6a829a; font-size: .65rem; }
.project-side-panel dd { margin: 0; color: #103960; font-size: .7rem; font-weight: 800; text-align: right; }
.project-phase-stack { display: grid; gap: 12px; }
.project-phase { overflow: hidden; border: 1px solid #d9e6f2; border-radius: 7px; background: #fff; }
.project-phase > header { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(180px,1.3fr) 44px; align-items: center; gap: 14px; padding: 12px 14px; background: #f1f7fc; }
.project-phase header > div { display: grid; gap: 3px; }
.project-phase header strong { color: #0b3764; font-size: .76rem; }
.project-phase header small { color: #6a8299; font-size: .62rem; }
.project-phase header b { color: #0a72cc; font-size: .67rem; text-align: right; }
.project-task-list { display: grid; }
.project-task-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 138px; align-items: center; gap: 10px; min-height: 58px; padding: 9px 13px; border-bottom: 1px solid #e4ecf4; }
.project-task-row:last-child { border-bottom: 0; }
.project-task-row.is-complete { background: #f4fbf8; }
.project-task-row > div { display: grid; gap: 3px; }
.project-task-row strong { color: #173d64; font-size: .72rem; }
.project-task-row.is-complete strong { color: #66817a; text-decoration: line-through; }
.project-task-row small { color: #698198; font-size: .61rem; }
.project-task-row select { min-height: 34px !important; padding: 6px 8px !important; font-size: .66rem; }
.task-check { width: 28px; height: 28px; position: relative; display: block; }
.task-check input { position: absolute; opacity: 0; }
.task-check span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #b8cce0; border-radius: 5px; background: #fff; }
.task-check input:checked + span { border-color: #20af78; background: #20af78; }
.task-check input:checked + span::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
.project-stock-shell .table-subtext,
.table-subtext { display: block; margin-top: 3px; color: #71879d; font-size: .6rem; }
.stock-update-name { margin: 0; padding: 10px 12px; color: #0d477d; border-radius: 6px; background: #eef6fd; font-weight: 800; }
.device-status.warning { color: #8d6200 !important; background: #fff1c9 !important; }

@media (max-width: 1250px) {
    .project-portfolio-row { grid-template-columns: minmax(230px,1.3fr) minmax(210px,1fr) repeat(2,minmax(120px,.6fr)) auto; }
    .project-portfolio-row .project-meta-cell:nth-of-type(5) { display: none; }
    .project-detail-layout { grid-template-columns: 1fr; }
    .project-side-panel { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .project-metric-grid,.project-detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .project-filter-heading,.project-command-bar,.project-detail-command { align-items: stretch !important; flex-direction: column; }
    .project-filters,.project-form-grid { grid-template-columns: 1fr; width: 100%; }
    .project-form-grid .span-two { grid-column: auto; }
    .project-portfolio-row { grid-template-columns: 1fr; }
    .project-portfolio-row .project-meta-cell:nth-of-type(5) { display: grid; }
    .project-side-panel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .project-metric-grid,.project-detail-metrics { grid-template-columns: 1fr; }
    .project-task-row { grid-template-columns: 30px minmax(0,1fr); }
    .project-task-row select { grid-column: 2; }
    .project-phase > header { grid-template-columns: 1fr 42px; }
    .project-phase header > i { grid-column: 1 / -1; grid-row: 2; }
}

/* Network workflow additions: firmware modal, topology labels, and usage rankings. */
.app-dialog {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #c9dced;
    border-radius: 8px;
    background: #fff;
    color: #102f5a;
    box-shadow: 0 24px 70px rgba(18, 54, 92, .24);
}
.app-dialog::backdrop { background: rgba(10, 34, 65, .48); backdrop-filter: blur(3px); }
.firmware-schedule-form { display: grid; gap: 18px; padding: 24px; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-heading h2 { margin: 2px 0 0; color: #082f66; font-size: 22px; }
.modal-heading small { color: #0877d5; font-weight: 800; text-transform: uppercase; }
.modal-heading [data-close-modal] { width: 38px !important; min-width: 38px !important; padding: 0 !important; font-size: 22px !important; }
.modal-supporting-text { margin: 0; color: #526d8e; }
.firmware-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.firmware-modal-fields label { display: grid; gap: 7px; color: #173d6a; font-weight: 800; }
.firmware-modal-fields input { min-height: 44px; border: 1px solid #bdd4e8; border-radius: 6px; padding: 8px 11px; color: #102f5a; background: #fff; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.connection-type { display: inline-flex; margin: 0 8px 4px 0; padding: 4px 8px; border-radius: 5px; background: #e7f3ff; color: #076bc5; font-size: 11px; font-weight: 900; }
.connection-lan { background: #e8f5ef; color: #087a54; }
.client-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.usage-ranking-list { display: grid; gap: 8px; }
.usage-ranking-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #d8e5f0; border-radius: 6px; background: #fbfdff; text-decoration: none; color: inherit; }
.usage-ranking-row:hover { border-color: #1589eb; background: #eef6ff; }
.usage-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #e6f3ff; color: #0875d2; font-weight: 900; }
.usage-ranking-row div { display: grid; gap: 3px; min-width: 0; }
.usage-ranking-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #12345e !important; }
.usage-ranking-row small { color: #617a98 !important; }
.usage-ranking-row i { position: relative; display: block; width: 100%; height: 5px; border-radius: 4px; background: #e6eef5; overflow: hidden; }
.usage-ranking-row i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--usage-width); border-radius: inherit; background: linear-gradient(90deg, #14bc8b, #1589eb); }
.usage-ranking-row b { color: #102f5a; white-space: nowrap; }
.firmware-status-completed { background: #dff5eb !important; color: #087953 !important; }
.firmware-status-failed, .firmware-status-cancelled { background: #fde8ec !important; color: #bd2945 !important; }
.firmware-status-in-progress, .firmware-status-command-sent { background: #e6f2ff !important; color: #096bc4 !important; }
.eol-placeholder { min-height: 330px; display: grid; place-items: center; }
@media (max-width: 900px) {
    .client-usage-grid, .firmware-modal-fields { grid-template-columns: 1fr; }
}

/* Login branding, feature icons, and integration health */
.login-redesign-page .login-hero-copy li::before {
    display: none;
}

.login-redesign-page .login-feature-icon {
    grid-row: 1 / span 2;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 22, 68, 0.24);
}

.login-redesign-page .login-feature-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: #087ce7;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-redesign-page .login-integration-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 470px;
    margin-top: 28px;
}

.login-redesign-page .login-integration-status {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 23, 67, 0.34);
    backdrop-filter: blur(8px);
}

.login-redesign-page .integration-state-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08), 0 0 16px currentColor;
}

.login-redesign-page .is-online .integration-state-dot {
    color: #35e58b;
    background: #35e58b;
}

.login-redesign-page .is-offline .integration-state-dot {
    color: #ff5367;
    background: #ff5367;
}

.login-redesign-page .login-integration-status b,
.login-redesign-page .login-integration-status small {
    display: block;
    color: #fff;
}

.login-redesign-page .login-integration-status b {
    font-size: 0.88rem;
}

.login-redesign-page .login-integration-status small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    line-height: 1.25;
}

@media (max-width: 700px) {
    .login-redesign-page .login-integration-checks {
        grid-template-columns: 1fr;
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
}

.dashboard-page,
.login-page {
    position: relative;
}

.dashboard-page::before,
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 14%, rgba(47, 134, 255, 0.09), transparent 18rem),
        linear-gradient(90deg, transparent 0 74px, rgba(47, 134, 255, 0.035) 74px 75px, transparent 75px),
        linear-gradient(0deg, transparent 0 74px, rgba(129, 88, 214, 0.03) 74px 75px, transparent 75px);
    opacity: 0.9;
    z-index: 0;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.app-frame {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
}

.app-sidebar {
    z-index: 2;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px 22px;
    border-right: 1px solid var(--line);
    background: var(--panel);
}

.brand-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    min-height: 138px;
    padding: 18px 14px;
    border: 1px solid rgba(47, 134, 255, 0.1);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(47, 134, 255, 0.08), rgba(32, 185, 120, 0.04)),
        #fbfdff;
    text-decoration: none;
}

.brand-block img {
    width: 100%;
    max-width: 100%;
    max-height: 108px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0;
}

.brand-block span {
    font-weight: 900;
    letter-spacing: 0;
    color: #14243a;
}

.brand-block small {
    color: var(--muted);
    font-size: 0.72rem;
}

.sidebar-nav {
    display: grid;
    gap: 5px;
}

.sidebar-nav a {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-radius: 8px;
    color: #596778;
    text-decoration: none;
    font-size: 0.92rem;
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
    color: var(--blue);
    background: var(--blue-soft);
}

.sidebar-nav span {
    width: 18px;
    color: currentColor;
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
}

.sidebar-nav b {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--red);
    font-size: 0.68rem;
}

.system-status {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
}

.system-status > span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #29d17d;
    box-shadow: 0 0 0 5px rgba(41, 209, 125, 0.14);
}

.system-status strong,
.system-status small {
    display: block;
}

.system-status strong {
    font-size: 0.78rem;
}

.system-status small {
    color: var(--muted);
    font-size: 0.72rem;
}

.dashboard-workspace {
    position: relative;
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 24px;
    isolation: isolate;
}

.dashboard-workspace::before {
    content: "";
    position: fixed;
    right: 34px;
    top: 92px;
    width: min(520px, 42vw);
    height: 260px;
    pointer-events: none;
    background: url("monarch-sidebar-logo.png") center / contain no-repeat;
    opacity: 0.035;
    z-index: -1;
}

.dashboard-workspace::after {
    content: "IT HUB";
    position: fixed;
    right: 38px;
    bottom: 22px;
    color: rgba(47, 134, 255, 0.055);
    font-size: clamp(3rem, 10vw, 9rem);
    font-weight: 950;
    letter-spacing: 0;
    pointer-events: none;
    z-index: -1;
}

.top-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}

.page-title h1 {
    margin: 0 0 4px;
    font-size: 1.55rem;
}

.page-title p {
    margin: 0;
    color: var(--muted);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-input {
    width: 320px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.search-input span {
    width: 13px;
    height: 13px;
    border: 2px solid #a8b4c4;
    border-radius: 50%;
    position: relative;
}

.search-input span::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 6px;
    height: 2px;
    border-radius: 999px;
    background: #a8b4c4;
    transform: rotate(45deg);
}

.search-input input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 0.86rem;
}

.icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--blue);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-pill div {
    display: grid;
    justify-items: end;
}

.user-pill strong {
    font-size: 0.82rem;
}

.user-pill small {
    color: var(--muted);
    font-size: 0.72rem;
}

.user-pill > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--purple);
    background: var(--purple-soft);
    font-size: 0.75rem;
    font-weight: 900;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.stat-tile,
.panel,
.login-box,
.login-preview {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.stat-tile {
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.stat-tile .tile-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 0.82rem;
    font-weight: 900;
}

.stat-tile strong {
    display: block;
    font-size: 1.45rem;
}

.stat-tile small {
    color: var(--muted);
    line-height: 1.25;
}

.stat-tile em {
    color: var(--red);
    font-style: normal;
}

.stat-tile.blue .tile-icon {
    color: var(--blue);
    background: var(--blue-soft);
}

.stat-tile.purple .tile-icon {
    color: var(--purple);
    background: var(--purple-soft);
}

.stat-tile.orange .tile-icon {
    color: var(--orange);
    background: var(--orange-soft);
}

.stat-tile.red .tile-icon {
    color: var(--red);
    background: var(--red-soft);
}

.stat-tile.green .tile-icon {
    color: var(--green);
    background: var(--green-soft);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.15fr) minmax(260px, 0.72fr) minmax(250px, 0.7fr);
    gap: 14px;
}

.panel {
    position: relative;
    padding: 16px;
    overflow: hidden;
}

.chart-panel::after,
.request-panel::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -58px;
    width: 220px;
    height: 110px;
    pointer-events: none;
    background: url("monarch-sidebar-logo.png") center / contain no-repeat;
    opacity: 0.035;
}

.service-panel::after,
.alert-panel::after,
.quick-panel::after,
.resources-panel::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -10px;
    width: 92px;
    height: 92px;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 45%, rgba(47, 134, 255, 0.08) 45% 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(47, 134, 255, 0.08) 45% 55%, transparent 55%);
    background-size: 18px 18px;
    opacity: 0.8;
    transform: rotate(8deg);
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.panel-heading a,
.panel-heading button {
    border: 0;
    color: var(--blue);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.chart-panel {
    min-height: 278px;
}

.health-chart {
    width: 100%;
    height: 210px;
    display: block;
}

.health-chart text {
    fill: var(--muted);
    font-size: 12px;
}

.chart-grid line {
    stroke: #edf2f8;
}

.chart-area {
    fill: url(#healthFill);
}

.chart-line {
    fill: none;
    stroke: #4a9dff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.72rem;
}

.service-list,
.compact-list {
    display: grid;
    gap: 10px;
}

.service-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.service-row > span,
.compact-row > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}

.service-row > span.warning,
.service-row > span.next-build,
.compact-row > span.warning {
    background: var(--orange);
}

.service-row > span.planned {
    background: #a8b4c4;
}

.service-row strong,
.service-row small {
    font-size: 0.82rem;
}

.service-row small.operational {
    color: var(--green);
}

.service-row small.warning,
.service-row small.next-build {
    color: var(--orange);
}

.service-row small.planned {
    color: var(--muted);
}

.compact-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.compact-row strong,
.compact-row small {
    display: block;
}

.compact-row strong {
    font-size: 0.82rem;
}

.compact-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.72rem;
}

.compact-row > span.critical {
    background: var(--red);
}

.compact-row > span.info {
    background: var(--blue);
}

.projects-panel {
    grid-column: span 2;
}

.project-table {
    display: grid;
}

.project-head,
.project-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 86px 86px 74px;
    gap: 12px;
    align-items: center;
}

.project-head {
    padding: 0 10px 9px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.project-row {
    min-height: 52px;
    padding: 10px;
    border-top: 1px solid var(--line);
    font-size: 0.84rem;
}

.project-row > span:first-child,
.project-row > span:last-child {
    color: var(--muted);
}

.priority,
.status {
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.priority.high {
    color: var(--red);
    background: var(--red-soft);
}

.priority.medium {
    color: var(--orange);
    background: var(--orange-soft);
}

.status {
    color: var(--blue);
    background: var(--blue-soft);
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.quick-grid a,
.quick-grid button {
    min-height: 70px;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    text-align: center;
    text-decoration: none;
    background: #fbfdff;
    font: inherit;
    cursor: pointer;
}

.quick-grid span {
    color: var(--purple);
    font-weight: 900;
    font-size: 0.8rem;
}

.quick-grid small {
    color: var(--muted);
    font-size: 0.7rem;
}

.resources-panel {
    grid-column: span 2;
}

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

.automation-list div {
    min-height: 82px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
}

.automation-list strong,
.automation-list small {
    display: block;
}

.automation-list small {
    margin-top: 7px;
    color: var(--muted);
    line-height: 1.35;
}

.module-launch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.module-launch-card {
    min-height: 150px;
    display: grid;
    align-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    background: #fbfdff;
    text-decoration: none;
}

.module-launch-card span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--blue);
    background: var(--blue-soft);
    font-weight: 950;
}

.module-launch-card.red span {
    color: var(--red);
    background: var(--red-soft);
}

.module-launch-card.orange span {
    color: var(--orange);
    background: var(--orange-soft);
}

.module-launch-card.green span {
    color: var(--green);
    background: var(--green-soft);
}

.module-launch-card.purple span {
    color: var(--purple);
    background: var(--purple-soft);
}

.module-launch-card strong,
.module-launch-card small {
    display: block;
}

.module-launch-card small,
.module-table-row small {
    color: var(--muted);
}

.module-table {
    display: grid;
}

.module-table-head,
.module-table-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 120px 120px 120px;
    gap: 12px;
    align-items: center;
}

.module-table-head {
    padding: 0 10px 9px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.module-table-row {
    min-height: 58px;
    padding: 10px;
    border-top: 1px solid var(--line);
    font-size: 0.84rem;
}

.module-table-row strong small,
.project-row strong small {
    display: block;
    margin-top: 4px;
    font-weight: 400;
}

.module-table-row .status.danger,
.status.danger {
    color: var(--red);
    background: var(--red-soft);
}

.network-device-table .module-table-head,
.network-device-table .module-table-row {
    grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.8fr) minmax(110px, 0.8fr) minmax(90px, 0.6fr) minmax(90px, 0.5fr);
}

.network-sites-panel {
    display: grid;
    gap: 14px;
}

.site-device-groups {
    display: grid;
    gap: 12px;
}

.site-device-group {
    border: 1px solid rgba(82, 139, 198, 0.24);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 26px rgba(31, 73, 113, 0.08);
}

.site-device-group summary {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.site-device-group summary::-webkit-details-marker {
    display: none;
}

.site-device-group summary::before {
    content: "+";
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--blue);
    border: 1px solid rgba(47, 127, 189, 0.24);
    background: rgba(232, 244, 253, 0.84);
    font-weight: 900;
}

.site-device-group[open] summary::before {
    content: "-";
}

.site-device-group summary > span:first-child {
    display: grid;
    gap: 3px;
    margin-right: auto;
}

.site-device-group summary strong {
    color: var(--text);
}

.site-device-group summary small,
.network-device-card span,
.network-device-card small {
    color: var(--muted);
    font-size: 0.76rem;
}

.site-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.site-metrics b,
.device-status {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    color: var(--green);
    background: var(--green-soft);
    font-size: 0.76rem;
    font-weight: 900;
}

.site-metrics b.danger,
.device-status.danger {
    color: var(--red);
    background: var(--red-soft);
}

.site-metrics b.neutral {
    color: #164a80;
    background: rgba(225, 240, 252, 0.96);
}

.device-status.good {
    color: #13825b;
    background: rgba(32, 185, 120, 0.18);
}

.network-filter-bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid rgba(82, 139, 198, 0.22);
    background: rgba(255, 255, 255, 0.7);
}

.network-filter-bar label {
    width: min(420px, 100%);
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.network-filter-bar select {
    min-height: 42px;
    font-size: 0.94rem;
    font-weight: 800;
    text-transform: none;
}

.network-scope-filter {
    align-items: end;
    margin-top: -2px;
    border-color: rgba(82, 139, 198, 0.28);
    background: rgba(255, 255, 255, 0.58);
}

.network-scope-filter label {
    width: min(520px, 100%);
}

.network-device-grid {
    display: grid;
    border: 1px solid rgba(82, 139, 198, 0.22);
    background: rgba(255, 255, 255, 0.58);
    overflow-x: auto;
}

.network-device-head,
.network-device-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) minmax(120px, 0.8fr) minmax(110px, 0.65fr) minmax(140px, 0.85fr) minmax(150px, 0.95fr) minmax(96px, 0.55fr);
    gap: 12px;
    align-items: center;
    min-width: 980px;
}

.network-device-head {
    padding: 11px 14px;
    color: var(--muted);
    border-bottom: 1px solid rgba(82, 139, 198, 0.22);
    background: rgba(232, 244, 253, 0.82);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.network-device-row {
    min-height: 58px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(82, 139, 198, 0.16);
    font-size: 0.84rem;
}

.network-device-row:last-child {
    border-bottom: 0;
}

.network-device-row.is-offline {
    background: rgba(199, 71, 88, 0.055);
}

.network-device-row strong,
.network-device-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.network-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(82, 139, 198, 0.22);
    background: rgba(255, 255, 255, 0.68);
}

.network-device-table-view {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    table-layout: fixed;
}

.network-device-table-view th,
.network-device-table-view td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(82, 139, 198, 0.18);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.network-device-table-view th {
    color: var(--muted);
    background: rgba(232, 244, 253, 0.86);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.network-device-table-view td {
    color: var(--text);
    font-size: 0.84rem;
}

.network-device-table-view tr:last-child td {
    border-bottom: 0;
}

.network-device-table-view tr.is-offline td {
    background: rgba(199, 71, 88, 0.055);
}

.network-device-table-view th:nth-child(1),
.network-device-table-view td:nth-child(1) {
    width: 28%;
}

.network-device-table-view th:nth-child(2),
.network-device-table-view td:nth-child(2) {
    width: 13%;
}

.network-device-table-view th:nth-child(3),
.network-device-table-view td:nth-child(3) {
    width: 11%;
}

.network-device-table-view th:nth-child(4),
.network-device-table-view td:nth-child(4) {
    width: 18%;
}

.network-device-table-view th:nth-child(5),
.network-device-table-view td:nth-child(5) {
    width: 20%;
}

.network-device-table-view th:nth-child(6),
.network-device-table-view td:nth-child(6) {
    width: 10%;
}

.site-device-list {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}

.network-device-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(150px, 0.8fr) minmax(90px, 0.6fr);
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(101, 147, 194, 0.2);
    background: rgba(255, 255, 255, 0.72);
}

.network-device-card.is-offline {
    border-color: rgba(199, 71, 88, 0.22);
    background: linear-gradient(90deg, rgba(199, 71, 88, 0.055), rgba(255, 255, 255, 0.76));
}

.network-device-card > div {
    min-width: 0;
}

.network-device-card strong,
.network-device-card small,
.network-device-card span {
    display: block;
}

.network-device-card strong {
    overflow-wrap: anywhere;
}

.empty-state {
    display: grid;
    gap: 4px;
    padding: 18px;
    border: 1px dashed rgba(82, 139, 198, 0.28);
    background: rgba(255, 255, 255, 0.64);
}

.resource-rings {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ring {
    --ring-color: var(--blue);
    min-height: 112px;
    display: grid;
    place-items: center;
    gap: 5px;
    position: relative;
}

.ring::before {
    content: "";
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--value) * 1%), #eef2f7 0);
    grid-area: 1 / 1;
}

.ring::after {
    content: "";
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    grid-area: 1 / 1;
}

.ring span {
    z-index: 1;
    grid-area: 1 / 1;
    font-weight: 900;
}

.ring small {
    color: var(--muted);
}

.ring.green {
    --ring-color: var(--green);
}

.ring.purple {
    --ring-color: var(--purple);
}

.ring.slate {
    --ring-color: var(--slate);
}

.request-panel {
    margin-bottom: 18px;
}

.workflow-line {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.workflow-line div {
    min-height: 84px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfdff;
}

.workflow-line span {
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 900;
}

.workflow-line strong,
.workflow-line small {
    display: block;
    margin-top: 5px;
}

.workflow-line small {
    color: var(--muted);
}

.workflow-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.workflow-actions a,
.button-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 9px;
    color: #fff;
    background: var(--blue);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.button-link.secondary {
    color: var(--blue);
    background: var(--blue-soft);
}

.danger-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    background: linear-gradient(135deg, #c74758, #a92d3f) !important;
    box-shadow: 5px 6px 0 rgba(199, 71, 88, 0.18);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.danger-button:hover,
.button-link:hover,
.form-actions button:hover,
.modal-form button[type="submit"]:hover,
.login-form button:hover {
    transform: translateY(-1px);
    filter: brightness(0.99);
}

.panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.network-action-button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(47, 127, 189, 0.32);
    color: #fff;
    background: linear-gradient(180deg, #3b91d4 0%, #2374b7 100%);
    box-shadow: 0 8px 18px rgba(35, 116, 183, 0.16);
}

.network-action-button.secondary {
    color: #174b7d;
    background: linear-gradient(180deg, #ffffff 0%, #e7f3fc 100%);
    box-shadow: 0 6px 14px rgba(43, 104, 164, 0.1);
}

.network-action-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(13, 32, 57, 0.42);
    backdrop-filter: blur(8px);
}

.loading-overlay[hidden] {
    display: none;
}

.loading-card {
    width: min(360px, calc(100vw - 40px));
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    border: 1px solid rgba(102, 145, 190, 0.34);
    border-radius: var(--radius);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 253, 0.94)),
        linear-gradient(105deg, transparent 0 76%, rgba(88, 189, 232, 0.08) 76.4% 84%, transparent 84.4%);
    box-shadow: 0 28px 70px rgba(13, 32, 57, 0.28);
}

.loading-card span {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(47, 127, 189, 0.18);
    border-top-color: #58bde8;
    border-radius: 50%;
    animation: hub-spin 0.9s linear infinite;
}

.loading-card strong {
    color: #10233b;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.loading-card small {
    color: var(--muted);
    text-align: center;
}

@keyframes hub-spin {
    to { transform: rotate(360deg); }
}

.app-message-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(13, 32, 57, 0.48);
    backdrop-filter: blur(9px);
}

.app-message-card {
    width: min(430px, 100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    border: 1px solid rgba(102, 145, 190, 0.34);
    border-radius: var(--radius);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 253, 0.94)),
        linear-gradient(105deg, transparent 0 76%, rgba(88, 189, 232, 0.08) 76.4% 84%, transparent 84.4%);
    box-shadow: 0 28px 70px rgba(13, 32, 57, 0.34);
}

.app-message-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #164a80;
    background: var(--blue-soft);
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
}

.app-message-copy {
    min-width: 0;
    text-align: center;
}

.app-message-card h2 {
    margin: 0 0 8px;
    color: #10233b;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-message-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.app-message-card.success {
    border-color: rgba(47, 174, 132, 0.35);
}

.app-message-card.success .app-message-icon {
    color: #176e56;
    background: var(--green-soft);
}

.app-message-card.error {
    border-color: rgba(199, 71, 88, 0.35);
}

.app-message-card.error .app-message-icon {
    color: #9e2537;
    background: var(--red-soft);
}

.app-message-card.warning {
    border-color: rgba(240, 183, 47, 0.42);
}

.app-message-card.warning .app-message-icon {
    color: #8a5b00;
    background: var(--orange-soft);
}

.app-message-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.app-message-actions button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    background: #2f7fbd;
    box-shadow: 5px 6px 0 rgba(156, 189, 222, 0.42);
    font-weight: 850;
    cursor: pointer;
}

.app-message-actions button.secondary {
    color: #164a80;
    background: rgba(225, 240, 252, 0.96);
    box-shadow: none;
}

.modal {
    width: min(680px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid rgba(102, 145, 190, 0.34);
    border-radius: var(--radius);
    color: var(--text);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 253, 0.94)),
        linear-gradient(105deg, transparent 0 76%, rgba(88, 189, 232, 0.08) 76.4% 84%, transparent 84.4%);
    box-shadow: 0 28px 70px rgba(13, 32, 57, 0.34);
}

.modal::backdrop {
    background: rgba(13, 32, 57, 0.42);
    backdrop-filter: blur(8px);
}

.modal-form {
    padding: 22px;
    display: grid;
    gap: 14px;
}

.modal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-heading h2 {
    margin: 0;
}

.modal-heading button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #164a80;
    background: rgba(225, 240, 252, 0.96);
    font-weight: 900;
}

label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 700;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    padding: 11px 12px;
    color: var(--text);
    background: #fff;
    outline: 0;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(47, 134, 255, 0.14);
}

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

.modal-form button[type="submit"],
.login-form button {
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--blue);
    font-weight: 850;
}

.form-error {
    margin: 0;
    color: var(--red);
}

.login-page {
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
}

.login-layout {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 18px;
}

.login-preview,
.login-box {
    padding: 32px;
}

.login-preview {
    min-height: 520px;
    display: grid;
    align-content: space-between;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(135deg, rgba(47, 134, 255, 0.08), rgba(32, 185, 120, 0.05)),
        #fff;
}

.login-preview::after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -80px;
    width: 520px;
    height: 220px;
    background: url("monarch-sidebar-logo.png") center / contain no-repeat;
    opacity: 0.055;
}

.login-preview img {
    width: 260px;
    max-width: 78%;
}

.login-preview h1 {
    margin: 18px 0 4px;
    font-size: 3rem;
}

.login-preview p,
.login-box p {
    color: var(--muted);
}

.preview-card {
    width: min(320px, 100%);
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
}

.preview-card span,
.preview-card strong,
.preview-card small {
    display: block;
}

.preview-card span {
    color: var(--muted);
    font-size: 0.8rem;
}

.preview-card strong {
    margin-top: 6px;
}

.preview-card small {
    margin-top: 4px;
    color: var(--green);
}

.login-box {
    align-self: center;
}

.login-box h2 {
    margin: 8px 0;
    font-size: 2rem;
}

.login-form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.section-kicker {
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
}

.module-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 82% 12%, rgba(47, 134, 255, 0.1), transparent 20rem),
        linear-gradient(90deg, transparent 0 74px, rgba(47, 134, 255, 0.035) 74px 75px, transparent 75px),
        linear-gradient(0deg, transparent 0 74px, rgba(129, 88, 214, 0.03) 74px 75px, transparent 75px),
        var(--bg);
}

.module-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0;
}

.module-hero {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
}

.module-hero-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.module-logo {
    min-height: 126px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    background: #fff;
    box-shadow: var(--shadow);
    text-decoration: none;
}

.module-logo img {
    width: 230px;
    max-width: 100%;
}

.module-logo span {
    font-weight: 950;
}

.module-hero h1 {
    margin: 4px 0 7px;
    font-size: 2rem;
}

.module-hero p {
    margin: 0;
    color: var(--muted);
}

.module-card-shell,
.receipt-sheet {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.module-card-shell,
.receipt-sheet {
    padding: 22px;
}

.notice {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
}

.notice.error {
    color: var(--red);
    background: var(--red-soft);
}

.notice.warning {
    color: #8a5b00;
    background: rgba(240, 183, 47, 0.16);
}

.notice.success {
    color: var(--green);
    background: var(--green-soft);
}

.notice p {
    margin: 0;
}

.request-form,
.review-form {
    display: grid;
    gap: 18px;
}

.form-section {
    display: grid;
    gap: 14px;
}

.form-section h2 {
    margin: 0;
    font-size: 1.05rem;
}

.checkbox-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.checkbox-row label {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--text);
    font-weight: 750;
}

.checkbox-row input {
    width: auto;
}

[hidden] {
    display: none !important;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.form-actions a {
    color: var(--blue);
    font-weight: 800;
    text-decoration: none;
}

.form-actions button {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    padding: 0 14px;
    color: #fff;
    background: var(--blue);
    font-weight: 850;
}

.receipt-sheet {
    position: relative;
    overflow: hidden;
}

.receipt-sheet::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -60px;
    width: 420px;
    height: 180px;
    pointer-events: none;
    background: url("monarch-sidebar-logo.png") center / contain no-repeat;
    opacity: 0.04;
}

.receipt-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.receipt-header img {
    width: 190px;
}

.receipt-header h1 {
    margin: 4px 0;
}

.receipt-header p {
    margin: 0;
    color: var(--muted);
}

.receipt-status,
.receipt-recommendation,
.receipt-notes {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
}

.receipt-status strong,
.receipt-status span,
.receipt-recommendation span,
.receipt-recommendation strong,
.receipt-notes span {
    display: block;
}

.receipt-status span,
.receipt-recommendation span,
.receipt-notes span {
    color: var(--muted);
}

.receipt-recommendation p,
.receipt-notes p {
    margin: 6px 0 0;
    color: var(--muted);
}

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

.receipt-grid div {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.receipt-grid span,
.receipt-grid strong {
    display: block;
}

.receipt-grid span {
    color: var(--muted);
    font-size: 0.8rem;
}

.receipt-grid strong {
    margin-top: 4px;
}

.request-detail-sheet {
    display: grid;
    gap: 16px;
}

.detail-section {
    display: grid;
    gap: 10px;
}

.detail-section h2 {
    margin: 0;
    font-size: 1rem;
}

.receipt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.receipt-actions a,
.receipt-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: var(--blue);
    font-weight: 850;
    text-decoration: none;
}

.review-shell {
    width: min(1520px, calc(100% - 32px));
}

.review-queue-panel {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow);
}

.review-queue-head,
.review-queue-row {
    display: grid;
    grid-template-columns: 160px minmax(260px, 1.2fr) minmax(240px, 1fr) minmax(220px, 0.8fr) 150px;
    gap: 12px;
    align-items: center;
    min-width: 960px;
}

.review-queue-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px;
    color: var(--muted);
    background: #fbfdff;
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.review-queue-row {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.review-queue-row:last-child {
    border-bottom: 0;
}

.queue-id strong,
.queue-id small,
.queue-person strong,
.queue-person small,
.queue-contact strong,
.queue-contact small,
.queue-status strong,
.queue-status small {
    display: block;
}

.queue-id strong {
    color: var(--blue);
}

.queue-id small,
.queue-person small,
.queue-contact small,
.queue-status small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.76rem;
}

.queue-status strong {
    width: max-content;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--orange);
    background: var(--orange-soft);
    font-size: 0.78rem;
}

.queue-control {
    gap: 5px;
}

.queue-control span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.queue-control select,
.queue-control textarea {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.84rem;
}

.queue-control textarea {
    resize: vertical;
}

.queue-actions {
    display: grid;
    gap: 6px;
    justify-items: stretch;
}

.queue-actions a,
.queue-actions button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
}

.queue-actions a {
    color: var(--blue);
    background: var(--blue-soft);
}

.queue-actions button {
    color: #fff;
    background: var(--blue);
}

@media print {
    body {
        background: #fff;
    }

    .receipt-actions {
        display: none;
    }

    .module-shell {
        width: 100%;
        padding: 0;
    }

    .receipt-sheet {
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 1480px) {
    .app-frame,
    .login-layout {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
        height: auto;
    }

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

    .dashboard-grid,
    .top-header {
        grid-template-columns: 1fr;
    }

    .projects-panel,
    .resources-panel {
        grid-column: auto;
    }

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

@media (max-width: 760px) {
    .dashboard-workspace,
    .app-sidebar,
    .login-preview,
    .login-box {
        padding: 16px;
    }

    .top-actions,
    .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .search-input {
        width: 100%;
    }

    .stat-grid,
    .sidebar-nav,
    .quick-grid,
    .resource-rings,
    .automation-list,
    .module-launch-grid,
    .workflow-line,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .project-head,
    .module-table-head {
        display: none;
    }

    .project-row,
    .module-table-row {
        grid-template-columns: 1fr;
    }

    .site-device-group summary,
    .site-metrics {
        align-items: flex-start;
        flex-direction: column;
    }

    .network-device-card {
        grid-template-columns: 1fr;
    }

    .network-device-head {
        display: none;
    }

    .network-device-row {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .network-device-row span::before {
        display: block;
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
    }
}

/* Liquor Runners report-style theme */
:root {
    --bg: #dcebf8;
    --panel: rgba(255, 255, 255, 0.9);
    --line: rgba(89, 139, 190, 0.32);
    --line-strong: rgba(35, 95, 158, 0.46);
    --text: #10243f;
    --muted: #52708f;
    --blue: #173f86;
    --blue-soft: rgba(88, 189, 232, 0.18);
    --purple: #2b5f9f;
    --purple-soft: rgba(80, 139, 200, 0.16);
    --orange: #f4bd2c;
    --orange-soft: rgba(244, 189, 44, 0.18);
    --red: #c74758;
    --red-soft: rgba(199, 71, 88, 0.14);
    --green: #2fae84;
    --green-soft: rgba(47, 174, 132, 0.16);
    --shadow: 0 18px 44px rgba(20, 58, 101, 0.16);
}

.dashboard-page,
.module-page,
.login-page {
    background:
        linear-gradient(90deg, rgba(227, 241, 251, 0.78) 0%, rgba(245, 250, 254, 0.72) 42%, rgba(220, 237, 249, 0.5) 100%),
        url("lr-it-hub-background.png") center / cover fixed no-repeat;
}

.dashboard-page::before,
.module-page::before,
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08)),
        radial-gradient(circle at 84% 23%, rgba(88, 189, 232, 0.2), transparent 18rem);
}

.dashboard-page::after,
.module-page::after,
.login-page::after {
    display: none;
}

.app-frame,
.login-layout,
.module-shell {
    position: relative;
    z-index: 1;
}

.app-frame::before,
.module-page .module-hero::before,
.login-layout::before {
    display: none;
}

.app-frame::after,
.login-layout::after {
    display: none;
}

.app-sidebar {
    background: rgba(247, 251, 255, 0.88);
    backdrop-filter: blur(18px);
    border-right: 1px solid rgba(72, 132, 190, 0.28);
    box-shadow: 14px 0 40px rgba(20, 58, 101, 0.12);
}

.brand-block,
.module-logo {
    border: 1px solid rgba(75, 151, 211, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(218, 238, 252, 0.72)),
        linear-gradient(105deg, transparent 0 68%, rgba(88, 189, 232, 0.14) 68.5% 80%, transparent 80.5%);
    box-shadow: 0 12px 30px rgba(20, 58, 101, 0.13);
}

.brand-block img,
.module-logo img,
.login-preview img,
.receipt-header img {
    filter: drop-shadow(8px 8px 10px rgba(13, 44, 86, 0.2));
}

.brand-block img {
    width: 100%;
    height: auto;
    max-height: 112px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0;
}

.module-logo img {
    width: 100%;
    height: auto;
    max-height: 124px;
    object-fit: contain;
    object-position: center center;
}

.login-preview img {
    width: min(460px, 92%);
    height: auto;
}

.receipt-header img {
    width: 260px;
    max-width: 42vw;
    height: auto;
}

.sidebar-nav a {
    border: 1px solid transparent;
    color: #405977;
    font-weight: 650;
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
    color: #0e3566;
    border-color: rgba(82, 139, 198, 0.2);
    background:
        linear-gradient(105deg, rgba(214, 235, 251, 0.92), rgba(244, 249, 254, 0.78)),
        linear-gradient(105deg, transparent 0 76%, rgba(47, 127, 189, 0.16) 76.5% 88%, transparent 88.5%);
}

.sidebar-nav span,
.module-launch-card span,
.stat-tile .tile-icon {
    border-radius: 4px;
}

.dashboard-workspace,
.module-shell {
    isolation: isolate;
}

.dashboard-workspace {
    background: transparent;
}

.dashboard-workspace::before,
.module-shell::before {
    display: none;
}

.dashboard-workspace::after,
.module-shell::after {
    display: none;
}

.top-header,
.module-hero,
.login-preview,
.login-box {
    position: relative;
    border: 1px solid rgba(102, 145, 190, 0.2);
    border-radius: 2px;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.94), rgba(232, 244, 253, 0.86)),
        linear-gradient(105deg, transparent 0 76%, rgba(88, 189, 232, 0.08) 76.4% 84%, transparent 84.4%);
    box-shadow: var(--shadow);
}

.top-header::after,
.module-hero::after {
    display: none;
}

.top-header {
    padding: 20px 22px;
}

.module-hero {
    padding: 18px;
}

.page-title h1,
.module-hero h1,
.login-preview h1,
.login-box h2 {
    color: #10233b;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-title h1 {
    font-size: clamp(1.5rem, 3vw, 2.55rem);
}

.page-title p,
.module-hero p,
.login-preview p,
.login-box p {
    color: #5e7390;
}

.section-kicker {
    color: #173f86;
    font-weight: 950;
}

.stat-tile,
.panel,
.module-card-shell,
.receipt-sheet,
.review-queue-panel,
.module-launch-card,
.workflow-line div,
.automation-list div,
.receipt-grid div,
.receipt-status,
.receipt-recommendation,
.receipt-notes,
.quick-grid a,
.quick-grid button,
.preview-card {
    border-radius: 2px;
    border-color: rgba(101, 147, 194, 0.26);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.92), rgba(235, 246, 254, 0.84)),
        linear-gradient(105deg, transparent 0 78%, rgba(88, 189, 232, 0.06) 78.5% 84%, transparent 84.5%);
    box-shadow: 0 16px 34px rgba(31, 73, 113, 0.11);
}

.panel::before,
.stat-tile::before,
.module-launch-card::before,
.receipt-sheet::before,
.review-queue-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(47, 127, 189, 0.7), rgba(169, 205, 234, 0.1));
    pointer-events: none;
}

.panel::after,
.module-launch-card::after,
.receipt-sheet::after {
    display: none;
}

.stat-tile,
.module-launch-card,
.review-queue-panel {
    position: relative;
    overflow: hidden;
}

.panel-heading h2,
.detail-section h2,
.form-section h2 {
    color: #10233b;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-input,
input,
textarea,
select {
    border-radius: 2px;
    border-color: rgba(96, 139, 185, 0.34);
    background: rgba(255, 255, 255, 0.82);
}

.top-actions {
    position: relative;
    z-index: 2;
    padding: 9px;
    border: 1px solid rgba(101, 147, 194, 0.24);
    background: rgba(249, 253, 255, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 26px rgba(31, 73, 113, 0.08);
}

.search-input {
    background: rgba(255, 255, 255, 0.96);
}

.user-pill {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.82);
}

.workflow-actions a,
.button-link,
.form-actions button,
.queue-actions button,
.receipt-actions button,
.receipt-actions a,
.modal-form button[type="submit"],
.login-form button {
    border-radius: 2px;
    background: #2f7fbd;
    box-shadow: 5px 6px 0 rgba(156, 189, 222, 0.42);
}

.button-link.secondary,
.queue-actions a {
    color: #164a80;
    background: rgba(225, 240, 252, 0.96);
    box-shadow: none;
}

.table-action,
.panel-heading button,
.queue-actions button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    border-radius: 2px;
    color: #fff;
    background: #2f7fbd;
    box-shadow: 5px 6px 0 rgba(156, 189, 222, 0.32);
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.table-action:hover,
.panel-heading button:hover,
.queue-actions button:hover {
    transform: translateY(-1px);
    filter: brightness(0.99);
}

.review-queue-head {
    background:
        linear-gradient(105deg, rgba(240, 247, 253, 0.96), rgba(221, 237, 250, 0.9)),
        linear-gradient(105deg, transparent 0 80%, rgba(47, 127, 189, 0.12) 80.5% 90%, transparent 90.5%);
}

.health-chart text,
.chart-labels,
.module-launch-card small,
.stat-tile small,
.receipt-grid span,
.receipt-status span,
.receipt-notes span,
.receipt-recommendation span {
    color: #667c98;
    fill: #667c98;
}

.chart-grid line {
    stroke: rgba(75, 120, 168, 0.16);
}

.chart-line {
    stroke: #2f7fbd;
}

.chart-area {
    fill: rgba(120, 174, 223, 0.22);
}

@media (max-width: 760px) {
    .top-header,
    .module-hero {
        border-radius: 2px;
    }

    .dashboard-workspace::before,
    .module-shell::before {
        width: 320px;
        opacity: 0.045;
    }
}

/* Fleet System visual match layer */
:root {
    --bg: #dcebf8;
    --panel: rgba(255, 255, 255, 0.92);
    --line: rgba(89, 139, 190, 0.32);
    --line-strong: rgba(35, 95, 158, 0.46);
    --text: #10243f;
    --muted: #58718f;
    --blue: #173f86;
    --blue-2: #2f86ff;
    --blue-soft: rgba(88, 189, 232, 0.18);
    --orange: #f4bd2c;
    --orange-soft: rgba(244, 189, 44, 0.18);
    --red: #c74758;
    --red-soft: rgba(199, 71, 88, 0.14);
    --green: #2fae84;
    --green-soft: rgba(47, 174, 132, 0.16);
    --purple: #2b5f9f;
    --purple-soft: rgba(80, 139, 200, 0.16);
    --shadow: 0 18px 44px rgba(20, 58, 101, 0.16);
    --radius: 10px;
    --radius-sm: 7px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(47, 127, 189, 0.55) rgba(225, 240, 252, 0.76);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: rgba(225, 240, 252, 0.76);
    border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-thumb {
    background: rgba(47, 127, 189, 0.55);
    border: 2px solid rgba(225, 240, 252, 0.76);
    border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(23, 63, 134, 0.72);
}

body,
.dashboard-page,
.module-page,
.login-page {
    color: var(--text);
    background:
        linear-gradient(90deg, rgba(227, 241, 251, 0.78) 0%, rgba(245, 250, 254, 0.74) 42%, rgba(220, 237, 249, 0.54) 100%),
        url("lr-it-hub-background.png") center / cover fixed no-repeat;
}

body::before,
.dashboard-page::before,
.module-page::before,
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.2)),
        radial-gradient(circle at 84% 23%, rgba(88, 189, 232, 0.28), transparent 18rem);
}

.app-frame {
    grid-template-columns: 310px minmax(0, 1fr);
}

.app-sidebar {
    gap: 22px;
    padding: 24px 22px;
    border-right: 1px solid rgba(72, 132, 190, 0.28);
    background: rgba(247, 251, 255, 0.88);
    backdrop-filter: blur(18px);
    box-shadow: 14px 0 40px rgba(20, 58, 101, 0.12);
}

.brand-block {
    min-height: 150px;
    display: grid;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid rgba(75, 151, 211, 0.28);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(218, 238, 252, 0.72)),
        linear-gradient(105deg, transparent 0 68%, rgba(88, 189, 232, 0.14) 68.5% 80%, transparent 80.5%);
    box-shadow: 0 12px 30px rgba(20, 58, 101, 0.13);
    overflow: hidden;
}

.brand-block img {
    width: 96%;
    max-height: 132px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(8px 8px 10px rgba(13, 44, 86, 0.2));
    transform: none;
}

.sidebar-nav {
    gap: 7px;
}

.sidebar-nav a {
    min-height: 38px;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: #405977;
    font-size: 0.92rem;
    font-weight: 650;
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
    color: #0e3566;
    border-color: rgba(82, 139, 198, 0.2);
    background:
        linear-gradient(105deg, rgba(214, 235, 251, 0.92), rgba(244, 249, 254, 0.78)),
        linear-gradient(105deg, transparent 0 76%, rgba(47, 127, 189, 0.16) 76.5% 88%, transparent 88.5%);
}

.sidebar-nav span {
    width: 25px;
    min-height: 22px;
    border-radius: var(--radius-sm);
    color: var(--blue);
    background: var(--blue-soft);
    font-size: 0.7rem;
    font-weight: 950;
}

.system-status {
    display: block;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
}

.system-status span {
    display: none;
}

.dashboard-workspace {
    gap: 18px;
    padding: 24px;
    background: transparent;
    isolation: isolate;
}

.module-shell {
    gap: 18px;
    padding: 24px;
}

.top-header,
.module-hero,
.login-preview,
.login-box,
.panel,
.stat-tile,
.module-card-shell,
.receipt-sheet,
.review-queue-panel {
    position: relative;
    border: 1px solid rgba(102, 145, 190, 0.24);
    border-radius: var(--radius);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.94), rgba(232, 244, 253, 0.86)),
        linear-gradient(105deg, transparent 0 76%, rgba(88, 189, 232, 0.08) 76.4% 84%, transparent 84.4%);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.top-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
}

.page-title h1,
.module-hero h1,
.login-preview h1,
.login-box h2 {
    margin: 0 0 4px;
    color: #10233b;
    font-size: clamp(1.5rem, 3vw, 2.55rem);
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-title p,
.module-hero p,
.login-preview p,
.login-box p,
.panel-copy {
    color: #5e7390;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px;
    border: 1px solid rgba(101, 147, 194, 0.24);
    border-radius: var(--radius);
    background: rgba(249, 253, 255, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 26px rgba(31, 73, 113, 0.08);
}

.user-pill {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: var(--radius-sm);
}

.user-pill div {
    display: grid;
    justify-items: center;
}

.user-pill strong {
    font-size: 0.82rem;
}

.button-link,
.table-action,
.workflow-actions a,
.form-actions button,
.login-form button,
.modal-form button[type="submit"],
.receipt-actions button,
.receipt-actions a,
.queue-actions button,
.panel-heading button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    background: #2f7fbd;
    box-shadow: 5px 6px 0 rgba(156, 189, 222, 0.42);
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.button-link.secondary,
.queue-actions a,
.panel-heading a,
.app-message-actions button.secondary {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #164a80;
    background: rgba(225, 240, 252, 0.96);
    box-shadow: none;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.panel-heading a,
.panel-heading button,
.table-action,
.queue-actions a,
.queue-actions button {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(47, 127, 189, 0.22);
    font-size: 0.78rem;
    box-shadow: none;
}

.danger-button {
    background: linear-gradient(135deg, #c74758, #a92d3f) !important;
    box-shadow: 5px 6px 0 rgba(199, 71, 88, 0.18);
}

.button-link:hover,
.table-action:hover,
.form-actions button:hover,
.login-form button:hover,
.modal-form button[type="submit"]:hover,
.receipt-actions button:hover,
.receipt-actions a:hover,
.queue-actions button:hover,
.panel-heading button:hover,
.danger-button:hover {
    filter: brightness(0.98);
    transform: translateY(-1px);
}

.stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.stat-tile {
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.stat-tile::before,
.panel::before,
.module-card-shell::before,
.receipt-sheet::before,
.review-queue-panel::before,
.module-launch-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(47, 127, 189, 0.7), rgba(169, 205, 234, 0.1));
    pointer-events: none;
}

.stat-tile .tile-icon,
.module-launch-card span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 950;
}

.stat-tile strong {
    display: block;
    font-size: 1.45rem;
}

.stat-tile small,
.module-launch-card small,
.receipt-grid span,
.receipt-status span,
.receipt-notes span,
.receipt-recommendation span {
    color: var(--muted);
}

.stat-tile.blue .tile-icon,
.module-launch-card.blue span { color: var(--blue-2); background: var(--blue-soft); }
.stat-tile.purple .tile-icon,
.module-launch-card.purple span { color: var(--purple); background: var(--purple-soft); }
.stat-tile.orange .tile-icon,
.module-launch-card.orange span { color: var(--orange); background: var(--orange-soft); }
.stat-tile.red .tile-icon,
.module-launch-card.red span { color: var(--red); background: var(--red-soft); }
.stat-tile.green .tile-icon,
.module-launch-card.green span { color: var(--green); background: var(--green-soft); }

.panel,
.module-card-shell,
.receipt-sheet,
.review-queue-panel {
    padding: 18px;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-heading h2,
.detail-section h2,
.form-section h2 {
    margin: 0;
    color: #10233b;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.module-launch-grid {
    gap: 14px;
}

.module-launch-card,
.workflow-line div,
.automation-list div,
.receipt-grid div,
.receipt-status,
.receipt-recommendation,
.receipt-notes,
.quick-grid a,
.quick-grid button,
.preview-card {
    border: 1px solid rgba(102, 145, 190, 0.24);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.68);
    box-shadow: none;
}

label {
    gap: 7px;
    color: var(--text);
    font-weight: 750;
}

input,
textarea,
select,
.search-input {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.86);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--blue-2);
    box-shadow: 0 0 0 4px rgba(47, 134, 255, 0.14);
}

input[type="file"]::file-selector-button {
    min-height: 32px;
    margin-right: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    color: #fff;
    background: #2f7fbd;
    font-weight: 850;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: #246da8;
}

.notice {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
}

.notice.success { color: var(--green); background: var(--green-soft); }
.notice.warning { color: #8a5b00; background: rgba(240, 183, 47, 0.16); }
.notice.error,
.form-error { color: var(--red); background: var(--red-soft); }
.notice p,
.form-error { margin: 0; }

.module-table,
.alert-table,
.network-device-table-view {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.module-table-head,
.module-table-row,
.review-queue-head,
.review-queue-row {
    border-bottom: 1px solid rgba(89, 139, 190, 0.22);
}

.network-table-wrap,
.module-table,
.alert-table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.68);
}

.network-device-table-view th,
.network-device-table-view td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(89, 139, 190, 0.22);
    text-align: left;
    vertical-align: middle;
}

.network-device-table-view th,
.module-table-head,
.review-queue-head {
    color: #164a80;
    background: rgba(225, 240, 252, 0.98);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.network-device-table-view tr {
    background: rgba(255, 255, 255, 0.58);
}

.network-device-table-view tr.is-offline td,
.review-queue-row.status-critical {
    background: rgba(199, 71, 88, 0.1);
}

.device-status {
    border-radius: var(--radius-sm);
    font-weight: 850;
}

.device-status.good {
    color: #176e56;
    background: var(--green-soft);
}

.device-status.danger {
    color: #9e2537;
    background: var(--red-soft);
}

.modal,
.app-message-card,
.loading-card {
    border: 1px solid rgba(102, 145, 190, 0.34);
    border-radius: var(--radius);
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 253, 0.94)),
        linear-gradient(105deg, transparent 0 76%, rgba(88, 189, 232, 0.08) 76.4% 84%, transparent 84.4%);
    box-shadow: 0 28px 70px rgba(13, 32, 57, 0.34);
}

@media (max-width: 1180px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .app-frame {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: relative;
        height: auto;
    }

    .top-header,
    .module-hero {
        grid-template-columns: 1fr;
    }

    .top-actions,
    .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .stat-grid,
    .module-launch-grid,
    .workflow-line,
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Fleet login/sidebar exact alignment */
.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 22px;
}

.login-layout {
    display: grid;
    width: min(470px, 100%);
}

.login-box {
    width: 100%;
    border: 1px solid rgba(107, 166, 218, 0.32);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 244, 253, 0.84)),
        rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 58px rgba(13, 44, 86, 0.18);
    overflow: hidden;
}

.login-brand-panel {
    display: grid;
    place-items: center;
    min-height: 190px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(107, 166, 218, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(223, 241, 253, 0.54)),
        linear-gradient(105deg, transparent 0 68%, rgba(88, 189, 232, 0.1) 68.5% 82%, transparent 82.5%);
}

.login-content {
    padding: 26px 34px 24px;
}

.login-logo {
    display: block;
    width: min(265px, 86%);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 8px 10px rgba(13, 44, 86, 0.16));
}

.login-logo-wide {
    width: 100%;
    max-width: none;
    max-height: 190px;
    object-fit: contain;
}

.login-box h1,
.login-box h2 {
    margin: 0 0 8px;
    color: #10233b;
    font-size: 1.56rem;
    line-height: 1.08;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
}

.login-content > p {
    margin: 0;
    color: var(--muted);
    text-align: left;
}

.login-form {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.login-form label {
    color: var(--text);
    font-weight: 850;
}

.login-form input {
    min-height: 44px;
    margin-top: 7px;
    border-color: rgba(47, 127, 189, 0.62);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.login-form input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(47, 127, 189, 0.16);
}

.login-form button {
    min-height: 46px;
    margin-top: 2px;
    border-radius: 8px;
    box-shadow: 0 10px 18px rgba(47, 127, 189, 0.22);
}

.login-footnote {
    display: block;
    margin-top: 17px;
    color: var(--muted);
    text-align: center;
    font-weight: 850;
}

.brand-block {
    min-height: 172px;
    padding: 6px 8px;
}

.brand-block img {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.sidebar-nav span.nav-icon {
    width: 25px;
    min-height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 25px;
}

.sidebar-nav span.nav-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.source-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    color: #164a80;
    background: rgba(225, 240, 252, 0.96);
    font-size: 0.76rem;
    font-weight: 900;
}

.source-pill.uisp {
    color: #176e56;
    background: var(--green-soft);
}

.network-device-table-view {
    min-width: 1180px;
}

.network-device-table-view th:nth-child(1),
.network-device-table-view td:nth-child(1) {
    width: 9%;
}

.network-device-table-view th:nth-child(2),
.network-device-table-view td:nth-child(2) {
    width: 22%;
}

.network-device-table-view th:nth-child(3),
.network-device-table-view td:nth-child(3) {
    width: 12%;
}

.network-device-table-view th:nth-child(4),
.network-device-table-view td:nth-child(4) {
    width: 12%;
}

.network-device-table-view th:nth-child(5),
.network-device-table-view td:nth-child(5) {
    width: 12%;
}

.network-device-table-view th:nth-child(6),
.network-device-table-view td:nth-child(6) {
    width: 14%;
}

.network-device-table-view th:nth-child(7),
.network-device-table-view td:nth-child(7) {
    width: 12%;
}

.network-device-table-view th:nth-child(8),
.network-device-table-view td:nth-child(8) {
    width: 7%;
}

.login-page .login-layout {
    grid-template-columns: 1fr !important;
    width: min(470px, calc(100vw - 44px));
}

.login-page .login-box {
    padding: 0 !important;
}

.app-sidebar .brand-block {
    display: grid;
    place-items: center;
    min-height: 172px;
    padding: 4px 8px 10px;
}

.app-sidebar .brand-block img {
    width: 122%;
    max-width: none;
    max-height: 176px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center center;
    transform: translate(-27px, -14px) scale(1.08);
}

.network-device-table-view {
    min-width: 1300px;
}

.network-device-table-view th:nth-child(1),
.network-device-table-view td:nth-child(1) {
    width: 8%;
}

.network-device-table-view th:nth-child(2),
.network-device-table-view td:nth-child(2) {
    width: 20%;
}

.network-device-table-view th:nth-child(3),
.network-device-table-view td:nth-child(3) {
    width: 11%;
}

.network-device-table-view th:nth-child(4),
.network-device-table-view td:nth-child(4) {
    width: 11%;
}

.network-device-table-view th:nth-child(5),
.network-device-table-view td:nth-child(5) {
    width: 11%;
}

.network-device-table-view th:nth-child(6),
.network-device-table-view td:nth-child(6) {
    width: 13%;
}

.network-device-table-view th:nth-child(7),
.network-device-table-view td:nth-child(7) {
    width: 12%;
}

.network-device-table-view th:nth-child(8),
.network-device-table-view td:nth-child(8) {
    width: 7%;
}

.network-device-table-view th:nth-child(9),
.network-device-table-view td:nth-child(9) {
    width: 7%;
}

.network-table-action {
    min-height: 30px;
    padding: 7px 12px;
    font-size: 0.78rem;
}

.network-auto-sync {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    color: #164a80;
    border: 1px solid rgba(82, 139, 198, 0.24);
    background: rgba(225, 240, 252, 0.82);
    font-size: 0.76rem;
    font-weight: 900;
}

.network-device-summary .receipt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.network-action-shell {
    display: grid;
    gap: 14px;
}

.network-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 12px;
}

.network-action-card {
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(82, 139, 198, 0.28);
    background: rgba(255, 255, 255, 0.62);
}

.network-action-card strong {
    color: var(--text);
    font-size: 1rem;
}

.network-action-card small {
    color: var(--muted);
    line-height: 1.45;
}

.network-action-card textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
}

.network-action-card.muted {
    background: rgba(232, 244, 253, 0.46);
}

.network-action-log {
    display: grid;
    gap: 8px;
}

.network-action-log > div {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 0.8fr) minmax(260px, 1.6fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(82, 139, 198, 0.18);
    background: rgba(255, 255, 255, 0.54);
}

.network-action-log span,
.network-action-log small {
    color: var(--muted);
}

.network-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.network-detail-grid > div {
    display: grid;
    gap: 5px;
    min-height: 74px;
    padding: 12px;
    border: 1px solid rgba(82, 139, 198, 0.2);
    background: rgba(255, 255, 255, 0.58);
}

.network-detail-grid span,
.muted-text {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.network-detail-grid strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.network-device-table-view.compact,
.network-port-table,
.network-client-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.network-device-table-view.compact th,
.network-device-table-view.compact td,
.network-port-table th,
.network-port-table td,
.network-client-table th,
.network-client-table td {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(82, 139, 198, 0.18);
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.network-device-table-view.compact th,
.network-port-table th,
.network-client-table th {
    color: var(--muted);
    background: rgba(232, 244, 253, 0.86);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.inline-action-form {
    margin: 0;
}

.inline-action-form button {
    min-height: 30px;
    padding: 7px 10px;
    font-size: 0.76rem;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .network-action-grid,
    .network-device-summary .receipt-grid,
    .network-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .network-action-grid,
    .network-device-summary .receipt-grid,
    .network-detail-grid,
    .network-action-log > div {
        grid-template-columns: 1fr;
    }
}

.login-page,
.dashboard-page,
.module-page {
    background:
        linear-gradient(90deg, rgba(3, 12, 27, 0.78), rgba(5, 19, 42, 0.52)),
        url("lr-network-dark-background.png") center / cover fixed no-repeat;
}

.network-dark-page {
    --panel: rgba(4, 20, 39, 0.84);
    --text: #eaf6ff;
    --muted: #8fb1d3;
    --line: rgba(31, 148, 255, 0.28);
    --blue: #1698ff;
    --blue-2: #58c7ff;
    --green: #32d27b;
    --red: #ff4d5d;
    --orange: #ffc94a;
    color: var(--text);
}

.network-dark-page .panel,
.network-dark-page .network-panel,
.network-dark-page .stat-tile,
.network-dark-page .module-launch-card,
.network-dark-page .network-table-wrap,
.network-dark-page .module-card-shell,
.network-dark-page .receipt-sheet,
.network-dark-page .empty-state {
    border: 1px solid rgba(31, 148, 255, 0.22);
    background:
        linear-gradient(135deg, rgba(9, 31, 56, 0.92), rgba(4, 15, 31, 0.82)),
        rgba(5, 18, 37, 0.8);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.network-dark-page .panel-heading h2,
.network-dark-page h1,
.network-dark-page h2,
.network-dark-page strong,
.network-dark-page .module-launch-card strong,
.network-dark-page .stat-tile strong {
    color: #f1f8ff;
}

.network-dark-page small,
.network-dark-page p,
.network-dark-page .panel-heading span,
.network-dark-page .network-detail-grid span,
.network-dark-page .muted-text {
    color: #91b6d8;
}

.network-module-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}

.network-module-nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: #9bc7ef;
    border: 1px solid rgba(31, 148, 255, 0.22);
    background: rgba(8, 30, 58, 0.72);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 900;
}

.network-module-nav a.active,
.network-module-nav a:hover {
    color: #fff;
    border-color: rgba(22, 152, 255, 0.7);
    background: linear-gradient(135deg, rgba(13, 88, 170, 0.92), rgba(4, 45, 92, 0.86));
}

.network-hero-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.network-hero-card,
.network-tool-card,
.network-page-grid > a,
.network-page-grid > article {
    min-height: 112px;
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(31, 148, 255, 0.22);
    background: linear-gradient(135deg, rgba(8, 32, 61, 0.88), rgba(3, 14, 31, 0.82));
    text-decoration: none;
}

.network-hero-card span,
.network-tool-card span {
    color: #8fb1d3;
    font-size: 0.78rem;
    font-weight: 900;
}

.network-hero-card strong {
    color: #eaf6ff;
    font-size: 2rem;
}

.network-hero-card.health strong {
    color: #32d27b;
}

.network-hero-card.danger strong {
    color: #ff4d5d;
}

.network-dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;
}

.network-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

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

.network-tool-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.network-tool-card form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.network-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.network-page-grid a,
.network-page-grid article {
    color: #eaf6ff;
}

.network-compliance-list,
.network-alert-list {
    display: grid;
    gap: 8px;
}

.network-compliance-list a,
.network-alert-list a {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 11px 12px;
    color: #eaf6ff;
    border: 1px solid rgba(31, 148, 255, 0.16);
    background: rgba(7, 27, 51, 0.72);
    text-decoration: none;
}

.network-compliance-list i {
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.network-compliance-list em {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #22d07d, #1698ff);
}

.network-alert-list span {
    color: #ff4d5d;
    font-weight: 900;
}

.network-dark-page .network-device-table-view th,
.network-dark-page .network-device-table-view td,
.network-dark-page .network-client-table th,
.network-dark-page .network-client-table td,
.network-dark-page .network-port-table th,
.network-dark-page .network-port-table td {
    color: #dcefff;
    border-bottom-color: rgba(31, 148, 255, 0.16);
}

.network-dark-page .network-device-table-view th,
.network-dark-page .network-client-table th,
.network-dark-page .network-port-table th {
    background: rgba(13, 61, 107, 0.75);
    color: #8fc8ff;
}

.network-dark-page input,
.network-dark-page select,
.network-dark-page textarea {
    color: #eaf6ff;
    border-color: rgba(31, 148, 255, 0.32);
    background: rgba(1, 11, 24, 0.7);
}

.network-dark-page button,
.network-dark-page .button-link,
.network-dark-page .network-action-button {
    border: 1px solid rgba(31, 148, 255, 0.5);
    background: linear-gradient(180deg, #147ad5, #07539d);
    color: #fff;
}

.network-dark-page .button-link.secondary,
.network-dark-page .network-action-button.secondary,
.network-dark-page .icon-button {
    color: #bee2ff;
    background: rgba(8, 30, 58, 0.86);
}

.network-dark-page .app-message-card {
    border-color: rgba(31, 148, 255, 0.35);
    background: #06172b;
}

.network-dark-page .module-logo {
    background:
        linear-gradient(135deg, rgba(4, 20, 39, 0.86), rgba(7, 34, 66, 0.72)),
        url("lr-network-mark.png") center / cover no-repeat;
}

@media (max-width: 1180px) {
    .network-hero-grid,
    .network-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .network-dashboard-grid,
    .network-tool-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .network-hero-grid,
    .network-page-grid {
        grid-template-columns: 1fr;
    }
}

/* LR IT Hub dark interface authority layer */
:root {
    --bg: #030b16;
    --panel: rgba(5, 22, 42, 0.88);
    --text: #eef7ff;
    --muted: #91b4d6;
    --line: rgba(32, 148, 255, 0.26);
    --blue: #1497ff;
    --blue-2: #58c7ff;
    --green: #35d27f;
    --red: #ff4f63;
    --orange: #ffc94a;
    --purple: #8aa7ff;
    --blue-soft: rgba(20, 151, 255, 0.16);
    --green-soft: rgba(53, 210, 127, 0.16);
    --red-soft: rgba(255, 79, 99, 0.16);
    --orange-soft: rgba(255, 201, 74, 0.16);
    --purple-soft: rgba(138, 167, 255, 0.16);
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

html,
body {
    background: #030b16;
}

body,
.dashboard-page,
.module-page,
.login-page {
    color: var(--text);
    background:
        linear-gradient(90deg, rgba(2, 10, 22, 0.88), rgba(5, 18, 38, 0.72)),
        url("lr-network-dark-background.png") center / cover fixed no-repeat !important;
}

body::before,
.dashboard-page::before,
.module-page::before,
.login-page::before {
    background:
        radial-gradient(circle at 78% 20%, rgba(20, 151, 255, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(4, 14, 30, 0.2), rgba(2, 9, 20, 0.76)) !important;
}

.app-sidebar {
    width: 292px;
    padding: 24px 22px;
    background: rgba(3, 13, 27, 0.92) !important;
    border-right: 1px solid rgba(32, 148, 255, 0.24) !important;
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.4) !important;
}

.app-sidebar .brand-block,
.brand-block {
    min-height: 178px !important;
    padding: 12px !important;
    border: 1px solid rgba(32, 148, 255, 0.28) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(7, 27, 54, 0.74), rgba(3, 14, 31, 0.92)) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32) !important;
}

.app-sidebar .brand-block img,
.brand-block img {
    width: 118% !important;
    max-width: none !important;
    max-height: 172px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translate(-10px, -2px) scale(1.02) !important;
    filter: drop-shadow(0 0 16px rgba(44, 177, 255, 0.3)) !important;
}

.sidebar-nav a {
    min-height: 40px;
    color: #a9c7e6 !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
    color: #fff !important;
    border-color: rgba(32, 148, 255, 0.42) !important;
    background: linear-gradient(135deg, rgba(16, 88, 166, 0.94), rgba(4, 48, 97, 0.9)) !important;
}

.sidebar-nav span.nav-icon {
    color: #4fc4ff !important;
    background: rgba(20, 151, 255, 0.16) !important;
}

.sidebar-status {
    color: #9ab9d8 !important;
    border-color: rgba(32, 148, 255, 0.24) !important;
    background: rgba(5, 22, 42, 0.72) !important;
}

.app-main {
    padding: 24px 28px 36px;
}

.topbar,
.module-hero {
    min-height: 112px;
    border: 1px solid rgba(32, 148, 255, 0.18) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(10, 35, 64, 0.82), rgba(5, 20, 39, 0.74)),
        rgba(5, 22, 42, 0.78) !important;
    box-shadow: var(--shadow) !important;
}

.topbar h1,
.module-hero h1 {
    color: #f4fbff !important;
    font-size: clamp(2rem, 3vw, 3rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar p,
.module-hero p,
.section-kicker {
    color: #8fc8ff !important;
}

.user-chip,
.login-card,
.login-box,
.login-brand-panel,
.panel,
.network-panel,
.stat-tile,
.module-launch-card,
.module-card-shell,
.review-queue-panel,
.receipt-sheet,
.empty-state,
.network-hero-card,
.network-tool-card,
.network-page-grid > a,
.network-page-grid > article {
    border: 1px solid rgba(32, 148, 255, 0.22) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(7, 31, 58, 0.9), rgba(3, 14, 31, 0.84)) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text) !important;
}

.stat-tile {
    min-height: 118px;
}

.stat-tile strong,
.network-hero-card strong,
.panel-heading h2,
.module-launch-card strong,
.network-panel strong,
.panel strong,
h1,
h2,
h3 {
    color: #f2f9ff !important;
}

.stat-tile small,
.panel small,
.network-panel small,
.module-launch-card small,
.network-panel p,
.panel p {
    color: #93b8da !important;
}

.tile-icon,
.module-launch-card span,
.source-pill,
.device-status,
.site-metrics b {
    border-radius: 6px !important;
}

.button-link,
button,
.panel-heading a,
.panel-heading button,
.network-action-button,
.network-table-action,
.app-message-actions button,
.modal-form button[type="submit"],
.form-actions button {
    min-height: 36px;
    border: 1px solid rgba(32, 148, 255, 0.48) !important;
    border-radius: 6px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #117ed8, #07549e) !important;
    box-shadow: 0 10px 22px rgba(0, 74, 150, 0.24) !important;
    font-weight: 900;
}

.button-link.secondary,
.network-action-button.secondary,
.app-message-actions button.secondary,
.panel-heading a,
.icon-button {
    color: #bfe2ff !important;
    background: rgba(7, 31, 58, 0.88) !important;
}

button:hover,
.button-link:hover,
.panel-heading a:hover,
.network-action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 105, 210, 0.3) !important;
}

input,
select,
textarea {
    color: #eaf6ff !important;
    border: 1px solid rgba(32, 148, 255, 0.32) !important;
    border-radius: 6px !important;
    background: rgba(1, 11, 24, 0.72) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(171, 204, 233, 0.66) !important;
}

.network-filter-bar,
.request-form,
.modal-form {
    border-color: rgba(32, 148, 255, 0.2) !important;
    background: rgba(4, 18, 36, 0.62) !important;
}

.network-table-wrap,
.module-table,
.equipment-table {
    border-color: rgba(32, 148, 255, 0.22) !important;
    background: rgba(2, 13, 28, 0.62) !important;
}

.network-device-table-view th,
.network-client-table th,
.network-port-table th,
.module-table-head {
    color: #8fc8ff !important;
    background: rgba(10, 58, 106, 0.82) !important;
}

.network-device-table-view td,
.network-client-table td,
.network-port-table td,
.module-table-row {
    color: #dff1ff !important;
    border-bottom-color: rgba(32, 148, 255, 0.14) !important;
}

.network-device-table-view tr.is-offline td,
.module-table-row.is-overdue {
    background: rgba(255, 79, 99, 0.08) !important;
}

.app-message-backdrop,
.loading-overlay {
    background: rgba(0, 6, 14, 0.72) !important;
}

.app-message-card,
.loading-card,
.modal {
    border: 1px solid rgba(32, 148, 255, 0.32) !important;
    border-radius: 8px !important;
    background: #06172b !important;
    color: #eaf6ff !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
}

.app-message-card p,
.loading-card small {
    color: #9cc1e2 !important;
}

.login-page .login-layout {
    width: min(560px, calc(100vw - 44px)) !important;
}

.login-brand-panel {
    min-height: 230px !important;
    padding: 18px !important;
    background:
        linear-gradient(180deg, rgba(2, 9, 20, 0.2), rgba(2, 9, 20, 0.78)),
        url("monarch-grid-mark.png") center / cover no-repeat !important;
}

.login-logo-wide {
    width: min(500px, 100%) !important;
    max-height: 210px !important;
    opacity: 0;
}

.module-logo {
    background:
        linear-gradient(180deg, rgba(3, 13, 27, 0.18), rgba(3, 13, 27, 0.78)),
        url("monarch-sidebar-logo.png") center / cover no-repeat !important;
}

.module-logo img {
    opacity: 0;
}

.network-module-nav a {
    border-radius: 0 !important;
}

.network-tool-card {
    min-height: 110px;
}

.network-tool-card form {
    justify-content: flex-end;
}

.network-tool-actions {
    min-width: 360px;
}

.network-tool-actions button,
.network-tool-actions .icon-button {
    min-width: 104px;
    justify-content: center;
}

.network-tool-card .icon-button {
    width: auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    text-decoration: none;
}

.network-auto-sync {
    color: #8fc8ff !important;
    border-color: rgba(32, 148, 255, 0.3) !important;
    background: rgba(8, 30, 58, 0.88) !important;
}

@media (max-width: 900px) {
    .app-main {
        padding: 18px;
    }

    .app-sidebar {
        width: 100%;
    }

    .topbar,
    .module-hero {
        min-height: auto;
    }
}

/* Dark theme correction pass: shell headers, sidebar logo, and pale legacy blocks */
.dashboard-workspace {
    background:
        linear-gradient(90deg, rgba(1, 8, 18, 0.72), rgba(4, 18, 38, 0.58)),
        url("lr-network-dark-background.png") center / cover fixed no-repeat !important;
}

.app-sidebar .brand-block,
.brand-block {
    min-height: 190px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 52% 42%, rgba(0, 162, 255, 0.18), transparent 44%),
        linear-gradient(145deg, rgba(4, 14, 31, 0.98), rgba(1, 7, 18, 0.96)) !important;
}

.app-sidebar .brand-block img,
.brand-block img {
    width: 145% !important;
    height: 170px !important;
    max-height: none !important;
    transform: translateX(0) scale(1) !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.top-header,
.topbar,
.module-hero,
.page-hero,
.network-header,
.content-header {
    min-height: 116px !important;
    border: 1px solid rgba(26, 128, 219, 0.4) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(4, 18, 36, 0.94), rgba(7, 32, 61, 0.76)),
        radial-gradient(circle at 84% 28%, rgba(0, 153, 255, 0.13), transparent 28%) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.36) !important;
    color: #eef8ff !important;
}

.top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    padding: 28px 30px !important;
}

.page-title h1,
.top-header h1,
.topbar h1,
.module-hero h1,
.page-hero h1,
.network-header h1,
.content-header h1 {
    color: #f5fbff !important;
    text-shadow: 0 0 20px rgba(20, 151, 255, 0.18) !important;
}

.page-title p,
.top-header p,
.topbar p,
.module-hero p,
.page-hero p,
.network-header p,
.content-header p {
    color: #89bce9 !important;
}

.top-actions,
.header-actions,
.network-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
    border: 1px solid rgba(32, 148, 255, 0.22) !important;
    border-radius: 8px !important;
    background: rgba(2, 12, 27, 0.78) !important;
}

.user-pill,
.user-chip,
.top-actions .user-pill {
    min-height: 42px !important;
    color: #eaf6ff !important;
    border: 1px solid rgba(32, 148, 255, 0.22) !important;
    border-radius: 6px !important;
    background: rgba(5, 24, 48, 0.82) !important;
}

.user-pill strong,
.user-chip strong {
    color: #f2fbff !important;
}

.system-status,
.sidebar-status {
    border: 1px solid rgba(32, 148, 255, 0.32) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(135deg, rgba(5, 24, 48, 0.92), rgba(2, 12, 27, 0.9)) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

.system-status strong,
.sidebar-status strong {
    color: #f0f9ff !important;
}

.system-status small,
.sidebar-status small {
    color: #8fc8ff !important;
}

.workflow-step,
.workflow-card,
.process-step,
.equipment-flow-step,
.timeline-step {
    border: 1px solid rgba(32, 148, 255, 0.25) !important;
    border-radius: 7px !important;
    background: rgba(4, 18, 36, 0.78) !important;
    color: #dff1ff !important;
}

.workflow-step strong,
.workflow-card strong,
.process-step strong,
.equipment-flow-step strong,
.timeline-step strong {
    color: #f4fbff !important;
}

.workflow-step small,
.workflow-card small,
.process-step small,
.equipment-flow-step small,
.timeline-step small {
    color: #90bde5 !important;
}

.panel-heading,
.card-heading,
.module-panel-heading,
.section-header {
    color: #f4fbff !important;
    border-bottom-color: rgba(32, 148, 255, 0.2) !important;
    background: transparent !important;
}

/* Reference dashboard interface pass */
body,
.dashboard-page,
.module-page {
    background:
        linear-gradient(90deg, rgba(0, 7, 17, 0.9), rgba(2, 18, 40, 0.72)),
        url("lr-network-dark-background.png") center / cover fixed no-repeat !important;
}

.app-frame {
    background: rgba(0, 7, 17, 0.2) !important;
}

.app-sidebar {
    width: 252px !important;
    padding: 18px 16px !important;
    background: rgba(1, 9, 21, 0.94) !important;
}

.app-sidebar .brand-block,
.brand-block {
    min-height: 166px !important;
    margin-bottom: 20px !important;
}

.app-sidebar .brand-block img,
.brand-block img {
    width: 132% !important;
    height: 144px !important;
}

.sidebar-nav {
    gap: 9px !important;
}

.sidebar-nav a {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 0.93rem !important;
}

.sidebar-nav span.nav-icon {
    width: 27px !important;
    height: 27px !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 27px !important;
    color: #24a8ff !important;
    border: 1px solid rgba(36, 168, 255, 0.22) !important;
    border-radius: 7px !important;
    background: rgba(36, 168, 255, 0.1) !important;
}

.dashboard-workspace {
    padding: 24px 26px 38px !important;
}

.top-header {
    min-height: 110px !important;
    margin-bottom: 22px !important;
    background:
        linear-gradient(135deg, rgba(4, 20, 42, 0.88), rgba(2, 13, 29, 0.78)),
        radial-gradient(circle at 78% 42%, rgba(0, 136, 255, 0.16), transparent 28%) !important;
}

.page-title h1 {
    font-size: clamp(1.9rem, 2.2vw, 2.7rem) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.top-actions {
    min-width: min(740px, 50vw);
    justify-content: flex-end;
    background: transparent !important;
    border-color: transparent !important;
}

.top-search {
    width: min(270px, 26vw);
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(32, 148, 255, 0.26);
    border-radius: 8px;
    background: rgba(0, 8, 19, 0.62);
}

.top-search span,
.header-icon {
    color: #8fc8ff;
}

.top-search svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.top-search input {
    width: 100%;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.header-icon {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(32, 148, 255, 0.22);
    border-radius: 50%;
    background: rgba(4, 22, 45, 0.72);
    font-weight: 900;
}

.header-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.header-icon b {
    position: absolute;
    top: -7px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 999px;
    background: #ff4155;
    font-size: 0.65rem;
}

.last-sync {
    color: #d7ecff;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.hub-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 22px;
    align-items: start;
}

.hub-dashboard-main {
    display: grid;
    gap: 22px;
}

.hub-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.hub-metric-card,
.hub-panel,
.hub-pages-overview {
    border: 1px solid rgba(32, 148, 255, 0.2);
    border-radius: 9px;
    background:
        linear-gradient(145deg, rgba(5, 24, 47, 0.92), rgba(1, 10, 24, 0.82)),
        rgba(3, 17, 36, 0.86);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.hub-metric-card {
    min-width: 0;
    min-height: 132px;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.hub-metric-card::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 18px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(36, 168, 255, 0.16);
    border-radius: 12px;
    background: rgba(36, 168, 255, 0.08);
}

.hub-metric-card span,
.hub-panel-heading p,
.hub-pages-overview p,
.hub-metric-card small {
    color: #9cb9d6;
}

.hub-metric-card strong {
    color: #f4fbff;
    font-size: clamp(1.55rem, 1.8vw, 2rem);
    line-height: 1;
}

.hub-metric-card.success strong {
    color: #37e58b;
}

.hub-metric-card.danger strong {
    color: #ff4b5d;
}

.hub-metric-card b {
    color: #44aaff;
    font-size: 0.78rem;
}

.hub-metric-card.danger b {
    color: #ff6b78;
}

.mini-sparkline {
    width: 86px;
    height: 22px;
    display: block;
    background:
        linear-gradient(135deg, transparent 8%, #36df87 9% 11%, transparent 12% 24%, #36df87 25% 27%, transparent 28% 38%, #36df87 39% 41%, transparent 42% 54%, #36df87 55% 57%, transparent 58% 70%, #36df87 71% 73%, transparent 74%);
    opacity: 0.9;
}

.hub-chart-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) minmax(235px, 1fr) minmax(190px, 0.7fr);
    gap: 14px;
}

.hub-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hub-panel {
    min-height: 260px;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 18px;
}

.hub-panel-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.hub-panel-heading h2,
.hub-pages-overview h2 {
    margin: 0;
    color: #f4fbff;
    font-size: 1rem;
}

.hub-panel-heading p,
.hub-pages-overview p {
    margin: 4px 0 0;
    font-size: 0.8rem;
}

.hub-panel-heading span,
.hub-panel-heading a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    color: #bfe2ff;
    border: 1px solid rgba(32, 148, 255, 0.24);
    border-radius: 7px;
    background: rgba(3, 17, 36, 0.72);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
}

.hub-line-chart {
    width: 100%;
    min-height: 250px;
}

.hub-chart-grid line {
    stroke: rgba(122, 177, 225, 0.13);
}

.hub-chart-axis text {
    fill: #91aac4;
    font-size: 13px;
}

.hub-chart-fill.blue { fill: url("#trafficDownload"); }
.hub-chart-fill.green { fill: url("#trafficUpload"); }
.hub-chart-fill.network-blue { fill: url("#networkDownload"); }
.hub-chart-fill.network-green { fill: url("#networkUpload"); }

.hub-chart-line {
    fill: none;
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(36, 168, 255, 0.35));
}

.hub-chart-line.blue { stroke: #168fff; }
.hub-chart-line.green { stroke: #35d27f; }

.hub-map-visual {
    min-height: 214px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(32, 148, 255, 0.12);
    border-radius: 8px;
    background:
        radial-gradient(circle at 55% 52%, rgba(35, 151, 255, 0.2), transparent 6%),
        radial-gradient(circle at 25% 48%, rgba(53, 210, 127, 0.18), transparent 5%),
        linear-gradient(135deg, rgba(15, 55, 86, 0.3), rgba(2, 12, 27, 0.48));
}

.hub-map-visual::before,
.hub-map-visual::after {
    content: "";
    position: absolute;
    inset: 20% 8%;
    border-top: 1px solid rgba(55, 221, 134, 0.52);
    border-radius: 50%;
    transform: rotate(-10deg);
}

.hub-map-visual::after {
    inset: 38% 10% 18%;
    transform: rotate(8deg);
}

.hub-map-visual span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #35d27f;
    box-shadow: 0 0 18px rgba(53, 210, 127, 0.9);
}

.network-telemetry-empty {
    min-height: 250px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 9px;
    padding: 28px;
    text-align: center;
    border: 1px dashed #c8dced;
    border-radius: 7px;
    background: #f8fbfe;
}
.network-telemetry-empty > span { width: 42px; height: 42px; display: grid; place-items: center; color: #087cdf; border-radius: 7px; background: #e4f3ff; }
.network-telemetry-empty svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.network-telemetry-empty strong { color: #0a3765; font-size: .82rem; }
.network-telemetry-empty p { max-width: 430px; margin: 0; color: #55718e; font-size: .7rem; line-height: 1.55; }
.network-telemetry-empty small { color: #70879d; font-size: .62rem; }
.traffic-source-note { display: flex; align-items: center; gap: 14px; color: #55718e; font-size: .66rem; }
.traffic-source-note span { display: inline-flex; align-items: center; gap: 5px; }
.traffic-source-note i { width: 8px; height: 8px; border-radius: 50%; }
.traffic-source-note i.blue { background: #168fff; }.traffic-source-note i.green { background: #35c784; }
.traffic-source-note small { margin-left: auto; color: #71879d; }

.hub-live-site-map {
    height: 300px !important;
    min-height: 300px;
    background: #eaf2f8 !important;
}
.hub-live-site-map::before,
.hub-live-site-map::after { display: none; }
.hub-live-site-map .leaflet-control-attribution { font-size: 8px; }
.hub-live-site-map .leaflet-popup-content-wrapper { border-radius: 7px; box-shadow: 0 12px 32px rgba(13, 48, 79, .2); }
.hub-live-site-map .leaflet-popup-content { min-width: 200px; margin: 14px; }
.depot-map-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 5px; text-align: center; color: #153f68; }
.depot-map-loading small { color: #64819c; }
.depot-map-marker-wrap { background: transparent; border: 0; }
.hub-live-site-map .depot-map-pin { position: static; display: inline-flex; align-items: center; width: auto; height: 28px; gap: 7px; white-space: nowrap; border-radius: 0; background: transparent; box-shadow: none; }
.hub-live-site-map .depot-map-marker { position: static; flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(6, 43, 77, .24), 0 5px 14px rgba(7, 38, 67, .34); }
.hub-live-site-map .depot-map-marker i { position: static; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: none; }
.depot-map-marker.good { background: #08734d; }.depot-map-marker.warn { background: #986000; }.depot-map-marker.bad { background: #a92138; }
.hub-live-site-map .depot-map-label { position: static; width: auto; height: auto; padding: 4px 7px; color: #082f57; border: 1px solid rgba(112, 145, 174, .48); border-radius: 4px; background: rgba(255, 255, 255, .94); box-shadow: 0 3px 9px rgba(10, 43, 73, .16); font-size: 10px; font-weight: 900; line-height: 1; transform: translateY(var(--label-y, 0)); }
.hub-live-site-map .depot-map-pin.label-left .depot-map-label { transform: translate(calc(-100% - 31px), var(--label-y, 0)); }
.depot-map-popup { display: grid; gap: 6px; color: #133c64; }
.depot-map-popup strong { font-size: .78rem; }.depot-map-popup small { color: #617b94; line-height: 1.45; }.depot-map-popup span { color: #284f73; font-size: .65rem; font-weight: 700; }
.depot-map-popup a { margin-top: 4px; color: #087ad5; font-size: .65rem; font-weight: 800; text-decoration: none; }

.site-location-intro { margin-bottom: 16px; }
.site-location-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.site-location-card { display: grid; gap: 13px; margin: 0; }
.site-location-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid #dbe7f2; }
.site-location-card header h2 { margin: 0 0 3px; color: #0b3761; font-size: .88rem; }.site-location-card header small { color: #6a8299; font-size: .6rem; }
.site-location-card label { display: grid; gap: 6px; color: #244d73; font-size: .64rem; font-weight: 800; }
.site-location-card input { width: 100%; min-height: 42px; padding: 9px 11px; color: #123a61; border: 1px solid #bed3e5; border-radius: 6px; background: #fff; }
.site-coordinate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site-location-card footer { display: flex; justify-content: flex-end; }

@media (max-width: 720px) {
    .site-location-grid { grid-template-columns: 1fr; }
    .site-coordinate-fields { grid-template-columns: 1fr; }
}

.uisp-port-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(205px,1fr)); gap: 10px; }
.uisp-port-tile { display: grid; gap: 7px; padding: 13px; border: 1px solid #dce7f1; border-top: 3px solid #9fb4c7; border-radius: 7px; background: #fff; }
.uisp-port-tile.is-up { border-top-color: #25bb7c; }.uisp-port-tile.is-down { border-top-color: #c8d3dd; background: #f7f9fb; }
.uisp-port-tile header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uisp-port-tile header span { color: #0a3763; font-size: .76rem; font-weight: 900; }
.uisp-port-tile header b { color: #668098; font-size: .58rem; text-transform: uppercase; }
.uisp-port-tile > strong { color: #0a8358; font-size: .7rem; }.uisp-port-tile.is-down > strong { color: #6d7e8e; }
.uisp-port-tile > small { min-height: 18px; color: #607a93; font-size: .61rem; }
.uisp-port-tile dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 10px; margin: 3px 0 0; padding-top: 8px; border-top: 1px solid #e5edf4; }
.uisp-port-tile dt { color: #71869a; font-size: .58rem; }.uisp-port-tile dd { margin: 0; overflow: hidden; color: #1a4268; font-size: .6rem; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.controller-write-note { margin: 12px 0 0; padding: 10px 12px; color: #57718a; border: 1px solid #d8e6f2; border-radius: 6px; background: #f7fbfe; font-size: .65rem; line-height: 1.5; }
.controller-write-note strong { color: #174872; }
.config-backup-list { display: grid; gap: 8px; }
.config-backup-list > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px; border: 1px solid #dce7f1; border-radius: 6px; background: #fff; }
.config-backup-list span { display: grid; gap: 3px; min-width: 0; }.config-backup-list strong { overflow: hidden; color: #123c65; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.config-backup-list small { color: #6a8299; font-size: .6rem; }

.hub-map-legend {
    display: flex;
    gap: 14px;
    color: #9cb9d6;
    font-size: 0.78rem;
}

.hub-map-legend i {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
}

.hub-map-legend .good { background: #35d27f; }
.hub-map-legend .warn { background: #ffc94a; }
.hub-map-legend .bad { background: #ff4b5d; }

.hub-ring-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.hub-ring {
    min-height: 124px;
    min-width: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid rgba(32, 148, 255, 0.14);
    border-radius: 9px;
    background: rgba(2, 14, 30, 0.48);
}

.hub-ring::before {
    content: "";
    width: 54px;
    height: 54px;
    display: block;
    margin-bottom: -53px;
    border-radius: 50%;
    background: conic-gradient(#35d27f calc(var(--value) * 1%), rgba(32, 148, 255, 0.22) 0);
    mask: radial-gradient(circle, transparent 54%, #000 56%);
}

.hub-ring span {
    color: #f4fbff;
    font-size: 0.98rem;
    font-weight: 900;
}

.hub-ring small {
    color: #37d889;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-site-list,
.hub-alert-feed,
.hub-work-list,
.hub-pages-overview > div {
    display: grid;
    gap: 10px;
}

.hub-site-list a,
.hub-alert-feed a,
.hub-work-list a,
.hub-pages-overview a {
    color: #eaf6ff;
    text-decoration: none;
    border: 1px solid rgba(32, 148, 255, 0.13);
    border-radius: 8px;
    background: rgba(2, 15, 32, 0.52);
}

.hub-site-list a {
    display: grid;
    grid-template-columns: 130px minmax(80px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.hub-site-list i,
.hub-work-list i {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.hub-site-list em,
.hub-work-list em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #36d887, #168fff);
}

.hub-alert-feed a,
.hub-work-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.hub-alert-feed span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #35d27f;
}

.hub-alert-feed span.critical { background: #ff4b5d; }
.hub-alert-feed span.warning { background: #ffc94a; }
.hub-alert-feed span.info { background: #168fff; }

.hub-alert-feed small,
.hub-work-list span {
    color: #9cb9d6;
    font-size: 0.78rem;
}

.hub-work-list a {
    grid-template-columns: minmax(0, 1fr) auto;
}

.hub-work-list i {
    grid-column: 1 / -1;
}

.hub-pages-overview {
    position: sticky;
    top: 24px;
    min-height: 620px;
    padding: 22px;
}

.hub-pages-overview h2 {
    color: #168fff;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hub-pages-overview p {
    margin-bottom: 20px;
    line-height: 1.65;
}

.hub-pages-overview a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    padding: 12px;
    background: transparent;
    border-color: transparent;
}

.hub-pages-overview a:hover {
    border-color: rgba(32, 148, 255, 0.24);
    background: rgba(4, 24, 49, 0.62);
}

.hub-pages-overview a span {
    grid-row: span 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #24a8ff;
    border: 1px solid rgba(36, 168, 255, 0.3);
    border-radius: 8px;
}

.hub-pages-overview svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.hub-pages-overview small {
    color: #9cb9d6;
}

.loading-card {
    width: min(440px, calc(100vw - 42px)) !important;
    padding: 18px 22px 24px !important;
    background:
        linear-gradient(145deg, rgba(4, 20, 42, 0.98), rgba(1, 8, 19, 0.96)) !important;
}

.loading-logo {
    width: min(330px, 92%);
    height: 118px;
    object-fit: contain;
    object-position: center;
    filter: brightness(1.38) contrast(1.12) drop-shadow(0 0 18px rgba(39, 176, 255, 0.42));
}

.loading-card span {
    width: 36px !important;
    height: 36px !important;
    border-color: rgba(36, 168, 255, 0.2) !important;
    border-top-color: #36d887 !important;
}

.loading-card strong {
    color: #f4fbff !important;
}

/* Focused dashboard variants */
.hub-dashboard-wide {
    width: 100%;
}

.hub-metric-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hub-compliance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 14px;
}

.hub-compliance-chart-panel,
.hub-compliance-ring-panel {
    min-height: 430px;
}

.hub-compliance-bars {
    display: grid;
    gap: 10px;
}

.hub-compliance-bars a {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(140px, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
    padding: 12px;
    color: #eaf6ff;
    text-decoration: none;
    border: 1px solid rgba(32, 148, 255, 0.14);
    border-radius: 8px;
    background: rgba(2, 15, 32, 0.52);
}

.hub-compliance-bars a:hover {
    border-color: rgba(32, 148, 255, 0.36);
    background: rgba(5, 28, 55, 0.72);
}

.hub-compliance-bars span {
    font-weight: 900;
}

.hub-compliance-bars i {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.hub-compliance-bars em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #35d27f, #168fff);
}

.hub-compliance-bars .is-warning em {
    background: linear-gradient(90deg, #ffc94a, #168fff);
}

.hub-compliance-bars .is-low em {
    background: linear-gradient(90deg, #ff4b5d, #ffc94a);
}

.hub-compliance-bars b {
    color: #f4fbff;
}

.hub-compliance-bars small {
    grid-column: 1 / -1;
    color: #9cb9d6;
}

.hub-big-ring {
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    position: relative;
}

.hub-big-ring::before {
    content: "";
    width: 190px;
    height: 190px;
    display: block;
    margin-bottom: -170px;
    border-radius: 50%;
    background: conic-gradient(#35d27f calc(var(--value) * 1%), rgba(32, 148, 255, 0.18) 0);
    mask: radial-gradient(circle, transparent 58%, #000 60%);
    filter: drop-shadow(0 0 22px rgba(53, 210, 127, 0.18));
}

.hub-big-ring span {
    color: #f4fbff;
    font-size: 2.6rem;
    font-weight: 1000;
}

.hub-big-ring small {
    color: #9cb9d6;
    font-weight: 900;
}

.hub-alert-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hub-alert-summary div,
.hub-integration-stack form {
    border: 1px solid rgba(32, 148, 255, 0.16);
    border-radius: 8px;
    background: rgba(2, 15, 32, 0.56);
}

.hub-alert-summary div {
    min-height: 86px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
}

.hub-alert-summary strong {
    color: #f4fbff;
    font-size: 1.5rem;
}

.hub-alert-summary small {
    color: #9cb9d6;
    font-weight: 800;
}

.hub-alerts-grid {
    grid-template-columns: 1fr 1fr;
}

.hub-alerts-grid .hub-panel {
    min-height: 360px;
}

.hub-integration-stack {
    display: grid;
    gap: 10px;
}

.hub-integration-stack form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
    padding: 12px;
}

.hub-integration-stack strong {
    color: #f4fbff;
}

.hub-integration-stack small {
    grid-column: 1 / -1;
    color: #9cb9d6;
}

.hub-integration-stack button {
    grid-column: 1 / -1;
    min-height: 34px;
    width: 100%;
    justify-content: center;
}

/* Login logo visibility correction */
.login-brand-panel {
    min-height: 214px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 18px !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(20, 151, 255, 0.22), transparent 48%),
        linear-gradient(145deg, rgba(1, 8, 19, 0.96), rgba(4, 20, 42, 0.96)) !important;
}

.login-logo-wide {
    width: min(610px, 118%) !important;
    height: 214px !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.85) contrast(1.22) saturate(1.18) drop-shadow(0 0 24px rgba(35, 171, 255, 0.48)) !important;
}

@media (max-width: 1380px) {
    .hub-dashboard-layout {
        grid-template-columns: 1fr;
    }

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

    .hub-traffic-panel {
        grid-column: 1 / -1;
    }

    .hub-pages-overview {
        position: static;
        min-height: auto;
    }

    .hub-pages-overview > div {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .hub-metric-grid,
    .hub-chart-row,
    .hub-bottom-grid,
    .hub-compliance-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub-traffic-panel {
        grid-column: 1 / -1;
    }

    .top-actions {
        min-width: 0;
    }

    .top-search,
    .last-sync {
        display: none;
    }
}

@media (max-width: 760px) {
    .hub-metric-grid,
    .hub-metric-grid-four,
    .hub-chart-row,
    .hub-bottom-grid,
    .hub-alerts-grid,
    .hub-compliance-layout,
    .hub-pages-overview > div,
    .sidebar-shortcuts > div {
        grid-template-columns: 1fr;
    }

    .hub-compliance-bars a {
        grid-template-columns: 1fr auto;
    }

    .hub-compliance-bars i,
    .hub-compliance-bars small {
        grid-column: 1 / -1;
    }
}

/* New Control Hub login screen */
.login-redesign-page {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    color: #0f2748 !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 122, 255, 0.08), transparent 28%),
        linear-gradient(135deg, #f6f9fd 0%, #eef4fb 100%) !important;
}

.login-redesign-page::before,
.login-redesign-page::after {
    display: none !important;
}

.login-redesign-page .login-layout {
    width: min(1480px, calc(100vw - 48px)) !important;
    min-height: min(88vh, 940px) !important;
    display: grid !important;
    place-items: stretch !important;
}

.login-redesign-page .login-box {
    width: 100% !important;
    min-height: min(88vh, 940px) !important;
    max-height: 940px !important;
    display: grid !important;
    grid-template-columns: minmax(460px, 0.92fr) minmax(520px, 1.08fr) !important;
    overflow: hidden !important;
    border: 1px solid rgba(15, 39, 72, 0.08) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 26px 80px rgba(21, 43, 78, 0.16) !important;
}

.login-hero-panel {
    position: relative;
    min-height: min(88vh, 940px);
    overflow: hidden;
    padding: 78px 88px 64px;
    color: #fff;
    background:
        radial-gradient(ellipse 56% 21% at 48% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.38) 56%, transparent 100%),
        radial-gradient(circle at 16% 8%, rgba(24, 166, 255, 0.42), transparent 28%),
        linear-gradient(150deg, #0679d9 0%, #063e8e 38%, #031d52 100%);
}

.login-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background:
        linear-gradient(120deg, transparent 0 36%, rgba(255, 255, 255, 0.08) 36.2% 36.7%, transparent 37%),
        radial-gradient(circle at 70% 36%, rgba(36, 180, 255, 0.65) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 58%, rgba(36, 180, 255, 0.55) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 72%, rgba(36, 180, 255, 0.55) 0 2px, transparent 3px);
}

.login-hero-panel::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -90px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 190, 255, 0.18), transparent 66%);
}

.login-hero-brand,
.login-hero-copy,
.login-hero-art {
    position: relative;
    z-index: 1;
}

.login-hero-brand {
    width: min(540px, 100%);
    height: 188px;
    display: flex;
    align-items: center;
    margin: -18px 0 28px;
}

.login-hero-brand img {
    width: 124%;
    max-width: none;
    height: 224px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(1.16) contrast(1.08) saturate(1.08) drop-shadow(0 18px 34px rgba(0, 28, 76, 0.28));
    mix-blend-mode: normal;
    transform: translate(105px, 8px) scale(1.66);
    transform-origin: center;
}

.login-hero-copy > span {
    width: 54px;
    height: 3px;
    display: block;
    margin-bottom: 24px;
    background: #ffd21a;
}

.login-hero-copy h2 {
    max-width: 360px;
    margin: 0 0 28px;
    color: #fff;
    font-size: 1.65rem;
    line-height: 1.28;
}

.login-hero-copy ul {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-hero-copy li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    max-width: 430px;
}

.login-hero-copy li::before {
    content: "⌁";
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(0, 126, 255, 0.5), rgba(255, 255, 255, 0.85)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 12px 28px rgba(0, 22, 68, 0.24);
    color: #087ce7;
    font-size: 1.25rem;
    font-weight: 900;
}

.login-hero-copy li:nth-child(2)::before {
    content: "▧";
}

.login-hero-copy li:nth-child(3)::before {
    content: "◇";
}

.login-hero-copy b {
    grid-column: 2;
    color: #fff;
    font-size: 0.95rem;
}

.login-hero-copy small {
    grid-column: 2;
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

.login-hero-art {
    position: absolute;
    right: 56px;
    bottom: 72px;
    width: 350px;
    height: 300px;
    display: none;
    pointer-events: none;
}

.login-hero-art::before {
    content: "";
    position: absolute;
    left: 112px;
    bottom: 38px;
    width: 158px;
    height: 96px;
    border-radius: 26px;
    transform: perspective(280px) rotateX(58deg) rotateZ(-32deg);
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.95) 0 9px, rgba(78, 218, 255, 0.88) 10px 20px, transparent 21px),
        linear-gradient(145deg, rgba(0, 157, 255, 0.88), rgba(0, 52, 145, 0.9));
    box-shadow: 0 0 36px rgba(64, 214, 255, 0.72), 0 22px 40px rgba(0, 18, 70, 0.36);
}

.login-hero-art i {
    position: absolute;
    width: 74px;
    height: 54px;
    border: 1px solid rgba(92, 210, 255, 0.7);
    border-radius: 14px;
    background: rgba(0, 88, 185, 0.28);
    transform: rotate(-28deg);
    box-shadow: 0 0 18px rgba(65, 199, 255, 0.22);
}

.login-hero-art i:nth-child(1) { left: 8px; bottom: 26px; }
.login-hero-art i:nth-child(2) { right: 18px; bottom: 4px; }
.login-hero-art i:nth-child(3) { right: 82px; bottom: 132px; }
.login-hero-art i:nth-child(4) { left: 64px; bottom: -58px; }

.login-redesign-page .login-content {
    width: min(620px, calc(100% - 96px)) !important;
    align-self: center !important;
    justify-self: center !important;
    display: grid !important;
    gap: 0 !important;
    padding: 48px 56px !important;
    border: 1px solid rgba(15, 39, 72, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 22px 70px rgba(21, 43, 78, 0.12) !important;
}

.login-card-logo {
    height: 184px;
    display: flex;
    justify-content: center;
    margin: -12px 0 14px;
}

.login-card-logo img {
    width: min(390px, 92%);
    height: 184px;
    object-fit: contain;
    object-position: center;
    filter: brightness(1.08) contrast(1.08) saturate(1.06);
}

.login-redesign-page .login-content h1 {
    margin: 0;
    color: #092c66 !important;
    font-size: 2rem;
    line-height: 1.15;
    text-align: center;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.login-redesign-page .login-content > p {
    margin: 12px 0 34px;
    color: #6d7a92 !important;
    font-size: 1.05rem;
    text-align: center;
}

.login-redesign-page .login-form {
    display: grid;
    gap: 22px;
}

.login-redesign-page .login-form label {
    display: grid;
    gap: 10px;
    color: #15233a !important;
    font-size: 0.92rem;
    font-weight: 800;
}

.login-input-shell {
    min-height: 64px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 1px solid #d3dbe6;
    border-radius: 8px;
    background: #fff;
}

.login-input-shell i {
    color: #7a8798;
    font-style: normal;
    font-size: 1.06rem;
    text-align: center;
}

.login-input-shell i svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-redesign-page .login-form input {
    min-height: 56px !important;
    padding: 0 !important;
    color: #12243f !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1rem;
}

.login-redesign-page .login-form input::placeholder {
    color: #7a8798 !important;
}

.login-input-shell:focus-within {
    border-color: #0878df;
    box-shadow: 0 0 0 4px rgba(8, 120, 223, 0.12);
}

.login-forgot-link {
    justify-self: end;
    margin-top: -8px;
    color: #006bd6;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 800;
}

.login-redesign-page .login-form button {
    min-height: 66px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #087ce7 0%, #0058c7 100%) !important;
    box-shadow: 0 16px 30px rgba(0, 91, 202, 0.24) !important;
    font-size: 1.2rem !important;
    font-weight: 900;
}

.login-redesign-page .form-error {
    margin: -4px 0 0;
    padding: 12px 14px;
    color: #a41428 !important;
    border: 1px solid rgba(255, 65, 85, 0.25);
    border-radius: 8px;
    background: rgba(255, 65, 85, 0.08);
}

.login-redesign-page .login-footnote {
    display: block;
    margin-top: 30px;
    color: #7b8798 !important;
    text-align: center;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .login-redesign-page .login-box {
        grid-template-columns: 1fr !important;
    }

    .login-hero-panel {
        min-height: auto;
        padding: 56px 48px;
    }

    .login-hero-art {
        display: none;
    }

    .login-redesign-page .login-content {
        width: min(620px, calc(100% - 48px)) !important;
        margin: 38px 0;
    }
}

@media (max-width: 700px) {
    .login-redesign-page {
        padding: 0 !important;
    }

    .login-redesign-page .login-layout {
        width: 100% !important;
        min-height: 100vh !important;
    }

    .login-redesign-page .login-box {
        border-radius: 0 !important;
    }

    .login-hero-panel {
        padding: 36px 28px;
    }

    .login-hero-brand {
        height: 132px;
        margin-bottom: 28px;
    }

    .login-hero-brand img {
        height: 158px;
    }

    .login-redesign-page .login-content {
        width: calc(100% - 32px) !important;
        padding: 36px 24px !important;
    }
}

/* ================================================================
   MONARCH GRID SYSTEM - SHARED APPLICATION INTERFACE
   ================================================================ */
:root {
    --monarch-navy: #061d45;
    --monarch-deep: #03142f;
    --monarch-blue: #086fd6;
    --monarch-cyan: #13a4f2;
    --monarch-yellow: #f8c400;
    --monarch-ink: #102443;
    --monarch-muted: #607493;
    --monarch-line: #d9e5f2;
    --monarch-surface: #ffffff;
    --monarch-canvas: #eef4fb;
    --monarch-soft: #f6f9fd;
    --monarch-success: #0a9f6a;
    --monarch-danger: #d93b52;
    --monarch-warning: #d58b08;
    --monarch-shadow: 0 10px 30px rgba(16, 47, 87, 0.08);
}

body:not(.login-redesign-page),
body.dashboard-page,
body.module-page,
body.network-dark-page {
    min-height: 100vh;
    color: var(--monarch-ink) !important;
    background:
        linear-gradient(rgba(238, 244, 251, 0.93), rgba(238, 244, 251, 0.93)),
        url("lr-network-dark-background.png") center / cover fixed !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body:not(.login-redesign-page)::before,
body:not(.login-redesign-page)::after,
.dashboard-workspace::before,
.dashboard-workspace::after,
.module-page::before,
.module-page::after,
.module-shell::before,
.module-shell::after {
    display: none !important;
}

.app-frame {
    min-height: 100vh !important;
    display: grid !important;
    grid-template-columns: 264px minmax(0, 1fr) !important;
    background: transparent !important;
}

.app-sidebar {
    position: sticky !important;
    top: 0;
    z-index: 20;
    width: auto !important;
    height: 100vh;
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    padding: 22px 18px 18px !important;
    overflow-y: auto;
    color: #dbeaff !important;
    border: 0 !important;
    border-right: 1px solid rgba(37, 150, 255, 0.22) !important;
    background:
        radial-gradient(circle at 50% 4%, rgba(23, 125, 239, 0.2), transparent 28%),
        linear-gradient(180deg, #061d45 0%, #03142f 100%) !important;
    box-shadow: 8px 0 30px rgba(3, 20, 47, 0.13) !important;
}

.app-sidebar .brand-block {
    width: 100% !important;
    height: 172px !important;
    min-height: 172px;
    display: grid !important;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(51, 159, 255, 0.34) !important;
    border-radius: 8px !important;
    background: rgba(1, 12, 29, 0.48) !important;
    box-shadow: inset 0 0 40px rgba(12, 113, 219, 0.1) !important;
}

.app-sidebar .brand-block img {
    width: 96% !important;
    height: 158px !important;
    object-fit: contain !important;
    object-position: center !important;
    mix-blend-mode: screen;
    filter: brightness(1.14) contrast(1.08) saturate(1.12) !important;
    transform: none !important;
}

.sidebar-nav {
    display: grid !important;
    gap: 5px !important;
}

.sidebar-nav a {
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px !important;
    padding: 7px 10px !important;
    color: #b9cce7 !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sidebar-nav a:hover {
    color: #fff !important;
    border-color: rgba(37, 150, 255, 0.18) !important;
    background: rgba(13, 98, 193, 0.2) !important;
}

.sidebar-nav a.active {
    color: #fff !important;
    border-color: rgba(44, 159, 255, 0.64) !important;
    background: linear-gradient(135deg, rgba(8, 111, 214, 0.9), rgba(7, 70, 145, 0.9)) !important;
    box-shadow: 0 8px 18px rgba(0, 76, 171, 0.22) !important;
}

.nav-icon {
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center;
    color: #52baff !important;
    border: 1px solid rgba(34, 156, 255, 0.16);
    border-radius: 6px !important;
    background: rgba(15, 128, 226, 0.12) !important;
}

.sidebar-nav .active .nav-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1) !important;
}

.nav-icon svg {
    width: 17px !important;
    height: 17px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-nav a > b {
    min-width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    color: #fff !important;
    border-radius: 11px;
    background: var(--monarch-danger) !important;
    font-size: 0.66rem !important;
}

.sidebar-shortcuts {
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid rgba(139, 192, 255, 0.14);
}

.sidebar-shortcuts h2 {
    margin: 0 0 10px;
    color: #7795bb !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}

.sidebar-shortcuts > div {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.sidebar-shortcuts a {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 8px 3px;
    color: #a9bfdd !important;
    border: 1px solid rgba(50, 139, 231, 0.14);
    border-radius: 6px;
    background: rgba(10, 57, 111, 0.18);
    text-decoration: none;
}

.sidebar-shortcuts a:hover {
    color: #fff !important;
    border-color: rgba(54, 164, 255, 0.42);
    background: rgba(12, 96, 190, 0.28);
}

.sidebar-shortcuts small {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-status {
    margin-top: auto !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 12px !important;
    color: #d8e7fb !important;
    border: 1px solid rgba(61, 165, 255, 0.2) !important;
    border-radius: 7px !important;
    background: rgba(2, 13, 33, 0.4) !important;
}

.system-status > span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    background: #2ed98b !important;
    box-shadow: 0 0 0 5px rgba(46, 217, 139, 0.1), 0 0 14px #2ed98b;
}

.system-status strong,
.system-status small {
    display: block;
}

.system-status strong { font-size: 0.75rem; }
.system-status small { margin-top: 2px; color: #7394bd !important; font-size: 0.64rem; }

.dashboard-workspace {
    width: auto !important;
    min-width: 0;
    min-height: 100vh;
    padding: 24px clamp(20px, 2.4vw, 38px) 42px !important;
    overflow: visible !important;
    color: var(--monarch-ink) !important;
    background: transparent !important;
}

.top-header {
    min-height: 104px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 22px !important;
    padding: 22px 24px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: var(--monarch-shadow) !important;
}

.top-header::before,
.top-header::after { display: none !important; }

.page-title { min-width: 260px; }
.page-title h1,
.top-header h1 {
    margin: 0 !important;
    color: var(--monarch-ink) !important;
    font-size: clamp(1.65rem, 2.2vw, 2.25rem) !important;
    line-height: 1.08;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.page-title p,
.top-header p {
    margin: 8px 0 0 !important;
    color: var(--monarch-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.4;
}

.top-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 9px !important;
    color: var(--monarch-muted) !important;
}

.top-search {
    width: clamp(190px, 18vw, 290px) !important;
    min-height: 40px;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 12px !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 6px !important;
    background: var(--monarch-soft) !important;
}

.top-search input {
    min-width: 0;
    padding: 0 !important;
    color: var(--monarch-ink) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.header-icon {
    position: relative;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center;
    color: var(--monarch-blue) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.header-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
.header-icon b { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; color: #fff; border-radius: 9px; background: var(--monarch-danger); font-size: 0.58rem; }
.last-sync { color: var(--monarch-muted) !important; font-size: 0.7rem !important; white-space: nowrap; }
.user-pill { min-height: 38px; display: flex !important; align-items: center; padding: 0 12px !important; color: var(--monarch-ink) !important; border: 1px solid var(--monarch-line) !important; border-radius: 6px !important; background: #fff !important; }
.user-pill strong { font-size: 0.72rem !important; }

a.button-link,
button,
input[type="submit"],
.panel-heading a,
.panel-heading button,
.module-hero-actions a,
.network-action-button,
.network-table-action {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px !important;
    color: #fff !important;
    border: 1px solid #0868c5 !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #0b83eb, #075ebc) !important;
    box-shadow: 0 7px 16px rgba(8, 104, 197, 0.16) !important;
    font: inherit;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
}

a.button-link:hover,
button:hover,
.panel-heading a:hover,
.panel-heading button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

a.button-link.secondary,
button.secondary,
.panel-heading a,
.network-action-button.secondary,
.app-message-actions button.secondary {
    color: #12528f !important;
    border-color: #bdd7ee !important;
    background: #edf6fd !important;
    box-shadow: none !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.52 !important;
    cursor: not-allowed !important;
}

.panel,
.network-panel,
.hub-panel,
.module-card-shell,
.receipt-sheet,
.request-detail-sheet,
.detail-section,
.module-launch-card,
.network-action-card,
.network-tool-card {
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--monarch-shadow) !important;
}

.panel,
.network-panel,
.hub-panel,
.module-card-shell { margin-bottom: 18px !important; padding: 18px !important; }

.panel::before,
.panel::after,
.hub-panel::before,
.hub-panel::after,
.network-panel::before,
.network-panel::after,
.module-card-shell::before,
.module-card-shell::after,
.module-launch-card::before,
.module-launch-card::after { display: none !important; }

.panel-heading,
.hub-panel-heading,
.module-panel-heading {
    min-height: 42px;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 15px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid #e5edf6 !important;
}

.panel-heading h2,
.hub-panel-heading h2,
.module-panel-heading h2,
.panel h2,
.network-panel h2 {
    margin: 0 !important;
    color: var(--monarch-ink) !important;
    font-size: 0.92rem !important;
    line-height: 1.3;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.panel-heading p,
.hub-panel-heading p,
.module-panel-heading p {
    margin: 4px 0 0 !important;
    color: var(--monarch-muted) !important;
    font-size: 0.72rem !important;
}

.hub-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
}

.hub-dashboard-main { min-width: 0; }
.hub-metric-grid,
.hub-metric-grid-four {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.hub-metric-card {
    min-height: 126px !important;
    display: grid !important;
    align-content: center;
    gap: 5px;
    padding: 17px 18px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-top: 3px solid #4aa8ec !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: var(--monarch-shadow) !important;
}

.hub-metric-card.success { border-top-color: var(--monarch-success) !important; }
.hub-metric-card.danger { border-top-color: var(--monarch-danger) !important; }
.hub-metric-card span { color: var(--monarch-muted) !important; font-size: 0.7rem !important; }
.hub-metric-card strong { color: var(--monarch-ink) !important; font-size: 1.75rem !important; }
.hub-metric-card.success strong { color: var(--monarch-success) !important; }
.hub-metric-card.danger strong { color: var(--monarch-danger) !important; }
.hub-metric-card small { color: var(--monarch-muted) !important; font-size: 0.68rem !important; }
.hub-metric-card b { color: var(--monarch-blue) !important; font-size: 0.66rem !important; }

.hub-chart-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.9fr) !important;
    gap: 16px !important;
}

.hub-chart-row .hub-system-panel { grid-column: 1 / -1; }
.hub-bottom-grid,
.hub-compliance-layout,
.hub-alerts-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 16px !important;
}

.hub-bottom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.hub-integration-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.hub-integration-stack form {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 3px 10px !important;
    padding: 12px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 6px !important;
    background: var(--monarch-soft) !important;
}

.hub-integration-stack form .source-pill { grid-row: 1 / span 2; }
.hub-integration-stack form strong { color: var(--monarch-ink) !important; font-size: 0.75rem !important; }
.hub-integration-stack form small { color: var(--monarch-muted) !important; font-size: 0.62rem !important; }
.hub-integration-stack form button { grid-column: 3; grid-row: 1 / span 2; }

.hub-pages-overview {
    display: block !important;
    padding: 18px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--monarch-shadow) !important;
}

.hub-pages-overview h2 { margin: 0; color: var(--monarch-ink) !important; font-size: 0.9rem !important; }
.hub-pages-overview > p { margin: 5px 0 14px; color: var(--monarch-muted) !important; font-size: 0.72rem !important; }
.hub-pages-overview > div { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.hub-pages-overview a { min-width: 0; display: grid !important; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 11px !important; color: var(--monarch-ink) !important; border: 1px solid #e2ebf5 !important; border-radius: 6px !important; background: var(--monarch-soft) !important; text-decoration: none; }
.hub-pages-overview a > span { grid-row: 1 / span 2; color: var(--monarch-blue) !important; }
.hub-pages-overview a strong { font-size: 0.75rem !important; }
.hub-pages-overview a small { color: var(--monarch-muted) !important; font-size: 0.62rem !important; }

.hub-compliance-bars,
.hub-site-list,
.network-alert-list,
.hub-alert-feed {
    scrollbar-width: thin;
    scrollbar-color: #a8c8e5 #eef5fb;
}

.hub-compliance-bars { max-height: 470px; overflow-y: auto; padding-right: 5px; }
.hub-site-list,
.network-alert-list,
.hub-alert-feed { max-height: 360px; overflow-y: auto; padding-right: 4px; }

.network-module-nav {
    display: flex !important;
    gap: 6px !important;
    margin: 0 0 18px !important;
    padding: 6px !important;
    overflow-x: auto;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--monarch-shadow) !important;
}

.network-module-nav a {
    min-height: 36px;
    display: inline-flex !important;
    align-items: center;
    padding: 7px 13px !important;
    color: var(--monarch-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    background: transparent !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-decoration: none;
    white-space: nowrap;
}

.network-module-nav a.active {
    color: #fff !important;
    border-color: #0868c5 !important;
    background: linear-gradient(135deg, #0b83eb, #075ebc) !important;
}

.module-table,
.project-table,
.network-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
}

.network-table-wrap {
    max-height: 620px;
    overflow: auto;
}

.module-table-head,
.project-head,
table thead tr {
    color: #2c5d8d !important;
    background: #eaf3fb !important;
}

.module-table-head,
.module-table-row,
.project-head,
.project-row { min-height: 48px !important; padding: 10px 12px !important; border-bottom: 1px solid #e3ecf5 !important; }
.module-table-row:last-child,
.project-row:last-child { border-bottom: 0 !important; }
.module-table-row:hover,
.project-row:hover,
table tbody tr:hover { background: #f6faff !important; }

table {
    width: 100% !important;
    color: var(--monarch-ink) !important;
    border-collapse: collapse !important;
    background: #fff !important;
}

th {
    padding: 11px 12px !important;
    color: #2c5d8d !important;
    border-bottom: 1px solid #cfe0ef !important;
    background: #eaf3fb !important;
    font-size: 0.66rem !important;
    letter-spacing: 0 !important;
    text-align: left;
    text-transform: uppercase;
}

td {
    padding: 11px 12px !important;
    color: var(--monarch-ink) !important;
    border-bottom: 1px solid #e3ecf5 !important;
    font-size: 0.75rem !important;
}

tr.is-offline td { background: #fff3f5 !important; }
.source-pill,
.device-status,
.status,
.priority {
    min-height: 24px;
    display: inline-flex !important;
    align-items: center;
    padding: 4px 8px !important;
    border-radius: 5px !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
}

.device-status.good,
.status.good { color: #08754f !important; background: #dff5ec !important; }
.device-status.danger,
.status.danger,
.priority.critical { color: #ae2439 !important; background: #fde4e8 !important; }

label { color: var(--monarch-ink) !important; font-size: 0.76rem !important; font-weight: 700 !important; }
input,
select,
textarea {
    width: 100%;
    min-height: 42px !important;
    padding: 9px 11px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid #c7d8e8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    font: inherit;
}

textarea { min-height: 104px !important; resize: vertical; }
input:focus,
select:focus,
textarea:focus { outline: 0; border-color: #1689e8 !important; box-shadow: 0 0 0 3px rgba(22, 137, 232, 0.12) !important; }
.form-grid { gap: 14px !important; }
.form-actions { gap: 9px !important; padding-top: 15px !important; }

.modal {
    width: min(660px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 48px);
    padding: 0 !important;
    overflow: auto;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 30px 80px rgba(7, 34, 72, 0.26) !important;
}

.modal::backdrop { background: rgba(3, 20, 47, 0.62) !important; backdrop-filter: blur(4px); }
.modal-form { padding: 22px !important; color: var(--monarch-ink) !important; background: #fff !important; }
.modal-heading { margin: -22px -22px 20px !important; padding: 17px 20px !important; border-bottom: 1px solid var(--monarch-line) !important; background: #f7fafd !important; }
.modal-heading h2 { color: var(--monarch-ink) !important; font-size: 1rem !important; }
.modal-heading button { width: 34px !important; min-height: 34px !important; padding: 0 !important; color: #31587e !important; border-color: #ccdaea !important; background: #fff !important; box-shadow: none !important; }

.app-message-backdrop,
.loading-overlay {
    z-index: 1000 !important;
    display: grid !important;
    place-items: center;
    padding: 20px;
    background: rgba(3, 20, 47, 0.68) !important;
    backdrop-filter: blur(5px);
}

.loading-overlay[hidden] { display: none !important; }
.app-message-card,
.loading-card {
    width: min(430px, calc(100vw - 36px)) !important;
    padding: 26px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 28px 80px rgba(2, 18, 45, 0.32) !important;
}

.loading-logo {
    width: 220px !important;
    height: 140px !important;
    object-fit: contain !important;
    margin: 0 auto 14px !important;
    mix-blend-mode: multiply;
    filter: brightness(1.12) contrast(1.08) saturate(1.08) !important;
}

.loading-card span {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto 15px !important;
    border: 3px solid #d8e7f5 !important;
    border-top-color: var(--monarch-blue) !important;
    border-radius: 50% !important;
    background: transparent !important;
    animation: monarch-spin 700ms linear infinite;
}

@keyframes monarch-spin { to { transform: rotate(360deg); } }
.loading-card strong { color: var(--monarch-ink) !important; font-size: 1rem !important; }
.loading-card small { color: var(--monarch-muted) !important; }

.app-message-card { display: grid !important; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; }
.app-message-icon { width: 54px !important; height: 54px !important; display: grid !important; place-items: center; border-radius: 50% !important; font-size: 1.35rem !important; }
.app-message-card.success .app-message-icon { color: #08754f !important; background: #dcf4e9 !important; }
.app-message-card.error .app-message-icon { color: #ae2439 !important; background: #fde4e8 !important; }
.app-message-card.warning .app-message-icon { color: #9c6500 !important; background: #fff1cf !important; }
.app-message-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-message-card h2 { margin: 3px 0 7px !important; color: var(--monarch-ink) !important; font-size: 1.05rem !important; }
.app-message-card p { margin: 0 !important; color: var(--monarch-muted) !important; line-height: 1.5; }
.app-message-actions { grid-column: 1 / -1; display: flex !important; justify-content: flex-end; gap: 8px; padding-top: 8px; }

.module-shell {
    width: min(1500px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    padding: 24px 0 42px !important;
    color: var(--monarch-ink) !important;
}

.module-hero {
    min-height: 112px !important;
    display: grid !important;
    grid-template-columns: 188px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 22px;
    margin: 0 0 18px !important;
    padding: 16px 20px !important;
    color: var(--monarch-ink) !important;
    border: 1px solid var(--monarch-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--monarch-shadow) !important;
}

.module-hero::before,
.module-hero::after { display: none !important; }
.module-logo { width: 188px !important; height: 90px !important; display: grid !important; place-items: center; overflow: hidden; border: 1px solid var(--monarch-line) !important; border-radius: 7px !important; background: #061d45 !important; }
.module-logo img { width: 94% !important; height: 84px !important; object-fit: contain !important; mix-blend-mode: screen; filter: brightness(1.12) contrast(1.08) !important; }
.module-hero h1 { margin: 0 !important; color: var(--monarch-ink) !important; font-size: clamp(1.45rem, 2.3vw, 2.15rem) !important; letter-spacing: 0 !important; text-transform: none !important; }
.module-hero p { margin: 7px 0 0 !important; color: var(--monarch-muted) !important; }
.section-kicker { color: var(--monarch-blue) !important; font-size: 0.68rem !important; font-weight: 900 !important; letter-spacing: 0.05em !important; text-transform: uppercase; }

.detail-section { margin: 0 0 14px !important; padding: 17px !important; box-shadow: none !important; }
.receipt-sheet { padding: 20px !important; }
.receipt-grid { gap: 10px !important; }
.receipt-grid > div,
.receipt-notes,
.receipt-recommendation { padding: 13px !important; border: 1px solid #dce7f2 !important; border-radius: 6px !important; background: #f7fafd !important; }

.module-launch-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 12px !important; }
.module-launch-card { min-height: 128px !important; padding: 16px !important; box-shadow: none !important; }
.workflow-line { gap: 8px !important; }
.workflow-line > div { min-height: 92px !important; padding: 13px !important; border: 1px solid var(--monarch-line) !important; border-radius: 6px !important; background: var(--monarch-soft) !important; }

@media (max-width: 1180px) {
    .app-frame { grid-template-columns: 220px minmax(0, 1fr) !important; }
    .top-header { align-items: flex-start !important; }
    .top-actions { flex-wrap: wrap; }
    .top-search { width: 100% !important; order: 10; }
    .hub-chart-row { grid-template-columns: 1fr !important; }
    .hub-chart-row .hub-system-panel { grid-column: auto; }
    .hub-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
    .app-frame { display: block !important; }
    .app-sidebar { position: relative !important; width: 100% !important; height: auto; min-height: 0; padding: 14px !important; }
    .app-sidebar .brand-block { height: 116px !important; min-height: 116px; }
    .app-sidebar .brand-block img { height: 108px !important; }
    .sidebar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar-shortcuts,
    .system-status { display: none !important; }
    .dashboard-workspace { padding: 14px !important; }
    .top-header { min-height: 0 !important; display: grid !important; padding: 18px !important; }
    .top-actions { justify-content: flex-start; }
    .last-sync { display: none; }
    .hub-bottom-grid,
    .hub-compliance-layout,
    .hub-alerts-grid { grid-template-columns: 1fr !important; }
    .hub-integration-stack { grid-template-columns: 1fr !important; }
    .module-shell { width: calc(100% - 24px) !important; padding-top: 12px !important; }
    .module-hero { grid-template-columns: 1fr !important; }
    .module-logo { width: 100% !important; }
    .module-hero-actions { justify-content: flex-start !important; flex-wrap: wrap; }
}

/* Microsoft 365 module: readable directory surfaces and compact reporting. */
.microsoft-module-page .dashboard-workspace,
.dashboard-workspace:has(.microsoft-module-nav) {
    --ms-ink: #0d2b52;
    --ms-body: #294e74;
    --ms-muted: #587494;
    --ms-line: #d6e3ef;
    --ms-soft: #f5f9fd;
}

.microsoft-module-page .network-panel,
.dashboard-workspace:has(.microsoft-module-nav) .network-panel,
.dashboard-workspace:has(.microsoft-module-nav) .empty-state,
.dashboard-workspace:has(.microsoft-module-nav) .ms-template-grid article {
    color: var(--ms-ink) !important;
    border-color: var(--ms-line) !important;
    background: #ffffff !important;
}

.microsoft-module-page :is(h1, h2, h3, strong, label, legend),
.dashboard-workspace:has(.microsoft-module-nav) :is(h1, h2, h3, strong, label, legend) {
    color: var(--ms-ink) !important;
}

.microsoft-module-page :is(p, small),
.dashboard-workspace:has(.microsoft-module-nav) :is(p, small) {
    color: var(--ms-muted) !important;
}

.microsoft-module-page .network-client-table td,
.dashboard-workspace:has(.microsoft-module-nav) .network-client-table td {
    color: #193a60 !important;
    background: #ffffff !important;
}

.microsoft-module-page .network-client-table td strong,
.dashboard-workspace:has(.microsoft-module-nav) .network-client-table td strong {
    color: #0c2d56 !important;
}

.microsoft-module-page .network-client-table td small,
.dashboard-workspace:has(.microsoft-module-nav) .network-client-table td small {
    color: #476887 !important;
}

.microsoft-module-page .network-client-table th,
.dashboard-workspace:has(.microsoft-module-nav) .network-client-table th {
    color: #ffffff !important;
    background: #225b8d !important;
}

.microsoft-module-page .empty-state,
.dashboard-workspace:has(.microsoft-module-nav) .empty-state {
    box-shadow: none !important;
}

.ms-status-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #d8e5f0;
    border-radius: 8px;
    background: #d8e5f0;
    box-shadow: 0 7px 20px rgba(30, 65, 104, 0.05);
}

.ms-status-strip > div {
    min-width: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 10px 16px;
    background: #ffffff;
}

.ms-status-strip span { color: #587494; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.ms-status-strip strong { color: #0d2b52 !important; font-size: 0.98rem; }
.ms-status-strip small { color: #0870d3 !important; font-size: 0.67rem; font-weight: 800; text-align: right; }

.ms-site-panel { margin-bottom: 16px; }
.ms-site-breakdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    max-height: 300px;
    overflow: auto;
    padding-right: 3px;
}

.ms-site-breakdown article {
    display: grid;
    grid-template-columns: minmax(105px, 1fr) minmax(80px, 1.2fr) max-content;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid #dce7f1;
    border-radius: 7px;
    background: #f8fbfe;
}

.ms-site-breakdown article > div { min-width: 0; display: grid; gap: 3px; }
.ms-site-breakdown strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-site-breakdown small { font-size: 0.65rem !important; }
.ms-site-breakdown i { height: 7px; overflow: hidden; border-radius: 6px; background: #dfe9f3; }
.ms-site-breakdown i span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #17b988, #1688e8); }
.ms-site-breakdown b { min-width: 66px; color: #155685 !important; font-size: 0.72rem; text-align: right; }

.ms-directory-wrap { max-height: calc(100vh - 260px); }
.ms-directory-table { min-width: 1510px; table-layout: fixed; }
.ms-directory-table th:nth-child(1) { width: 205px; }
.ms-directory-table th:nth-child(2) { width: 180px; }
.ms-directory-table th:nth-child(3) { width: 115px; }
.ms-directory-table th:nth-child(4) { width: 245px; }
.ms-directory-table th:nth-child(5) { width: 125px; }
.ms-directory-table th:nth-child(6) { width: 145px; }
.ms-directory-table th:nth-child(7) { width: 90px; }
.ms-directory-table th:nth-child(8) { width: 220px; }
.ms-directory-table td { vertical-align: middle; }
.ms-address-cell { line-height: 1.4; white-space: normal; }

.ms-license-details { position: relative; }
.ms-license-details summary {
    width: max-content;
    padding: 6px 9px;
    color: #0869c5;
    border: 1px solid #c8dced;
    border-radius: 5px;
    background: #f3f8fd;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
}
.ms-license-details[open] summary { color: #ffffff; border-color: #0871d5; background: #0871d5; }
.ms-license-details ul {
    width: 245px;
    margin: 7px 0 0;
    padding: 9px 10px 9px 26px;
    color: #193a60;
    border: 1px solid #d5e3ef;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(22, 55, 92, 0.14);
    line-height: 1.5;
}
.ms-no-license { color: #71859c; font-size: 0.7rem; font-weight: 700; }

@media (max-width: 1180px) {
    .ms-site-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ms-status-strip,
    .ms-site-breakdown { grid-template-columns: 1fr; }
    .ms-status-strip > div { grid-template-columns: 1fr; gap: 3px; }
    .ms-status-strip small { text-align: left; }
    .ms-site-breakdown article { grid-template-columns: minmax(100px, 1fr) minmax(70px, 1fr) max-content; }
}

/* UniFi client operations: compact controls with readable connection context. */
.network-client-table td {
    vertical-align: middle !important;
}

.network-client-table td:first-child strong,
.network-client-table td:first-child small {
    white-space: nowrap;
}

.network-client-table td small {
    display: inline-block;
    margin-top: 3px;
    color: #58718f !important;
    line-height: 1.35;
}

.client-alias-form {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 220px;
}

.client-alias-form input {
    min-width: 0;
}

.client-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.client-row-actions form {
    margin: 0;
}

body.dashboard-page .dashboard-workspace a.button-link.button-secondary {
    color: #086bc9 !important;
    border-color: #bfd7eb !important;
    background: #ffffff !important;
    box-shadow: 0 3px 9px rgba(30, 70, 112, 0.06) !important;
}

.client-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.client-history-summary > div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid #d7e3ee;
    border-radius: 7px;
    background: #f8fbfe;
}

.client-history-summary span,
.client-history-summary small {
    color: #58718f;
}

.history-date-filter {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

.history-date-filter label {
    display: grid;
    gap: 6px;
}

@media (max-width: 900px) {
    .client-history-summary {
        grid-template-columns: 1fr;
    }

    .client-row-actions {
        flex-wrap: wrap;
    }
}

/* Client usage charts must remain after the legacy theme layers. */
body.dashboard-page .dashboard-workspace .client-usage-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-panel {
    min-width: 0 !important;
    padding: 18px !important;
    overflow: hidden !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-panel .panel-heading {
    min-height: 42px !important;
    margin: 0 0 14px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid #d8e5f0 !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-panel .panel-heading span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    border-radius: 5px !important;
    background: #e8f3fd !important;
    color: #0870cd !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-list {
    display: grid !important;
    gap: 9px !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid #d9e6f1 !important;
    border-radius: 7px !important;
    background: #fbfdff !important;
    box-shadow: 0 2px 7px rgba(24, 68, 111, .04) !important;
}

body.dashboard-page .dashboard-workspace .usage-rank {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px !important;
    background: #e4f2ff !important;
    color: #0871ce !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row > div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row strong {
    display: block !important;
    overflow: hidden !important;
    color: #102f59 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row small {
    display: block !important;
    overflow: hidden !important;
    color: #657e9b !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row i {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 6px !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #e7eef5 !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row i::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: var(--usage-width) !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #19ba8c 0%, #1689e9 100%) !important;
}

body.dashboard-page .dashboard-workspace .usage-ranking-row > b {
    color: #103663 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

@media (max-width: 1120px) {
    body.dashboard-page .dashboard-workspace .client-usage-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    body.dashboard-page .dashboard-workspace .usage-ranking-row {
        grid-template-columns: 32px minmax(0, 1fr) !important;
    }
    body.dashboard-page .dashboard-workspace .usage-ranking-row > b {
        grid-column: 2 !important;
    }
}

/* CCTV operations module */
.cctv-module-page .network-module-nav { margin-bottom: 18px; }
.cctv-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cctv-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.cctv-dashboard-grid > .module-card-shell { margin: 0; min-height: 310px; }
.cctv-site-list,
.cctv-alert-list,
.cctv-recorder-list,
.cctv-activity-list { display: grid; gap: 8px; }
.cctv-site-list a {
    display: grid;
    grid-template-columns: minmax(145px, .8fr) minmax(180px, 1.3fr) 48px;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    color: #173a61 !important;
    border: 1px solid #dce7f1;
    border-radius: 6px;
    background: #f9fbfd;
    text-decoration: none;
}
.cctv-site-list a:hover { border-color: #99c9ee; background: #f0f8fe; }
.cctv-site-list a > div:first-child { display: grid; gap: 3px; }
.cctv-site-list small { color: #58738f !important; }
.cctv-site-list b { color: #0a6fc4 !important; text-align: right; }
.cctv-progress { height: 8px; overflow: hidden; border-radius: 4px; background: #deebf4; }
.cctv-progress span { height: 100%; display: block; background: linear-gradient(90deg, #28bd86, #1687e8); }
.cctv-alert-list article,
.cctv-recorder-list article,
.cctv-activity-list article {
    min-width: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #dce7f1;
    border-radius: 6px;
    background: #f9fbfd;
}
.cctv-alert-list article > span:first-child { width: 9px; height: 9px; border-radius: 50%; background: #e34958; box-shadow: 0 0 0 4px rgba(227,73,88,.11); }
.cctv-alert-list article > div,
.cctv-recorder-list article > div,
.cctv-activity-list article > div { min-width: 0; display: grid; gap: 3px; }
.cctv-alert-list strong,
.cctv-recorder-list strong,
.cctv-activity-list strong { overflow: hidden; color: #173a61 !important; text-overflow: ellipsis; white-space: nowrap; }
.cctv-alert-list small,
.cctv-recorder-list small,
.cctv-activity-list small { overflow: hidden; color: #5c7895 !important; text-overflow: ellipsis; white-space: nowrap; }
.cctv-alert-list time,
.cctv-recorder-list time,
.cctv-activity-list time { color: #6b839b !important; font-size: .61rem; white-space: nowrap; }
.cctv-recorder-dialog { width: min(880px, calc(100vw - 30px)); }
.cctv-recorder-detail-grid,
.cctv-camera-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 16px; margin-bottom: 16px; }
.cctv-recorder-detail-grid > .module-card-shell,
.cctv-camera-detail-grid > .module-card-shell { margin: 0; }
.cctv-capability-list { display: grid; gap: 9px; }
.cctv-capability-list article { display: grid; gap: 4px; padding: 13px; border: 1px solid #dbe7f1; border-left: 3px solid #1687e8; border-radius: 5px; background: #f8fbfd; }
.cctv-capability-list span { color: #668099 !important; font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.cctv-capability-list strong { color: #173a61 !important; }
.cctv-capability-list small { color: #5b7590 !important; line-height: 1.45; }
.cctv-camera-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cctv-camera-grid a { min-width: 0; display: grid; gap: 8px; padding: 13px; color: #173a61 !important; border: 1px solid #d9e6f1; border-radius: 6px; background: #f8fbfd; text-decoration: none; }
.cctv-camera-grid a:hover { border-color: #8fc5ec; box-shadow: 0 8px 18px rgba(32,93,139,.09); }
.cctv-camera-grid strong,
.cctv-camera-grid small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-camera-grid small { color: #607a94 !important; }
.danger-zone { border-top: 2px solid #e34d5b !important; }
.cctv-filter-row { display: grid; grid-template-columns: minmax(220px, .45fr) minmax(300px, 1fr); gap: 12px; padding: 13px; border: 1px solid #d9e6f1; border-radius: 6px; background: #edf4fa; }
.cctv-filter-row label { display: grid; gap: 6px; }
.cctv-preview-panel { min-height: 460px; }
.cctv-preview-frame { position: relative; min-height: 350px; display: grid; place-items: center; overflow: hidden; border: 1px solid #cbddeb; border-radius: 6px; background: #071b30; }
.cctv-preview-frame img { position: relative; z-index: 2; width: 100%; height: 100%; max-height: 560px; display: none; object-fit: contain; }
.cctv-preview-frame img.is-loaded { display: block; }
.cctv-preview-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 30px; color: #dcecff; text-align: center; }
.cctv-preview-fallback strong { color: #fff !important; }
.cctv-preview-fallback small { max-width: 380px; color: #a8c3dc !important; line-height: 1.5; }
.cctv-preview-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cctv-preview-panel > footer span { color: #5e7892 !important; font-size: .63rem; }
.cctv-diagnostic-chain { display: grid; gap: 8px; }
.cctv-diagnostic-chain article { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid #dbe7f1; border-left-width: 3px; border-radius: 5px; background: #f8fbfd; }
.cctv-diagnostic-chain article.good { border-left-color: #20b77f; }
.cctv-diagnostic-chain article.warning { border-left-color: #e4a327; }
.cctv-diagnostic-chain article.danger { border-left-color: #e34958; }
.cctv-diagnostic-chain article > span { width: 30px; height: 30px; display: grid; place-items: center; color: #086dc0; border-radius: 50%; background: #e1f0fb; font-weight: 900; }
.cctv-diagnostic-chain article > div { min-width: 0; display: grid; gap: 3px; }
.cctv-diagnostic-chain strong { color: #173a61 !important; }
.cctv-diagnostic-chain small { color: #5e7892 !important; }
.cctv-agent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cctv-agent-grid article { display: grid; gap: 10px; padding: 14px; border: 1px solid #d9e6f1; border-radius: 6px; background: #f8fbfd; }
.cctv-agent-grid header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cctv-agent-grid h3 { margin: 0; color: #173a61 !important; font-size: .83rem; }
.cctv-agent-grid dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; margin: 0; }
.cctv-agent-grid dt { color: #668099 !important; font-size: .61rem; font-weight: 800; }
.cctv-agent-grid dd { margin: 0; overflow: hidden; color: #294d70 !important; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.cctv-agent-grid form { display: flex; justify-content: flex-end; }
.agent-capability-list { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; }
.agent-capability-list span { padding: 4px 7px; border: 1px solid #cfe0ee; border-radius: 4px; background: #eef6fc; color: #29577f !important; font-size: .55rem; font-weight: 800; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; padding-top: 4px; border-top: 1px solid #d9e6f1; }
.agent-actions form { margin: 0; }
.agent-actions button { min-height: 32px; padding: 7px 10px; }
.agent-actions button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.cctv-result-site-filter { display: flex; align-items: end; gap: 10px; }
.cctv-result-site-filter label { min-width: 210px; display: grid; gap: 5px; }
.cctv-result-site-filter span { min-height: 38px; display: inline-flex; align-items: center; color: #56728f !important; white-space: nowrap; }

@media (max-width: 1280px) {
    .cctv-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cctv-camera-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .cctv-dashboard-grid,
    .cctv-recorder-detail-grid,
    .cctv-camera-detail-grid { grid-template-columns: 1fr; }
    .cctv-agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .cctv-metric-grid,
    .cctv-camera-grid,
    .cctv-agent-grid,
    .cctv-filter-row { grid-template-columns: 1fr; }
    .cctv-site-list a { grid-template-columns: 1fr 52px; }
    .cctv-site-list .cctv-progress { grid-column: 1 / -1; grid-row: 2; }
    .cctv-alert-list article,
    .cctv-recorder-list article,
    .cctv-activity-list article { grid-template-columns: max-content minmax(0, 1fr); }
    .cctv-alert-list time,
    .cctv-recorder-list time,
    .cctv-activity-list time { grid-column: 2; }
    .cctv-preview-panel > footer { align-items: stretch; flex-direction: column; }
    .cctv-result-site-filter { width: 100%; align-items: stretch; flex-direction: column; }
    .cctv-result-site-filter label { min-width: 0; }
}

/* Microsoft 365 and ISP management modules. */
.ms-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ms-sync-value { font-size: 20px !important; }
.ms-license-grid { display: grid; grid-template-columns: repeat(5,minmax(180px,1fr)); gap: 14px; }
.ms-license-card { display: grid; justify-items: center; gap: 12px; padding: 18px 12px; border: 1px solid #d9e6f1; border-radius: 8px; background: #fbfdff; text-align: center; }
.ms-license-card h3 { min-height: 36px; margin: 0; color: #103460; font-size: 13px; }
.ms-license-card p { margin: 5px 0; color: #617b98; font-size: 11px; }
.ms-license-card p strong { color: #0871cf !important; font-size: 17px; }
.ms-license-card small { color: #6b829d !important; }
.ms-license-ring { --license-value:0; display: grid; place-content: center; width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(#1689eb calc(var(--license-value)*1%),#e5edf5 0); position: relative; }
.ms-license-ring::after { content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.ms-license-ring span,.ms-license-ring small { position:relative; z-index:1; text-align:center; }
.ms-license-ring span { color:#10345f; font-size:22px; font-weight:900; }
.ms-license-ring small { font-size:10px; }
.ms-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ms-module-grid > a,.ms-module-grid > article { display:grid; gap:8px; min-height:118px; text-decoration:none; }
.ms-module-grid strong { color:#10345f !important; font-size:15px; }
.ms-module-grid small { color:#607996 !important; line-height:1.5; }
.integration-callout { margin:14px 0; padding:16px; border:1px solid #bcd8ef; border-left:4px solid #1689eb; border-radius:6px; background:#f2f8fe; color:#183d68; }
.integration-callout.warning { border-color:#f0d79d; border-left-color:#f4ad21; background:#fffaf0; }
.integration-callout p { margin:5px 0 12px; }
.integration-settings-form,.ms-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.integration-settings-form label,.ms-form-grid label { display:grid; gap:6px; color:#153b66; font-weight:800; font-size:12px; }
.integration-settings-form input,.ms-form-grid input,.ms-form-grid select { min-height:42px; padding:8px 11px; border:1px solid #c4d8e9; border-radius:6px; background:#fff; color:#12345e; }
.integration-settings-form button { justify-self:start; }
.permission-grid { display:flex; flex-wrap:wrap; gap:9px; }
.permission-grid span { padding:8px 10px; border-radius:5px; background:#e9f4fd; color:#086bc6; font-size:11px; font-weight:800; }
.ms-user-dialog { width:min(940px,calc(100vw - 32px)); max-height:90vh; overflow:auto; }
.ms-user-dialog > form { display:grid; gap:18px; padding:24px; }
.upn-input { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border:1px solid #c4d8e9; border-radius:6px; overflow:hidden; background:#f1f6fb; }
.upn-input input { border:0 !important; border-radius:0 !important; }
.upn-input span { padding:0 12px; color:#56718f; font-weight:800; }
.ms-license-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:14px; border:1px solid #d4e2ee; border-radius:7px; }
.ms-license-picker legend { padding:0 6px; color:#143a66; font-weight:900; }
.ms-license-picker label { display:flex; align-items:center; gap:8px; padding:8px; border-radius:5px; background:#f7fafd; color:#183d68; }
.ms-license-picker label small { margin-left:auto; }
.check-row { display:flex !important; align-items:center; gap:8px; color:#183d68; font-weight:700; }
.form-note { margin:0; color:#637d9b; font-size:11px; }
.ms-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ms-template-grid article { display:grid; gap:5px; padding:14px; border:1px solid #d7e5f0; border-radius:7px; background:#fbfdff; }
.isp-line-grid { display:grid; grid-template-columns:repeat(4,minmax(210px,1fr)); gap:14px; }
.isp-line-card { display:grid; justify-items:center; gap:10px; padding:16px; border:1px solid #d7e5f0; border-radius:8px; background:#fbfdff; text-align:center; }
.isp-line-card > div:first-child { display:grid; gap:3px; }
.isp-line-card strong { color:#12365f !important; }
.isp-util-ring { --isp-value:0; display:grid; place-items:center; width:88px; height:88px; border-radius:50%; background:conic-gradient(#1589e8 calc(var(--isp-value)*1%),#e5edf5 0); position:relative; }
.isp-util-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; }
.isp-util-ring span { position:relative; z-index:1; color:#10345f; font-weight:900; }
.path-status { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:5px; font-size:10px; font-weight:900; }
.path-status::before { content:""; width:7px; height:7px; border-radius:50%; }
.path-status.main { background:#e1f6ec; color:#087b52; }.path-status.main::before{background:#18ba7f}
.path-status.failover { background:#fff1cb; color:#90630b; }.path-status.failover::before{background:#f2ad22}
.panel-actions { display:flex; align-items:center; gap:8px; }.panel-actions form{margin:0}
.isp-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.isp-dashboard-grid article { display:grid; grid-template-columns:minmax(120px,1fr) minmax(100px,1fr) 42px max-content; align-items:center; gap:10px; padding:10px; border:1px solid #d8e5ef; border-radius:6px; }
.isp-dashboard-grid article > div { display:grid; }.isp-dashboard-grid i,.dashboard-license-list i{display:block;height:6px;border-radius:5px;background:#e4edf5;overflow:hidden}.isp-dashboard-grid i em,.dashboard-license-list i em{display:block;height:100%;background:linear-gradient(90deg,#1abb8a,#1689ea)}
.dashboard-license-list { display:grid; gap:8px; }.dashboard-license-list > div{display:grid;grid-template-columns:minmax(180px,1fr) minmax(100px,1fr) 42px 70px;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #e1e9f0;font-size:11px}.dashboard-license-list span{color:#183d68;font-weight:800}.dashboard-license-list small{color:#627b98}
@media(max-width:1200px){.ms-license-grid{grid-template-columns:repeat(3,1fr)}.isp-line-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.ms-summary-grid,.ms-module-grid,.integration-settings-form,.ms-form-grid,.ms-license-picker,.ms-template-grid,.isp-line-grid,.isp-dashboard-grid{grid-template-columns:1fr}.ms-license-grid{grid-template-columns:repeat(2,1fr)}.isp-dashboard-grid article{grid-template-columns:1fr}.dashboard-license-list>div{grid-template-columns:1fr}}
.ms-user-detail-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr); gap:16px; }
.ms-user-detail-grid > aside { display:grid; align-content:start; gap:16px; }
.security-action-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.security-action-stack form {
    margin: 0;
}
.security-action-stack button {
    width: 100%;
}
.ms-form-grid label > small {
    color: #6b829c;
    font-size: 10px;
    font-weight: 700;
}
.ms-form-submit {
    display: flex;
    align-items: end;
}
.ms-authentication-panel {
    margin-top: 16px;
}
.ms-auth-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 18px;
}
.ms-auth-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid #cfe0ee;
    border-radius: 6px;
    background: #f4f9fd;
    color: #526f8e;
    font-size: 11px;
    font-weight: 800;
}
.ms-auth-summary strong {
    color: #0876d7;
    font-size: 16px;
}
.ms-auth-method-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}
.ms-auth-method-sections > section {
    min-width: 0;
}
.ms-auth-method-sections > section + section {
    padding-top: 20px;
    border-top: 1px solid #dce7f1;
}
.ms-auth-section-heading {
    margin-bottom: 10px;
}
.ms-auth-section-heading h3 {
    margin: 0 0 4px;
    color: #103762;
    font-size: 14px;
}
.ms-auth-section-heading p {
    margin: 0;
    color: #5d7896;
    font-size: 11px;
    line-height: 1.45;
}
.ms-auth-method-list {
    display: grid;
    gap: 10px;
}
.ms-auth-method-card {
    display: grid;
    grid-template-columns: 38px minmax(170px, .7fr) minmax(300px, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #d8e6f1;
    border-radius: 7px;
    background: #fbfdff;
}
.ms-auth-method-card.authenticator {
    grid-template-columns: 38px minmax(0, 1fr) auto;
}
.ms-auth-method-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    background: #e4f3ff;
    color: #0879dc;
}
.ms-auth-method-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ms-auth-method-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.ms-auth-method-copy strong {
    overflow: hidden;
    color: #103762;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-auth-method-copy small,
.ms-auth-method-copy span {
    color: #607c99;
    font-size: 10px;
}
.ms-auth-phone-editor {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: end;
    gap: 8px;
    min-width: 0;
}
.ms-auth-phone-editor label {
    display: grid;
    gap: 4px;
    color: #426486;
    font-size: 10px;
    font-weight: 800;
}
.ms-auth-phone-editor input {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid #c5d9e9;
    border-radius: 6px;
    background: #fff;
    color: #11365f;
}
.ms-auth-remove-form {
    margin: 0;
}
.ms-auth-dialog {
    width: min(620px, calc(100vw - 32px));
}
.ms-auth-dialog > form {
    display: grid;
    gap: 18px;
    padding: 24px;
}
@media(max-width:960px){.ms-user-detail-grid{grid-template-columns:1fr}}
@media(max-width:1100px){
    .ms-auth-method-card { grid-template-columns: 38px minmax(140px, .55fr) minmax(250px, 1fr) auto; }
}
@media(max-width:760px){
    .security-action-stack { grid-template-columns: 1fr; }
    .ms-auth-method-card,
    .ms-auth-method-card.authenticator { grid-template-columns: 38px minmax(0, 1fr); }
    .ms-auth-phone-editor { grid-column: 1 / -1; }
    .ms-auth-remove-form { grid-column: 2; justify-self: start; }
}

/* Centralized integration settings. */
.settings-integration-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.settings-integration-summary > a {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 14px;
    color: #12365f !important;
    border: 1px solid #dbe7f2;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 24px rgba(35, 69, 108, 0.06);
    text-decoration: none;
}

.settings-integration-summary > a:hover {
    border-color: #8ec2ec;
    background: #f7fbff;
    transform: translateY(-1px);
}

.settings-integration-summary > a > div { min-width: 0; display: grid; gap: 4px; }
.settings-integration-summary strong { color: #11355f !important; font-size: 0.82rem; }
.settings-integration-summary small { color: #607b98 !important; font-size: 0.66rem; line-height: 1.4; }
.integration-mark { width: 42px; height: 42px; display: grid; place-items: center; color: #0873d5; border-radius: 7px; background: #e7f3fd; font-size: 0.68rem; font-weight: 900; }
.integration-state { padding: 5px 7px; color: #56718f; border-radius: 5px; background: #edf3f8; font-size: 0.62rem; white-space: nowrap; }
.integration-state.good { color: #08754f; background: #dff5ec; }
.integration-state.danger { color: #ae2439; background: #fde4e8; }
.device-status.neutral { color: #536f8c !important; background: #edf3f8 !important; }

.settings-integration-block { scroll-margin-top: 18px; }
.integration-block-heading > div { min-width: 0; display: grid; gap: 4px; }
.integration-block-heading p { margin: 0 !important; color: #607b98 !important; font-size: 0.72rem !important; }
.integration-status-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -3px 0 14px; }
.integration-status-meta > span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; color: #607b98; border: 1px solid #dce7f1; border-radius: 6px; background: #f7fafd; font-size: 0.68rem; }
.integration-status-meta strong { color: #153b66 !important; }
.settings-integration-form { margin: 0 !important; padding: 16px !important; }
.settings-integration-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-integration-form .checkbox-row { margin-top: 4px; }
.integration-placeholder-layout { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.integration-placeholder-layout > div { min-width: 0; display: grid; gap: 5px; }
.integration-placeholder-layout strong { color: #15375f !important; font-size: 0.82rem; }
.integration-placeholder-layout small { color: #607b98 !important; line-height: 1.5; }
.integration-module-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.integration-module-metrics > span { min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid #dce7f1; border-radius: 7px; background: #f7fafd; }
.integration-module-metrics strong { overflow-wrap: anywhere; color: #12365f !important; font-size: 0.9rem; }
.integration-module-metrics small { color: #607b98 !important; }

@media (max-width: 760px) {
    .settings-integration-summary > a { grid-template-columns: 42px minmax(0, 1fr); }
    .settings-integration-summary .integration-state { grid-column: 2; justify-self: start; }
    .settings-integration-form .form-grid,
    .integration-module-metrics { grid-template-columns: 1fr; }
    .integration-placeholder-layout { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
    .sidebar-nav { grid-template-columns: 1fr; }
    .header-icon,
    .user-pill { display: none !important; }
    .hub-metric-grid,
    .hub-metric-grid-four { grid-template-columns: 1fr 1fr !important; }
    .hub-metric-card { min-height: 112px !important; }
    .hub-pages-overview > div { grid-template-columns: 1fr; }
}

/* Monarch palette correction: light work surfaces with strong readable ink. */
.network-dark-page {
    --panel: #ffffff;
    --text: var(--monarch-ink);
    --muted: var(--monarch-muted);
    --line: var(--monarch-line);
    color: var(--monarch-ink) !important;
}

.network-dark-page .panel,
.network-dark-page .network-panel,
.network-dark-page .stat-tile,
.network-dark-page .module-launch-card,
.network-dark-page .network-table-wrap,
.network-dark-page .module-card-shell,
.network-dark-page .receipt-sheet,
.network-dark-page .empty-state,
.network-dark-page .network-hero-card,
.network-dark-page .network-tool-card,
.network-dark-page .network-page-grid > a,
.network-dark-page .network-page-grid > article {
    color: var(--monarch-ink) !important;
    border-color: var(--monarch-line) !important;
    background: #ffffff !important;
    box-shadow: var(--monarch-shadow) !important;
}

.network-dark-page .panel-heading h2,
.network-dark-page h1,
.network-dark-page h2,
.network-dark-page h3,
.network-dark-page strong,
.network-dark-page .module-launch-card strong,
.network-dark-page .stat-tile strong,
.network-dark-page .network-page-grid a,
.network-dark-page .network-page-grid article {
    color: var(--monarch-ink) !important;
}

.network-dark-page small,
.network-dark-page p,
.network-dark-page .panel-heading span,
.network-dark-page .network-detail-grid span,
.network-dark-page .muted-text,
.network-dark-page .network-hero-card span,
.network-dark-page .network-tool-card span {
    color: var(--monarch-muted) !important;
}

.network-dark-page .network-filter-bar,
.network-dark-page .request-form,
.network-dark-page .modal-form {
    color: var(--monarch-ink) !important;
    border-color: #d8e5f1 !important;
    background: #edf4fa !important;
}

.network-dark-page input,
.network-dark-page select,
.network-dark-page textarea {
    color: var(--monarch-ink) !important;
    border-color: #bfd3e6 !important;
    background: #ffffff !important;
}

.network-dark-page input::placeholder,
.network-dark-page textarea::placeholder {
    color: #7a8da8 !important;
}

.network-dark-page .network-device-table-view,
.network-dark-page .network-client-table,
.network-dark-page .network-port-table,
.network-dark-page .network-device-table-view tbody,
.network-dark-page .network-client-table tbody,
.network-dark-page .network-port-table tbody {
    color: var(--monarch-ink) !important;
    background: #ffffff !important;
}

.network-dark-page .network-device-table-view th,
.network-dark-page .network-client-table th,
.network-dark-page .network-port-table th {
    color: #164f83 !important;
    border-bottom-color: #bfd5e8 !important;
    background: #dcecf8 !important;
}

.network-dark-page .network-device-table-view td,
.network-dark-page .network-client-table td,
.network-dark-page .network-port-table td {
    color: #18304f !important;
    border-bottom-color: #dce7f1 !important;
    background: #ffffff !important;
}

.network-dark-page .network-device-table-view tbody tr:hover td,
.network-dark-page .network-client-table tbody tr:hover td,
.network-dark-page .network-port-table tbody tr:hover td {
    background: #f2f7fc !important;
}

.network-dark-page .network-device-table-view tr.is-offline td,
.network-dark-page .network-client-table tr.is-offline td,
.network-dark-page .network-port-table tr.is-offline td {
    color: #7d2735 !important;
    background: #fff2f4 !important;
}

.network-dark-page .network-compliance-list a,
.network-dark-page .network-alert-list a {
    color: var(--monarch-ink) !important;
    border-color: #dce7f1 !important;
    background: #f7fafd !important;
}

.network-dark-page .network-compliance-list i {
    background: #dfe9f3 !important;
}

.top-actions .user-pill,
.network-dark-page .top-actions .user-pill {
    min-height: 38px !important;
    color: var(--monarch-ink) !important;
    border-color: var(--monarch-line) !important;
    background: #ffffff !important;
}

.top-actions .user-pill strong,
.network-dark-page .top-actions .user-pill strong {
    color: var(--monarch-ink) !important;
}

.app-sidebar .brand-block {
    height: 174px !important;
    min-height: 174px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-sidebar .brand-block img {
    width: 142px !important;
    height: 136px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 1px solid rgba(201, 216, 232, 0.9) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(0, 8, 24, 0.32), 0 2px 8px rgba(0, 8, 24, 0.18) !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    transform: none !important;
}

@media (max-width: 820px) {
    .app-sidebar .brand-block { height: 150px !important; min-height: 150px !important; }
    .app-sidebar .brand-block img { width: 132px !important; height: 126px !important; }
}

/* ================================================================
   CONTROL HUB LIGHT WORKSPACE
   ================================================================ */
body.dashboard-page {
    color: #122a4d !important;
    background:
        linear-gradient(rgba(248, 251, 255, 0.94), rgba(248, 251, 255, 0.94)),
        url("lr-it-hub-background.png") center / cover fixed no-repeat !important;
}

.app-frame {
    grid-template-columns: 244px minmax(0, 1fr) !important;
    background: transparent !important;
}

.app-sidebar {
    width: 244px !important;
    padding: 18px 14px 20px !important;
    color: #17355d !important;
    border-right: 1px solid #dce6f1 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 8px 0 24px rgba(40, 76, 117, 0.04) !important;
}

.app-sidebar .brand-block {
    height: 156px !important;
    min-height: 156px !important;
    margin-bottom: 15px !important;
}

.app-sidebar .brand-block img {
    width: 134px !important;
    height: 130px !important;
    border-color: #dfe7f0 !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 24px rgba(22, 55, 92, 0.17), 0 2px 6px rgba(22, 55, 92, 0.08) !important;
}

.sidebar-nav {
    gap: 5px !important;
}

.sidebar-nav a {
    min-height: 46px !important;
    padding: 8px 9px !important;
    color: #1e3c63 !important;
    border-color: transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
}

.sidebar-nav a .nav-icon {
    color: #0879e5 !important;
    border-color: #d9e8f6 !important;
    background: #f2f7fc !important;
}

.sidebar-nav a:hover {
    color: #075bab !important;
    background: #f1f7fd !important;
}

.sidebar-nav a.active {
    color: #ffffff !important;
    border-color: #096ed3 !important;
    background: linear-gradient(135deg, #1687ee, #075fc5) !important;
    box-shadow: 0 8px 18px rgba(7, 105, 208, 0.2) !important;
}

.sidebar-nav a.active .nav-icon {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.sidebar-shortcuts {
    margin-top: 12px !important;
    padding-top: 14px !important;
    border-top-color: #dde7f1 !important;
}

.sidebar-shortcuts h2 {
    color: #687f9d !important;
}

.sidebar-shortcuts a {
    min-height: 64px !important;
    color: #28486e !important;
    border-color: #dce7f2 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(30, 65, 104, 0.04) !important;
}

.sidebar-shortcuts a:hover {
    border-color: #8dc5f3 !important;
    background: #f3f9ff !important;
}

.sidebar-shortcuts .nav-icon {
    color: #0879e5 !important;
    border-color: #dcebf8 !important;
    background: #eef7ff !important;
}

.sidebar-shortcuts small {
    color: #3a587d !important;
}

.system-status {
    color: #15365f !important;
    border-color: #dbe6f1 !important;
    background: #ffffff !important;
    box-shadow: 0 7px 18px rgba(30, 64, 103, 0.05) !important;
}

.system-status strong { color: #15365f !important; }
.system-status small { color: #6f83a0 !important; }

.dashboard-workspace {
    padding: 22px 28px 38px !important;
}

.top-header {
    min-height: 88px !important;
    margin-bottom: 8px !important;
    padding: 10px 4px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #e2eaf3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-title h1,
.top-header h1 {
    color: #0e2c59 !important;
    font-size: clamp(1.65rem, 2vw, 2rem) !important;
}

.page-title p,
.top-header p {
    margin-top: 6px !important;
    color: #607897 !important;
    font-size: 0.8rem !important;
}

.top-search {
    width: min(310px, 27vw) !important;
    min-height: 42px !important;
    border-color: #d9e4ef !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(31, 67, 108, 0.04) !important;
}

.header-icon {
    color: #1b4e82 !important;
    border-color: #d8e5f1 !important;
    background: #ffffff !important;
}

.last-sync { color: #18395f !important; font-weight: 700 !important; }
.top-actions .user-pill { box-shadow: 0 4px 12px rgba(31, 67, 108, 0.04) !important; }

.network-module-nav {
    margin: 0 0 18px !important;
    padding: 0 0 1px !important;
    gap: 8px !important;
    border-bottom: 1px solid #e0e8f1 !important;
    background: transparent !important;
}

.network-module-nav a {
    min-height: 40px !important;
    padding: 10px 14px !important;
    color: #234262 !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.network-module-nav a:hover {
    color: #0875da !important;
    background: #f3f8fd !important;
}

.network-module-nav a.active {
    color: #076bd0 !important;
    border-color: #117ce5 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hub-dashboard-layout {
    grid-template-columns: minmax(0, 1fr) 236px !important;
    align-items: start !important;
    gap: 18px !important;
}

.hub-dashboard-main {
    gap: 16px !important;
}

.hub-metric-grid {
    gap: 12px !important;
}

.hub-dashboard-page .hub-metric-grid:not(.hub-metric-grid-four) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.hub-dashboard-page .hub-metric-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.hub-metric-card {
    min-height: 142px !important;
    padding: 16px !important;
    border: 1px solid #e2eaf3 !important;
    border-top: 1px solid #e2eaf3 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 24px rgba(35, 69, 108, 0.07) !important;
}

.hub-metric-card::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border: 1px solid #dbe6f1;
    border-radius: 6px;
    background: #f8fbfe;
}

.hub-metric-card strong { font-size: 1.7rem !important; }

.hub-panel,
.hub-pages-overview,
.network-panel,
.panel,
.module-card-shell {
    border: 1px solid #e0e9f2 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 8px 24px rgba(35, 69, 108, 0.06) !important;
}

.hub-chart-row {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1.05fr) minmax(220px, 0.82fr) !important;
    gap: 14px !important;
}

.hub-chart-row .hub-system-panel {
    grid-column: auto !important;
}

.hub-system-panel .hub-integration-stack {
    grid-template-columns: 1fr !important;
}

.hub-system-panel .hub-integration-stack form {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
}

.hub-system-panel .hub-integration-stack form button {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-height: 30px !important;
    margin-top: 5px !important;
}

.hub-panel {
    padding: 16px !important;
}

.hub-panel-heading h2 {
    color: #15345c !important;
}

.hub-panel-heading p {
    color: #6a819e !important;
}

.hub-panel-heading > span,
.hub-panel-heading > a,
.network-dark-page .hub-panel-heading > span,
.network-dark-page .hub-panel-heading > a {
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    color: #0870d5 !important;
    border: 1px solid #cbddec !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.hub-panel-heading > a:hover,
.network-dark-page .hub-panel-heading > a:hover {
    color: #055aaf !important;
    border-color: #77b7eb !important;
    background: #f2f8fe !important;
}

.network-dark-page .button-link.secondary,
.network-dark-page a.button-link.secondary,
.network-dark-page .network-action-button.secondary {
    color: #086bc9 !important;
    border-color: #c9dceb !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.hub-pages-overview {
    padding: 18px !important;
}

.hub-pages-overview a {
    border-color: transparent !important;
    background: transparent !important;
}

.hub-pages-overview a:hover {
    border-color: #dce8f3 !important;
    background: #f3f8fd !important;
}

.hub-site-list a,
.network-alert-list a,
.hub-alert-feed a,
.hub-compliance-bars a {
    border-color: #e2eaf2 !important;
    background: #fbfdff !important;
}

@media (max-width: 1400px) {
    .app-frame { grid-template-columns: 218px minmax(0, 1fr) !important; }
    .app-sidebar { width: 218px !important; }
    .hub-dashboard-layout { grid-template-columns: 1fr !important; }
    .hub-chart-row { grid-template-columns: 1fr 1fr !important; }
    .hub-chart-row .hub-system-panel { grid-column: 1 / -1 !important; }
    .hub-system-panel .hub-integration-stack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
    .app-sidebar { width: 100% !important; border-right: 0 !important; border-bottom: 1px solid #dce6f1 !important; }
    .app-sidebar .brand-block { height: 142px !important; min-height: 142px !important; }
    .dashboard-workspace { padding: 14px !important; }
    .top-header { padding: 8px 2px 16px !important; }
    .hub-dashboard-page .hub-metric-grid:not(.hub-metric-grid-four),
    .hub-dashboard-page .hub-metric-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hub-chart-row { grid-template-columns: 1fr !important; }
    .hub-chart-row .hub-system-panel { grid-column: auto !important; }
    .hub-system-panel .hub-integration-stack { grid-template-columns: 1fr !important; }
}

/* ================================================================
   ACCESSIBLE TEXT CONTRAST
   ================================================================ */
.dashboard-workspace {
    --text-primary: #102b50;
    --text-secondary: #496786;
    --text-muted-readable: #627b98;
    --text-link: #076bcf;
}

.dashboard-workspace .hub-compliance-bars a,
.dashboard-workspace .hub-site-list a,
.dashboard-workspace .network-alert-list a,
.dashboard-workspace .hub-alert-feed a {
    color: var(--text-primary) !important;
}

.dashboard-workspace .hub-compliance-bars a > span,
.dashboard-workspace .hub-site-list a > span,
.dashboard-workspace .hub-compliance-bars a > b,
.dashboard-workspace .hub-site-list a > b {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.dashboard-workspace .hub-compliance-bars a > small,
.dashboard-workspace .hub-site-list a > small,
.dashboard-workspace .network-alert-list a > small,
.dashboard-workspace .hub-alert-feed a > small {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .hub-big-ring span {
    color: #0d825c !important;
    text-shadow: none !important;
}

.dashboard-workspace .hub-big-ring small {
    color: #3f5e7e !important;
    font-weight: 800 !important;
}

.dashboard-workspace .hub-alert-summary > div {
    color: var(--text-primary) !important;
    border: 1px solid #dce7f1 !important;
    background: #f2f7fc !important;
}

.dashboard-workspace .hub-alert-summary strong {
    color: var(--text-primary) !important;
}

.dashboard-workspace .hub-alert-summary small {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .hub-map-legend span,
.dashboard-workspace .hub-chart-axis text,
.dashboard-workspace .health-chart text {
    color: var(--text-secondary) !important;
    fill: var(--text-secondary) !important;
}

.dashboard-workspace .workflow-line > div {
    color: var(--text-primary) !important;
    border-color: #dce7f1 !important;
    background: #f7fafd !important;
}

.dashboard-workspace .workflow-line > div > span {
    color: var(--text-link) !important;
}

.dashboard-workspace .workflow-line > div > strong {
    color: var(--text-primary) !important;
}

.dashboard-workspace .workflow-line > div > small {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .module-table-row,
.dashboard-workspace .project-row {
    color: var(--text-primary) !important;
    background: #ffffff !important;
}

.dashboard-workspace .module-table-row > span,
.dashboard-workspace .project-row > span {
    color: #315a83 !important;
}

.dashboard-workspace .module-table-row > strong,
.dashboard-workspace .project-row > strong {
    color: var(--text-primary) !important;
}

.dashboard-workspace .module-table-row > strong > small,
.dashboard-workspace .project-row > strong > small {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .module-launch-card {
    color: var(--text-primary) !important;
    border-color: #dde8f2 !important;
    background: #ffffff !important;
}

.dashboard-workspace .module-launch-card > strong {
    color: var(--text-primary) !important;
}

.dashboard-workspace .module-launch-card > small {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .automation-list > div {
    color: var(--text-primary) !important;
    border-color: #dde8f2 !important;
    background: #f8fbfe !important;
}

.dashboard-workspace .automation-list strong {
    color: var(--text-primary) !important;
}

.dashboard-workspace .automation-list small {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .status,
.dashboard-workspace .priority {
    color: #315675 !important;
    border: 1px solid #d5e2ed !important;
    background: #edf4f9 !important;
}

.dashboard-workspace .priority.critical,
.dashboard-workspace .priority.high,
.dashboard-workspace .status.danger {
    color: #b22e43 !important;
    border-color: #f0ccd3 !important;
    background: #fdecef !important;
}

.dashboard-workspace .priority.warning,
.dashboard-workspace .priority.medium {
    color: #946108 !important;
    border-color: #ecd9ae !important;
    background: #fff7e2 !important;
}

.dashboard-workspace .priority.info,
.dashboard-workspace .status.info {
    color: #17629e !important;
    border-color: #cde1f1 !important;
    background: #eaf5fd !important;
}

.dashboard-workspace .empty-state strong {
    color: var(--text-primary) !important;
}

.dashboard-workspace .empty-state small,
.dashboard-workspace .muted-text {
    color: var(--text-secondary) !important;
}

.dashboard-workspace .empty-state {
    border: 1px dashed #bfd5e8 !important;
    background: #f7fbfe !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

.dashboard-workspace input,
.dashboard-workspace select,
.dashboard-workspace textarea {
    color: var(--text-primary) !important;
}

.dashboard-workspace input::placeholder,
.dashboard-workspace textarea::placeholder {
    color: #7186a0 !important;
    opacity: 1 !important;
}

.dashboard-workspace a:not(.sidebar-nav a):not(.button-link):not(.network-table-action) {
    text-decoration-color: currentColor;
}

/* ================================================================
   UNIFIED COMMAND BUTTONS
   ================================================================ */
:where(.dashboard-page, .module-page) :where(
    button:not([data-close-modal]),
    a.button-link,
    a.network-action-button,
    a.network-table-action,
    .workflow-actions a,
    .panel-actions a,
    .panel-heading > a,
    .hub-panel-heading > a,
    .module-hero-actions a
) {
    box-sizing: border-box !important;
    width: auto;
    min-width: 0;
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: hidden;
    color: #ffffff !important;
    border: 1px solid #0871d5 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #1688ec 0%, #0870d2 100%) !important;
    box-shadow: 0 5px 12px rgba(8, 112, 210, 0.16) !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:where(.dashboard-page, .module-page) :where(
    button:not([data-close-modal]),
    a.button-link,
    a.network-action-button,
    a.network-table-action,
    .workflow-actions a,
    .panel-actions a,
    .panel-heading > a,
    .hub-panel-heading > a,
    .module-hero-actions a
):hover {
    color: #ffffff !important;
    border-color: #055caf !important;
    background: linear-gradient(180deg, #0d78da 0%, #055eb8 100%) !important;
    box-shadow: 0 7px 16px rgba(8, 92, 177, 0.2) !important;
    transform: translateY(-1px);
}

:where(.dashboard-page, .module-page) :where(
    a.button-link.secondary,
    a.network-action-button.secondary,
    .secondary-button,
    button.secondary,
    .panel-heading > a,
    .hub-panel-heading > a,
    .module-hero-actions a.secondary
) {
    color: #086bc9 !important;
    border-color: #bfd7eb !important;
    background: #ffffff !important;
    box-shadow: 0 3px 9px rgba(30, 70, 112, 0.06) !important;
}

:where(.dashboard-page, .module-page) :where(
    a.button-link.secondary,
    a.network-action-button.secondary,
    .secondary-button,
    button.secondary,
    .panel-heading > a,
    .hub-panel-heading > a,
    .module-hero-actions a.secondary
):hover {
    color: #0559aa !important;
    border-color: #75b4e7 !important;
    background: #f2f8fe !important;
    box-shadow: 0 5px 12px rgba(30, 91, 145, 0.1) !important;
}

:where(.dashboard-page, .module-page) :where(.button-danger, .danger-button, button.danger) {
    color: #ffffff !important;
    border-color: #c9344b !important;
    background: linear-gradient(180deg, #e34b61 0%, #c9344b 100%) !important;
}

:where(.dashboard-page, .module-page) button:disabled,
:where(.dashboard-page, .module-page) button[aria-disabled="true"],
:where(.dashboard-page, .module-page) a.button-link[aria-disabled="true"] {
    color: #7b8da2 !important;
    border-color: #d9e2eb !important;
    background: #edf2f6 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

:where(.dashboard-page, .module-page) button[data-close-modal] {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #31577d !important;
    border: 1px solid #d2dfeb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer;
}

:where(.dashboard-page, .module-page) button[data-close-modal]:hover {
    color: #b82d43 !important;
    border-color: #efc7ce !important;
    background: #fff2f4 !important;
}

.panel-actions,
.workflow-actions,
.module-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

/* Final specificity lock so legacy module rules cannot restyle commands. */
body.dashboard-page .dashboard-workspace button:not([data-close-modal]),
body.module-page .module-shell button:not([data-close-modal]),
body.dashboard-page .dashboard-workspace a.button-link,
body.module-page .module-shell a.button-link,
body.dashboard-page .dashboard-workspace a.network-action-button,
body.dashboard-page .dashboard-workspace a.network-table-action,
body.dashboard-page .dashboard-workspace .workflow-actions a,
body.module-page .module-shell .workflow-actions a,
body.dashboard-page .dashboard-workspace .panel-actions a,
body.dashboard-page .dashboard-workspace .panel-heading > a,
body.dashboard-page .dashboard-workspace .hub-panel-heading > a,
body.module-page .module-shell .module-hero-actions a {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    color: #ffffff !important;
    border: 1px solid #0871d5 !important;
    border-radius: 6px !important;
    background-color: #0870d2 !important;
    background-image: linear-gradient(180deg, #1688ec 0%, #0870d2 100%) !important;
    box-shadow: 0 5px 12px rgba(8, 112, 210, 0.16) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

body.dashboard-page .dashboard-workspace a.button-link.secondary,
body.module-page .module-shell a.button-link.secondary,
body.dashboard-page .dashboard-workspace a.network-action-button.secondary,
body.dashboard-page .dashboard-workspace button.secondary,
body.module-page .module-shell button.secondary,
body.dashboard-page .dashboard-workspace .panel-heading > a,
body.dashboard-page .dashboard-workspace .hub-panel-heading > a,
body.module-page .module-shell .module-hero-actions a.secondary {
    color: #086bc9 !important;
    border-color: #bfd7eb !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 3px 9px rgba(30, 70, 112, 0.06) !important;
}

body.dashboard-page .dashboard-workspace button:disabled,
body.module-page .module-shell button:disabled {
    color: #7b8da2 !important;
    border-color: #d9e2eb !important;
    background-color: #edf2f6 !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Single-frame sidebar badge: the source artwork already contains a tile. */
.app-sidebar .brand-block {
    width: 142px !important;
    height: 142px !important;
    min-height: 142px !important;
    place-self: center !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
    border: 1px solid #dce6ef !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(22, 55, 92, 0.16), 0 2px 6px rgba(22, 55, 92, 0.07) !important;
    position: relative !important;
}

.app-sidebar .brand-block img {
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    width: 180px !important;
    height: 116px !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: translateX(-50%) !important;
    transform-origin: center !important;
    clip-path: inset(0 0 24px 0) !important;
}

.app-sidebar .brand-block::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 24px;
    background: #ffffff;
    pointer-events: none;
}

@media (max-width: 820px) {
    .app-sidebar .brand-block {
        width: 132px !important;
        height: 132px !important;
        min-height: 132px !important;
    }

    .app-sidebar .brand-block img {
        top: 13px !important;
        width: 170px !important;
        height: 110px !important;
    }
}

/* Final shared form and message normalization. */
input[type="checkbox"],
input[type="radio"] {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
    border-radius: 4px !important;
    accent-color: #0878df;
}

.app-dialog {
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    border-radius: 10px !important;
}

.app-dialog > form {
    display: grid !important;
    gap: 18px !important;
    padding: 24px !important;
}

.app-dialog .modal-heading {
    position: sticky !important;
    z-index: 3;
    top: -24px;
    margin: -24px -24px 2px !important;
    padding: 17px 22px !important;
    align-items: center !important;
    border-bottom: 1px solid #d8e4ef !important;
    background: #f7fafe !important;
}

.app-dialog .modal-heading h2 {
    margin: 0 !important;
    color: #0d2b52 !important;
    font-size: 1rem !important;
}

.app-dialog .modal-heading [data-close-modal] {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    color: #28577f !important;
    border: 1px solid #cbdceb !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.modal-actions {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-top: 2px !important;
}

.modal-actions button {
    width: auto !important;
    min-width: 112px !important;
    flex: 0 0 auto !important;
}

.modal-actions button.secondary {
    color: #0869c6 !important;
    border: 1px solid #bdd6e9 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

.ms-user-dialog {
    width: min(960px, calc(100vw - 32px)) !important;
}

.ms-user-dialog .ms-form-grid {
    gap: 14px 16px !important;
}

.ms-license-picker {
    align-items: stretch !important;
    gap: 9px !important;
    padding: 14px !important;
    background: #ffffff !important;
}

.ms-license-picker label {
    min-width: 0;
    min-height: 52px;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) max-content;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    color: #15385f !important;
    border: 1px solid #e1eaf3;
    border-radius: 6px !important;
    background: #f7fafd !important;
    line-height: 1.3;
}

.ms-license-picker label small {
    margin: 0 !important;
    color: #54708f !important;
    text-align: right;
}

.check-row {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    color: #17385f !important;
}

/* Centered messages are shared by confirmations, success, warning and failure states. */
.app-message-card {
    width: min(440px, calc(100vw - 36px)) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 12px !important;
    padding: 28px 30px 26px !important;
    text-align: center !important;
    border: 1px solid #d5e2ed !important;
    border-top: 3px solid #1688e8 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
}

.app-message-card.success { border-top-color: #13a875 !important; }
.app-message-card.warning { border-top-color: #e5a31c !important; }
.app-message-card.error { border-top-color: #d94158 !important; }

.app-message-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 3px !important;
    border: 1px solid currentColor !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 7px rgba(22, 136, 232, 0.07) !important;
}

.app-message-card.success .app-message-icon { box-shadow: 0 0 0 7px rgba(19, 168, 117, 0.08) !important; }
.app-message-card.warning .app-message-icon { box-shadow: 0 0 0 7px rgba(229, 163, 28, 0.09) !important; }
.app-message-card.error .app-message-icon { box-shadow: 0 0 0 7px rgba(217, 65, 88, 0.08) !important; }
.app-message-icon svg { width: 29px !important; height: 29px !important; }

.app-message-copy {
    width: 100%;
    text-align: center !important;
}

.app-message-card h2 {
    margin: 2px 0 8px !important;
    color: #0d2b52 !important;
    font-size: 1rem !important;
    letter-spacing: 0.03em !important;
}

.app-message-card p {
    max-width: 350px;
    margin: 0 auto !important;
    color: #496887 !important;
    font-size: 0.86rem;
    line-height: 1.55 !important;
    text-align: center !important;
}

.app-message-actions {
    grid-column: 1 !important;
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 5px !important;
    padding-top: 7px !important;
}

.app-message-actions button {
    min-width: 112px !important;
}

.app-message-actions button.secondary {
    color: #0869c6 !important;
    border: 1px solid #bdd6e9 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Microsoft dashboard hierarchy and per-site licence composition. */
.ms-license-overview {
    margin-bottom: 14px !important;
}

.ms-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ms-status-strip > div {
    min-height: 50px !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    padding: 9px 13px !important;
    border: 1px solid #d9e5ef !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 14px rgba(30, 65, 104, 0.04);
}

.ms-status-strip > div::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #19b982;
    box-shadow: 0 0 0 4px #e1f6ee;
}

.ms-status-strip > div {
    grid-template-columns: 8px max-content minmax(0, 1fr) max-content !important;
}

.ms-site-breakdown {
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    max-height: 520px !important;
    gap: 12px !important;
}

.ms-site-breakdown > article {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: 11px !important;
    padding: 13px !important;
    background: #f9fbfe !important;
}

.ms-site-breakdown article > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #dce7f1;
}

.ms-site-breakdown article > header > div { min-width: 0; display: grid; gap: 3px; }
.ms-site-breakdown article > header b {
    min-width: 72px;
    padding: 5px 8px;
    color: #0870d2 !important;
    border-radius: 5px;
    background: #e8f3fd;
    font-size: 0.67rem;
    text-align: center;
}

.ms-site-license-list { display: grid; gap: 5px; }
.ms-site-license-list > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    min-height: 27px;
    padding: 4px 6px 4px 9px;
    border-radius: 5px;
    background: #ffffff;
}
.ms-site-license-list span { overflow: hidden; color: #355878; font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.ms-site-license-list strong { display: grid; place-items: center; min-height: 22px; color: #10345d !important; border-radius: 4px; background: #eef4f9; font-size: 0.68rem; }

@media (max-width: 1180px) {
    .ms-site-breakdown { grid-template-columns: repeat(2, minmax(260px, 1fr)) !important; }
}

@media (max-width: 760px) {
    .ms-status-strip,
    .ms-site-breakdown { grid-template-columns: 1fr !important; }
    .ms-status-strip > div { grid-template-columns: 8px 1fr !important; }
    .ms-status-strip > div strong,
    .ms-status-strip > div small { grid-column: 2; text-align: left !important; }
    .ms-license-picker { grid-template-columns: 1fr !important; }
    .modal-actions { flex-wrap: wrap; }
}

/* Microsoft site allocation cards use their container width and never clip licence rows. */
.ms-site-panel .ms-site-breakdown {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 12px !important;
    max-height: 560px !important;
    padding: 2px 8px 2px 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

.ms-site-panel .ms-site-breakdown > .ms-site-allocation-card {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 238px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 13px !important;
    overflow: visible !important;
    border: 1px solid #d8e5f1 !important;
    border-radius: 7px !important;
    background: #f8fbfe !important;
}

.ms-site-panel .ms-site-allocation-header {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 45px;
    margin: 0 !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid #dce7f1 !important;
}

.ms-site-panel .ms-site-allocation-header > div {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.ms-site-panel .ms-site-allocation-header strong {
    color: #0c2d57 !important;
    font-size: 0.83rem !important;
    line-height: 1.25 !important;
}

.ms-site-panel .ms-site-allocation-header small {
    color: #587494 !important;
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
}

.ms-site-panel .ms-site-allocation-header b {
    flex: 0 0 auto;
    min-width: 74px !important;
    padding: 6px 9px !important;
    color: #076bc5 !important;
    border-radius: 5px !important;
    background: #e7f2fc !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap;
}

.ms-site-panel .ms-site-allocation-card > .ms-site-license-list {
    display: grid !important;
    flex: 1 0 auto;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.ms-site-panel .ms-site-allocation-card > .ms-site-license-list > div {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 4px 6px 4px 9px !important;
    border-radius: 5px !important;
    background: #ffffff !important;
}

.ms-site-panel .ms-site-license-list span {
    min-width: 0;
    overflow: hidden;
    color: #355878 !important;
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-site-panel .ms-site-license-list strong {
    display: grid !important;
    place-items: center !important;
    min-width: 30px !important;
    min-height: 22px !important;
    color: #10345d !important;
    border-radius: 4px !important;
    background: #edf3f9 !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
}

.ms-site-panel .ms-site-allocation-card.needs-review {
    border-color: #efcf8e !important;
    background: #fffaf0 !important;
}

.ms-site-panel .ms-site-allocation-card.needs-review .ms-site-allocation-header b {
    color: #8a5a00 !important;
    background: #fff0ca !important;
}

.ms-directory-health {
    margin-top: 14px !important;
}

.ms-directory-health-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.ms-directory-health-summary article,
.ms-directory-health-summary > a {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 112px;
    padding: 15px 16px 14px;
    overflow: hidden;
    border: 1px solid #d8e5f0;
    border-radius: 7px;
    background: #f9fbfe;
    text-decoration: none;
}

.ms-directory-health-summary article::before,
.ms-directory-health-summary > a::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #22b882;
}

.ms-directory-health-summary article.warning::before,
.ms-directory-health-summary > a.warning::before {
    background: #e3a21c;
}

.ms-directory-health-summary span,
.ms-directory-health-summary > a span {
    color: #426281 !important;
    font-size: 0.68rem;
    font-weight: 800;
}

.ms-directory-health-summary strong,
.ms-directory-health-summary > a strong {
    color: #0b2e59 !important;
    font-size: 1.6rem;
    line-height: 1;
}

.ms-directory-health-summary small,
.ms-directory-health-summary > a small {
    color: #5a7693 !important;
    font-size: 0.66rem;
    line-height: 1.4;
}

.ms-directory-health-summary > a {
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.ms-directory-health-summary > a:hover,
.ms-directory-health-summary > a:focus-visible {
    border-color: #8cbde4;
    box-shadow: 0 8px 20px rgba(31, 88, 137, 0.1);
    transform: translateY(-1px);
}

.ms-directory-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #efcf8e;
    border-radius: 7px;
    background: #fffaf0;
}

.ms-directory-filter-banner > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ms-directory-filter-banner p {
    display: grid;
    gap: 2px;
    margin: 0;
}

.ms-directory-filter-banner p strong {
    color: #0b2e59 !important;
    font-size: 0.74rem;
}

.ms-directory-filter-banner p small {
    color: #5a728c !important;
    font-size: 0.67rem;
}

.ms-directory-review-wrap {
    max-height: 390px;
    border: 1px solid #d8e5f0;
    border-radius: 7px;
    scrollbar-gutter: stable;
}

.ms-directory-review-table {
    min-width: 920px;
}

.ms-directory-review-table th:nth-child(1) { width: 22%; }
.ms-directory-review-table th:nth-child(2) { width: 14%; }
.ms-directory-review-table th:nth-child(3) { width: 39%; }
.ms-directory-review-table th:nth-child(4) { width: 13%; }
.ms-directory-review-table th:nth-child(5) { width: 12%; }

.ms-directory-review-table td {
    vertical-align: middle;
}

.ms-directory-review-table td:first-child {
    display: table-cell;
}

.ms-directory-review-table td:first-child strong,
.ms-directory-review-table td:first-child small {
    display: block;
}

.ms-directory-review-table td:first-child small {
    margin-top: 3px;
    color: #587494 !important;
}

.ms-review-findings {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ms-review-findings span,
.ms-review-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 5px;
    color: #365775 !important;
    background: #edf3f8;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.2;
}

.ms-review-chip.warning {
    color: #805300 !important;
    background: #fff0c9;
}

.ms-review-chip.healthy {
    color: #087251 !important;
    background: #dff5ec;
}

.ms-directory-healthy-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 100px;
}

.ms-directory-healthy-empty strong { color: #0b2e59 !important; }
.ms-directory-healthy-empty span { color: #587494 !important; }

@media (max-width: 1100px) {
    .ms-directory-health-summary {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 620px) {
    .ms-directory-health-summary {
        grid-template-columns: 1fr;
    }

    .ms-directory-filter-banner,
    .ms-directory-filter-banner > div {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Microsoft group management */
.ms-group-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.ms-group-summary > article {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 1px solid #d9e5ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 9px 22px rgba(26, 66, 108, 0.06);
}

.ms-group-summary > article > div { display: grid; gap: 3px; }
.ms-group-summary small { color: #58728f !important; font-size: 0.72rem; }
.ms-group-summary strong { color: #0c2e59 !important; font-size: 1.65rem; line-height: 1; }
.ms-group-summary article div > span { color: #0872d2; font-size: 0.67rem; font-weight: 800; }
.ms-group-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #086ec9;
    border-radius: 8px;
    background: #e7f3fd;
    font-weight: 900;
}
.ms-group-icon.security { color: #15866a; background: #e3f6ef; }
.ms-group-icon.paused { color: #b97908; background: #fff2d9; }

.ms-group-directory {
    display: grid;
    gap: 18px;
    overflow: hidden;
}
.ms-group-toolbar { display: flex; align-items: center; gap: 8px; }
.ms-group-toolbar input { width: min(280px, 30vw); min-height: 38px; }
.ms-directory-toolbar { display: flex; align-items: center; gap: 9px; }
.ms-directory-search {
    display: grid;
    grid-template-columns: 36px minmax(190px, 300px);
    align-items: center;
    min-height: 38px;
    overflow: hidden;
    border: 1px solid #c8dced;
    border-radius: 6px;
    background: #ffffff;
}
.ms-directory-search:focus-within {
    border-color: #1586e6;
    box-shadow: 0 0 0 3px rgba(21, 134, 230, 0.12);
}
.ms-directory-search span {
    display: grid;
    place-items: center;
    color: #1682df;
}
.ms-directory-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.ms-directory-search input {
    width: 100%;
    min-height: 36px;
    padding: 8px 11px 8px 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ms-group-section {
    min-width: 0;
    display: grid;
    gap: 10px;
}
.ms-group-section > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 2px 8px;
    border-bottom: 1px solid #dce7f1;
}
.ms-group-section > header h3 { margin: 0 0 3px; color: #0f315b; font-size: 0.88rem; }
.ms-group-section > header small { color: #587492 !important; }
.ms-group-section > header > span { color: #52708e; font-size: 0.68rem; font-weight: 800; white-space: nowrap; }

.ms-group-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ms-group-section .table-scroll {
    width: 100%;
    max-height: 360px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #dce7f0;
    border-radius: 7px;
    background: #ffffff;
    scrollbar-color: #91b9da #edf4fa;
    scrollbar-width: thin;
}
.ms-group-section .table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.ms-group-section .table-scroll::-webkit-scrollbar-track { background: #edf4fa; }
.ms-group-section .table-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #edf4fa;
    border-radius: 999px;
    background: #91b9da;
}
.ms-group-section .table-scroll::-webkit-scrollbar-thumb:hover { background: #679bc5; }
.ms-group-section .table-scroll .ms-group-table { min-width: 920px; }
.ms-group-section .ms-group-table thead { position: sticky; z-index: 2; top: 0; }
.ms-group-table th {
    padding: 10px 12px;
    color: #184d7e;
    background: #e8f2fb;
    font-size: 0.64rem;
    text-align: left;
    text-transform: uppercase;
}
.ms-group-table td {
    height: 52px;
    padding: 9px 12px;
    color: #355674;
    border-bottom: 1px solid #e1eaf2;
    font-size: 0.72rem;
    vertical-align: middle;
}
.ms-group-table tr:last-child td { border-bottom: 0; }
.ms-group-table td strong { display: block; overflow: hidden; color: #12355e !important; text-overflow: ellipsis; white-space: nowrap; }
.ms-group-table td small { display: block; margin-top: 3px; color: #64809a !important; }
.ms-group-table td:nth-child(1) { width: 22%; }
.ms-group-table td:nth-child(2) { width: 22%; }
.ms-group-table td:nth-child(3) { width: 12%; }
.ms-group-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-group-table td:last-child,
.ms-group-table th:last-child { width: 92px; text-align: right; }
.ms-group-table td code { color: #456785; font-size: 0.65rem; }
.table-empty { padding: 24px !important; color: #6a8299 !important; text-align: center !important; }

.ms-groups-lower-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.ms-paused-callout {
    padding: 14px;
    border: 1px solid #efd7a8;
    border-radius: 7px;
    background: #fffaf0;
}
.ms-paused-callout strong { color: #7d570f !important; }
.ms-paused-callout p { margin: 5px 0 0; color: #715e3c; line-height: 1.5; }
.ms-exchange-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.ms-exchange-preview > div { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border-radius: 6px; background: #f6f9fc; }
.ms-exchange-preview span { overflow: hidden; color: #244767; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ms-exchange-preview small { color: #6d8298 !important; }

.ms-activity-list { display: grid; gap: 3px; }
.ms-activity-list > div {
    min-height: 48px;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid #e2eaf2;
}
.ms-activity-list > div:last-child { border-bottom: 0; }
.ms-activity-list > .table-empty {
    min-height: 120px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 24px !important;
    color: #607b96 !important;
    text-align: center !important;
}
.ms-activity-list > div > div { min-width: 0; display: grid; gap: 2px; }
.ms-activity-list strong { color: #173a61 !important; font-size: 0.72rem; }
.ms-activity-list small { overflow: hidden; color: #607b96 !important; text-overflow: ellipsis; white-space: nowrap; }
.ms-activity-list time { color: #71869c; font-size: 0.62rem; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: #318de2; }
.activity-dot.completed { background: #1bb47f; }
.activity-dot.warning { background: #e6a127; }
.activity-dot.failed { background: #d94158; }

.ms-group-dialog { width: min(760px, calc(100vw - 32px)) !important; }
.ms-group-dialog label small { margin-top: 5px; color: #617b95 !important; font-weight: 500; }
.ms-form-wide { grid-column: 1 / -1; }
.ms-form-submit { display: flex; align-items: end; justify-content: flex-start; }

.ms-group-profile-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr)) max-content;
    align-items: stretch;
    gap: 1px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #d8e4ee;
    border-radius: 8px;
    background: #d8e4ee;
}
.ms-group-profile-strip > div { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 12px 14px; background: #ffffff; }
.ms-group-profile-strip small { color: #668099 !important; }
.ms-group-profile-strip strong { overflow: hidden; color: #12355d !important; text-overflow: ellipsis; white-space: nowrap; }
.ms-group-profile-strip > a { align-self: center; margin: 0 12px; }

.ms-group-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.8fr);
    gap: 16px;
    margin-bottom: 16px;
}
.ms-group-detail-grid.members-grid { grid-template-columns: minmax(0, 1fr) 320px; }
.ms-group-detail-grid .network-panel > form.ms-form-grid { padding-top: 2px; }
.ms-inline-assignment-form { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; margin-bottom: 12px; }
.ms-inline-assignment-form select,
.ms-inline-assignment-form button { min-height: 40px; }
.ms-principal-list { display: grid; gap: 5px; }
.ms-principal-list > div {
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border: 1px solid #e1eaf2;
    border-radius: 6px;
    background: #f9fbfd;
}
.ms-principal-list > div > div { min-width: 0; display: grid; gap: 2px; }
.ms-principal-list strong { overflow: hidden; color: #173a61 !important; text-overflow: ellipsis; white-space: nowrap; }
.ms-principal-list small { overflow: hidden; color: #607a94 !important; text-overflow: ellipsis; white-space: nowrap; }
.principal-avatar { width: 32px; height: 32px; display: grid; place-items: center; color: #0871cf; border-radius: 50%; background: #e5f2fd; font-weight: 900; }
.ms-principal-list .icon-button { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; box-shadow: none !important; }
.danger-text { color: #bd2c43 !important; }
.ms-member-table-wrap { max-height: 480px; }
.danger-zone { align-self: start; border-top: 3px solid #d94158 !important; }
.danger-zone p { color: #617890; line-height: 1.55; }
.danger-zone form button { width: 100%; }

@media (max-width: 1100px) {
    .ms-group-detail-grid,
    .ms-group-detail-grid.members-grid { grid-template-columns: 1fr; }
    .ms-group-profile-strip { grid-template-columns: repeat(2, 1fr); }
    .ms-group-profile-strip > a { margin: 10px; justify-self: start; }
}

@media (max-width: 760px) {
    .ms-group-summary,
    .ms-groups-lower-grid { grid-template-columns: 1fr; }
    .ms-group-profile-strip { grid-template-columns: 1fr; }
    .ms-exchange-preview { grid-template-columns: 1fr; }
    .ms-inline-assignment-form { grid-template-columns: 1fr; }
    .ms-group-section > header { align-items: flex-start; flex-direction: column; }
    .ms-group-toolbar { width: 100%; align-items: stretch; flex-direction: column; }
    .ms-group-toolbar input { width: 100%; }
    .ms-directory-toolbar { width: 100%; align-items: stretch; flex-direction: column; }
    .ms-directory-search { grid-template-columns: 36px minmax(0, 1fr); width: 100%; }
    .ms-directory-toolbar > button { width: 100%; }
}

/* Final contrast lock for the centralized settings forms. */
body.dashboard-page .dashboard-workspace .settings-integration-form {
    display: grid !important;
    gap: 14px !important;
    color: #102443 !important;
    border: 1px solid #d8e5f1 !important;
    border-radius: 7px !important;
    background: #f6f9fc !important;
    box-shadow: none !important;
}

body.dashboard-page .dashboard-workspace .settings-integration-form label,
body.dashboard-page .dashboard-workspace .settings-integration-form .checkbox-row label {
    color: #173a61 !important;
}
.alert-resolution {
    color: #087b55 !important;
    font-weight: 700;
    margin-top: 0.3rem;
}

body.module-page .module-logo {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    padding: 10px !important;
    border: 1px solid #cfe0ee !important;
    background: #ffffff !important;
}

body.module-page .module-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Application interaction system */
.top-actions .header-icon:is(a, button) {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    color: #0b3a72;
    background: #fff;
    border: 1px solid #d5e3f2;
    border-radius: 7px;
    box-shadow: none;
    text-decoration: none;
}

.top-search { position: relative; }

.global-search-results {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 360px;
    padding: 6px;
    background: #fff;
    border: 1px solid #c9dced;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(20, 57, 92, .18);
}

.global-search-results a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    color: #0b2f5d;
    border-radius: 6px;
    text-decoration: none;
}

.global-search-results a:hover,
.global-search-results a:focus-visible {
    color: #075fb9;
    background: #edf6ff;
    outline: none;
}

.global-search-results small { color: #526d8c; }

/* Keep global search suggestions above every dashboard/module panel. */
.top-header {
    position: relative !important;
    z-index: 500 !important;
    overflow: visible !important;
}

.top-actions,
.top-search {
    position: relative !important;
    overflow: visible !important;
}

.top-actions { z-index: 510 !important; }
.top-search { z-index: 520 !important; }

.global-search-results {
    z-index: 530 !important;
    max-height: min(420px, calc(100vh - 140px));
    overflow-y: auto;
}

.directory-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 150px;
}

.directory-row-actions .button-link {
    min-width: auto;
}

.table-action-menu { position: relative; }

.table-action-menu > summary {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    color: #075da8;
    font-weight: 700;
    background: #eef7ff;
    border: 1px solid #b9d8f3;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
}

.table-action-menu > summary::-webkit-details-marker { display: none; }

.table-action-menu[open] > div {
    position: absolute;
    z-index: 100;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    gap: 5px;
    width: 200px;
    padding: 7px;
    background: #fff;
    border: 1px solid #c9dced;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(19, 54, 88, .2);
}

.table-action-menu button {
    width: 100%;
    justify-content: flex-start;
    box-shadow: none !important;
}

.app-is-loading { cursor: progress; }
.app-is-loading body { overflow: hidden; }

button.login-forgot-link {
    display: block;
    width: auto;
    min-height: 0;
    margin-left: auto;
    padding: 0;
    color: #0873d1;
    background: transparent;
    border: 0;
    box-shadow: none;
}

button.login-forgot-link:hover {
    color: #064f96;
    background: transparent;
    transform: none;
}

@media (max-width: 760px) {
    .global-search-results {
        position: fixed;
        top: 76px;
        left: 12px;
        right: 12px;
        min-width: 0;
    }
}

.project-deliverable-setup { margin: 16px 0 0; padding: 14px; border: 1px solid #cfe0ee; border-radius: 8px; background: #f7fafd; }
.project-deliverable-setup legend { padding: 0 7px; color: #11365f; font-weight: 800; }
.project-deliverable-setup > p { margin: 0 0 12px; color: #55718f; font-size: .72rem; }
.project-deliverable-setup > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.project-deliverable-setup label { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 3px 8px; color: #173a61; font-size: .7rem; font-weight: 800; }
.project-deliverable-setup label span { color: #71869c; font-size: .62rem; font-weight: 600; }
.project-deliverable-setup input { grid-column: 1 / -1; min-height: 38px; }
.project-deliverables-shell { margin-bottom: 16px; }
.project-deliverable-list { display: grid; gap: 8px; }
.project-deliverable-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(3, 90px) minmax(130px, .7fr) minmax(200px, 1fr) max-content; align-items: end; gap: 10px; padding: 11px; border: 1px solid #d8e5ef; border-radius: 7px; background: #fff; }
.project-deliverable-row.is-out-of-scope { opacity: .72; background: #f7f9fb; }
.project-deliverable-row > div:first-of-type { align-self: center; display: grid; gap: 2px; }
.project-deliverable-row > div:first-of-type span { color: #1681db; font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.project-deliverable-row > div:first-of-type strong { color: #102f54; font-size: .78rem; }
.project-deliverable-row > div:first-of-type small { color: #657e99; }
.project-deliverable-row label { display: grid; gap: 5px; color: #365a7d; font-size: .62rem; font-weight: 800; }
.project-deliverable-row input { min-width: 0; min-height: 36px; padding: 7px 8px; }
.deliverable-progress { align-self: center; display: grid; grid-template-columns: minmax(80px, 1fr) max-content; align-items: center; gap: 8px; }
.deliverable-progress span { height: 7px; overflow: hidden; border-radius: 7px; background: #e3edf5; }
.deliverable-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #28c58d, #188bed); }
.deliverable-progress strong { color: #173a61; font-size: .7rem; }
@media (max-width: 1250px) { .project-deliverable-setup > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-deliverable-row { grid-template-columns: minmax(180px, 1fr) repeat(3, 82px); } .project-deliverable-row .deliverable-progress, .project-deliverable-row .deliverable-notes { grid-column: span 2; } }
@media (max-width: 760px) { .project-deliverable-setup > div, .project-deliverable-row { grid-template-columns: 1fr 1fr; } .project-deliverable-row > div:first-of-type, .project-deliverable-row .deliverable-notes { grid-column: 1 / -1; } }

.switch-console-shell { overflow: visible !important; }
.switch-console-overview { display: grid; grid-template-columns: 170px 170px minmax(0, 1fr); align-items: center; gap: 20px; min-height: 240px; padding: 18px; }
.switch-ring-stat { display: grid; justify-items: center; gap: 10px; }
.switch-ring-stat > div { width: 126px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle closest-side, #fff 78%, transparent 80% 100%), conic-gradient(#1688ef var(--switch-progress), #dfe7ed 0); }
.switch-ring-stat strong { color: #173a61; font-size: 1.45rem; line-height: 1; }
.switch-ring-stat span { margin-top: 4px; color: #55718f; font-size: .68rem; }
.switch-ring-stat p { margin: 0; color: #173a61; font-size: .75rem; font-weight: 800; }
.switch-port-bank { position: relative; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px 7px; min-height: 140px; padding: 22px 18px; border: 1px solid #d7e3ed; border-radius: 8px; background: #f7f9fb; }
.switch-port { position: relative; }
.switch-port summary { position: relative; width: 34px; height: 38px; display: grid; place-items: center; cursor: pointer; list-style: none; color: #536c85; border: 1px solid #c9d5df; border-radius: 5px; background: #dfe4e9; }
.switch-port summary::-webkit-details-marker { display: none; }
.switch-port summary span { position: absolute; top: -16px; color: #637a91; font-size: .58rem; font-weight: 800; }
.switch-port summary i { width: 17px; height: 12px; border: 2px solid currentColor; border-top-width: 4px; border-radius: 2px; }
.switch-port.gigabit summary { color: #fff; border-color: #21b979; background: #28c486; }
.switch-port.fast summary { color: #fff; border-color: #e69516; background: #efa51f; }
.switch-port.disabled summary { opacity: .58; background: #eef1f4; }
.switch-port.poe-active summary::after { content: 'P'; position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; display: grid; place-items: center; color: #fff; border: 2px solid #fff; border-radius: 50%; background: #1588ed; font-size: .48rem; font-weight: 900; }
.switch-port-popover { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); width: 245px; padding: 12px; transform: translateX(-50%); color: #173a61; border: 1px solid #c8dae8; border-radius: 7px; background: #fff; box-shadow: 0 12px 28px rgba(24, 55, 85, .18); }
.switch-port-popover dl { display: grid; grid-template-columns: 88px 1fr; gap: 5px; margin: 9px 0; font-size: .62rem; }
.switch-port-popover dt { color: #698099; }
.switch-port-popover dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.switch-port-popover small { display: block; color: #607990; line-height: 1.45; }
.switch-port-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 18px 16px; color: #55718f; font-size: .63rem; }
.switch-port-legend span { display: inline-flex; align-items: center; gap: 6px; }
.switch-port-legend i { width: 12px; height: 8px; border-radius: 2px; background: #dfe4e9; }
.switch-port-legend i.gigabit { background: #28c486; }.switch-port-legend i.fast { background: #efa51f; }.switch-port-legend i.disabled { opacity: .5; }.switch-port-legend b { color: #1688ef; font-size: .56rem; }
@media (max-width: 900px) { .switch-console-overview { grid-template-columns: 1fr 1fr; }.switch-port-bank { grid-column: 1 / -1; }.switch-ring-stat > div { width: 108px; } }

.eol-filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 240px max-content; align-items: end; gap: 10px; margin: 14px 0; padding: 12px; border: 1px solid #d7e4ef; border-radius: 7px; background: #f7f9fc; }
.eol-filter-bar label { display: grid; gap: 5px; color: #173a61; font-size: .65rem; font-weight: 800; }
.eol-filter-bar input, .eol-filter-bar select { min-height: 40px; }
.eol-evidence { min-width: 260px; color: #4f6d89; line-height: 1.45; }
@media (max-width: 760px) { .eol-filter-bar { grid-template-columns: 1fr; } }

/* End user support automation workspace */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.support-automation-page .dashboard-workspace { gap: 16px; }

.support-readiness-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    border: 1px solid #bcd8ef;
    border-left: 4px solid #1689eb;
    border-radius: 8px;
    background: rgba(245, 250, 255, .96);
    box-shadow: 0 10px 26px rgba(32, 73, 109, .08);
}

.support-readiness-banner > div { min-width: 0; display: flex; align-items: center; gap: 12px; }
.support-readiness-banner > div > div { min-width: 0; display: grid; gap: 4px; }
.support-readiness-banner strong { color: #11365f !important; font-size: .86rem; }
.support-readiness-banner small { color: #55718f !important; line-height: 1.45; }
.support-banner-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: #0875d1;
    border-radius: 7px;
    background: #e1f1fd;
}
.support-banner-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.support-metric-grid { margin: 0 !important; }
.support-metric-grid article { min-height: 112px; }
.support-metric-grid article.warning { border-top-color: #e6a127; }
.support-metric-grid article.warning strong { color: #b67608 !important; }

.support-top-grid,
.support-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .85fr);
    gap: 16px;
}

.support-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.support-intake-panel,
.support-readiness-panel,
.support-catalogue-panel,
.support-bottom-grid > article { margin: 0 !important; }

.support-intake-form {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(210px, .7fr) max-content;
    align-items: end;
    gap: 12px;
    margin-top: 14px;
}
.support-intake-form label { display: grid; gap: 6px; color: #173a61 !important; font-size: .7rem; font-weight: 800; }
.support-intake-form input,
.support-intake-form select { min-height: 42px; padding: 8px 11px; color: #173a61; border: 1px solid #c8dbea; border-radius: 6px; background: #f6f9fc; }
.support-intake-form button { min-height: 42px; }

.support-lock-note {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 13px;
    padding: 10px 12px;
    color: #5b7390;
    border: 1px solid #dce7f1;
    border-radius: 6px;
    background: #f7fafd;
}
.support-lock-note span { width: 32px; height: 32px; display: grid; place-items: center; color: #71869c; border-radius: 6px; background: #e9eff5; }
.support-lock-note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.support-lock-note p { margin: 0; font-size: .68rem; line-height: 1.5; }
.support-lock-note strong { color: #294b6e !important; }

.support-readiness-list { display: grid; gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid #dce7f1; border-radius: 7px; background: #dce7f1; }
.support-readiness-list > div { min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr) max-content; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; background: #fff; }
.support-readiness-list strong { overflow: hidden; color: #173a61 !important; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.support-readiness-list small { color: #6a8098 !important; font-size: .62rem; white-space: nowrap; }
.support-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aabba; }
.support-state-dot.ready { background: #1bb47f; box-shadow: 0 0 0 4px rgba(27, 180, 127, .12); }
.support-state-dot.pending { background: #e6a127; box-shadow: 0 0 0 4px rgba(230, 161, 39, .12); }

.support-catalogue-heading { align-items: end; }
.support-catalogue-heading > span { color: #5d7895 !important; font-size: .68rem; font-weight: 800; }
.support-catalogue-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, 280px); gap: 10px; margin: 14px 0 12px; }
.support-catalogue-toolbar label { min-width: 0; }
.support-catalogue-toolbar input,
.support-catalogue-toolbar select { width: 100%; min-height: 42px; padding: 8px 11px; color: #173a61; border: 1px solid #c8dbea; border-radius: 6px; background: #fff; }
.support-search-field { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid #c8dbea; border-radius: 6px; background: #fff; }
.support-search-field span { display: grid; place-items: center; color: #3b7fbc; }
.support-search-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.support-search-field input { border: 0; border-radius: 0; outline: 0; }

.support-workflow-list { display: grid; gap: 6px; }
.support-workflow-list > article {
    display: grid;
    grid-template-columns: minmax(190px, 1.05fr) minmax(210px, 1.2fr) minmax(230px, 1.35fr) 150px max-content;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 10px 11px;
    border: 1px solid #dce7f1;
    border-radius: 7px;
    background: #fff;
}
.support-workflow-list > article[hidden] { display: none; }
.support-workflow-list > article > div { min-width: 0; }
.support-workflow-list > article > div > small { display: block; margin-bottom: 4px; color: #6c839b !important; font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.support-workflow-list p { margin: 0; color: #425f7d !important; font-size: .67rem; line-height: 1.42; }
.support-workflow-name { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 9px; }
.support-workflow-name > span { width: 36px; height: 36px; display: grid; place-items: center; color: #0873d1; border-radius: 7px; background: #e5f2fd; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.support-workflow-name > div { min-width: 0; display: grid; gap: 3px; }
.support-workflow-name strong { overflow: hidden; color: #12365f !important; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.support-workflow-name small { color: #6b829a !important; font-size: .62rem; }
.support-workflow-mode { display: grid; gap: 5px; justify-items: start; }
.support-workflow-mode small { margin: 0 !important; color: #617b95 !important; font-size: .62rem !important; font-weight: 600 !important; text-transform: none !important; }
.support-risk { display: inline-flex; padding: 5px 7px; border-radius: 5px; font-size: .58rem; font-weight: 900; white-space: nowrap; }
.support-risk.safe { color: #08754f; background: #dff5ec; }
.support-risk.guided { color: #98620b; background: #fff1cf; }
.support-risk.restricted { color: #ae2439; background: #fde4e8; }
.support-workflow-list button { min-width: 82px; box-shadow: none !important; }

.support-process-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.support-process-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 50px; padding: 8px 10px; border: 1px solid #e0e9f1; border-radius: 6px; background: #f9fbfd; }
.support-process-list li > span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 6px; background: #0875d1; font-size: .68rem; font-weight: 900; }
.support-process-list li > div { min-width: 0; display: grid; gap: 3px; }
.support-process-list strong { color: #14385f !important; font-size: .72rem; }
.support-process-list small { color: #607a94 !important; line-height: 1.4; }
.support-guardrails { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.support-guardrails li { position: relative; padding: 10px 10px 10px 34px; color: #45627f; border: 1px solid #e0e9f1; border-radius: 6px; background: #f9fbfd; font-size: .68rem; line-height: 1.45; }
.support-guardrails li::before { content: ""; position: absolute; left: 12px; top: 14px; width: 8px; height: 8px; border: 2px solid #1bb47f; border-radius: 50%; }

@media (max-width: 1280px) {
    .support-workflow-list > article { grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.3fr) 150px max-content; }
    .support-workflow-list > article > div:nth-child(3) { display: none; }
}

@media (max-width: 980px) {
    .support-top-grid,
    .support-bottom-grid { grid-template-columns: 1fr; }
    .support-intake-form { grid-template-columns: 1fr; }
    .support-readiness-banner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
    .support-catalogue-toolbar { grid-template-columns: 1fr; }
    .support-workflow-list > article { grid-template-columns: 1fr; align-items: start; }
    .support-workflow-list > article > div:nth-child(3) { display: block; }
    .support-readiness-list > div { grid-template-columns: 10px minmax(0, 1fr); }
    .support-readiness-list small { grid-column: 2; }
}

/* Independent equipment-category search */
.equipment-category-panel > .panel-heading {
    align-items: end;
    gap: 18px;
}
.equipment-category-panel > .panel-heading > div:first-child {
    display: grid;
    gap: 4px;
}
.equipment-category-panel > .panel-heading > div:first-child > span {
    color: #577594;
    font-size: .7rem;
}
.equipment-group-search {
    width: min(360px, 100%);
    display: grid;
    gap: 5px;
    color: #31577d;
    font-size: .62rem;
    font-weight: 800;
}
.equipment-group-search input {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px 8px 36px;
    color: #102f51 !important;
    border: 1px solid #bdd3e8;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b7895' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    box-shadow: none;
}
.equipment-group-search input:focus {
    border-color: #1687e8;
    outline: 3px solid rgba(22, 135, 232, .13);
}
.client-list-tools {
    width: min(430px, 100%);
    display: grid;
    justify-items: end;
    gap: 5px;
}
.client-list-tools > span {
    color: #577594;
    font-size: .68rem;
    font-weight: 800;
}
.client-list-search { width: 100%; }
.equipment-search-empty td {
    padding: 28px !important;
    text-align: center;
}
.equipment-search-empty strong,
.equipment-search-empty small {
    display: block;
}
.equipment-search-empty small {
    margin-top: 5px;
    color: #607a94;
}

@media (max-width: 760px) {
    .equipment-category-panel > .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .equipment-group-search { width: 100%; }
    [data-client-list] > .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }
    .client-list-tools {
        width: 100%;
        justify-items: stretch;
    }
}

/* Network discovery and adoption workspace */
.function-workspace-nav {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px;
    overflow-x: auto;
    border: 1px solid #d5e3ef;
    border-radius: 7px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px rgba(30, 75, 112, .07);
}
.function-workspace-nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    color: #315b83 !important;
    border: 1px solid #d5e3ef;
    border-radius: 5px;
    background: #f5f9fc;
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.function-workspace-nav a:hover { color: #075fb7 !important; border-color: #9fc6e8; background: #eaf5fd; }

.section-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #157fcf !important;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: 0 !important;
}
.discovery-heading { align-items: center; }
.status-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: .62rem !important;
    font-weight: 900;
    white-space: nowrap;
}
.status-pill.success { color: #08754f !important; background: #dff5ec; }
.status-pill.warning { color: #95610c !important; background: #fff0ce; }
.status-pill.info { color: #135f9f !important; background: #e3f1fc; }

.discovery-readiness-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 15px;
    overflow: hidden;
    border: 1px solid #dbe7f1;
    border-radius: 7px;
    background: #dbe7f1;
}
.discovery-readiness-grid article {
    min-width: 0;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 62px;
    padding: 10px 12px;
    background: #f8fbfd;
}
.discovery-readiness-grid article > div { min-width: 0; display: grid; gap: 3px; }
.discovery-readiness-grid strong { overflow: hidden; color: #173a61 !important; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.discovery-readiness-grid small { overflow: hidden; color: #607a94 !important; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.discovery-state-dot { width: 9px; height: 9px; border-radius: 50%; }
.discovery-state-dot.ready { background: #1bb47f; box-shadow: 0 0 0 4px rgba(27, 180, 127, .12); }
.discovery-state-dot.pending { background: #e6a127; box-shadow: 0 0 0 4px rgba(230, 161, 39, .13); }

.discovery-scan-form {
    display: grid;
    grid-template-columns: minmax(210px, .8fr) minmax(290px, 1.2fr) max-content;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d8e5f1;
    border-radius: 7px;
    background: #edf4fa;
}
.discovery-scan-form label,
.adoption-form-grid label { display: grid; gap: 6px; }
.discovery-scan-form button { min-height: 42px; }
.discovery-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 6px 18px;
    margin-top: 13px;
    padding: 11px 13px;
    border-left: 3px solid #1e8de5;
    background: #f6f9fc;
}
.discovery-guidance strong { color: #173a61 !important; font-size: .7rem; }
.discovery-guidance p { grid-column: 1; margin: 0 !important; color: #4d6b88 !important; font-size: .66rem !important; line-height: 1.5; }
.discovery-guidance > div { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 7px; }

.discovery-results-panel .panel-heading > div,
.adoption-workspace .panel-heading > div { min-width: 0; }
.discovery-table-wrap { max-height: 510px; }
.discovery-table-wrap td > strong,
.discovery-table-wrap td > small { display: block; }
.discovery-table-wrap td > small { margin-top: 3px; color: #607a94 !important; }
.table-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-actions .button-link { min-height: 32px !important; padding: 6px 9px !important; }

.adoption-setup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.adoption-setup-card {
    min-width: 0;
    padding: 2px 20px 2px 0;
}
.adoption-setup-card + .adoption-setup-card {
    padding: 2px 0 2px 20px;
    border-left: 1px solid #dce7f1;
}
.adoption-setup-card > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.adoption-setup-card > header > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #0873d1;
    border-radius: 7px;
    background: #e3f1fc;
    font-size: .68rem;
    font-weight: 900;
}
.adoption-setup-card > header > div { min-width: 0; display: grid; gap: 3px; }
.adoption-setup-card h3 { margin: 0; color: #15385f !important; font-size: .8rem; }
.adoption-setup-card header small { color: #627d98 !important; }
.adoption-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.adoption-wide-field { grid-column: 1 / -1; }
.adoption-readiness {
    display: grid;
    gap: 4px;
    margin-top: 13px;
    padding: 11px 12px;
    border: 1px solid #dce7f1;
    border-left-width: 3px;
    border-radius: 5px;
    background: #f8fafc;
}
.adoption-readiness.ready { border-left-color: #1bb47f; }
.adoption-readiness.pending { border-left-color: #e6a127; }
.adoption-readiness strong { color: #173a61 !important; font-size: .68rem; }
.adoption-readiness small { color: #5e7892 !important; font-size: .63rem; line-height: 1.45; }
.adoption-setup-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.unifi-adoption-form { display: grid; gap: 0; }
.ssh-fingerprint-panel {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 12px;
    border: 1px solid #b8ddcf;
    border-radius: 6px;
    background: #effaf6;
}
.ssh-fingerprint-panel > div { min-width: 0; display: grid; gap: 3px; }
.ssh-fingerprint-panel strong {
    overflow-wrap: anywhere;
    color: #124b3b !important;
    font-family: Consolas, "Courier New", monospace;
    font-size: .68rem;
}
.ssh-fingerprint-panel small { color: #52756b !important; font-size: .62rem; }
.adoption-progress-card {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    margin-top: 13px;
    padding: 12px;
    border: 1px solid #cfe0ed;
    border-radius: 6px;
    background: #f4f8fb;
}
.adoption-progress-card > span { width: 10px; height: 10px; border-radius: 50%; background: #e5a32a; box-shadow: 0 0 0 4px rgba(229, 163, 42, .14); }
.adoption-progress-card.complete > span { background: #1bb47f; box-shadow: 0 0 0 4px rgba(27, 180, 127, .14); }
.adoption-progress-card > div { min-width: 0; display: grid; gap: 3px; }
.adoption-progress-card strong { color: #163a61 !important; font-size: .7rem; }
.adoption-progress-card small { color: #5b7590 !important; font-size: .63rem; line-height: 1.45; }
.adoption-progress-card time { color: #6c849b !important; font-size: .58rem; white-space: nowrap; }
.adoption-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.compact-network-tools { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.compact-network-tools .network-panel { min-height: 132px !important; margin: 0 !important; box-shadow: none !important; }

@media (max-width: 1180px) {
    .discovery-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adoption-setup-grid { grid-template-columns: 1fr; gap: 20px; }
    .adoption-setup-card { padding: 0; }
    .adoption-setup-card + .adoption-setup-card { padding: 20px 0 0; border-top: 1px solid #dce7f1; border-left: 0; }
}

@media (max-width: 820px) {
    .discovery-scan-form { grid-template-columns: 1fr; }
    .discovery-guidance { grid-template-columns: 1fr; }
    .discovery-guidance p,
    .discovery-guidance > div { grid-column: 1; grid-row: auto; }
    .compact-network-tools { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 620px) {
    .discovery-readiness-grid,
    .adoption-form-grid,
    .compact-network-tools { grid-template-columns: 1fr !important; }
    .adoption-wide-field { grid-column: auto; }
    .adoption-setup-card > footer,
    .discovery-guidance > div,
    .adoption-actions { align-items: stretch; flex-direction: column; }
    .adoption-progress-card { grid-template-columns: 12px minmax(0, 1fr); }
    .adoption-progress-card time { grid-column: 2; }
}
/* UniFi controller workspaces */
.network-device-commandbar,
.unifi-site-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #cfe0f2;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 20px rgba(23, 64, 110, .08);
}
.network-device-commandbar > div,
.unifi-site-toolbar .controller-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.network-device-commandbar > div:last-child { justify-content: flex-end; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #94a3b8; }
.status-dot.online { background: #18b978; box-shadow: 0 0 0 4px rgba(24,185,120,.13); }
.status-dot.offline { background: #e54858; box-shadow: 0 0 0 4px rgba(229,72,88,.12); }
.device-workspace-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 16px;
    padding: 5px;
    width: max-content;
    max-width: 100%;
    border: 1px solid #d5e3f2;
    border-radius: 8px;
    background: rgba(247, 251, 255, .96);
}
.device-workspace-tabs a {
    min-width: 120px;
    padding: 10px 16px;
    border-radius: 6px;
    color: #355273;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}
.device-workspace-tabs a:hover { background: #eaf4ff; color: #075dad; }
.device-workspace-tabs a.active { background: #087be0; color: #fff; box-shadow: 0 5px 12px rgba(8,123,224,.22); }
.device-overview-grid,
.network-insights-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 14px; margin-bottom: 14px; }
.device-identity-panel,
.device-health-panel { min-height: 100%; }
.device-fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.device-fact-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid #e2ecf7; }
.device-fact-list dt { color: #527091; font-weight: 700; }
.device-fact-list dd { margin: 0; color: #082d5d; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.device-summary-grid,
.availability-grid {
    display: grid;
    gap: 10px;
    margin: 0;
}

.device-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.device-summary-grid > div,
.availability-grid > div {
    min-width: 0;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 9px;
    padding: 13px 14px;
    border: 1px solid #dce8f4;
    border-radius: 7px;
    background: #f8fbff;
}
.device-summary-grid dt,
.availability-grid dt {
    color: #557391;
    font-size: .74rem;
    font-weight: 800;
}
.device-summary-grid dd,
.availability-grid dd {
    margin: 0;
    color: #082f60;
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.availability-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.availability-grid > div {
    min-height: 88px;
}
.availability-grid .lifecycle-fact {
    grid-column: 1 / -1;
    min-height: 70px;
}
.availability-grid .success-text { color: #09875d; }
.availability-grid .danger-text { color: #c72f43; }
.device-health-stats,
.insight-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.device-health-stats > div,
.insight-metric-grid > div { padding: 16px; border: 1px solid #d7e6f5; border-radius: 7px; background: #f7fbff; }
.device-health-stats strong,
.insight-metric-grid strong { display: block; color: #082d5d; font-size: 1.55rem; }
.device-health-stats span,
.insight-metric-grid span { color: #547293; font-size: .82rem; }
.port-utilization-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(8px, 1fr)); gap: 5px; margin-top: 18px; }
.port-utilization-strip span { height: 10px; border-radius: 3px; background: #d6dde7; }
.port-utilization-strip span.gigabit { background: #26be80; }
.port-utilization-strip span.fast { background: #f0a31c; }
.radio-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.radio-overview-grid article { padding: 15px; border: 1px solid #d5e4f3; border-radius: 7px; background: #f8fbff; }
.radio-overview-grid header { display: flex; justify-content: space-between; gap: 12px; color: #0b315f; }
.radio-meter { height: 7px; margin: 14px 0; overflow: hidden; border-radius: 4px; background: #e2eaf3; }
.radio-meter i { display: block; height: 100%; background: linear-gradient(90deg, #1dc98a, #0c83e8); }
.radio-overview-grid dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.radio-overview-grid dl div { padding: 8px; background: #fff; border: 1px solid #e3edf7; border-radius: 5px; }
.radio-overview-grid dt { color: #5f7895; font-size: .74rem; }
.radio-overview-grid dd { margin: 3px 0 0; color: #0b315f; font-weight: 800; }
.switch-port-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.switch-port-tile { border: 1px solid #d8e5f2; border-top: 3px solid #cbd5e1; border-radius: 6px; background: #f9fbfe; }
.switch-port-tile.gigabit { border-top-color: #22bd7f; }
.switch-port-tile.fast { border-top-color: #efa11b; }
.switch-port-tile summary { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 11px; cursor: pointer; }
.switch-port-tile summary span,
.port-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; background: #e5f2ff; color: #0878d5; font-weight: 900; }
.switch-port-tile summary strong { color: #0a315f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-port-tile summary i { color: #ee8a00; font-size: .72rem; font-style: normal; font-weight: 900; }
.switch-port-tile dl { margin: 0; padding: 0 11px 11px; }
.switch-port-tile dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #e4edf6; }
.switch-port-tile dt { color: #5a7592; }
.switch-port-tile dd { margin: 0; color: #0a315f; font-weight: 700; text-align: right; }
.compact-client-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.compact-client-list article { display: flex; justify-content: space-between; gap: 16px; padding: 12px; border: 1px solid #dce8f4; border-radius: 6px; background: #f9fbfe; }
.compact-client-list strong,
.compact-client-list small { display: block; }
.compact-client-list small { margin-top: 4px; color: #577493; }
.compact-client-list > article > span { color: #0877d2; font-weight: 900; white-space: nowrap; }
.radio-insight-list { display: grid; gap: 12px; margin-top: 16px; }
.radio-insight-list article { padding: 14px; border: 1px solid #d8e6f4; border-radius: 7px; background: #f8fbff; }
.radio-insight-list header,
.radio-insight-list label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.radio-insight-list label { margin-top: 12px; color: #456789; font-size: .82rem; }
.radio-insight-list progress { flex: 1; height: 9px; accent-color: #087de3; }
.activity-list { display: grid; gap: 8px; }
.activity-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid #dbe7f2; border-radius: 6px; }
.activity-list strong,
.activity-list small { display: block; }
.activity-list small { margin-top: 3px; color: #5a7592; }
.activity-list time { color: #6b8199; font-size: .78rem; }
.device-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 14px; }
.device-settings-main,
.device-settings-aside { display: grid; gap: 14px; }
.settings-inline-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; }
.settings-inline-form label,
.site-config-form label,
.unifi-site-toolbar label { color: #163e6b; font-weight: 800; }
.settings-inline-form input,
.site-config-form input,
.site-config-form select,
.site-config-form textarea,
.unifi-site-toolbar select { width: 100%; margin-top: 6px; }
.radio-settings-form { display: grid; gap: 12px; }
.radio-settings-form fieldset { margin: 0; padding: 14px; border: 1px solid #d5e4f3; border-radius: 7px; background: #f9fbfe; }
.radio-settings-form legend { padding: 0 7px; color: #083363; font-weight: 900; }
.setting-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #163e6b; font-weight: 700; }
.setting-check input { width: auto; margin: 0; }
.site-config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.site-option-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.site-option-grid label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid #d4e3f2; border-radius: 6px; background: #f7fbff; }
.site-option-grid input { width: auto; margin: 0; }
.site-config-form footer,
.radio-settings-form footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.manage-action-stack { display: grid; gap: 8px; }
.manage-action-stack form,
.manage-action-stack button { width: 100%; }
.port-settings-list { display: grid; gap: 8px; }
.port-settings-list > details { border: 1px solid #d5e4f3; border-radius: 7px; background: #f9fbfe; }
.port-settings-list > details > summary { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; color: #123d6b; }
.port-settings-list .site-config-form { padding: 14px; border-top: 1px solid #dbe7f3; }
.unifi-site-toolbar form { min-width: min(420px, 100%); }
.site-config-list { display: grid; gap: 8px; }
.site-config-row { border: 1px solid #d5e3f1; border-radius: 7px; background: #fbfdff; }
.site-config-row > summary { display: grid; grid-template-columns: 14px minmax(160px,1.2fr) minmax(130px,1fr) minmax(120px,.8fr) minmax(100px,.7fr) auto; align-items: center; gap: 14px; padding: 13px; cursor: pointer; color: #173f6c; }
.site-config-row > summary strong { color: #082f60; }
.site-config-row > summary b { color: #0878d5; }
.site-config-row .site-config-form { padding: 16px; border-top: 1px solid #dce8f4; background: #f6faff; }
.create-config-panel details > summary { cursor: pointer; color: #076dc5; font-weight: 900; }
.create-config-panel details[open] > summary { margin-bottom: 14px; }
.network-table td,
.network-table th { color: #173f6b; }
.network-table td strong { color: #082f60; }
@media (max-width: 1050px) {
    .device-overview-grid,
    .network-insights-grid,
    .device-settings-layout { grid-template-columns: 1fr; }
    .device-settings-aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .site-config-row > summary { grid-template-columns: 14px minmax(0,1fr) auto; }
    .site-config-row > summary span:not(.status-dot) { display: none; }
    .device-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .network-device-commandbar,
    .unifi-site-toolbar { align-items: stretch; flex-direction: column; }
    .network-device-commandbar > div:last-child { justify-content: flex-start; }
    .device-workspace-tabs { width: 100%; overflow-x: auto; }
    .device-workspace-tabs a { min-width: 105px; }
    .device-fact-list,
    .site-config-fields { grid-template-columns: 1fr; }
    .settings-inline-form { grid-template-columns: 1fr; }
    .activity-list article { grid-template-columns: 1fr; }
    .device-summary-grid,
    .availability-grid { grid-template-columns: 1fr; }
    .availability-grid .lifecycle-fact { grid-column: auto; }
}

/* Keep the desktop navigation as a vertical rail. An older responsive rule
   changed it to three columns below 1480px and compressed every menu item. */
@media (min-width: 821px) {
    .app-sidebar {
        overflow-x: hidden !important;
    }
    .sidebar-nav {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .sidebar-nav a {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
    }
}

/* Network equipment diagnostics */
.equipment-inline-action {
    display: inline-flex;
    margin: 0;
}
.equipment-inline-action button {
    min-height: 36px;
    white-space: nowrap;
}
.equipment-action-cluster {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.equipment-category-panel .network-device-table-view th:last-child,
.equipment-category-panel .network-device-table-view td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    min-width: 190px;
    background: #ffffff;
    box-shadow: -8px 0 14px -13px rgba(20, 56, 92, 0.7);
}

.equipment-category-panel .network-device-table-view th:last-child {
    z-index: 4;
    background: #dcecf8;
}

.equipment-category-panel .network-device-table-view tr.is-offline td:last-child {
    background: #fff7f8;
}

.equipment-category-panel .network-table-action {
    min-width: 62px !important;
}
.equipment-case-status {
    display: block;
    max-width: 150px;
    margin-top: 5px;
    color: #8f3d49 !important;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.25;
}
.controller-mini-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 5px;
    background: #edf4fb;
    color: #456789;
    font-size: .72rem;
    font-weight: 800;
}
.controller-mini-state::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #98a9bb;
    content: "";
}
.controller-mini-state.good { color: #08754f; background: #e1f5ed; }
.controller-mini-state.good::before { background: #18b978; }
.controller-mini-state.danger { color: #a52e41; background: #fde8eb; }
.controller-mini-state.danger::before { background: #e54858; }

.diagnostic-empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 330px;
    text-align: center;
}
.diagnostic-empty-state h2,
.diagnostic-empty-state p { margin: 0; }
.diagnostic-empty-icon,
.diagnostic-summary-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e6f2ff;
    color: #087be0;
    font-size: 1.55rem;
    font-weight: 900;
}
.diagnostic-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid #cfe0f2;
    border-left: 4px solid #1684df;
    border-radius: 8px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 22px rgba(27,65,108,.08);
}
.diagnostic-summary > div:nth-child(2) > span {
    color: #547293;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.diagnostic-summary h2 {
    margin: 4px 0;
    color: #082f60;
    font-size: 1rem;
    line-height: 1.45;
}
.diagnostic-summary p { margin: 0; color: #5b7591; font-size: .78rem; }
.diagnostic-summary form { margin: 0; }
.diagnostic-summary.diagnostic-critical { border-left-color: #e54858; }
.diagnostic-summary.diagnostic-critical .diagnostic-summary-icon { color: #c52b40; background: #fde8eb; }
.diagnostic-summary.diagnostic-warning { border-left-color: #f1a51b; }
.diagnostic-summary.diagnostic-warning .diagnostic-summary-icon { color: #9c6605; background: #fff0cf; }
.diagnostic-summary.diagnostic-success { border-left-color: #1eb97d; }
.diagnostic-summary.diagnostic-success .diagnostic-summary-icon { color: #08754f; background: #dff5ec; }

.diagnostic-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    align-items: start;
    gap: 14px;
    margin-bottom: 14px;
}
.diagnostic-secondary-grid { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); }
.diagnostic-check-list { display: grid; gap: 8px; }
.diagnostic-check {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid #dce7f2;
    border-radius: 7px;
    background: #f9fbfe;
}
.diagnostic-check i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7290ad;
}
.diagnostic-check strong,
.diagnostic-check small { display: block; }
.diagnostic-check strong { color: #0b315f; }
.diagnostic-check small { margin-top: 3px; color: #58738f !important; line-height: 1.4; }
.diagnostic-check > span { color: #55718e; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.diagnostic-check-pass i { background: #1db779; }
.diagnostic-check-pass > span { color: #08754f; }
.diagnostic-check-warn i { background: #f0a31c; }
.diagnostic-check-warn > span { color: #95610c; }
.diagnostic-check-fail { border-color: #f2cdd3; background: #fff8f9; }
.diagnostic-check-fail i { background: #e54858; }
.diagnostic-check-fail > span { color: #bd2f43; }
.diagnostic-recommendations {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 24px;
    color: #173f6b;
}
.diagnostic-recommendations li { padding-left: 4px; line-height: 1.5; }
.diagnostic-remediation,
.diagnostic-safety-note {
    margin-top: 16px;
    padding: 13px;
    border: 1px solid #f0d4a1;
    border-radius: 7px;
    background: #fff9ed;
}
.diagnostic-remediation strong,
.diagnostic-safety-note strong,
.diagnostic-safety-note span { display: block; }
.diagnostic-remediation p { margin: 4px 0 12px; color: #654b1b; }
.diagnostic-safety-note strong { color: #81570a; }
.diagnostic-safety-note span { margin-top: 5px; color: #6f5a31; line-height: 1.45; }
.diagnostic-topology {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 2px 10px;
}
.topology-node {
    min-width: 150px;
    padding: 12px;
    border: 1px solid #d9e6f2;
    border-top: 3px solid #879db4;
    border-radius: 7px;
    background: #f8fbfe;
}
.topology-node.current { border-top-color: #1684df; }
.topology-node.online { border-top-color: #1eb97d; }
.topology-node.offline { border-top-color: #e54858; background: #fff8f9; }
.topology-node span,
.topology-node strong,
.topology-node small { display: block; }
.topology-node span { color: #617b95; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.topology-node strong { margin: 5px 0; color: #0b315f; }
.topology-node small { color: #58738f !important; }
.topology-arrow { display: grid; place-items: center; color: #1684df; font-size: 1.25rem; }
.offline-case-form { display: grid; gap: 12px; }
.offline-case-form > label { color: #173f6b; font-weight: 800; }
.offline-case-form textarea,
.offline-case-form select { width: 100%; margin-top: 6px; }
.offline-case-form footer { display: flex; justify-content: flex-end; }
.case-history { margin-top: 18px; padding-top: 15px; border-top: 1px solid #dce7f2; }
.case-history h3 { margin: 0 0 10px; color: #0b315f; font-size: .86rem; }
.case-history article { padding: 10px 0; border-top: 1px solid #e5edf5; }
.case-history article > div { display: flex; justify-content: space-between; gap: 12px; }
.case-history article strong { color: #0b315f; }
.case-history article span,
.case-history article small { color: #607a95; font-size: .72rem; }
.case-history article p { margin: 6px 0; color: #294f76; }

@media (max-width: 1050px) {
    .diagnostic-workspace-grid,
    .diagnostic-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .diagnostic-summary { grid-template-columns: auto minmax(0, 1fr); }
    .diagnostic-summary form { grid-column: 1 / -1; }
    .diagnostic-summary button { width: 100%; }
    .equipment-action-cluster { align-items: stretch; flex-direction: column; min-width: 130px; }
    .equipment-action-cluster > *,
    .equipment-action-cluster button { width: 100%; }
}

/* Systems Vault */
.systems-vault-page .dashboard-workspace { isolation: isolate; }
.vault-command-bar,
.vault-item-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border: 1px solid #cddfed;
    border-left: 4px solid #1a84df;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 22px rgba(25, 62, 103, .08);
}
.vault-lock-state,
.vault-item-command-bar > div,
.vault-command-actions { display: flex; align-items: center; gap: 10px; }
.vault-command-actions form,
.vault-item-command-bar form { margin: 0; }
.vault-lock-state > div { display: grid; gap: 3px; }
.vault-lock-state strong { color: #0a3262; font-size: .9rem; }
.vault-lock-state small { color: #54718e !important; }
.vault-lock-icon,
.vault-dialog-shield {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #e9f3fc;
    color: #167ed5;
}
.vault-lock-icon svg,
.vault-dialog-shield svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vault-lock-state.is-unlocked .vault-lock-icon { color: #087852; background: #dff5ec; }

.vault-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.vault-stat-grid article {
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    border: 1px solid #d4e2ef;
    border-top: 3px solid #2689df;
    border-radius: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 7px 20px rgba(25, 62, 103, .07);
}
.vault-stat-grid article.needs-review { border-top-color: #e7a223; }
.vault-stat-grid span,
.vault-stat-grid strong,
.vault-stat-grid small { display: block; }
.vault-stat-grid span { color: #56738f; font-size: .74rem; font-weight: 800; }
.vault-stat-grid strong { margin: 7px 0 4px; color: #082e5d; font-size: 1.6rem; }
.vault-stat-grid small { color: #5a7590 !important; }
.vault-stat-grid .vault-key-source { overflow-wrap: anywhere; font-size: 1rem; line-height: 1.35; }

.vault-register { overflow: visible !important; }
.vault-register-heading { margin-bottom: 14px; }
.vault-register-heading > span {
    color: #315c84 !important;
    opacity: 1 !important;
    font-weight: 800;
}
.vault-filter-bar {
    display: grid;
    grid-template-columns: minmax(300px, 1.5fr) minmax(190px, .55fr) minmax(170px, .45fr);
    align-items: end;
    gap: 12px;
    margin-bottom: 14px;
    padding: 13px;
    border: 1px solid #d8e6f2;
    border-radius: 7px;
    background: #f5f9fd;
}
.vault-filter-bar label { display: grid; gap: 5px; color: #244b73; font-size: .7rem; font-weight: 800; }
.vault-filter-bar .module-search-field {
    position: relative;
    display: block;
    align-self: end;
}
.vault-filter-bar .module-search-field > span {
    position: absolute;
    left: 12px;
    top: 50%;
    bottom: auto;
    z-index: 2;
    display: grid;
    color: #4e789f;
    transform: translateY(-50%);
    pointer-events: none;
}
.vault-filter-bar .module-search-field svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.vault-filter-bar .module-search-field input {
    width: 100%;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px 0 38px !important;
}
.vault-filter-bar select {
    height: 42px !important;
    min-height: 42px !important;
}
.vault-table-wrap { overflow: auto; max-height: 560px; border: 1px solid #d7e5f1; border-radius: 7px; }
.vault-table { width: 100%; min-width: 1040px; border-collapse: collapse; }
.vault-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 12px;
    background: #dcecf8;
    color: #164c80;
    text-align: left;
    font-size: .69rem;
    text-transform: uppercase;
}
.vault-table td { padding: 12px; border-top: 1px solid #dce7f2; color: #214970; font-size: .76rem; vertical-align: middle; }
.vault-table td strong,
.vault-table td small { display: block; }
.vault-table td strong { color: #082f60; font-size: .82rem; }
.vault-table td small { margin-top: 3px; color: #66809a !important; }
.vault-category-chip { display: inline-flex; padding: 5px 8px; border-radius: 5px; background: #e8f3fc; color: #1767a9; font-weight: 800; }

.vault-lower-grid,
.vault-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 16px;
    align-items: start;
}
.vault-lower-grid > *,
.vault-item-layout > * { margin: 0 !important; }
.vault-control-list,
.vault-audit-list { display: grid; gap: 9px; }
.vault-control-list > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 2px 10px;
    padding: 11px;
    border: 1px solid #dde8f2;
    border-radius: 7px;
    background: #f8fbfe;
}
.vault-control-list > div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; color: #147bd1; }
.vault-control-list svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vault-control-list strong { color: #0a3262; }
.vault-control-list small { color: #58738e !important; line-height: 1.4; }
.vault-audit-list article {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #e1eaf3;
}
.vault-audit-list article:first-child { border-top: 0; }
.vault-audit-list strong,
.vault-audit-list small { display: block; }
.vault-audit-list strong { color: #0a3262; }
.vault-audit-list small,
.vault-audit-list time { color: #647e98 !important; font-size: .7rem; }

.vault-record-overview { min-height: 250px; }
.vault-metadata-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.vault-metadata-grid > div { display: grid; grid-template-columns: minmax(110px, .65fr) minmax(0, 1fr); gap: 12px; padding: 13px 4px; border-bottom: 1px solid #dde7f1; }
.vault-metadata-grid dt { color: #55718e; font-weight: 800; }
.vault-metadata-grid dd { margin: 0; color: #082f60; font-weight: 800; overflow-wrap: anywhere; }
.vault-tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.vault-tag-list span { padding: 5px 8px; border-radius: 5px; background: #edf4fa; color: #43688c; font-size: .7rem; font-weight: 800; }
.vault-session-state { display: grid; place-items: center; min-height: 210px; gap: 8px; padding: 24px; text-align: center; }
.vault-session-state > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #edf3f8; color: #58718a; }
.vault-session-state.is-unlocked > span { background: #dcf4ea; color: #087852; }
.vault-session-state svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.vault-session-state strong { color: #092f5e; font-size: 1rem; }
.vault-session-state small { max-width: 320px; color: #5a7590 !important; line-height: 1.55; }
.vault-protected-panel { margin-top: 16px !important; }
.vault-secret-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vault-secret-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #dce7f2; border-radius: 7px; background: #f9fbfd; }
.vault-secret-list article > div:first-child { min-width: 0; }
.vault-secret-list strong,
.vault-secret-list small { display: block; }
.vault-secret-list strong { color: #123a67; }
.vault-secret-list small { margin-top: 6px; color: #446887 !important; overflow-wrap: anywhere; white-space: pre-wrap; }
.vault-secret-actions { display: flex; gap: 6px; }
.vault-secret-actions button { min-width: 64px; }
.vault-secret-actions button:disabled { opacity: .45; cursor: not-allowed; }
.vault-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 16px; border: 1px solid #efcbd1; border-left: 4px solid #d94158; border-radius: 8px; background: #fff8f9; }
.vault-danger-zone strong,
.vault-danger-zone small { display: block; }
.vault-danger-zone strong { color: #a6273c; }
.vault-danger-zone small { margin-top: 4px; color: #76505a !important; }

.vault-record-dialog,
.vault-unlock-dialog {
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}
.vault-record-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.vault-record-dialog > form,
.vault-unlock-dialog > form {
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff;
}
.vault-record-dialog > form { max-height: calc(100dvh - 34px); overflow-y: auto; }
.vault-record-dialog header,
.vault-unlock-dialog header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    padding: 14px 20px;
    border-bottom: 1px solid #d8e5f0;
    background: #f8fbfe;
}
.vault-record-dialog header > div,
.vault-unlock-dialog header > div { display: grid; gap: 3px; }
.vault-record-dialog header span,
.vault-unlock-dialog header span {
    color: #0878df;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vault-record-dialog header h2,
.vault-unlock-dialog header h2 {
    margin: 0;
    color: #0b315f !important;
    font-size: 1.05rem;
}
.vault-record-dialog .dialog-close,
.vault-unlock-dialog .dialog-close {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    color: #315c84 !important;
    border: 1px solid #c8daea !important;
    background: #ffffff !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
}
.vault-record-dialog footer,
.vault-unlock-dialog footer {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 68px;
    margin: 0;
    padding: 14px 20px;
    border-top: 1px solid #d8e5f0;
    background: #ffffff;
}
.vault-record-dialog footer button[data-close-modal],
.vault-unlock-dialog footer button[data-close-modal] {
    width: auto !important;
    min-width: 88px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
}
.vault-unlock-dialog .vault-unlock-copy,
.vault-unlock-dialog > form > label { margin-right: 20px; margin-left: 20px; }
.vault-unlock-dialog > form > label { margin-bottom: 20px; }
.vault-form-section { padding: 16px 20px; border-bottom: 1px solid #dce7f2; }
.vault-form-section h3 { margin: 0; color: #0a3262 !important; }
.vault-form-section > p { margin: 4px 0 14px; color: #58738e; }
.vault-form-section > label { display: grid; gap: 6px; margin-top: 12px; color: #173f6b; font-weight: 800; }
.vault-form-section .form-grid { margin: 0; }
.vault-edit-secret { padding: 10px; border: 1px solid #e0e9f2; border-radius: 6px; background: #f8fbfe; }
.vault-edit-secret > label:first-child { display: grid; gap: 6px; color: #173f6b; font-weight: 800; }
.vault-clear-field { display: flex !important; align-items: center; gap: 7px !important; margin-top: 7px; color: #6b7f93 !important; font-size: .7rem; font-weight: 700 !important; }
.vault-clear-field input { width: 16px !important; height: 16px !important; min-height: 0 !important; }
.vault-unlock-dialog { width: min(500px, calc(100vw - 32px)); }
.vault-unlock-dialog > form > label { display: grid; gap: 7px; margin: 0 20px 18px; color: #173f6b; font-weight: 800; }
.vault-unlock-copy { display: grid; place-items: center; gap: 10px; padding: 20px 24px 14px; text-align: center; }
.vault-unlock-copy p { max-width: 390px; margin: 0; color: #4f6d89; line-height: 1.55; }

.standalone-status { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: #edf3f8; }
.standalone-status section { width: min(500px, 100%); padding: 28px; border: 1px solid #d3e0ec; border-radius: 8px; background: #fff; text-align: center; box-shadow: 0 14px 40px rgba(19, 53, 91, .14); }
.standalone-status h1 { margin: 0 0 8px; color: #0a3262; }
.standalone-status p { margin: 0 0 18px; color: #57728e; }

@media (max-width: 1100px) {
    .vault-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vault-filter-bar { grid-template-columns: 1fr 1fr; }
    .vault-filter-bar .module-search-field { grid-column: 1 / -1; }
    .vault-secret-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .vault-command-bar,
    .vault-item-command-bar,
    .vault-danger-zone { align-items: stretch; flex-direction: column; }
    .vault-command-actions,
    .vault-item-command-bar > div { flex-wrap: wrap; }
    .vault-stat-grid,
    .vault-lower-grid,
    .vault-item-layout,
    .vault-filter-bar,
    .vault-metadata-grid { grid-template-columns: 1fr; }
    .vault-filter-bar .module-search-field { grid-column: auto; }
    .vault-secret-list article { align-items: stretch; grid-template-columns: 1fr; }
    .vault-secret-actions button { flex: 1; }
}