/* ============================================================
   NORDIC TERMINAL — Design System
   Deep ink-blue backgrounds, crisp off-white text,
   tight information density, sharp minimal corners.
   ============================================================ */

:root {
    color-scheme: dark;

    /* Layout */
    --topbar-height: 44px;
    --sidebar-width: 180px;
    --sidebar-collapsed-width: 48px;

    /* Color Palette */
    --bg:           #0B0F19;
    --bg-surface:   #0F1523;
    --bg-raised:    #141C2E;
    --bg-elevated:  #182030;
    --bg-hover:     rgba(255, 255, 255, 0.04);
    --bg-selected:  rgba(59, 130, 246, 0.12);

    --border:       rgba(148, 163, 184, 0.10);
    --border-mid:   rgba(148, 163, 184, 0.18);
    --border-strong:rgba(148, 163, 184, 0.32);

    --text:         #E2E8F0;
    --text-muted:   #64748B;
    --text-dim:     #3D4F68;
    --text-inverse: #0B0F19;

    /* Accent */
    --accent:       #3B82F6;
    --accent-dim:   rgba(59, 130, 246, 0.15);
    --accent-bright:#60A5FA;
    --accent-strong:#2563EB;

    /* Semantic */
    --success:        #10B981;
    --success-dim:    rgba(16, 185, 129, 0.12);
    --success-border: rgba(16, 185, 129, 0.35);
    --warning:        #F59E0B;
    --warning-dim:    rgba(245, 158, 11, 0.12);
    --warning-border: rgba(245, 158, 11, 0.45);
    --danger:         #F87171;
    --danger-strong:  #EF4444;
    --danger-dim:     rgba(248, 113, 113, 0.12);
    --danger-border:  rgba(248, 113, 113, 0.45);
    --info:           #60A5FA;
    --info-dim:       rgba(96, 165, 250, 0.12);
    --info-border:    rgba(96, 165, 250, 0.35);

    /* Interaction */
    --focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.45);

    /* Shadows */
    --shadow:    0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.65);

    /* Geometry */
    --radius:    4px;
    --radius-sm: 3px;

    /* Legacy aliases so every other template keeps working */
    --app-bg:            var(--bg);
    --app-surface:       var(--bg-surface);
    --app-surface-strong:var(--bg-raised);
    --app-surface-muted: var(--bg-elevated);
    --app-border:        var(--border);
    --app-border-strong: var(--border-mid);
    --app-text:          var(--text);
    --app-text-muted:    var(--text-muted);
    --app-accent:        var(--accent);
    --app-accent-strong: var(--accent-strong);
    --app-accent-soft:   var(--accent-dim);
    --app-success:       var(--success);
    --app-success-soft:  var(--success-dim);
    --app-warning:       var(--warning);
    --app-warning-soft:  var(--warning-dim);
    --app-danger:        var(--danger-strong);
    --app-danger-soft:   var(--danger-dim);
    --app-hover:         var(--bg-hover);
    --app-focus-ring:    rgba(59, 130, 246, 0.4);
    --app-shadow:        var(--shadow);
    --app-shadow-sm:     var(--shadow-sm);
    --app-radius:        var(--radius);
    --app-radius-sm:     var(--radius-sm);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

body { overflow: hidden; }
a { color: inherit; text-decoration: none; }

.has-demo-banner {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.demo-banner {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 36px;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid var(--warning-border);
    background: var(--warning-dim);
    color: var(--warning);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
}

.demo-banner a {
    color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.demo-banner a:hover { color: var(--warning); }
.demo-banner a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.has-demo-banner #topbar { flex: 0 0 var(--topbar-height); }
.has-demo-banner .app-shell { flex: 1 1 auto; min-height: 0; height: auto; }

.demo-login-notice {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem;
    border: 1px solid var(--warning-border);
    background: var(--warning-dim);
    color: var(--text);
    font-size: 0.75rem;
}

.demo-login-notice > span { color: var(--text-muted); }

.demo-login-credentials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin: 0.25rem 0 0;
}

.demo-login-credentials div {
    min-width: 0;
    padding: 0.4rem;
    border: 1px solid var(--border-mid);
    background: var(--bg-surface);
}

.demo-login-credentials dt {
    color: var(--text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
}

.demo-login-credentials dd {
    overflow-wrap: anywhere;
    margin: 0.15rem 0 0;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */

.app-shell { height: calc(100vh - var(--topbar-height)); overflow: hidden; }
.app-layout { display: block; height: 100%; }
.app-main { box-sizing: border-box; height: 100%; overflow-y: auto; background: var(--bg); }
.app-page__container { max-width: 100%; }

.layout-shell { padding-left: var(--sidebar-width); transition: padding-left 0.2s ease; }
body.sidebar-collapsed .layout-shell { padding-left: var(--sidebar-collapsed-width); }
.layout-main-content { margin-left: 0; padding: 1rem; transition: margin-left 0.2s ease; }

/* ============================================================
   TOPBAR
   ============================================================ */

.app-topbar {
    position: sticky; top: 0; z-index: 1100;
    height: var(--topbar-height);
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0 0.875rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

.app-topbar__brand-row,
.app-topbar__actions { display: flex; align-items: center; gap: 0.75rem; }

.app-topbar__brand {
    color: var(--text); text-decoration: none;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.app-topbar__brand strong { color: var(--accent-bright); }

.app-topbar__spacer { flex: 1 1 auto; }
.app-topbar__menu { display: flex; align-items: center; flex: 1 1 auto; gap: 0.75rem; }
.app-topbar__search-slot { margin-left: auto; }
.app-topbar__auth-slot { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; }
.app-topbar__user-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

.app-topbar__burger {
    display: none; width: 2.1rem; height: 2.1rem;
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: transparent; color: var(--text); cursor: pointer;
    align-items: center; justify-content: center; flex-direction: column; gap: 0.2rem;
}
.app-topbar__burger span { display: block; width: 0.9rem; height: 1.5px; background: currentColor; transition: transform 0.15s ease, opacity 0.15s ease; }
.app-topbar__burger.app-is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.app-topbar__burger.app-is-open span:nth-child(2) { opacity: 0; }
.app-topbar__burger.app-is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   SIDEBAR
   ============================================================ */

#sidebar {
    position: fixed; top: var(--topbar-height); left: 0; bottom: 0;
    width: var(--sidebar-width);
    overflow: hidden; overflow-y: auto;
    transition: width 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent;
}

#sidebar.app-is-collapsed { width: var(--sidebar-collapsed-width); }

.app-sidebar__header {
    display: flex; justify-content: flex-end;
    padding: 0.45rem 0.45rem;
    border-bottom: 1px solid var(--border);
}

.app-sidebar__toggle {
    width: 1.65rem; height: 1.65rem;
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.1s, color 0.1s;
}
.app-sidebar__toggle:hover { background: var(--bg-hover); color: var(--text); }

.app-sidebar__nav { list-style: none; margin: 0; padding: 0.4rem 0.35rem; }
.app-sidebar__nav li + li { margin-top: 1px; }

.app-sidebar__link {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 0.8rem; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}
.app-sidebar__link:hover, .app-sidebar__link:focus-visible { background: var(--bg-hover); color: var(--text); outline: none; }
.app-sidebar__link.app-is-active { background: var(--accent-dim); color: var(--accent-bright); }

.app-sidebar__icon { width: 1rem; min-width: 1rem; text-align: center; font-size: 0.75rem; color: inherit; }

.app-sidebar-link-label { overflow: hidden; transition: max-width 0.2s ease, opacity 0.15s ease; }
#sidebar.app-is-collapsed .app-sidebar-link-label { max-width: 0; opacity: 0; }
#sidebar.app-is-collapsed .app-sidebar__link { justify-content: center; padding-inline: 0; }

#sidebar-overlay { display: none; }

/* ============================================================
   SEARCH FIELD (topbar)
   ============================================================ */

.app-search-field { position: relative; min-width: min(22rem, 50vw); }

.app-search-field__input-wrap {
    display: flex; align-items: center; gap: 0.5rem;
    height: 26px; padding: 0 0.55rem;
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: var(--bg-raised);
}
.app-search-field__input-wrap:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }

.app-search-field__icon { color: var(--text-dim); font-size: 0.72rem; }
.app-search-field__input { width: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 0.8rem; }
.app-search-field__input::placeholder { color: var(--text-dim); }

/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.topbar-search-wrapper { position: relative; }

#topbar-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; width: 100%; z-index: 2000;
    background: var(--bg-elevated); border: 1px solid var(--border-mid);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    max-height: 300px; overflow-y: auto;
}

.app-search-results { padding: 0.3rem; }

.app-search-results__message,
.app-search-results__section-title,
.app-search-results__meta { margin: 0; color: var(--text-muted); font-size: 0.75rem; }

.app-search-results__section-title {
    padding: 0.3rem 0.5rem;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.65rem; font-weight: 700; color: var(--text-dim);
}

.app-search-results__item {
    display: block; box-sizing: border-box; width: 100%;
    padding: 0.4rem 0.55rem; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font: inherit; font-size: 0.8rem;
    text-align: left; text-decoration: none; cursor: pointer;
}
.app-search-results__item.selected,
.app-search-results__item:hover,
.app-search-results__item:focus-visible { background: var(--bg-hover); outline: none; }

.app-search-results__divider { margin: 0.2rem 0; border: 0; border-top: 1px solid var(--border); }
.settings-modal-divider { margin: 1rem 0 0.75rem; border: 0; border-top: 1px solid var(--border); }

#topbar-search-results [data-search-item].selected { background: var(--bg-hover); }

#add_customer_results {
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: var(--bg-elevated); box-shadow: var(--shadow);
}

.app-search-results--inline {
    position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 1300;
    margin-top: 0; max-height: 13rem; overflow-y: auto;
    border: 1px solid var(--border-mid); border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--bg-elevated); box-shadow: var(--shadow);
}

.app-combobox { position: relative; }
.app-combobox .app-input[aria-expanded="true"] { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#add_customer_results .app-search-results__item.selected { background: var(--bg-hover); }

/* ============================================================
   BUTTONS
   ============================================================ */

.app-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 28px; padding: 0.3rem 0.7rem;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    background: var(--accent); color: #F0F6FF;
    font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    text-decoration: none; transition: background 0.12s; white-space: nowrap;
}
.app-button:hover, .app-button:focus-visible { background: var(--accent-strong); outline: none; }
.app-button:disabled, .app-button.app-is-loading { opacity: 0.5; cursor: not-allowed; }

.app-button__spinner {
    display: none; width: 0.8rem; height: 0.8rem; margin-right: 0.35rem;
    border: 2px solid rgba(240, 246, 255, 0.25); border-top-color: #F0F6FF;
    border-radius: 50%; animation: app-button-spin 0.7s linear infinite;
}
.app-button.app-is-loading .app-button__spinner { display: inline-block; }

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

