* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== DESIGN TOKENS ====================
   Palette is keyed to the product's own hardware: --ink matches the BLF
   phone-screen background (.phone-screen, below), --primary/--sky-glow
   are drawn from the logo's handset blue, and the status trio reads as
   indicator-lamp colors (green/amber/red) rather than generic UI colors. */
:root {
    color-scheme: light;

    /* Surfaces */
    --bg-color: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --surface-3: #f7f9fb;

    /* Text */
    --text-color: #161b22;
    --text-muted: #5b6472;

    /* Borders */
    --border-color: #e1e6ec;
    --border-strong: #c7cfda;

    /* Brand - the logo's handset blue, deepened for AA contrast on white */
    --primary-color: #0e7fc4;
    --primary-hover: #0c6da8;
    --secondary-color: #5b6472;
    --secondary-hover: #434b57;
    --sky-glow: #5bc3ef;

    /* Status - calibrated to the BLF panel's own LED colors */
    --success-color: #2fb673;
    --success-strong: #23955d;
    --danger-color: #e2524a;
    --danger-strong: #c8413a;
    --warning-color: #e8a23d;
    --warning-strong: #c98823;
    --info-color: #0e93ae;

    /* Soft badge pairs (background / text) */
    --success-soft: #dcf5e9;   --success-on-soft: #0f6b44;
    --danger-soft: #fbe2e0;    --danger-on-soft: #8a2e29;
    --warning-soft: #fbead2;   --warning-on-soft: #7a4a14;
    --info-soft: #dcf1f5;      --info-on-soft: #0c6e82;
    --muted-soft: #edeff2;     --muted-on-soft: #3a4250;
    --violet-soft: #ede9fe;    --violet-on-soft: #6d28d9;
    --indigo-soft: #e0e7ff;    --indigo-on-soft: #4338ca;
    --sky-soft: #e3f6fb;       --sky-on-soft: #0c6e82;

    /* Console ink - matches the BLF phone-screen background; also used for
       the sidebar and the login page so the whole app shares one "powered
       on" dark family instead of a generic near-black. */
    --ink: #10141c;
    --ink-2: #1a2130;

    /* Sidebar (dark in both themes) */
    --sidebar-bg: var(--ink);
    --sidebar-text: #d7e0ea;
    --sidebar-muted: #8793a3;
    --sidebar-hover: rgba(255, 255, 255, 0.1);
    --sidebar-border: rgba(255, 255, 255, 0.1);

    /* Elevation / shape - flat+hairline for structural panels (tables,
       stat tiles, settings forms), rounded for anything clickable */
    --shadow-1: 0 1px 2px rgba(16, 20, 28, 0.08);
    --shadow-2: 0 10px 30px rgba(16, 20, 28, 0.18);
    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* Charts (read by app.js via getComputedStyle) */
    --chart-text: #5b6472;
    --chart-grid: rgba(16, 20, 28, 0.08);
    --chart-line: rgb(14, 127, 196);
    --chart-fill: rgba(14, 127, 196, 0.1);

    --scrollbar-thumb: #c7cfda;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg-color: #0b0e14;
    --surface: #171d27;
    --surface-2: #232b38;
    --surface-3: #1d2531;

    --text-color: #e4e9f0;
    --text-muted: #8793a3;

    --border-color: #2a3240;
    --border-strong: #3c4656;

    /* -color tokens double as both dark-surface text color and solid
       button-fill-behind-white-text, so they're picked a notch darker than
       a "pure glow" accent would be - keeps button labels legible instead
       of chasing maximum brightness. */
    --primary-color: #2e8fc9;
    --primary-hover: #2c8bc4;
    --secondary-color: #8793a3;
    --secondary-hover: #a9b4c2;
    --sky-glow: #5bc3ef;

    --success-color: #30b578;
    --success-strong: #2fb673;
    --danger-color: #e2645c;
    --danger-strong: #e2524a;
    --warning-color: #dca246;
    --warning-strong: #e8a23d;
    --info-color: #8fe1f5;

    --success-soft: rgba(63, 201, 137, 0.16);   --success-on-soft: #8ee6b9;
    --danger-soft: rgba(241, 122, 115, 0.16);   --danger-on-soft: #f3ada8;
    --warning-soft: rgba(240, 184, 92, 0.16);   --warning-on-soft: #f4cc85;
    --info-soft: rgba(143, 225, 245, 0.14);     --info-on-soft: #bdeef9;
    --muted-soft: rgba(156, 163, 175, 0.18);    --muted-on-soft: #d1d5db;
    --violet-soft: rgba(167, 139, 250, 0.18);   --violet-on-soft: #c4b5fd;
    --indigo-soft: rgba(129, 140, 248, 0.18);   --indigo-on-soft: #a5b4fc;
    --sky-soft: rgba(143, 225, 245, 0.16);      --sky-on-soft: #bdeef9;

    --sidebar-bg: #0a0d13;
    --sidebar-text: #d7e0ea;
    --sidebar-muted: #8793a3;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-border: rgba(255, 255, 255, 0.08);

    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.55);

    --chart-text: #8793a3;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-line: rgb(143, 225, 245);
    --chart-fill: rgba(143, 225, 245, 0.12);

    --scrollbar-thumb: #3c4656;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Technical/tabular data (extensions, MACs, durations, timestamps) shares
   a typeface with the BLF phone's own LCD readout (.phone-screen, below)
   instead of looking like an unrelated decoration. */
