.sidebar { flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; }
.sidebar-content { width: 190px !important; }
.sidebar-brand { padding: 1.15rem 1rem; letter-spacing: -.02em; }
.sidebar-header { padding-right: 1rem; padding-left: 1rem; }
.sidebar-link { padding-right: 1rem; padding-left: 1rem; }
.sidebar-link span.align-middle { white-space: nowrap; font-size: .82rem; }
.sidebar-footer-note { display: flex; align-items: center; gap: .6rem; margin: .75rem; padding: .75rem; color: rgba(233,236,239,.72); background: rgba(255,255,255,.055); border-radius: .35rem; font-size: .75rem; }
.live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #20c997; box-shadow: 0 0 0 .2rem rgba(32,201,151,.15); }
.dashboard-live-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; }
.summary-card { border: 0; transition: transform .15s ease, box-shadow .15s ease; }
.summary-card:hover { transform: translateY(-2px); box-shadow: 0 .35rem 1rem rgba(0,0,0,.1); }
.summary-card .card-body { padding: 1rem 1.25rem; }
.summary-card .card-title { margin-bottom: .35rem; }
.summary-card h1 { font-size: 1.75rem; line-height: 1.1; }
.summary-card .stat { width: 42px; height: 42px; }
.summary-card .stat svg { width: 22px; height: 22px; }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; }
.status-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.network-table th { padding: .8rem 1.25rem; color: #6c757d; background: #f8f9fa; border-bottom-width: 1px; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; white-space: nowrap; }
.network-table td { padding: .9rem 1.25rem; vertical-align: middle; }
.customer-row { cursor: pointer; }
.customer-row:focus { outline: 2px solid #3b7ddd; outline-offset: -2px; background: #f5f9ff; }
.customer-toolbar { display: flex; align-items: center; gap: .75rem; }
.customer-search { position: relative; flex: 1 1 320px; max-width: 520px; }
.customer-search svg { position: absolute; z-index: 2; top: 50%; left: .85rem; width: 1rem; height: 1rem; color: #6c757d; transform: translateY(-50%); }
.customer-search .form-control { padding-left: 2.5rem; }
.customer-status-filter { flex: 0 0 170px; }
.table-sort { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.table-sort:hover { color: #3b7ddd; }
.table-sort span { color: #adb5bd; font-size: .8rem; }
.incident-summary-card .card-body { padding: 1.1rem 1.25rem; }
.incident-summary-card h2 { font-size: 1.65rem; }
.incident-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.incident-tabs { display: inline-flex; padding: .2rem; background: #f1f3f5; border-radius: .35rem; }
.incident-tab { padding: .45rem .85rem; border: 0; border-radius: .25rem; color: #6c757d; background: transparent; font-weight: 600; }
.incident-tab.active { color: #fff; background: #3b7ddd; }
.incident-filters { display: flex; gap: .65rem; }
.incident-filters .form-control, .incident-filters .form-select { min-width: 160px; }
.incident-pagination { display: flex; align-items: center; justify-content: space-between; }
.network-metric .card-body { padding: 1.15rem 1.25rem; }
.network-metric h2 { font-size: 1.65rem; }
.network-memory-icon { color: #7c4dff; background: rgba(124,77,255,.12); }
.network-chart-body { position: relative; min-height: 310px; }
.network-chart-body canvas { height: 270px !important; }
.network-throughput-chart { position: relative; height: 330px; }
.interface-selector { width: 210px; }
.interface-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.interface-chip { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .65rem .8rem; border: 1px solid #dee2e6; border-radius: .35rem; font-size: .75rem; }
.interface-state { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.interface-state > span { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.interface-state.is-up { color: #1cbb8c; }
.interface-state.is-stale { color: #6c757d; }
.wan-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.wan-icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: #3b7ddd; background: #e9f1fc; }
.wan-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #dee2e6; }
.wan-list > div:last-child { border-bottom: 0; }
.wan-list dt { color: #6c757d; font-weight: 400; }
.wan-list dd { margin: 0; text-align: right; font-weight: 600; }
.dashboard-state { padding: 3rem 1.5rem; color: #6c757d; text-align: center; }
.notification-list { max-height: min(460px, 70vh); overflow-y: auto; }
.incident-notification { padding: .85rem 1rem; }
.notification-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; }
.notification-icon svg { width: 1rem; height: 1rem; }
.notification-time { font-size: .7rem; }
.notification-loading { padding: 2rem 1rem; color: #6c757d; text-align: center; }
.notification-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 1rem; color: #198754; text-align: center; }
.notification-empty svg { width: 2rem; height: 2rem; }
.notification-empty span { color: #6c757d; font-size: .75rem; }
.sidebar-badge { font-size: .65rem; }
.detail-metric .card-body { padding: 1.1rem 1.25rem; }
.detail-metric h2 { font-size: 1.5rem; }
.chart-card-body { position: relative; min-height: 285px; }
.chart-card-body canvas { width: 100% !important; height: 250px !important; }
.traffic-range { width: 145px; }
.customer-traffic-chart { position: relative; height: 320px; }
.customer-traffic-chart canvas { width: 100% !important; height: 320px !important; }
.traffic-summary-card .card-body { padding: 1rem 1.25rem; }
.traffic-summary-card h2 { font-size: 1.35rem; white-space: nowrap; }
.traffic-summary-card .stat { flex: 0 0 auto; }
.traffic-summary-card .card-body > div:last-child { min-width: 0; }
.traffic-metric-card { margin-bottom: 0; }
.traffic-metric-card .card-body { padding: .85rem 1rem; }
.traffic-metric-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.traffic-metric-heading .stat { width: 34px; height: 34px; flex: 0 0 34px; }
.traffic-metric-heading .stat svg { width: 17px; height: 17px; }
.traffic-metric-heading h5 { font-size: .95rem; font-weight: 600; }
.traffic-metric-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.traffic-metric-grid h2 { font-size: 1.5rem; white-space: nowrap; }
.traffic-metric-grid h3 { font-size: 1.05rem; white-space: nowrap; }
.traffic-metric-cell { min-width: 0; padding-left: 1rem; border-left: 1px solid #e6e9ed; }
.traffic-activity-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.traffic-active-value { display: flex; align-items: center; gap: .65rem; }
.traffic-online-label { display: inline-flex; align-items: center; gap: .35rem; color: #1cbb8c; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.traffic-online-label > span { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.traffic-top-icon { color: #7c4dff; background: rgba(124,77,255,.12); }
.text-purple { color: #7c4dff; }
.all-traffic-chart { position: relative; height: 300px; }
.all-traffic-chart canvas { width: 100% !important; height: 300px !important; }
.traffic-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.traffic-table-filters { display: flex; align-items: center; gap: .65rem; }
.traffic-table-filters .form-select { width: 145px; }
.traffic-search { min-width: 250px; }
.traffic-share { display: flex; align-items: center; gap: .65rem; min-width: 150px; }
.traffic-share > span { width: 42px; color: #6c757d; font-size: .75rem; }
.traffic-share-track { flex: 1; height: .38rem; overflow: hidden; border-radius: 999px; background: #e1e5ea; }
.traffic-share-fill { min-width: 2px; height: 100%; border-radius: inherit; background: #3b7ddd; transition: width .25s ease; }
.traffic-share-fill[style*="width:0%"], .traffic-share-fill[style*="width:0.0%"] { min-width: 0; }
.traffic-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.traffic-customer-table td:last-child { font-size: 1.4rem; }
.connection-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #dee2e6; }
.connection-list > div:last-child { border-bottom: 0; }
.connection-list dt { color: #6c757d; font-weight: 400; }
.connection-list dd { margin: 0; text-align: right; font-weight: 600; }
@media (max-width: 767.98px) {
    .content { padding: 1.5rem 1rem; }
    .network-table td, .network-table th { padding-inline: .8rem; }
    .customer-toolbar { align-items: stretch; flex-direction: column; }
    .customer-search { flex-basis: auto; max-width: none; }
    .customer-status-filter { flex-basis: auto; width: 100%; }
    .incident-controls, .incident-filters { align-items: stretch; flex-direction: column; }
    .incident-tabs { align-self: flex-start; }
    .incident-filters { width: 100%; }
    .interface-status-grid { grid-template-columns: 1fr 1fr; }
    .traffic-table-toolbar, .traffic-table-filters { align-items: stretch; flex-direction: column; }
    .traffic-table-filters, .traffic-table-filters .form-select, .traffic-search { width: 100%; }
    .traffic-pagination { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) { .interface-status-grid { grid-template-columns: 1fr; } }
@media (min-width: 992px) { .sidebar.collapsed { margin-left: -190px !important; } }
/* Authentication */
.auth-page {
    min-height: 100vh;
    background: #f2f5f9;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.auth-card {
    width: min(100%, 430px);
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0 2rem rgba(33, 37, 41, 0.08);
    padding: 2.5rem;
}

.auth-brand {
    color: #222e3c;
    font-size: 1.6rem;
    font-weight: 700;
}

.auth-kicker {
    color: #3b7ddd;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0.4rem 0 1.5rem;
    text-transform: uppercase;
}

.auth-card h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.auth-card-wide { max-width: 620px; }
.auth-code-input { letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.mfa-setup-grid { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: center; margin: 1.5rem 0; }
.mfa-qr { display: block; width: 190px; height: 190px; border: 1px solid #dee2e6; border-radius: .35rem; }
.mfa-manual-secret { display: block; overflow-wrap: anywhere; padding: .75rem; background: #f5f7fb; border-radius: .25rem; font-size: .95rem; }
.recovery-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 1rem; background: #f5f7fb; border-radius: .35rem; }
.recovery-code-grid code { color: #222e3c; font-size: 1rem; text-align: center; letter-spacing: .08em; }
@media (max-width: 575.98px) {
    .mfa-setup-grid { grid-template-columns: 1fr; }
    .mfa-qr { margin: 0 auto; }
    .recovery-code-grid { grid-template-columns: 1fr; }
}