.app-button--ghost { border-color: var(--border-mid); background: var(--bg-elevated); color: var(--text-muted); }
.app-button--ghost:hover, .app-button--ghost:focus-visible { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }

.app-button--secondary { border-color: var(--border-mid); background: var(--bg-elevated); color: var(--text); box-shadow: none; }
.app-button--secondary:hover, .app-button--secondary:focus-visible { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text); }

.app-button--danger { background: var(--danger-strong); color: #FFF; }
.app-button--danger:hover, .app-button--danger:focus-visible { background: #DC2626; }

.app-button--warning { background: var(--warning); color: #1C1200; }
.app-button--warning:hover, .app-button--warning:focus-visible { background: #D97706; }

.app-button--success { background: var(--success); color: #001A0F; }
.app-button--success:hover, .app-button--success:focus-visible { background: #059669; }

.app-button--attention {
    background: var(--warning);
    color: #1C1200;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
    animation: app-button-attention-pulse 1.8s ease-in-out infinite;
}
.app-button--attention:hover,
.app-button--attention:focus-visible {
    background: #D97706;
    color: #1C1200;
}
@keyframes app-button-attention-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

.app-button--small { min-height: 22px; padding: 0.18rem 0.5rem; font-size: 0.75rem; }
.app-button--wide { width: 100%; }
.app-button-pair { gap: 0; flex-wrap: nowrap; }

/* ============================================================
   FORMS
   ============================================================ */

.app-input,
.app-select,
.app-textarea {
    width: 100%; min-height: 28px; box-sizing: border-box;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: var(--bg-raised); color: var(--text);
    font: inherit; font-size: 0.8rem;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.app-textarea { min-height: 5.5rem; resize: vertical; }

.app-input:focus, .app-select:focus, .app-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.app-input[readonly], .app-textarea[readonly], .app-static-input { background: var(--bg-elevated); color: var(--text-muted); cursor: default; }

/* Native <select> option popup styling.
   `color-scheme: dark` on :root is the primary hint for browsers to render
   the popup itself dark, but Chromium's popup on Linux often renders in a
   separate process that ignores it. Layer in explicit option colors plus
   the ::picker(select) pseudo-element so Firefox, modern Chrome, and the
   rest of the field use the dark palette too. */
.app-select {
    /* Enable Chromium's customizable select so the dark popup styling below applies. */
    appearance: base-select;
}
.app-select option {
    background: var(--bg-raised);
    color: var(--text);
}
.app-select option:checked,
.app-select option:hover {
    background: var(--accent-dim);
    color: var(--accent-bright);
}
.app-select::picker(select) {
    background: var(--bg-raised);
    color: var(--text);
    border: 1px solid var(--border-mid);
}
.app-select::picker-icon {
    color: var(--text-muted);
}

.app-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.65rem; }
.app-form-grid--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.app-form-grid--3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.app-form-grid--4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 768px) {
    .app-form-grid--2col, .app-form-grid--3col, .app-form-grid--4col { grid-template-columns: 1fr; }
}
.app-form-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.app-form-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.35; }
.app-form-field--compact { margin-bottom: 0; }
.app-form-field--full { grid-column: 1 / -1; }

.app-input-group { display: flex; align-items: stretch; width: 100%; }
.app-input-group .app-input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1 1 auto; }
.app-input-group .app-button { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 0.75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.app-form-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.app-form-stack { display: flex; flex-direction: column; gap: 0.65rem; }
.app-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.app-form-actions--inline { flex-wrap: nowrap; }
.app-input--file { max-width: 22rem; padding: 0.3rem 0.45rem; font-size: 0.78rem; }
.app-checkbox, .app-radio { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text); font-size: 0.8rem; cursor: pointer; }

/* Status dot used in the clients table "Connection Info" cell. The dot's
   colour is driven by the .app-status-dot--<kind> modifier class. */
.app-status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: 0.05em;
    background: currentColor;
    flex-shrink: 0;
}
.app-status-dot--healthy      { color: #1aaf5c; }
.app-status-dot--degraded     { color: #d4a72c; }
.app-status-dot--critical,
.app-status-dot--disconnected { color: #d94545; }
.app-status-dot--undetermined { color: #9aa0a6; }

/* ============================================================
   CARDS & SURFACES
   ============================================================ */

.app-surface-card { padding: 0.85rem 1rem; border: 1px solid var(--border-soft, rgba(148, 163, 184, 0.06)); border-radius: var(--radius); background: var(--bg-raised); }

.app-summary-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 0.65rem; margin-bottom: 0.65rem; }
.app-summary-grid__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }

.app-summary-card {
    display: block; padding: 0.75rem 0.875rem;
    text-align: left; text-decoration: none; color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-raised);
    transition: border-color 0.12s, background 0.12s;
    position: relative; overflow: hidden;
}
.app-summary-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border-mid); }
.app-summary-card:hover { border-color: var(--border-strong); background: var(--bg-elevated); }

.app-summary-card__label { margin: 0 0 0.25rem; color: var(--text-muted); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.app-summary-card__value { margin: 0; font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text); }

.app-summary-card--online::before  { background: var(--success); }
.app-summary-card--offline::before { background: var(--danger-strong); }
.app-summary-card--never::before   { background: var(--info); }
.app-summary-card--warn::before    { background: var(--warning); }

.app-stack { display: flex; flex-direction: column; gap: 0.45rem; }

/* ============================================================
   TABLES
   ============================================================ */

.app-table-shell { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; }
.app-table-wrap { overflow-x: auto; }

.app-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }

.app-table thead { background: var(--bg-elevated); }
.app-table th { padding: 0.4rem 0.65rem; text-align: left; border-bottom: 1px solid var(--border-mid); color: var(--text-muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.app-table td { padding: 0.35rem 0.65rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; font-variant-numeric: tabular-nums; }

.app-table tbody tr { background: var(--bg-raised); transition: background 0.07s; }
.app-table tbody tr:last-child td { border-bottom: 0; }
.app-table tbody tr[data-clickable="true"] { cursor: pointer; }
.app-table tbody tr[data-clickable="true"]:hover { background: var(--bg-hover); }

/* ============================================================
   STATUS BADGES & TAGS
   ============================================================ */

.app-count-pill,
.app-status-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 18px; padding: 0 0.45rem;
    border-radius: 3px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.app-count-pill { background: var(--bg-elevated); border: 1px solid var(--border-mid); color: var(--text); }
.app-status-badge { background: var(--bg-elevated); border: 1px solid var(--border-mid); color: var(--text-muted); }

.app-status-badge.app-status-badge--danger  { background: var(--danger-dim);  border-color: var(--danger-border);  color: var(--danger); }
.app-status-badge.app-status-badge--warning { background: var(--warning-dim); border-color: var(--warning-border); color: var(--warning); }
.app-status-badge.app-status-badge--info    { background: var(--info-dim);    border-color: var(--info-border);    color: var(--info); }
.app-status-badge.app-status-badge--success { background: var(--success-dim); border-color: var(--success-border); color: var(--success); }

.app-tag {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    height: 18px; padding: 0 0.45rem;
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: var(--bg-elevated); color: var(--text-muted);
    font: inherit; font-size: 0.72rem; font-weight: 600; text-decoration: none;
}
.app-tag--info    { background: var(--info-dim);    border-color: var(--info-border);    color: var(--info); }
.app-tag--danger  { background: var(--danger-dim);  border-color: var(--danger-border);  color: var(--danger); }
.app-tag--success { background: var(--success-dim); border-color: var(--success-border); color: var(--success); }
.app-tag--warning { background: var(--warning-dim); border-color: var(--warning-border); color: var(--warning); }
.app-tag-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.app-token-input {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
    min-height: 34px; padding: 0.35rem 0.45rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-input);
}
.app-token-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.app-token-text {
    flex: 1 1 120px; min-width: 120px; border: 0; outline: 0;
    background: transparent; color: var(--text); font: inherit;
}
.app-token-chip { height: 22px; padding-right: 0.25rem; }
.app-token-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 700;
}
.app-token-remove:hover,
.app-token-remove:focus-visible { background: var(--bg-hover); color: var(--text); }
.wan-allowed-addresses { margin-top: 0.75rem; }
.wan-address-token-group { margin-top: 0.5rem; }

/* ============================================================
   ALERTS  (left-border pattern)
   ============================================================ */

.app-alert {
    padding: 0.55rem 0.7rem 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    border-left: 2px solid var(--border-mid);
    background: var(--bg-raised); color: var(--text); font-size: 0.8rem;
}
.app-alert--success { border-left-color: var(--success); background: var(--success-dim); border-color: var(--success-border); }
.app-alert--danger  { border-left-color: var(--danger-strong); background: var(--danger-dim); border-color: var(--danger-border); color: var(--danger); }
.app-alert--warning { border-left-color: var(--warning); background: var(--warning-dim); border-color: var(--warning-border); color: var(--warning); }
.app-alert__title { margin: 0 0 0.3rem; font-weight: 700; }

/* ============================================================
   TOASTS  (non-blocking notifications)
   ============================================================ */

.app-toast-container {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 3000;
    display: flex; flex-direction: column-reverse; gap: 0.5rem;
    pointer-events: none;
}
.app-toast {
    pointer-events: auto;
    min-width: 220px; max-width: 360px;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-mid);
    background: var(--bg-elevated); color: var(--text);
    box-shadow: var(--shadow-lg);
    font-size: 0.82rem; line-height: 1.35;
    display: flex; align-items: center; gap: 0.55rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.app-toast.app-toast--visible { opacity: 1; transform: translateY(0); }
.app-toast__icon { flex: 0 0 auto; font-size: 0.95rem; line-height: 1; }
.app-toast__message { flex: 1 1 auto; }
.app-toast--success { border-color: var(--success-border); background: var(--success-dim); color: var(--success); }
.app-toast--danger  { border-color: var(--danger-border);  background: var(--danger-dim);  color: var(--danger); }
.app-toast--info    { border-color: var(--border-mid);     background: var(--bg-elevated); color: var(--text); }

/* ============================================================
   MODALS
   ============================================================ */

.app-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1.5rem; z-index: 2000; }
.app-modal.app-is-open { display: flex; }
.app-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(4px); }

.app-modal__panel {
    position: relative; width: min(720px, 100%); max-height: calc(100vh - 3rem);
    border-radius: var(--radius); border: 1px solid var(--border-mid);
    background: var(--bg-elevated); box-shadow: var(--shadow-lg); overflow: hidden;
}