code, .mono, .stat-value {
    font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

html {
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Respect reduced-motion preferences (covers pulse, pulse-warning, spin) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== LOGIN PAGE ====================
   A deep ink backdrop with a soft glow behind the logo, reading as
   "equipment powering on" rather than a stock gradient - same ink family
   as the sidebar and the BLF phone screen. */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(640px circle at 50% 32%, rgba(91, 195, 239, 0.22), transparent 60%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

/* Signal network backdrop: a sparse routing graph with pulses traveling
   the lines - calls being switched between extensions, the one deliberate
   motion on this page. Decorative/aria-hidden; respects reduced-motion
   via the global override above. */
.login-network {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.net-edges line {
    stroke: var(--sky-glow);
    stroke-width: 1.5;
    opacity: 0.16;
}

.net-pulse {
    stroke: var(--sky-glow);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0.09 1;
    opacity: 0.9;
    filter: drop-shadow(0 0 4px var(--sky-glow));
    animation: net-travel var(--dur, 6s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes net-travel {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: -0.25; }
}

.net-nodes circle {
    fill: var(--sky-glow);
    filter: drop-shadow(0 0 3px var(--sky-glow));
    animation: net-breathe 4s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes net-breathe {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.95; }
}

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-box {
    background: var(--surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.login-box h1 {
    font-size: 28px;
    margin-bottom: 8px;
    text-align: center;
    color: var(--text-color);
}

.login-box .subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 14px;
}

/* Theme toggle floating on the login page */
.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.login-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ==================== TOPBAR (tablet/phone only) ==================== */
.topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1200;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    box-shadow: var(--shadow-2);
}

.topbar-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hamburger {
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    font-size: 22px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}

.hamburger:hover {
    background: var(--sidebar-hover);
}

/* Theme toggle button (sidebar footer + topbar) */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    border-radius: var(--radius-sm);
    width: 38px;
    height: 38px;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.theme-toggle:hover {
    background: var(--sidebar-hover);
}

/* Theme toggle on light surfaces (blf-monitor header) */
.theme-toggle-light {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-color);
    border-radius: var(--radius-sm);
    width: 38px;
    height: 38px;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.theme-toggle-light:hover {
    background: var(--surface-2);
}

/* Backdrop shown while the off-canvas drawer is open */
.backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
}

body.sidebar-open .backdrop {
    display: block;
}

/* ==================== DASHBOARD LAYOUT ==================== */
.dashboard {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 260px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

.sidebar-header {
    padding: 30px 20px;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-header h2 {
    font-size: 24px;
    margin-bottom: 5px;
}

.sidebar-header p {
    font-size: 13px;
    color: var(--sidebar-muted);
}

.nav-menu {
    flex: 1;
    padding: 20px 0;
    list-style: none;
    overflow-y: auto;
}

.nav-menu,
.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu > li {
    margin-bottom: 0;
}

.nav-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background-color 0.2s;
}

.nav-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.nav-menu li a:hover {
    background-color: var(--sidebar-hover);
}

.nav-menu li a.active {
    background-color: var(--primary-color);
    color: white;
}

/* Menu Section (Collapsible) */
.menu-section {
    margin-bottom: 0;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    color: var(--sidebar-text);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    font-weight: 600;
}

.menu-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.menu-header.active {
    background-color: var(--sidebar-hover);
    border-left: 3px solid var(--primary-color);
}

.menu-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.menu-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.menu-arrow.collapsed {
    transform: rotate(-90deg);
}

/* Submenu */
.submenu {
    background-color: rgba(0, 0, 0, 0.2);
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.submenu.collapsed {
    max-height: 0;
}

.submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 35px;
    font-size: 13px;
    color: var(--sidebar-text);
}

.submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.submenu li a.active {
    background-color: var(--primary-color);
    color: white;
}

.nav-menu li {
    margin: 5px 0;
}

.nav-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background-color 0.2s;
}

.nav-menu a:hover,
.nav-menu a.active {
    background-color: var(--sidebar-hover);
    border-left: 3px solid var(--primary-color);
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.sidebar-footer-row .btn {
    flex: 1;
}

.content {
    margin-left: 260px;
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.content-header h1 {
    font-size: 28px;
    font-weight: 600;
}

.filter-group {
    display: flex;
    gap: 10px;
}

/* Tab Content */
.tab-content {
    display: none !important;
}

.tab-content.active {
    display: block !important;
}

/* ==================== FORMS ==================== */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--surface);
    color: var(--text-color);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* ==================== BUTTONS ==================== */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:not(:disabled):hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:not(:disabled):hover {
    background-color: var(--secondary-hover);
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-success:not(:disabled):hover {
    background-color: var(--success-strong);
}

.btn-warning {
    background-color: var(--warning-color);
    color: white;
}

.btn-warning:not(:disabled):hover {
    background-color: var(--warning-strong);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:not(:disabled):hover {
    background-color: var(--danger-strong);
}

/* Outline variant for row-level destructive actions */
.btn-danger-ghost {
    background-color: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.btn-danger-ghost:not(:disabled):hover {
    background-color: var(--danger-color);
    color: white;
}

.btn-ghost {
    background-color: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

.btn-ghost:not(:disabled):hover {
    background-color: var(--surface-2);
    color: var(--text-color);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

/* Chart time-range pills (24h / 7 days / 30 days) */
.pill {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
}

.pill:hover {
    background: var(--surface-2);
    border-color: var(--text-muted);
}

.pill.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ==================== DATA TABLE ==================== */
.data-table {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table table {
    min-width: 640px;
}

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

thead {
    background-color: var(--surface-2);
}

th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
}

td {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

tr:hover {
    background-color: var(--bg-color);
}

.actions {
    display: flex;
    gap: 8px;
}

/* Phone Number Tags */
.phone-tag {
    display: inline-block;
    background-color: var(--sky-soft);
    border: 1px solid rgba(14, 147, 174, 0.35);
    color: var(--sky-on-soft);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-right: 4px;
    margin-bottom: 4px;
}

[data-theme="dark"] .phone-tag {
    border-color: rgba(143, 225, 245, 0.35);
}

.phone-tag small {
    color: var(--text-muted);
    font-size: 11px;
}

/* ==================== MODAL ==================== */
.modal {
    display: none;
    position: fixed;
    z-index: 1300;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--surface);
    padding: 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    max-width: 1400px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideIn 0.3s;
}

.close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
}

.close:hover {
    color: var(--text-color);
}

/* ==================== MESSAGES ==================== */
.error-message {
    background-color: var(--danger-soft);
    color: var(--danger-on-soft);
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    font-size: 14px;
}

.success-message {
    background-color: var(--success-soft);
    color: var(--success-on-soft);
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    font-size: 14px;
}

/* Generic error / no-data blocks rendered by app.js */
.error {
    padding: 20px;
    background: var(--danger-soft);
    color: var(--danger-on-soft);
    border-radius: var(--radius-md);
    font-size: 14px;
}

.no-data {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

/* ==================== BADGES ==================== */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.badge-admin {
    background-color: var(--info-soft);
    color: var(--info-on-soft);
}

.badge-user {
    background-color: var(--indigo-soft);
    color: var(--indigo-on-soft);
}

.badge-success {
    background-color: var(--success-soft);
    color: var(--success-on-soft);
}

.badge-warning {
    background-color: var(--warning-soft);
    color: var(--warning-on-soft);
}

.badge-danger {
    background-color: var(--danger-soft);
    color: var(--danger-on-soft);
}

.badge-info {
    background-color: var(--info-soft);
    color: var(--info-on-soft);
}

.badge-muted {
    background-color: var(--muted-soft);
    color: var(--muted-on-soft);
}

.badge-violet {
    background-color: var(--violet-soft);
    color: var(--violet-on-soft);
}

.badge-sky {
    background-color: var(--sky-soft);
    color: var(--sky-on-soft);
}

/* Sidebar notification badge (e.g. pending phone adoptions) */
.badge-alert {
    background-color: var(--danger-strong);
    color: #ffffff;
}

/* Status dot: the BLF panel's own presence-LED glow (.pkey-led, below),
   promoted to a shared component for any online/offline-style indicator
   outside the phone mockup (device/VPN/registration status). */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.status-dot-success {
    background: var(--success-color);
    box-shadow: 0 0 4px var(--success-color);
}

.status-dot-danger {
    background: var(--danger-color);
    box-shadow: 0 0 4px var(--danger-color);
}

.status-dot-warning {
    background: var(--warning-color);
    box-shadow: 0 0 4px var(--warning-color);
}

/* Translucent chips on flat-colored card headers (white text) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: white;
}

.chip-glass {
    background: rgba(255, 255, 255, 0.2);
}

.chip-glass-lg {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 20px;
    font-weight: bold;
}

.chip-role {
    background: rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: bold;
}

.chip-success {
    background: rgba(47, 182, 115, 0.35);
}

.chip-warning {
    background: rgba(232, 162, 61, 0.4);
}

.chip-danger {
    background: rgba(226, 82, 74, 0.35);
}

.chip-muted {
    background: rgba(107, 114, 128, 0.3);
}

/* ==================== UTILITY CLASSES ==================== */
.text-muted {
    color: var(--text-muted);
}

.text-info {
    color: var(--info-color);
}

.text-danger {
    color: var(--danger-color);
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 14px;
}

.form-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.small-hint {
    color: var(--text-muted);
    font-size: 13px;
}

.form-section-heading {
    margin-top: 20px;
    margin-bottom: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.admin-only {
    display: none;
}

body.is-admin .admin-only {
    display: block;
}

/* For inline elements like buttons */
body.is-admin .btn.admin-only {
    display: inline-block;
}

/* Tab content rules - these must come after admin-only rules to take precedence */
body.is-admin .tab-content.admin-only {
    display: none !important;
}

body.is-admin .tab-content.admin-only.active {
    display: block !important;
}

/* Superuser-specific visibility */
body.is-superuser .superuser-cdr-access {
    display: block;
}

/* DID Tags tab: visible to superusers as well as admins */
body.is-superuser .superuser-did-access {
    display: block;
}

/* Ring Groups tab: visible to superusers as well as admins */
body.is-superuser .superuser-ringgroups-access {
    display: block;
}

/* Show rename buttons to superusers */
body.is-superuser .btn.admin-only.renamable {
    display: inline-block;
}

/* Hide general admin-only elements from superusers */
body.is-superuser .admin-only:not(.renamable):not(.superuser-cdr-access):not(.superuser-did-access):not(.superuser-ringgroups-access) {
    display: none !important;
}

/* Tag inputs inside the DID Tags table (not covered by .form-group input) */
#did-tags-list input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-color);
    font-size: 14px;
    width: 100%;
    max-width: 220px;
}

/* Clickable "Members" cell in the self-service Ring Groups modal - opens
   the group's detail modal (extension/name, ring time, failover, join/leave) */
.ringgroup-members-cell {
    cursor: pointer;
}

.ringgroup-members-cell:hover {
    text-decoration: underline;
    color: var(--info-color);
}

/* ==================== MODAL HEADINGS ==================== */
.modal-content h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-title-danger {
    color: var(--danger-color);
}

/* ==================== EMPTY / LOADING STATES ==================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state h3 {
    margin-bottom: 10px;
}

/* Loading State */
.loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 16px;
    background: var(--surface);
    border-radius: var(--radius-md);
    animation: pulse 1.5s ease-in-out infinite;
}

.error-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--danger-color);
    font-size: 16px;
    background: var(--surface);
    border-radius: var(--radius-md);
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==================== FILTER CARD ==================== */
.filter-card {
    background: var(--surface);
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.filter-field input,
.filter-field select {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    min-width: 150px;
    background: var(--surface);
    color: var(--text-color);
}

.filter-field input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.filter-field button {
    margin-right: 5px;
}

/* ==================== STATISTICS ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Meter-bank tiles: flat panel + a thin tone-colored top edge, like an
   indicator bank, instead of a soft-shadow SaaS card. Default tone is
   --primary-color; .tone-success/.tone-danger/.tone-warning recolor the
   edge (app.js adds the same tone-* class it already puts on
   .stat-value-row onto the .stat-card itself). */
.stat-card {
    position: relative;
    background: var(--surface);
    padding: 22px 20px 20px;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
}

.stat-card.tone-success { border-top-color: var(--success-color); }
.stat-card.tone-danger { border-top-color: var(--danger-color); }
.stat-card.tone-warning { border-top-color: var(--warning-color); }

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-color);
}

/* Icon + number row on stat cards (Call Records filters) */
.stat-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-icon {
    display: inline-flex;
    color: var(--text-muted);
}

.stat-icon svg {
    width: 26px;
    height: 26px;
}

.stat-value-row.tone-success .stat-icon {
    color: var(--success-color);
}

.stat-value-row.tone-danger .stat-icon {
    color: var(--danger-color);
}

.stat-value-row.tone-warning .stat-icon {
    color: var(--warning-color);
}

/* Clickable stat cards (Call Records view filters) */
.stat-card.stat-clickable {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.stat-card.stat-clickable:hover {
    transform: translateY(-2px);
}

.stat-card.stat-clickable.active {
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

/* Status chips inside the CDR table */
.data-table .chip {
    margin: 0;
}

/* ==================== PAGINATION ==================== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.pagination-container a,
.pagination-container button {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.pagination-container a:hover,
.pagination-container button:hover {
    background-color: var(--bg-color);
    border-color: var(--primary-color);
}

.pagination-container a.active,
.pagination-container button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-container .ellipsis {
    padding: 8px 12px;
    color: var(--text-muted);
}

/* Simple pagination row used by PBX contacts */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ==================== RESPONSIVE ==================== */
/* Tablet + phone: sidebar becomes an off-canvas drawer behind a hamburger */
@media (max-width: 1100px) {
    .topbar {
        display: flex;
    }

    .sidebar {
        width: 280px;
        top: 56px;
        height: calc(100vh - 56px);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1150;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-2);
        overflow-y: auto;
    }

    .content {
        margin-left: 0;
        padding-top: 86px;
    }

    body.sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .filter-group {
        flex-direction: column;
        width: 100%;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-field input,
    .filter-field select {
        min-width: 0;
        width: 100%;
    }

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

    .pagination-container {
        flex-wrap: wrap;
    }

    /* Full-screen sheet on phones */
    .modal-content {
        width: 100%;
        max-width: none;
        height: 100vh;
        max-height: none;
        border-radius: 0;
    }

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

    /* Stack the ring group transfer lists with the arrows rotated between them */
    .transfer-list {
        flex-direction: column;
    }

    .transfer-arrows {
        flex-direction: row;
        justify-content: center;
    }

    .transfer-box {
        height: 220px;
    }
}

/* ==================== AUDIO PLAYER ==================== */
.recording-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 320px;
}

.recording-player audio {
    display: block;
    width: 320px;
    height: 36px;
}

.player-error {
    color: var(--danger-color, #e2524a);
    font-size: 12px;
    flex-basis: 100%;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-3);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
}

.btn-icon {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-icon:hover {
    background: var(--primary-hover);
}

.btn-icon.play-btn,
.btn-icon.play-pause-btn {
    background: var(--success-color);
}

.btn-icon.play-btn:hover,
.btn-icon.play-pause-btn:hover {
    background: var(--success-strong);
}

.btn-icon.download-btn,
.btn-icon.download-btn-inline {
    background: var(--secondary-color);
}

.btn-icon.download-btn:hover,
.btn-icon.download-btn-inline:hover {
    background: var(--secondary-hover);
}

.time-display {
    font-size: 12px;
    color: var(--text-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.seek-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: var(--border-strong);
    -webkit-appearance: none;
    appearance: none;
}

.seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
}

.seek-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
}

.seek-bar::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--primary-color) 0%,
        var(--primary-color) var(--progress, 0%),
        var(--border-strong) var(--progress, 0%),
        var(--border-strong) 100%);
}

.player-error {
    padding: 5px;
    background: var(--danger-soft);
    border: 1px solid var(--danger-color);
    color: var(--danger-on-soft);
    border-radius: 4px;
    font-size: 12px;
}

/* ==================== DEVICE GRID ==================== */

/* Grid layout for device cards */
.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Quality-based border colors (saturated hues work on both themes) */
/* Fluctuating animation (warning pulse) */
@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
    }
}

/* Card header */
/* Quality badge */
.quality-badge {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.quality-badge.quality-excellent {
    background: var(--success-soft);
    color: var(--success-on-soft);
}

.quality-badge.quality-good {
    background: var(--warning-soft);
    color: var(--warning-on-soft);
}

.quality-badge.quality-fair {
    background: var(--warning-soft);
    color: var(--warning-on-soft);
}

.quality-badge.quality-poor {
    background: var(--danger-soft);
    color: var(--danger-on-soft);
}

.quality-badge.quality-critical {
    background: var(--danger-soft);
    color: var(--danger-on-soft);
}

.quality-badge.quality-unknown {
    background: var(--muted-soft);
    color: var(--muted-on-soft);
}

/* Renaming status badge */
.status-renaming {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--info-soft);
    color: var(--info-on-soft);
    position: relative;
    padding-left: 24px;
}

.status-renaming::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid var(--info-on-soft);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Card badges container */
/* Card body - metrics */
/* Card footer - actions */
/* Chart container */
/* ==================== DEVICES TAB ==================== */
.device-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.device-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
}

.device-photo {
    width: 120px;
    height: 90px;
    object-fit: contain;
    background: var(--surface-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px;
    flex-shrink: 0;
}

.device-photo-fallback {
    width: 120px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: var(--surface-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.device-title {
    font-weight: 600;
    font-size: 16px;
}

.device-sub {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.device-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.device-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.device-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    font-size: 13px;
}

.device-metrics .lbl {
    color: var(--text-muted);
}

.device-footer {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

/* Devices view toggle (Cards / List) */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.view-toggle-btn {
    padding: 8px 14px;
    background: var(--surface);
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
}

.view-toggle-btn + .view-toggle-btn {
    border-left: 1px solid var(--border-strong);
}

.view-toggle-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Small model photo in the devices table view */
.device-thumb {
    width: 44px;
    height: 33px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--surface-3);
    flex-shrink: 0;
}

/* ==================== JS-RENDERED CARD COMPONENTS ==================== */

/* Responsive card grid (Extensions BLF cards, Users cards) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 20px;
}

/* Base card with hover lift (replaces JS onmouseover/onmouseout swaps) */
.status-card {
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-1);
}

.status-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.status-card.configured {
    border-color: var(--success-color);  /* has BLF keys configured */
}

.status-card.role-admin {
    border-color: var(--warning-color);
}

.status-card.role-superuser {
    border-color: #7c3aed;
}

.status-card.role-user {
    border-color: var(--primary-color);
}

.status-card.clickable {
    cursor: pointer;
}

.status-card.clickable:hover {
    transform: translateY(-4px);
}

/* Flat role-colored card header (no decorative gradient). .brand is the
   "my phone" card and uses the same ink as the BLF phone screen, so your
   own line's header reads like the phone's own display. Colors are fixed
   (not the swappable --primary-color/--warning-strong tokens, whose dark-
   theme values are chosen for text-on-dark-surface use, not as a
   background behind white header text) so white text stays AA-legible
   in both themes. */
.card-header {
    padding: 20px;
    color: white;
}

.card-header.brand {
    background: var(--ink);
}

.card-header.admin {
    background: #a06c1c;
}

.card-header.superuser {
    background: #7c3aed;
}

.card-header.user {
    background: #0c6da8;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-header-row h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.card-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.card-body {
    padding: 20px;
}

.card-body.tight {
    padding: 15px 20px;
}

/* Label/value detail grid inside cards */
.detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    font-size: 13px;
    margin-bottom: 15px;
}

/* Phone product photo floating beside the detail grid (Dashboard My Phone card) */
.card-photo {
    float: right;
    width: 110px;
    height: 82px;
    object-fit: contain;
    background: var(--surface-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: 0 0 10px 14px;
}

.detail-grid .lbl {
    color: var(--text-muted);
    font-weight: 500;
}

.detail-grid .val {
    color: var(--text-color);
}

.detail-grid .val.strong {
    font-weight: 600;
}

.detail-grid code {
    font-size: 11px;
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Card action button rows */
.card-actions {
    display: flex;
    gap: 8px;
}

.card-actions.stack {
    flex-direction: column;
}

.card-actions.stack .btn + .btn {
    margin-top: 8px;
}

.card-actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Ring Group member transfer widget (Available <-> Active Members modal) */
.transfer-list {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 16px 0;
}

.transfer-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.transfer-col h4 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.transfer-box {
    list-style: none;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    height: 320px;
    overflow-y: auto;
}

.transfer-box.drag-over {
    border-color: var(--info-color);
    background: var(--info-soft);
}

.transfer-item {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: grab;
    font-size: 13px;
    user-select: none;
    margin-bottom: 4px;
}

.transfer-item:hover {
    background: var(--surface-3);
}

.transfer-item:focus {
    outline: 2px solid var(--info-color);
    outline-offset: 1px;
}

.transfer-item.selected {
    background: var(--info-soft);
    color: var(--info-on-soft);
    font-weight: 600;
}

.transfer-item.dragging {
    opacity: 0.4;
}

.transfer-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 8px 10px;
}

.transfer-arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.transfer-arrows .btn {
    padding: 8px 10px;
    font-size: 16px;
    line-height: 1;
}

/* Callout boxes (provisioning URL hints, SIP account notice) */
.callout {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 15px;
}

.callout-info {
    background: var(--sky-soft);
    border-left: 3px solid var(--info-color);
}

.callout-success {
    background: var(--success-soft);
    border-left: 3px solid var(--success-color);
}

.callout-warning {
    background: var(--warning-soft);
    border-left: 3px solid var(--warning-color);
}

/* BLF key slots in the configuration modal */
.blf-slot {
    border: 2px solid var(--success-color);
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.blf-slot:hover {
    border-color: var(--success-strong);
    box-shadow: var(--shadow-1);
}

.blf-slot .slot-key {
    font-weight: bold;
    color: var(--muted-on-soft);
    margin-bottom: 5px;
}

.blf-slot .slot-type {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.blf-slot .slot-type .badge {
    background: var(--success-color);
    color: white;
    font-size: 9px;
}

.blf-slot .slot-label {
    font-size: 12px;
    color: var(--text-color);
    font-weight: 500;
}

.blf-slot .slot-ext {
    font-size: 11px;
    color: var(--text-muted);
}

.blf-slot-empty {
    border: 2px dashed var(--border-strong);
    background: var(--bg-color);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.blf-slot-empty:hover {
    border-color: var(--text-muted);
    background: var(--surface-2);
}

.blf-slot-empty .plus {
    font-size: 24px;
    color: var(--border-strong);
    margin-bottom: 4px;
}

.blf-slot-empty .slot-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==================== BLF modal: phone-shaped key layouts ==================== */

.blf-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.blf-modal-head h2 {
    margin: 0 0 4px;
}

.blf-modal-head .text-muted {
    margin: 0;
    font-size: 0.9em;
}

/* Physical key grid. grid-auto-flow:column + explicit rows implements the
   Grandstream numbering order (top->bottom within a column, columns left
   to right); .order-row flips to row-major. */
.phone-key-panel {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--krows), minmax(46px, 1fr));
    grid-template-columns: repeat(var(--kcols), minmax(64px, 1fr));
    gap: 6px;
}

.phone-key-panel.order-row {
    grid-auto-flow: row;
}

/* Photo view: same panel at full interactive size — tighter key cells with
   larger text (user preference, GRP2614/16 view) */
.phone-key-panel.roomy {
    grid-template-rows: repeat(var(--krows), minmax(58px, auto));
    grid-template-columns: repeat(var(--kcols), minmax(88px, 1fr));
    gap: 8px;
}

.roomy .pkey-label {
    font-size: 13px;
}

.roomy .pkey-ext {
    font-size: 12px;
}

.roomy .pkey-num {
    font-size: 10px;
}

.roomy .pkey-led {
    width: 9px;
    height: 9px;
}

/* CSS-drawn phone chassis: key panel beside screen+keypad column */
.phone-chassis {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    max-width: 580px;
}

.phone-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 170px;
}

.phone-speaker {
    height: 10px;
    margin: 2px 28% 0;
    border-radius: 6px;
    background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 9px);
    opacity: 0.7;
}

.phone-screen {
    background: #10141c;
    border: 1px solid #2a3242;
    border-radius: 8px;
    color: #cfe8ff;
    padding: 10px 12px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    font-family: ui-monospace, 'Courier New', monospace;
}

.pscr-model {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
}

.pscr-user {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pscr-ext {
    font-size: 12px;
    opacity: 0.85;
}

.pscr-nav {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    opacity: 0.6;
    border-top: 1px solid #2a3242;
    padding-top: 5px;
}

.phone-keypad {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.phone-keypad span {
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 11px;
    user-select: none;
}

/* Fixed line-appearance keys at the start of the panel (not configurable) */
.pkey-reserved {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-muted);
    cursor: default;
}

.pkey-reserved-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pkey-filler {
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    opacity: 0.5;
}

/* Compact key-sized slot variant used inside the phone layouts */
.blf-slot.on-phone,
.blf-slot-empty.on-phone {
    position: relative;
    padding: 6px 8px;
    border-width: 1px;
    border-radius: 6px;
    min-width: 0;
}

.blf-slot.on-phone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding-top: 16px;
}

.on-phone .pkey-num {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 600;
}

.on-phone .pkey-led {
    position: absolute;
    top: 6px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 4px var(--success-color);
}

.blf-slot.on-phone.speeddial .pkey-led {
    background: var(--info-color);
    box-shadow: 0 0 4px var(--info-color);
}

.on-phone .pkey-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.on-phone .pkey-ext {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blf-slot-empty.on-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    padding-top: 6px;
}

.blf-slot-empty.on-phone .plus {
    font-size: 15px;
    line-height: 1;
    margin: 4px 0 0;
}

/* Photo view: official product image beside the identical key grid */
.phone-photo-panel {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ppp-photo {
    flex: 1 1 260px;
    max-width: 420px;
    text-align: center;
}

.ppp-photo img {
    max-width: 100%;
    max-height: 52vh;
    object-fit: contain;
}

.ppp-caption {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.ppp-grid {
    flex: 1 1 320px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* On-phone LCD page separator (GRP2614/16 show 8 BLF keys per page) */
.ppp-page-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ppp-note {
    margin: 0;
    font-size: 12px;
}

/* Modal footer (was inline-styled) */
.blf-modal-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.blf-modal-footer .text-muted {
    margin-right: auto;
    font-size: 0.85em;
}

@media (max-width: 768px) {
    .phone-chassis {
        flex-direction: column;
        max-width: 100%;
    }

    .phone-key-panel {
        grid-template-columns: repeat(var(--kcols), minmax(56px, 1fr));
    }

    .phone-photo-panel {
        flex-direction: column;
    }

    .ppp-photo {
        max-width: none;
    }
}

/* ==================== TOASTS ==================== */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
}

.toast {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    color: white;
    box-shadow: var(--shadow-2);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
    word-wrap: break-word;
}

.toast.show {
    opacity: 1;
}

/* Solid status colors stay fixed across themes (white text stays readable) */
.toast-success {
    background: #2fb673;
}

.toast-error {
    background: #e2524a;
}

.toast-info {
    background: #0e93ae;
}

/* ==================== ACCOUNT HISTORY ==================== */
/* Small transition list (355 → 141) in the Account modal */
.account-history {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.account-history-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}

.account-history-row .acct-change {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.acct-change strong {
    font-size: 14px;
}

.acct-meta {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* History table under Customize Phone: keep it visually secondary */
.account-history-table {
    margin-top: 8px;
}

.account-history-table td strong {
    font-variant-numeric: tabular-nums;
}