.app-modal__header,
.app-modal__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 0.65rem;
    padding: 0.6rem 0.875rem; background: var(--bg-raised);
}
.app-modal__header { border-bottom: 1px solid var(--border); }
.app-modal__footer { border-top: 1px solid var(--border); justify-content: flex-end; flex-wrap: wrap; }
.app-modal__body { max-height: calc(100vh - 11rem); overflow-y: auto; padding: 0.875rem; }
.app-modal__title { margin: 0; font-size: 0.87rem; font-weight: 700; color: var(--text); }

.app-modal__close {
    width: 22px; height: 22px; border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1;
    transition: background 0.1s, color 0.1s;
}
.app-modal__close:hover { background: var(--bg-hover); color: var(--text); }
.app-modal__actions { display: flex; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; width: 100%; }

/* ============================================================
   PAGE TOOLBAR
   ============================================================ */

.app-page-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap;
    margin-bottom: 0.65rem; padding: 0.55rem 0.7rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised);
}
.app-page-toolbar__group { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

/* ============================================================
   PROBLEM PANEL (Dashboard)
   ============================================================ */

.app-problem-panel { margin-top: 0.65rem; }
.app-problem-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin-bottom: 0.45rem; }
.app-problem-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--border-mid); border-radius: 3px; font-size: 0.75rem; color: var(--text-muted); cursor: pointer; user-select: none; }
.app-problem-toggle:hover { background: var(--bg-hover); color: var(--text); }

/* ============================================================
   CUSTOMER PROBLEMS POPOVER (top-bar "Problems: N" tag)
   ============================================================ */

.customer-problems-anchor-wrap { position: relative; display: inline-flex; align-items: center; }

button.app-problems-popover-anchor {
    cursor: pointer;
    border: 0;
    font-family: inherit;
}
button.app-problems-popover-anchor[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--danger-border, var(--danger)) inset;
}
button.app-problems-popover-anchor[hidden],
span.app-tag[hidden] { display: none !important; }

.app-problems-popover {
    position: fixed;
    z-index: 1500;
    min-width: 18rem;
    max-width: 28rem;
    max-height: 22rem;
    overflow: auto;
    padding: 0.3rem;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-size: 0.78rem;
    text-align: left;
}
.app-problems-popover[hidden] { display: none !important; }
.app-problems-popover__header {
    padding: 0.35rem 0.55rem 0.45rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.app-problems-popover__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.app-problems-popover__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
}
.app-problems-popover__item + .app-problems-popover__item {
    border-top: 1px solid var(--border);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.app-problems-popover__item:hover,
.app-problems-popover__item.app-is-hovered,
.app-problems-popover__item:focus-visible {
    background: var(--bg-hover);
    color: var(--text);
    outline: none;
}
.app-problems-popover__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.app-problems-popover__subject {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-problems-popover__summary {
    color: var(--text-muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-problems-popover__tab {
    align-self: center;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.app-problems-popover__empty {
    padding: 0.55rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.app-row-flash {
    animation: app-row-flash-pulse 1.4s ease-out;
}
@keyframes app-row-flash-pulse {
    0%   { background-color: rgba(245, 158, 11, 0.45); }
    60%  { background-color: rgba(245, 158, 11, 0.15); }
    100% { background-color: transparent; }
}

.app-alert-flash {
    animation: app-alert-flash-pulse 1.6s ease-out;
}
@keyframes app-alert-flash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); }
    20%  { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.app-title, .app-subtitle, .app-overline, .app-label, .app-help { margin-top: 0; }
.app-title { margin-bottom: 0.45rem; color: var(--text); font-weight: 700; line-height: 1.2; }
.app-title--xl { font-size: 1.45rem; }
.app-title--lg { font-size: 1.15rem; }
.app-title--md { font-size: 0.97rem; }
.app-title--sm { font-size: 0.85rem; }

.app-subtitle { margin-bottom: 0.35rem; color: var(--text-muted); font-weight: 600; font-size: 0.8rem; }
.app-subtitle--sm, .app-help, .app-overline { color: var(--text-muted); font-size: 0.72rem; }
.app-overline { margin-bottom: 0.2rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
.app-overline--tight { margin-bottom: 0.1rem; }
.app-label { display: block; margin-bottom: 0.25rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
.app-label--sm { font-size: 0.67rem; }

.app-copy-muted { color: var(--text-muted); }
.app-copy-centered { text-align: center; }
.app-copy-compact { margin: 0; font-size: 0.78rem; }
.app-text-danger, .app-help--danger { color: var(--danger) !important; }
.app-help--success { color: var(--success) !important; }
.app-hidden { display: none !important; }

/* ============================================================
   PAGINATION
   ============================================================ */

.app-pagination { display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.65rem; }
.app-pagination__pages { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.app-pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-muted); text-decoration: none; font-size: 0.75rem; }
.app-pagination__link--disabled { opacity: 0.3; pointer-events: none; }
.app-pagination__link--current { background: var(--accent); border-color: var(--accent); color: #FFF; }

/* ============================================================
   INLINE HELPERS
   ============================================================ */

.app-inline-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.app-inline-actions--end { justify-content: flex-end; }
.app-inline-actions--spread { justify-content: space-between; }
.app-inline-note { margin: 0; font-size: 0.72rem; color: var(--text-muted); }
.app-empty-state { padding: 1.25rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; }
.app-loading-state { padding: 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); color: var(--text-muted); font-size: 0.8rem; }
.app-is-clickable { cursor: pointer; }
.app-row-clickable { cursor: pointer; }
.app-table-cell-centered { text-align: center; }
.app-static-input { background: var(--bg-elevated); }

.app-mb-0 { margin-bottom: 0; }
.app-mb-2 { margin-bottom: 0.5rem; }
.app-mb-4 { margin-bottom: 1rem; }
.app-mt-2 { margin-top: 0.5rem; }
.app-mt-3 { margin-top: 0.75rem; }

/* Inline warning/info badges rendered next to the WiFi radio band labels
   on the customer page. */
.app-radio-band-warn,
.app-radio-band-info {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-left: 0.55rem; vertical-align: middle;
    font-size: 0.68rem; font-weight: 600;
}
.app-radio-band-warn i,
.app-radio-band-info i { font-size: 0.75rem; line-height: 1; }

/* ============================================================
   SETTINGS PAGES
   ============================================================ */

.app-settings-page { --settings-gap: 0.65rem; position: relative; }
.app-settings-page__intro { margin-bottom: 0.65rem; }

.app-settings-tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; margin-bottom: 0.65rem; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.app-settings-tab { flex: 0 0 auto; min-height: 24px; padding: 0.25rem 0.65rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.app-settings-tab:hover, .app-settings-tab:focus-visible { border-color: var(--border); background: var(--bg-hover); color: var(--text); outline: none; }
.app-settings-tab.app-is-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-bright); }

.app-settings-workspace { display: block; }
.app-settings-panel[hidden] { display: none; }
.app-settings-section { display: flex; flex-direction: column; gap: 0.55rem; }

.settings-section-surface { padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.settings-section-toolbar { margin-bottom: 0.1rem; padding: 0 0 0.55rem; border-bottom: 1px solid var(--border); border-top: 0; border-right: 0; border-left: 0; border-radius: 0; background: transparent; box-shadow: none; }
.settings-section-toolbar__group--grow { flex: 1 1 28rem; }
.settings-toolbar-field { min-width: min(15rem, 100%); flex: 1 1 13rem; }
.settings-section-actions { justify-content: flex-end; align-items: center; gap: 0.45rem; }

.settings-section-header { display: flex; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; padding-bottom: 0; }
.settings-section-header-copy { flex: 1 1 18rem; }

.settings-user-table__row { cursor: pointer; }
.settings-user-table__row:hover { background: var(--bg-hover); }
.settings-user-table__row--active, .settings-user-table__row--active:nth-child(even) { background: var(--accent-dim); }
.settings-user-table__actions { justify-content: center; }
.settings-feedback-note { padding: 0.1rem 0; }
.settings-checkbox-field { justify-content: flex-end; align-self: end; }

.settings-time-range { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 0.45rem; align-items: center; }
.settings-time-range__separator { color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }

.settings-group { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.25rem 0 0.5rem; }
.settings-group--divider { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.settings-group__header { display: flex; justify-content: space-between; align-items: center; gap: 0.65rem; margin-bottom: 0.25rem; }
.settings-group__title { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.settings-subsection { padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); margin-bottom: 0.65rem; }
.settings-subsection--muted { background: var(--bg-surface); }
.settings-subsection__header { display: flex; justify-content: space-between; gap: 0.65rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle, var(--border)); }
.settings-subsection__title-group { display: flex; align-items: center; gap: 0.55rem; }
.settings-subsection__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--accent-dim); color: var(--accent-bright); font-size: 0.85rem; flex-shrink: 0; }
.settings-subsection__title { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--text); }
.settings-subsection__subtitle { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--text-muted); font-weight: normal; }

.settings-splynx-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 500; }
.settings-splynx-badge--success { border-color: rgba(26, 175, 92, 0.3); background: rgba(26, 175, 92, 0.1); color: #1aaf5c; }
.settings-splynx-badge--failed { border-color: rgba(217, 69, 69, 0.3); background: rgba(217, 69, 69, 0.1); color: #d94545; }
.settings-splynx-badge--idle { color: var(--text-muted); }
.settings-splynx-badge--partial { border-color: rgba(217, 145, 38, 0.3); background: rgba(217, 145, 38, 0.1); color: #d99126; }

.settings-splynx-log-entry { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); padding: 0.55rem 0.75rem; }
.settings-splynx-log-entry + .settings-splynx-log-entry { margin-top: 0.4rem; }
.settings-splynx-log-entry__summary { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; cursor: pointer; list-style: none; }
.settings-splynx-log-entry__summary::-webkit-details-marker { display: none; }
.settings-splynx-log-entry__title { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; font-size: 0.85rem; }
.settings-splynx-log-entry__status { font-size: 0.72rem; padding: 0.2rem 0.55rem; }
.settings-splynx-log-entry__body { padding-top: 0.55rem; }
.settings-splynx-log-entry__heading { margin: 0.5rem 0 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.settings-splynx-log-entry__errors { list-style: decimal inside; padding-left: 0.4rem; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.78rem; }


.settings-action-dropdown { position: relative; display: inline-block; }

.system-release-notes { margin: 0; max-height: 24rem; overflow: auto; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem; background: var(--bg-surface); color: var(--text); font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.75rem; line-height: 1.55; }

.settings-integration-block { display: flex; flex-direction: column; gap: 0.55rem; }
.settings-integration-block__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.65rem; flex-wrap: wrap; }
.settings-splynx-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.settings-splynx-status:not([hidden]) { display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: 0.72rem; color: var(--text-muted); }
.settings-splynx-divider { padding: 0 0.15rem; opacity: 0.6; }
.settings-splynx-error { padding-left: 1.5rem; color: var(--danger); }

.settings-block-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.65rem; flex-wrap: wrap; margin-top: 0.85rem; margin-bottom: 0.45rem; }
.settings-block-header--spaced { padding-top: 0.65rem; border-top: 1px solid var(--border); }
.settings-block-header--nested { margin-top: 0; padding-top: 0; border-top: 0; }

.settings-form-actions { display: flex; justify-content: flex-end; margin-top: 0.65rem; padding-top: 0.2rem; }

.settings-repeater-list { display: flex; flex-direction: column; gap: 0.35rem; }
.settings-repeater-list--nested { gap: 0.45rem; }

.settings-entry, .settings-inline-entry { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); padding: 0.55rem 0.65rem; }
.settings-entry--nested { background: var(--bg-surface); border-style: dashed; }
.settings-entry__header, .settings-inline-entry__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.settings-inline-entry__title { margin: 0; color: var(--text); font-weight: 700; font-size: 0.8rem; }
.settings-nested-block { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--border); }
.settings-bandwidth-input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem; }
.settings-bandwidth-input-group .app-select { min-width: 5.5rem; }

.settings-unifi-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.settings-unifi-row .settings-unifi-name-input { flex: 0 1 9rem; min-width: 6rem; max-width: 12rem; }
.settings-unifi-row .settings-unifi-url-input { flex: 1 1 14rem; min-width: 12rem; max-width: 22rem; }
.settings-unifi-resolved-ip { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--text-muted); padding: 0.15rem 0.45rem; background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border); white-space: nowrap; min-width: 7.5rem; text-align: center; }
.settings-unifi-resolved-ip[data-empty="true"] { opacity: 0.6; }
.settings-unifi-status { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
.settings-unifi-status[data-state="error"] { color: var(--danger, #c0392b); }
.settings-unifi-status[data-state="success"] { color: var(--success, #2c7a4b); }

.app-settings-page .app-button { box-shadow: none; }
.app-settings-page .app-input,
.app-settings-page .app-select,
.app-settings-page input[type="time"],
.app-settings-page input[type="url"],
.app-settings-page input[type="number"],
.app-settings-page input[type="text"],
.app-settings-page input[type="password"] { background: var(--bg-elevated); }

.app-settings-page .settings-inline-checks { display: flex; gap: 0.3rem 0.65rem; flex-wrap: wrap; align-items: flex-start; }
.app-settings-page .settings-inline-checks label.app-checkbox { display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1.2; }

.app-settings-page .template-variable-reference { background: var(--bg-surface); border-color: var(--border); color: var(--text); max-height: 17rem; overflow-y: auto; }
.app-settings-page .template-variable-token:hover,
.app-settings-page .template-variable-token:focus-visible { background: var(--bg-hover); color: var(--text); }

.app-settings-page .template-variable-autocomplete { position: fixed; z-index: 1000; min-width: 250px; max-width: min(350px,90vw); border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow); overflow: hidden; }
.app-settings-page .template-variable-autocomplete[hidden] { display: none; }
.app-settings-page .template-variable-autocomplete-item { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 0.5rem 0.7rem; text-align: left; cursor: pointer; font-size: 0.78rem; }
.app-settings-page .template-variable-autocomplete-item:last-child { border-bottom: 0; }
.app-settings-page .template-variable-autocomplete-item.app-is-active,
.app-settings-page .template-variable-autocomplete-item:hover,
.app-settings-page .template-variable-autocomplete-item:focus-visible { background: var(--bg-hover); outline: none; }
.app-settings-page .template-variable-autocomplete-item strong { display: block; color: var(--text); }
.app-settings-page .template-variable-autocomplete-item span { display: block; color: var(--text-muted); font-size: 0.72rem; }

/* ============================================================
   TABS
   ============================================================ */

.app-tabs { margin-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.app-tabs ul { display: flex; gap: 2px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.app-tabs a { display: inline-flex; align-items: center; min-height: 30px; padding: 0.25rem 0.65rem; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: background 0.1s, color 0.1s; }
.app-tabs a:hover, .app-tabs a:focus-visible { background: var(--bg-hover); color: var(--text); outline: none; }
.app-tabs .app-is-active a { border-color: var(--border); background: var(--bg-raised); color: var(--accent-bright); border-bottom-color: var(--bg-raised); box-shadow: 0 -2px 0 var(--accent) inset; }

.tab-content { display: none; }
.tab-content.app-is-active { display: block; }

/* ============================================================
   STATUS INDICATOR
   ============================================================ */

.router-status-indicator { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 28px; padding: 0.3rem 0.55rem; margin-left: 4px; border: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: transparent; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
.router-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.router-status-indicator--online  { border-color: var(--success-border); background: var(--success-dim); color: var(--success); }
.router-status-indicator--offline { border-color: var(--danger-border);  background: var(--danger-dim);  color: var(--danger); }
.router-status-indicator--pending { border-color: var(--warning-border);  background: var(--warning-dim);  color: var(--warning); }
.router-status-indicator--provisioning { color: var(--warning); }

.router-status-indicator__text { white-space: nowrap; transition: opacity 0.2s ease, transform 0.32s ease; }
.router-status-indicator__text--hidden { display: none; }
.router-status-indicator__text--entering { animation: router-status-text-slide-in 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }

@keyframes router-status-text-slide-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

.router-status-steps {
    display: inline-flex; align-items: center; gap: 0.2rem;
    margin: 0; padding: 0; list-style: none;
    transition: opacity 0.28s ease, transform 0.32s ease, max-width 0.32s ease;
    overflow: hidden;
}
.router-status-steps[hidden] { display: none; }
.router-status-steps--completing .router-status-step--upcoming { opacity: 0; }
.router-status-steps--collapsing { opacity: 0; transform: translateX(20px); max-width: 0; padding-right: 0; }

.router-status-step {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0 0.4rem;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.68rem; font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.router-status-step__dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--border-mid); flex-shrink: 0;
    transition: background 0.2s ease;
}
.router-status-step__label { white-space: nowrap; }
.router-status-step--upcoming { opacity: 0.65; }
.router-status-step--upcoming .router-status-step__dot { background: var(--border-mid); }
.router-status-step--active {
    background: var(--warning-dim);
    border-color: var(--warning-border);
    color: var(--warning);
    animation: router-status-step-pulse 1.4s ease-in-out infinite;
}
.router-status-step--active .router-status-step__dot { background: var(--warning); }
.router-status-step--complete { background: var(--success-dim); border-color: var(--success-border); color: var(--success); }
.router-status-step--complete .router-status-step__dot {
    background: var(--success);
    box-shadow: inset 0 0 0 2px var(--bg-elevated);
}

@keyframes router-status-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .router-status-indicator__text--entering,
    .router-status-step--active,
    .router-status-steps,
    .router-status-steps--completing .router-status-step--upcoming {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   SAVE ACTIONS / SCHEDULE DROPDOWN
   ============================================================ */

.save-actions-row { padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.save-actions-row > .router-status-indicator { flex-wrap: wrap; max-width: 100%; }
.save-actions-group { align-items: stretch; gap: 0; flex-wrap: nowrap; border-radius: var(--radius-sm); }
.save-actions-group > .app-button, .save-actions-group .schedule-dropdown-button { box-shadow: none; }
/* make the schedule-dropdown div a flex wrapper so the button fills it with no gap */
.save-actions-group { display: inline-flex; }
.save-actions-group .schedule-dropdown { display: flex; }
.save-actions-group > .app-button { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.save-actions-group .schedule-dropdown-button {
    min-width: 2.5rem;
    padding-inline: 0.4rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(240, 246, 255, 0.32);
}
.save-actions-group .schedule-dropdown__menu { left: 0; right: auto; }

/* ============================================================
   MIKROTIK DEVICE ACTIONS
   ============================================================ */

.mikrotik-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.mikrotik-actions__divider { display: inline-block; width: 1px; align-self: stretch; background: var(--border); margin: 0 0.2rem; opacity: 0.6; }
.mikrotik-split-action { display: inline-flex; align-items: stretch; gap: 0; flex-shrink: 0; }
.mikrotik-split-action .device-schedule-dropdown { display: flex; }
.mikrotik-split-action > .mikrotik-reboot-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.mikrotik-split-action .schedule-dropdown-button {
    min-width: 2rem;
    padding-inline: 0.35rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(28, 18, 0, 0.22);
}

.schedule-dropdown, .device-schedule-dropdown { position: relative; }
.schedule-dropdown__menu, .device-schedule-dropdown__menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 1500; min-width: 13rem; }
.schedule-dropdown.app-is-active .schedule-dropdown__menu,
.device-schedule-dropdown.app-is-active .device-schedule-dropdown__menu { display: block; }

.schedule-dropdown__content, .device-schedule-dropdown__content { padding: 3px; border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
.schedule-dropdown__item, .device-schedule-dropdown__item { display: block; padding: 0.38rem 0.55rem; border-radius: var(--radius-sm); color: var(--text); font-size: 0.8rem; text-decoration: none; }
.schedule-dropdown__item:hover, .schedule-dropdown__item:focus-visible,
.device-schedule-dropdown__item:hover, .device-schedule-dropdown__item:focus-visible { background: var(--bg-hover); outline: none; }

.scheduled-change-card + .scheduled-change-card { margin-top: 0.55rem; }
.scheduled-change-card-header { display: flex; justify-content: space-between; gap: 0.65rem; align-items: flex-start; }
.scheduled-change-card-actions { justify-content: flex-end; }
.scheduled-change-editor-field { margin-bottom: 0.35rem; }
.scheduled-change-time { margin: 0 0 0.15rem; font-weight: 600; }
.scheduled-change-meta { margin-bottom: 0.15rem; }

.field-changed, .changed-field { border-color: var(--warning) !important; box-shadow: 0 0 0 2px rgba(245,158,11,0.22) !important; }

/* ============================================================
   CUSTOMER EDITOR
   ============================================================ */

.customer-editor .customer-table-shell { border-color: var(--border); }
.customer-editor .customer-table thead { background: var(--bg-elevated); }
.customer-editor .customer-table th { border-bottom: 1px solid var(--border-mid); color: var(--text-muted); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.customer-editor .customer-table th + th, .customer-editor .customer-table td + td { border-left: 1px solid var(--border); }
.customer-editor .customer-table tbody tr { background: var(--bg-raised); }
.customer-editor .customer-table tbody td { vertical-align: top; }

.customer-editor__topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.55rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.customer-editor__identity { min-width: min(100%, 18rem); }
.customer-editor__controls { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; flex: 1 1 34rem; flex-wrap: wrap; }
.customer-editor__network-field { flex: 1 1 14rem; max-width: 17rem; }
.customer-editor__template-field { flex: 1 1 14rem; max-width: 17rem; }
.customer-editor__controls .app-input, .customer-editor__controls .app-select, .customer-editor__controls .app-button { min-height: 28px; }
.customer-editor__stat-card { min-height: 5rem; }
.customer-editor__section { padding: 0; margin-bottom: 0.65rem; }
.customer-table-tools { margin-bottom: 0.55rem; }
.customer-card-header { margin-bottom: 0.35rem; }
.customer-modal-meta { margin-bottom: 0.65rem; }
.customer-modal-meta p { margin: 0; font-size: 0.8rem; }
.customer-modal-meta p + p { margin-top: 0.15rem; }
.customer-modal-error { margin-top: 0.55rem; }

/* compact stats bar */
.customer-stats-bar { display: flex; align-items: center; flex-wrap: wrap; padding: 0 0.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; }
.customer-stat { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 1rem; }
.customer-stat + .customer-stat { border-left: 1px solid var(--border-mid); }
.customer-stat__label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; }
.customer-stat__value { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.customer-stat__dfs { margin-left: 0.4rem; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* form section micro-labels */
.customer-form-section-label { margin: 0.65rem 0 0.3rem; padding-top: 0.55rem; border-top: 1px solid var(--border); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }

/* LAN tab card layout (customer editor) */
.lan-config {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
}
.lan-config + .lan-config { margin-top: 0.4rem; }
.lan-config__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}
.lan-config__header-title { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.lan-config__title { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lan-config__subtitle { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }
.lan-config__section { display: flex; flex-direction: column; gap: 0.3rem; }
.lan-config__section--divided { padding-top: 0.4rem; border-top: 1px solid var(--border); }
.lan-config__section-label { margin: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.lan-config__dhcp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.45rem;
}
.lan-config__dhcp-row > .app-form-field { flex: 1 1 8rem; min-width: 0; margin: 0; }
.lan-config__range { flex: 2 1 13rem; }
.lan-config__range-inputs { display: flex; align-items: center; gap: 0.3rem; }
.lan-config__range-inputs .app-input { flex: 1 1 0; min-width: 0; }
.lan-config__range-sep { color: var(--text-muted); font-weight: 600; flex: 0 0 auto; }
.lan-config__dhcp-action { flex: 0 0 auto; }
.lan-config__dhcp-action .app-button { width: auto; white-space: nowrap; }
.lan-config__dns-field { flex: 2 1 14rem; }
.lan-config__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; padding-top: 0.4rem; border-top: 1px solid var(--border); }
.lan-config__actions--start { justify-content: flex-start; }
.lan-config__add-bar { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 0.5rem; }

/* Tighter field padding inside the LAN card */
.lan-config .app-form-field { gap: 0.15rem; }
.lan-config .app-form-grid { gap: 0.45rem; }
.lan-config .app-input,
.lan-config .app-select,
.lan-config .app-token-text { min-height: 26px; padding: 0.22rem 0.45rem; font-size: 0.78rem; }

/* Inline info hint: small "i" badge that reveals a tooltip on hover/focus. */
.app-info-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.35rem;
    padding: 0;
    border: 1px solid var(--border-mid);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    user-select: none;
    transition: color 0.12s, border-color 0.12s;
}
.app-info-hint:hover,
.app-info-hint:focus-visible {
    color: var(--accent-bright);
    border-color: var(--accent);
    outline: none;
}
.app-info-hint__text {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: max-content;
    max-width: 16rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    box-shadow: var(--shadow);
    z-index: 20;
    pointer-events: none;
}
.app-info-hint:hover .app-info-hint__text,
.app-info-hint:focus-visible .app-info-hint__text { display: block; }

/* settings-inline-checks inside customer editor (same as app-settings-page scope) */
.customer-editor .settings-inline-checks { display: flex; gap: 0.3rem 0.65rem; flex-wrap: wrap; align-items: flex-start; margin: 0.45rem 0; }
.customer-editor .settings-inline-checks label.app-checkbox { display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1.2; }

/* WiFi checkbox group layout */
.wifi-checkbox-groups { display: flex; gap: 1.25rem 2rem; flex-wrap: wrap; padding-top: 0.1rem; }
.wifi-checkbox-group { flex: 0 0 auto; }
.wifi-checkbox-group__label { margin-top: 0; border-top: 0; padding-top: 0; }
.wifi-checkbox-group .settings-inline-checks { margin-top: 0.2rem; }

/* ============================================================
   CLIENT MODAL
   ============================================================ */

.client-modal-content { width: min(1120px, 94vw); overflow-y: auto; }
.device-modal-content { width: min(900px, 92vw); max-height: 70vh; overflow-y: auto; }
.device-modal-shell { display: flex; flex-direction: column; gap: 0.65rem; padding: 0.7rem; max-height: 100%; }
.device-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.65rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); }
.device-modal-primary-action { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.device-modal-action { flex-shrink: 0; }
.device-modal-footer-actions { display: flex; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
/* resource bars */
.device-modal-resource-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.device-modal-resource-item { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 180px; }
.device-modal-resource-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap; width: 2.5rem; }
.device-modal-resource-bar-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0; min-width: 0; }
.device-modal-resource-bar-track { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; }
.device-modal-resource-bar-fill { height: 100%; border-radius: 3px; background: var(--success); transition: width 0.3s; }
.device-modal-resource-bar-fill--warning { background: var(--warning); }
.device-modal-resource-bar-fill--danger { background: var(--danger); }
.device-modal-resource-value { font-size: 0.8rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ethernet port grid */
.device-modal-port-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.device-modal-port { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 64px; max-width: 220px; padding: 0.4rem 0.5rem 0.35rem; border: 1px solid; border-radius: 4px; cursor: default; }
.device-modal-port--green  { background: var(--success-dim);  border-color: var(--success-border);  color: var(--success); }
.device-modal-port--yellow { background: var(--warning-dim);  border-color: var(--warning-border);  color: var(--warning); }
.device-modal-port--grey   { background: var(--bg-elevated);  border-color: var(--border);           color: var(--text-dim); }
.device-modal-port--wifi   { background: var(--bg-elevated);  border-color: var(--border);           color: var(--text); }
.device-modal-port-jack { width: 20px; height: 14px; border: 2px solid currentColor; border-radius: 2px; position: relative; }
.device-modal-port-jack::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 8px; height: 4px; border: 2px solid currentColor; border-top: none; border-radius: 0 0 2px 2px; }
.device-modal-port-band { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: currentColor; opacity: 0.75; min-height: 14px; line-height: 14px; text-align: center; }
.device-modal-port-name  { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.device-modal-port-speed { font-size: 0.55rem; color: currentColor; opacity: 0.75; text-align: center; white-space: nowrap; }
.device-modal-port-channel { display: inline-flex; align-items: center; gap: 0.2rem; justify-content: center; min-height: 16px; padding: 0.05rem 0.4rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); font-size: 0.62rem; font-weight: 600; color: var(--text); }
.device-modal-port-channel-protocol { color: var(--text-muted); }
.device-modal-port-channel-width { color: var(--text); font-variant-numeric: tabular-nums; }
.device-modal-port--warning { box-shadow: inset 0 0 0 1px var(--warning); }
.device-modal-port--critical { box-shadow: inset 0 0 0 1px var(--danger); }
.device-modal-port-chips { display: flex; flex-direction: column; gap: 0.2rem; align-items: stretch; margin-top: 0.25rem; width: 100%; }
.device-modal-port-chip { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; text-align: center; }
.device-modal-port-chip--warning { background: var(--warning-dim); color: var(--warning); border-color: var(--warning-border); }
.device-modal-port-chip--critical { background: var(--danger-dim);  color: var(--danger);  border-color: var(--danger-border); }
/* cable test on ethernet ports */
.device-modal-port-cell { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; }
.device-modal-port-cell .device-modal-port { width: 100%; }
.device-modal-port-cable-test-action { opacity: 0; transition: opacity 0.15s ease; display: flex; }
.device-modal-port-cell:hover .device-modal-port-cable-test-action,
.device-modal-port-cell:focus-within .device-modal-port-cable-test-action { opacity: 1; }
.device-modal-port-cell[data-port-running="true"] .device-modal-port-cable-test-action { display: none; }
.device-modal-port-cable-test-result { display: none; width: 100%; min-width: 160px; margin-top: 0.25rem; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-elevated); font-size: 0.7rem; line-height: 1.25; }
.device-modal-port-cable-test-result:not(:empty) { display: block; }
.device-modal-port-cable-test-result__header { font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
.device-modal-port-cable-test-result__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.device-modal-port-cable-test-result__table td { padding: 0.1rem 0.3rem; border-top: 1px solid var(--border); color: var(--text-muted); }
.device-modal-port-cable-test-result__table td:first-child { color: var(--text); font-weight: 600; width: 4.5rem; }
.device-modal-port-cable-test-result__empty { color: var(--text-muted); }
.device-modal-port-cable-test-result__error { color: var(--danger); font-weight: 600; }
/* wifi interface list */
.device-modal-wifi-list { display: flex; flex-direction: column; gap: 0.4rem; }
.device-modal-wifi-row { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.device-modal-wifi-row:last-child { border-bottom: 0; padding-bottom: 0; }
.device-modal-wifi-info { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.device-modal-wifi-name  { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.device-modal-wifi-ssid  { font-size: 0.75rem; color: var(--text-muted); }
.device-modal-wifi-clients { display: flex; align-items: baseline; gap: 0.3rem; flex-shrink: 0; }
.device-modal-wifi-count { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.device-modal-wifi-count-label { font-size: 0.63rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.device-modal-wifi-override { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--border); }
.device-modal-wifi-override__header { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; }
.device-modal-wifi-override__fields:not([hidden]) { display: flex; flex-direction: column; gap: 0.3rem; }
.device-modal-wifi-override__actions { display: flex; align-items: center; gap: 0.45rem; }
.client-modal-heading { min-width: 0; }
.client-modal-title { margin-bottom: 0.3rem; word-break: break-word; }
.client-modal-meta-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.device-modal-default-config-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.device-modal-default-config-row .client-modal-subtitle { margin: 0; }
.client-modal-primary-action { display: flex; justify-content: flex-end; flex: 0 0 auto; padding-right: 1.75rem; }
.client-modal-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; }
.client-modal-toolbar-copy { flex: 1 1 300px; min-width: 0; }
.client-modal-top-row { align-items: flex-start; }
.client-modal-section-card { padding: 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.client-modal-edit-card { background: var(--bg-surface); }
.client-modal-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
/* live stats bar — replaces the 3-card grid */
.client-modal-live-bar { display: flex; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; margin-bottom: 0.55rem; }
.client-modal-live-stat { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.45rem 0.9rem; }
.client-modal-live-stat + .client-modal-live-stat { border-left: 1px solid var(--border-mid); }
.client-modal-live-stat__label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; }
.client-modal-live-stat__value { font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
/* range picker bar */
.client-modal-range-bar { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.55rem; }
.client-modal-range-bar__label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; }
.client-modal-log-filter { display: flex; align-items: center; gap: 0.55rem; min-width: 16rem; max-width: 24rem; flex: 1 1 auto; }
.client-modal-log-filter__label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; }
.client-modal-log-filter__input { min-width: 0; width: 100%; }
.client-modal-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.client-modal-detail-list { display: grid; gap: 0.45rem; margin: 0; }
.client-modal-detail-list > div { display: grid; grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); }
.client-modal-detail-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.client-modal-detail-list dt { color: var(--text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.client-modal-detail-list dd { min-width: 0; margin: 0; color: var(--text); font-weight: 600; font-size: 0.8rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.client-modal-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.device-modal-port-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.device-modal-port-chart-item { min-width: 0; }
.client-modal-chart-wrap { height: 195px; position: relative; }
.client-modal-signal-wrap { height: 175px; }
.client-modal-chart { width: 100%; height: 100%; }
.client-modal-stats { display: flex; flex-direction: column; gap: 0.65rem; }
.client-modal-stat-card { min-height: 5rem; padding: 0.65rem; }
.client-modal-stat-value { line-height: 1.2; word-break: break-word; }
.client-modal-empty-state { height: 100%; }
.client-modal-detail-actions { align-items: flex-end; gap: 0.55rem; }
.client-modal-name-field { flex: 1 1 13rem; margin-bottom: 0; }
.client-modal-comment-field { flex: 1 1 15rem; margin-bottom: 0; }
.client-modal-helper { margin: 0; }
.client-modal-section { margin-bottom: 0.65rem; }
.client-modal-section-sm { margin-bottom: 0.5rem; }
.client-modal-subtitle { margin-bottom: 0; }
.client-modal-sample-age { margin-left: 0.2rem; }
.client-modal-range-actions { gap: 0.35rem; }
.client-modal-chart-title { margin-bottom: 0.35rem; }
.client-modal-metric-grid { margin-top: 0.5rem; }
.client-modal-range-picker { justify-content: flex-end; flex-wrap: wrap; margin-bottom: 0; }

/* ============================================================
   PORT FORWARDING
   ============================================================ */

.pf-ip-combobox-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000; max-height: 11rem; overflow-y: auto; padding: 3px; border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow); }

/* ============================================================
   DEVICES TABLE EXTRAS
   ============================================================ */

#devicesTable col.hidden { display: none; }
#devicesTable th[data-sort] { cursor: pointer; user-select: none; }
#devicesTable th.devices-sorted-asc::after  { content: " ▲"; }
#devicesTable th.devices-sorted-desc::after { content: " ▼"; }

.devices-filter-trigger { margin-left: 0.2rem; width: 1.5rem; min-width: 1.5rem; min-height: 1.5rem; padding: 0; box-shadow: none; }
.devices-filter-trigger.app-is-filter-active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-bright); }
.devices-filter-box { min-width: 165px; max-width: 210px; }
.devices-filter-popover { position: fixed; z-index: 2100; }
.devices-filter-box__title { margin: 0 0 0.45rem; color: var(--text); font-weight: 700; font-size: 0.8rem; }
.devices-filter-option { display: flex; margin-bottom: 0.3rem; }
.devices-filter-box__actions { display: flex; margin-top: 0.5rem; }
.devices-filter-box__actions .app-button { width: 100%; }
.devices-filter-summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 28px; padding: 0 0.1rem; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }

/* ============================================================
   CLIENT LIST EXTRAS
   ============================================================ */

#clients-tab-content table col.hidden { display: none; }
#clients-tab-content table th.sorted-asc::after  { content: " ▲"; }
#clients-tab-content table th.sorted-desc::after { content: " ▼"; }

.column-picker-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.column-picker-overlay.column-picker-popover { width: auto; height: auto; background: transparent; display: block; z-index: 2100; }
.column-picker-overlay__panel { max-width: 270px; padding: 0.7rem; border: 1px solid var(--border-mid); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-lg); }
.column-picker-overlay__title { margin: 0 0 0.45rem; color: var(--text); font-weight: 700; font-size: 0.8rem; }

/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-card { display: block; color: inherit; text-decoration: none; transition: border-color 0.12s, background 0.12s; }
.dashboard-card:hover { border-color: var(--border-strong); background: var(--bg-elevated); }

/* ============================================================
   PAGE CONTAINERS
   ============================================================ */

.app-page { padding: 0; }
#customerListContainer > .app-page-toolbar { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-import-help { margin-bottom: 0.65rem; }

/* ============================================================
   RESPONSIVE: <= 1023px
   ============================================================ */

@media screen and (max-width: 1023px) {
    .app-topbar { padding: 0 0.6rem; }
    .app-topbar__burger { display: inline-flex; }
    .app-topbar__menu {
        position: fixed; top: var(--topbar-height); right: 0.6rem; left: 0.6rem;
        display: none; flex-direction: column; align-items: stretch; padding: 0.7rem;
        border: 1px solid var(--border-mid); border-radius: var(--radius);
        background: var(--bg-elevated); box-shadow: var(--shadow-lg); z-index: 1100;
    }
    .app-topbar__menu.app-is-open { display: flex; }
    .app-topbar__spacer { display: none; }
    .app-topbar__actions, .app-topbar__search-slot, .app-topbar__auth-slot { width: 100%; }
    .app-search-field { min-width: 0; width: 100%; }

    #sidebar { width: 200px; transform: translateX(-100%); }
    #sidebar.app-is-collapsed { width: 200px; }
    #sidebar.app-is-open { transform: translateX(0); }
    .layout-main-content, body.sidebar-collapsed .layout-main-content { margin-left: 0; }
    .layout-shell, body.sidebar-collapsed .layout-shell { padding-left: 0; }

    #sidebar-overlay { display: block; position: fixed; top: var(--topbar-height); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 999; }
    body.sidebar-open #sidebar-overlay { opacity: 1; pointer-events: auto; }
}

@media screen and (max-width: 900px) {
    .app-settings-tabs { align-items: stretch; }
    .app-settings-tab { flex: 1 0 auto; }
    .settings-time-range { grid-template-columns: 1fr; }
    .settings-time-range__separator { justify-self: center; }
}

@media screen and (max-width: 767px) {
    .app-summary-grid, .app-summary-grid__cards { grid-template-columns: 1fr; }
    .app-page-toolbar { align-items: stretch; }
    .app-page-toolbar__group { width: 100%; }
    .app-page-toolbar__group .app-button { flex: 1 1 auto; }
}

@media screen and (max-width: 768px) {
    .client-modal-content { width: 96vw; }
    .client-modal-shell { padding: 0.7rem; }
    .client-modal-header, .client-modal-toolbar { align-items: stretch; }
    .client-modal-primary-action { justify-content: flex-start; padding-right: 0; }
    .client-modal-detail-grid, .client-modal-chart-grid, .device-modal-port-chart-grid { grid-template-columns: 1fr; }
    .client-modal-detail-list > div { grid-template-columns: 1fr; gap: 0.15rem; }
    .client-modal-range-picker { justify-content: flex-start; }
    .client-modal-chart-wrap { height: 185px; }
    .client-modal-signal-wrap { height: 165px; }
}

/* ============================================================
   CHANNEL MULTISELECT (2.4 GHz frequency picker)
   ============================================================ */

.app-multiselect { position: relative; }
.app-multiselect__trigger {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem;
    width: 100%; min-height: 28px; box-sizing: border-box;
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
    background: var(--bg-raised); color: var(--text);
    font: inherit; font-size: 0.8rem;
    cursor: pointer; text-align: left;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.app-multiselect__trigger:hover { border-color: var(--app-accent); }
.app-multiselect__trigger:focus,
.app-multiselect__trigger[aria-expanded="true"] {
    outline: none; border-color: var(--app-accent); box-shadow: var(--app-focus-ring);
}
.app-multiselect__trigger[aria-expanded="true"] {
    border-bottom-right-radius: 0; border-bottom-left-radius: 0;
}
.app-multiselect__chips {
    display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1 1 auto; align-items: center;
}
.app-multiselect__placeholder { color: var(--text-dim); }
.app-multiselect__chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    height: 20px; padding: 0 0.25rem 0 0.5rem;
    border: 1px solid var(--app-accent); border-radius: var(--radius-sm);
    background: var(--app-accent-soft); color: var(--app-accent-strong);
    font-size: 0.72rem; font-weight: 600; line-height: 1;
}
.app-multiselect__chip-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 700;
}
.app-multiselect__chip-remove:hover,
.app-multiselect__chip-remove:focus-visible { background: var(--app-hover); color: var(--app-text); }
.app-multiselect__caret {
    margin-left: auto; color: var(--text-dim); font-size: 0.7rem; pointer-events: none;
}
.app-multiselect__dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 2000;
    margin-top: -1px;
    background: var(--bg-elevated); border: 1px solid var(--app-accent);
    border-top: 1px solid var(--border-mid);
    border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 280px; overflow-x: hidden; overflow-y: auto;
    min-width: 0;
}
.app-multiselect__auto {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem; color: var(--text);
    cursor: pointer; user-select: none;
}
.app-multiselect__auto:hover { background: var(--app-hover); }
.app-multiselect__auto input { margin: 0; cursor: pointer; }
.app-multiselect__option {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem; color: var(--text);
    cursor: pointer; user-select: none;
    min-width: 0;
}
.app-multiselect__option:hover { background: var(--app-hover); }
.app-multiselect__option input { margin: 0; cursor: pointer; }
.app-multiselect__option-label {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-multiselect__option-mhz { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.app-multiselect__option-meta { color: var(--text-dim); font-size: 0.85em; }
.app-multiselect__empty { padding: 0.5rem; color: var(--text-muted); font-size: 0.8rem; }
.app-multiselect__option--recommended .app-multiselect__option-label { color: var(--app-success); font-weight: 600; }
.app-multiselect__dfs-tag {
    display: inline-flex; align-items: center;
    height: 16px; padding: 0 0.4rem;
    border: 1px solid var(--warning-border); border-radius: var(--radius-sm);
    background: var(--warning-dim); color: var(--app-warning);
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ============================================================
   MIGRATION TOOL — DISCOVERY VIEW
   Two-column responsive grid. Top row: Router + WAN (identity).
   Lower rows: Wireless + LANs + Port Forwarding in the right
   column. Warnings + account float in their own row.
   ============================================================ */

.migration-discover {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.migration-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.migration-row--single { grid-template-columns: 1fr; }
.migration-row--wide-left { grid-template-columns: 2fr 1fr; }

@media (max-width: 880px) {
    .migration-row,
    .migration-row--wide-left { grid-template-columns: 1fr; }
}

.mig-card {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
}

.mig-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin: -0.1rem 0 0;
}

.mig-card__title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mig-card__hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.mig-kv {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.85rem;
    row-gap: 0.35rem;
    font-size: 0.78rem;
}

.mig-kv__k {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    align-self: center;
    white-space: nowrap;
}

.mig-kv__v {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    line-height: 1.35;
}

.mig-kv__v--mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.74rem;
}

.mig-kv__v--muted { color: var(--text-muted); font-style: italic; }

.mig-bullet-list {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--text);
    font-size: 0.78rem;
}

.mig-bullet-list li { line-height: 1.4; }

.mig-bullet-list--muted { color: var(--text-muted); font-style: italic; }

.mig-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mig-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mig-chip--ok   { background: var(--success-dim); border-color: var(--success-border); color: var(--success); }
.mig-chip--warn { background: var(--warning-dim); border-color: var(--warning-border); color: var(--warning); }
.mig-chip--bad  { background: var(--danger-dim);  border-color: var(--danger-border);  color: var(--danger); }

.mig-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mig-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mig-item__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mig-item__title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.82rem;
}

.mig-item__sub {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.mig-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.mig-table thead th {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border-mid);
}

.mig-table tbody td {
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.mig-table tbody tr:last-child td { border-bottom: 0; }
.mig-table tbody tr.mig-table--empty td { color: var(--text-muted); font-style: italic; }

.mig-warn {
    background: var(--warning-dim);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.mig-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.78rem;
    margin: 0;
}

.mig-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.mig-actions p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.mig-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.mig-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.mig-stage--ok    { border-color: var(--success-border); color: var(--success); }
.mig-stage--failed { border-color: var(--danger-border);  color: var(--danger); }

.mig-progress {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-raised);
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
}

.mig-progress__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mig-progress__step {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.6rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    min-width: 7.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mig-progress__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-mid);
    margin-bottom: 0.15rem;
}

.mig-progress__label { line-height: 1.2; }

.mig-progress__msg {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.25;
    word-break: break-word;
}

.mig-progress__step--pending { opacity: 0.65; }
.mig-progress__step--active {
    border-color: var(--warning-border);
    background: var(--warning-dim);
    color: var(--warning);
    animation: mig-progress-step-pulse 1.4s ease-in-out infinite;
}
.mig-progress__step--active .mig-progress__dot { background: var(--warning); }
.mig-progress__step--complete {
    border-color: var(--success-border);
    background: var(--success-dim);
    color: var(--success);
}
.mig-progress__step--complete .mig-progress__dot {
    background: var(--success);
    box-shadow: inset 0 0 0 2px var(--bg-elevated);
}
.mig-progress__step--failed {
    border-color: var(--danger-border);
    background: var(--danger-dim);
    color: var(--danger);
}
.mig-progress__step--failed .mig-progress__dot { background: var(--danger); }

@keyframes mig-progress-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mig-progress__step--active { animation: none !important; }
}

.mig-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.mig-card__actions .app-button { font-size: 0.78rem; padding: 0.35rem 0.7rem; }

/* ============================================================
   CUSTOMER PING MODAL
   ============================================================ */

.customer-ping-modal-panel {
    max-width: 38rem;
    width: 100%;
}
.customer-ping-modal-body {
    padding: 1rem;
}
.customer-ping-modal-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}
.customer-ping-modal-form .customer-ping-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.customer-ping-modal-form .customer-ping-field--full {
    grid-column: 1 / -1;
}
.customer-ping-modal-form .customer-ping-field--arp {
    align-self: end;
    padding-bottom: 0.3rem;
}
.customer-ping-modal-form .customer-ping-field--actions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.customer-ping-status-row {
    margin-bottom: 0.5rem;
}
.customer-ping-results-subsection {
    margin-top: 0.5rem;
}

.ping-target-combobox { position: relative; }
.ping-target-combobox .ping-target-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}
.ping-target-combobox .app-search-results__item.selected,
.ping-target-combobox .app-search-results__item:hover,
.ping-target-combobox .app-search-results__item:focus-visible {
    background: var(--bg-hover);
    outline: none;
}
.ping-target-item { display: flex; align-items: center; gap: 0.4rem; }
.ping-target-item .app-status-dot { margin-right: 0; }
.ping-target-item__body { flex: 1; min-width: 0; }
.ping-target-custom { margin-top: 0.35rem; }

.ping-results { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }
.ping-results__scroll {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}
.ping-results__scroll .ping-results__table {
    width: 100%;
    border: 0;
    border-radius: 0;
}
.ping-results__table th,
.ping-results__table td {
    padding: 0.18rem 0.4rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.ping-results__table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    z-index: 1;
}
.ping-results__row[data-status="timeout"] { opacity: 0.55; }
.ping-results__table tr[data-arp="true"] td:first-child::after {
    content: ' ARP';
    color: var(--text-dim);
}
.ping-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.35rem 0.85rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}
.ping-summary__cell { min-width: 0; }
.ping-summary__label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-family: var(--font-sans, inherit);
}
.ping-summary__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-default, inherit);
    word-break: break-word;
}
.ping-summary__value--loss-ok { color: var(--success, #2f9e44); }
.ping-summary__value--loss-bad { color: var(--danger, #c92a2a); }

/* ── Network topology diagram (ports tab) ── */
.customer-topology-wrap { margin-bottom: 1.5rem; }
.customer-topology-svg {
    max-width: 100%;
    height: auto;
    background: var(--surface-2, #f7f8fa);
    border: 1px solid var(--border, #e3e6eb);
    border-radius: 8px;
    color: var(--text-muted, #5c636e);
}
.customer-topology-edge { color: #8a919a; }
.customer-topology-edge--dashed path {
    stroke-dasharray: 6 4;
    color: #d4a72c;
}
.customer-topology-edge-label {
    fill: #6b7178;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.customer-topology-node rect {
    fill: var(--surface, #ffffff);
    stroke: #c4c9d0;
    stroke-width: 1.5;
}
.customer-topology-node--router rect      { stroke: #1a7f4e; stroke-width: 2.5; }
.customer-topology-node--switch rect      { stroke: #2c7be5; }
.customer-topology-node--accesspoint rect { stroke: #7c4dff; }
.customer-topology-node-title {
    fill: var(--text-default, #1f2328);
    font-size: 13px;
    font-weight: 600;
}
.customer-topology-node-type {
    fill: var(--text-muted, #5c636e);
    font-size: 13px;
}

/* ── Port matrix: connection overlay + branch markers + cell colors ── */
.customer-ports-matrix-wrap {
    position: relative;
    overflow: visible;
}
.customer-ports-matrix-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    color: var(--info);
    z-index: 3;
}
.customer-ports-matrix-overlay-lines {
    fill: none;
}
.customer-port-overlay-line {
    fill: none;
    stroke: var(--info);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.customer-port-overlay-line--possible-switch {
    stroke: #d4a72c;
    stroke-dasharray: 6 4;
}
.customer-port-overlay-dot {
    fill: var(--info);
}
.customer-port-overlay-dot--possible-switch {
    fill: #d4a72c;
}
.customer-ports-matrix { position: relative; z-index: 1; }
.customer-ports-matrix .customer-port-name-cell {
    position: relative;
    padding-left: 0.9rem;
    background: var(--bg-raised);
}
.customer-ports-matrix .customer-port-name-cell--linked {
    border-left: 2px solid var(--info);
    padding-left: 0.6rem;
}
.customer-ports-matrix .customer-port-name { font-weight: 600; color: var(--text); }
.customer-ports-matrix .customer-port-link-label {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}
.customer-ports-matrix .customer-ports-matrix-cell--untagged {
    background: var(--success-dim);
    color: var(--success);
    text-align: center;
    font-weight: 700;
    border-radius: 3px;
}
.customer-ports-matrix .customer-ports-matrix-cell--tagged {
    background: var(--info-dim);
    color: var(--info);
    text-align: center;
    font-weight: 700;
    border-radius: 3px;
}
.customer-ports-matrix .customer-ports-matrix-cell--none {
    color: var(--text-muted);
    text-align: center;
}

/* ============================================================
   POE-OUT (ethernet power) on the device modal port grid
   ============================================================ */

.device-modal-port-poe {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem;
    width: 100%; margin-top: 0.3rem; padding-top: 0.3rem;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
}
.device-modal-port-poe-status { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: center; }
.device-modal-port-poe-status-badge {
    display: inline-flex; align-items: center; padding: 0.05rem 0.45rem;
    border-radius: 999px; font-weight: 700; font-size: 0.62rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted);
    line-height: 1.4;
}
.device-modal-port-poe-status-badge--powered-on { background: var(--success-dim); border-color: var(--success-border); color: var(--success); }
.device-modal-port-poe-status-badge--waiting-for-load { background: var(--warning-dim); border-color: var(--warning-border); color: var(--warning); }
.device-modal-port-poe-status-badge--short-circuit,
.device-modal-port-poe-status-badge--overload { background: var(--danger-dim); border-color: var(--danger-border); color: var(--danger); }
.device-modal-port-poe-status-badge--off { color: var(--text-dim); }
.device-modal-port-poe-status-badge--unknown { font-style: italic; }
.device-modal-port-poe-pair { font-size: 0.62rem; color: var(--text-muted); }
.device-modal-port-poe-readings {
    display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: center;
    color: var(--text); font-variant-numeric: tabular-nums; font-size: 0.7rem;
}
.device-modal-port-poe-readings-divider { color: var(--text-dim); }
.device-modal-port-poe-controls { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: center; }
.device-modal-port-poe-controls .app-select--sm { min-width: 6.5rem; }
.device-modal-port-poe-status-text { min-width: 1px; }

/* ============================================================
   IN-APP SUPPORT
   ============================================================ */

/* Floating bubble — bottom-right launcher on every page. The bubble
   is hidden on /login and /onboard by virtue of those pages not
   including the app shell. */
.app-support-bubble-root {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 3000;
}
.app-support-bubble-root[hidden] { display: none; }

.app-support-bubble {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-mid);
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: transform 0.12s ease-out, background 0.12s ease-out, box-shadow 0.12s ease-out;
}
.app-support-bubble:hover,
.app-support-bubble:focus-visible {
    background: var(--accent-strong);
    transform: translateY(-1px);
    outline: none;
}
.app-support-bubble-root.app-is-open .app-support-bubble {
    background: var(--accent-strong);
    transform: rotate(15deg);
}

.app-support-bubble__panel {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1.25rem + 48px + 0.6rem);
    width: min(520px, calc(100vw - 2.5rem));
    max-height: calc(100vh - 6rem);
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    z-index: 3001;
}
.app-support-bubble__panel[hidden] { display: none; }

.app-support-bubble__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}
.app-support-bubble__title {
    margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text);
}
.app-support-bubble__subtitle {
    margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--text-muted);
}
.app-support-bubble__body {
    padding: 0.85rem;
    overflow-y: auto;
    max-height: calc(100vh - 11rem);
}

/* When the form is rendered inside the bubble, give it a tighter rhythm. */
.app-support-bubble__body .app-support-form .app-form-grid { gap: 0.5rem; }
.app-support-bubble__body .app-support-form .app-textarea { min-height: 4.5rem; }

/* Shared form bits used by both bubble and page form. */
.app-support-form { display: flex; flex-direction: column; gap: 0.5rem; }

.app-support-form__details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    padding: 0;
}
.app-support-form__details summary {
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.app-support-form__details summary::-webkit-details-marker { display: none; }
.app-support-form__details summary::before {
    content: '\25B8'; /* ▸ */
    color: var(--text-dim);
    font-size: 0.7rem;
    margin-right: 0.35rem;
    transition: transform 0.1s ease-out;
}
.app-support-form__details[open] > summary::before { transform: rotate(90deg); }
.app-support-form__details-meta {
    color: var(--text-dim);
    font-weight: 500;
    font-size: 0.72rem;
}

.app-support-form__status {
    margin-top: 0.45rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-mid);
    font-size: 0.78rem;
    background: var(--bg-elevated);
    color: var(--text);
}
.app-support-form__status--success {
    border-color: var(--success-border);
    background: var(--success-dim);
    color: var(--success);
}
.app-support-form__status--error {
    border-color: var(--danger-border);
    background: var(--danger-dim);
    color: var(--danger);
}
.app-support-form__status--info {
    border-color: var(--info-border);
    background: var(--info-dim);
    color: var(--info);
}

.app-support-context-list {
    margin: 0;
    padding: 0.4rem 0.65rem 0.55rem;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.7rem;
    row-gap: 0.2rem;
    font-size: 0.75rem;
    max-height: 14rem;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}
.app-support-context-list__key {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    font-weight: 700;
    align-self: start;
    padding-top: 0.05rem;
}
.app-support-context-list__value {
    margin: 0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    white-space: pre-wrap;
}
.app-support-context-list__empty {
    grid-column: 1 / -1;
    color: var(--text-dim);
    font-style: italic;
    margin: 0;
}

@media (max-width: 540px) {
    .app-support-bubble-root { right: 0.85rem; bottom: 0.85rem; }
    .app-support-bubble__panel {
        right: 0.5rem;
        left: 0.5rem;
        bottom: calc(0.85rem + 48px + 0.6rem);
        width: auto;
    }
}


/* ============================================================
 * Permissions matrix (Enhanced UI & Usability)
 * ============================================================ */
.permissions-matrix-wrapper {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #e2e2e8);
}

.permissions-matrix-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.permissions-matrix-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 420px;
}

.permissions-matrix-search-icon {
    position: absolute;
    left: 0.65rem;
    width: 15px;
    height: 15px;
    color: var(--text-muted, #8a8a92);
    pointer-events: none;
}

.permissions-matrix-search-input {
    width: 100%;
    padding-left: 2.1rem;
    padding-right: 4rem;
    font-size: 0.8rem;
    height: 32px;
    border-radius: var(--radius, 6px);
}

.permissions-matrix-search-count {
    position: absolute;
    right: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #8a8a92);
    background: var(--bg-elevated, #f0f0f4);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    pointer-events: none;
}

.permissions-matrix-shell {
    position: relative;
    border: 1px solid var(--border, #e2e2e8);
    border-radius: var(--radius, 6px);
    background: var(--bg-raised, #ffffff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.permissions-matrix-scroll {
    max-height: 85vh;
    overflow: auto;
}

.permissions-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    font-size: 0.8rem;
}

.permissions-matrix th,
.permissions-matrix td {
    padding: 0.45rem 0.65rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border, #e2e2e8);
    transition: background-color 0.1s ease;
}

/* Sticky Header Row */
.permissions-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-elevated, #f8f9fa);
    border-bottom: 2px solid var(--border-strong, #d1d1d8);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Sticky First Column (Permission Name) */
.permissions-matrix__row-header {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-raised, #ffffff);
    text-align: left;
    width: 40%;
    min-width: 260px;
    border-right: 1px solid var(--border-mid, #e8e8ee);
}

thead th.permissions-matrix__row-header {
    z-index: 15;
    background: var(--bg-elevated, #f8f9fa);
}

.permissions-matrix__hdr-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #6c6c75);
}

/* Column Headers (Roles) */
.permissions-matrix th.permissions-matrix__col-header,
.app-table th.permissions-matrix__col-header {
    text-align: center !important;
    min-width: 110px;
    vertical-align: top;
    padding: 0.5rem 0.4rem;
}

.permissions-matrix__col-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    width: 100%;
}

.permissions-matrix__col-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.permissions-matrix__col-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text, #111827);
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Role Action Buttons & Column Toggle Checkbox */
.permissions-matrix__col-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.permissions-matrix__col-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.1rem;
}

.permissions-matrix__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 3px;
    border: 1px solid var(--border-mid, #d1d5db);
    background: var(--bg-raised, #ffffff);
    color: var(--text-muted, #4b5563);
    cursor: pointer;
    transition: all 0.12s ease;
}

.permissions-matrix__action-btn:hover {
    background: var(--bg-hover, #f3f4f6);
    color: var(--text, #111827);
    border-color: var(--border-strong, #9ca3af);
}

.permissions-matrix__action-btn--reset:hover {
    color: var(--info, #0284c7);
    border-color: var(--info-border, #bae6fd);
}

.permissions-matrix__action-btn--danger:hover {
    color: var(--danger, #dc2626);
    border-color: var(--danger-border, #fecaca);
    background: var(--danger-dim, #fef2f2);
}

/* Category Group Rows */
.permissions-matrix__group-row {
    position: sticky;
    z-index: 7;
}

.permissions-matrix__group-header {
    background: var(--bg-elevated, #f3f4f6) !important;
    padding: 0.45rem 0.65rem !important;
    border-top: 1px solid var(--border-mid, #e5e7eb);
    border-bottom: 1px solid var(--border-mid, #e5e7eb);
}

.permissions-matrix__group-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.permissions-matrix__group-label {
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: var(--text-dim, #4b5563);
}

.permissions-matrix__group-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    background: var(--bg-raised, #ffffff);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    border: 1px solid var(--border-mid, #e5e7eb);
}

/* Permission Row & Info */
.permissions-matrix__perm-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.permissions-matrix__perm-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #111827);
}

.permissions-matrix__perm-key {
    display: inline-block;
    font-size: 0.67rem;
    color: var(--text-dim, #6b7280);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Cells & Checkboxes */
.permissions-matrix td.permissions-matrix__cell,
.app-table td.permissions-matrix__cell {
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.permissions-matrix__cell--granted {
    background: rgba(37, 99, 235, 0.05);
}

.permissions-matrix__check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    position: relative;
    width: 22px;
    height: 22px;
    margin: 0 auto !important;
}

.permissions-matrix__check input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.permissions-matrix__check-box {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 1.5px solid var(--border-strong, #9ca3af);
    background: var(--bg-raised, #ffffff);
    display: inline-block;
    position: relative;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.permissions-matrix__check-box::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s ease;
}

.permissions-matrix__cell:hover .permissions-matrix__check-box,
.permissions-matrix__check:hover .permissions-matrix__check-box {
    border-color: #2563eb;
    transform: scale(1.08);
}

.permissions-matrix__check input[type="checkbox"]:checked + .permissions-matrix__check-box {
    background: #2563eb;
    border-color: #2563eb;
}

.permissions-matrix__check input[type="checkbox"]:checked + .permissions-matrix__check-box::after {
    transform: rotate(45deg) scale(1);
}

.permissions-matrix__check input[type="checkbox"]:focus-visible + .permissions-matrix__check-box {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.permissions-matrix__check input[type="checkbox"]:disabled + .permissions-matrix__check-box {
    cursor: not-allowed;
    opacity: 0.45;
}

.permissions-matrix__check input[type="checkbox"]:disabled:checked + .permissions-matrix__check-box {
    background: #2563eb;
    border-color: #2563eb;
    opacity: 0.75;
}

/* Interactive Crosshair Hover Effects */
.permissions-matrix__perm-row:hover {
    background-color: var(--bg-hover, #f3f4f6);
}

.permissions-matrix__perm-row:hover .permissions-matrix__row-header {
    background-color: var(--bg-hover, #f3f4f6);
}

.permissions-matrix__col--active {
    background-color: rgba(37, 99, 235, 0.035) !important;
}

.permissions-matrix__cell.permissions-matrix__cell--active {
    background-color: rgba(37, 99, 235, 0.11) !important;
}

.settings-section-spacer {
    height: 1.5rem;
}

/* ============================================================
   ROGUE DHCP MAC CHIPS (dashboard problems panel)
   ============================================================ */

.app-problem-mac-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.app-problem-mac-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app-problem-mac-list > li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.app-mac-chip {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    background: var(--warning-dim);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Activity tab
 * ------------------------------------------------------------------ */

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activity-entry {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--text);
    transition: border-color 120ms ease;
}

.activity-entry:hover {
    border-color: var(--border-mid);
}

.activity-entry__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.activity-entry__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.activity-entry__user {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}

.activity-entry__tabs {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.activity-entry__tab {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    border: 1px solid var(--accent-border, transparent);
    color: var(--accent-bright);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

.activity-entry__actions {
    margin-left: auto;
}

.activity-entry__changes {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    font-size: 0.85rem;
}

.activity-entry__change {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.activity-entry__change:last-child {
    border-bottom: none;
}

.activity-entry__change-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-muted);
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.activity-entry__change-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    word-break: break-all;
}

.activity-entry__change-before {
    color: var(--danger);
    text-decoration: line-through;
    text-decoration-color: var(--danger-border);
    background: var(--danger-dim);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
}

.activity-entry__change-arrow {
    color: var(--text-muted);
    font-weight: 600;
}

.activity-entry__change-after {
    color: var(--success);
    background: var(--success-dim);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
}

.activity-entry__summary {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
}

.activity-load-more {
    text-align: center;
    margin-top: 1rem;
}