/* ═══════════════════════════════════════════════
   palec — Dark Theme Override
   ═══════════════════════════════════════════════ */
[data-theme="dark"] {
    color-scheme: dark;
    --p: 0.55 0.07 220;          /* primary: muted steel blue */
    --pc: 0.95 0.01 220;
    --s: 0.50 0.05 220;          /* secondary: darker steel */
    --sc: 0.90 0.01 220;
    --a: 0.65 0.10 165;          /* accent: muted teal */
    --ac: 0.13 0.03 165;
    --n: 0.18 0.015 260;         /* neutral */
    --nc: 0.70 0.02 260;
    --b1: 0.17 0.015 260;        /* base-100: #1c1d28 */
    --b2: 0.13 0.013 265;        /* base-200: #13141c */
    --b3: 0.21 0.017 260;        /* base-300: #252735 */
    --bc: 0.70 0.02 260;         /* base-content: muted gray */
    --in: 0.65 0.08 220;         /* info */
    --inc: 0.13 0.03 220;
    --su: 0.65 0.12 170;         /* success: teal green */
    --suc: 0.13 0.03 170;
    --wa: 0.70 0.12 75;          /* warning */
    --wac: 0.13 0.03 75;
    --er: 0.65 0.17 15;          /* error */
    --erc: 0.95 0.02 15;
    --rounded-box: 0.75rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: 0.2s;
    --btn-focus-scale: 0.97;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
}

/* ═══════════════════════════════════════════════
   Global
   ═══════════════════════════════════════════════ */

@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

/* ── Sidebar ── */
.sidebar-shell {
    background: linear-gradient(180deg, #1c1d28 0%, #13141c 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 1px 0 24px -4px rgba(0, 0, 0, 0.4);
}

.logo-glow::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle, rgba(100, 200, 160, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    transition: opacity 0.3s ease;
    opacity: 0.5;
}
.group:hover .logo-glow::before { opacity: 1; }

.sidebar-divider {
    height: 1px;
    margin: 0 1rem;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 50%, transparent);
}

.nav-section-title {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.nav-link {
    border-radius: 0.5rem;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
}
.nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    border-left-color: rgba(255, 255, 255, 0.08);
}

.menu li > a.active,
.nav-link.active {
    background: rgba(100, 200, 160, 0.08);
    color: rgba(100, 200, 160, 0.9);
    font-weight: 600;
    border-left: 2px solid rgba(100, 200, 160, 0.5);
}

/* ── HTMX ── */
#devices-table { contain: layout; }
.htmx-swapping { opacity: 0.5; transition: opacity 0.12s ease; pointer-events: none; }
.htmx-settling { transition: opacity 0.12s ease; }

/* ── Log viewer ── */
.log-viewer {
    white-space: pre-wrap;
    word-break: break-all;
    color: rgba(255, 255, 255, 0.5);
    background: #13141c;
    border-radius: 0 0 var(--rounded-box, 0.75rem) var(--rounded-box, 0.75rem);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ── Cards ── */
.card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.card .table { background: transparent; }
.card .table tbody tr:last-child td,
.card .table tbody tr:last-child { border-bottom: 0; }

/* ── Table ── */
.table tbody tr.hover:hover { background: rgba(255, 255, 255, 0.02); }
.table tbody tr td { transition: background 0.15s ease; }
.table thead th {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.25);
}

/* ── Scrollbar ── */
.log-viewer::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar { width: 5px; height: 5px; }
.log-viewer::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track { background: transparent; }
.log-viewer::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }
.log-viewer::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); }

/* ═══════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.status-running {
    background: rgba(100, 200, 160, 0.1);
    color: rgba(100, 200, 160, 0.9);
    border: 1px solid rgba(100, 200, 160, 0.2);
}
.status-dead {
    background: rgba(240, 100, 120, 0.1);
    color: rgba(240, 100, 120, 0.9);
    border: 1px solid rgba(240, 100, 120, 0.2);
}
.status-stopped {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.status-adb {
    background: rgba(100, 180, 230, 0.08);
    color: rgba(100, 180, 230, 0.7);
    border: 1px solid rgba(100, 180, 230, 0.12);
}

.port-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.port-badge.port-adb {
    background: rgba(100, 180, 230, 0.1);
    color: rgba(100, 180, 230, 0.8);
    border-color: rgba(100, 180, 230, 0.18);
}

/* ═══════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════ */
.tbl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    transition: all 0.12s ease;
}
.tbl-btn svg { flex-shrink: 0; }
.tbl-btn-success {
    background: rgba(100, 200, 160, 0.1);
    color: rgba(100, 200, 160, 0.85);
    border-color: rgba(100, 200, 160, 0.18);
}
.tbl-btn-success:hover { background: rgba(100, 200, 160, 0.18); }
.tbl-btn-danger {
    background: rgba(240, 100, 120, 0.1);
    color: rgba(240, 100, 120, 0.85);
    border-color: rgba(240, 100, 120, 0.18);
}
.tbl-btn-danger:hover { background: rgba(240, 100, 120, 0.18); }
.tbl-btn-primary {
    background: rgba(100, 180, 230, 0.1);
    color: rgba(100, 180, 230, 0.85);
    border-color: rgba(100, 180, 230, 0.18);
}
.tbl-btn-primary:hover { background: rgba(100, 180, 230, 0.18); }
.tbl-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.04);
}
.tbl-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
}
.tbl-btn-delete { background: transparent; color: rgba(240, 100, 120, 0.3); }
.tbl-btn-delete:hover { background: rgba(240, 100, 120, 0.1); color: rgba(240, 100, 120, 0.8); }
/* ON states of the Record / Screens toggles. Slightly hotter than -danger so
   "Record ON" does not read as another "Stop All". */
.tbl-btn-error {
    background: rgba(245, 90, 100, 0.16);
    color: rgba(245, 120, 130, 0.95);
    border-color: rgba(245, 90, 100, 0.32);
}
.tbl-btn-error:hover { background: rgba(245, 90, 100, 0.24); }
.tbl-btn-warning {
    background: rgba(235, 175, 80, 0.14);
    color: rgba(235, 180, 90, 0.92);
    border-color: rgba(235, 175, 80, 0.26);
}
.tbl-btn-warning:hover { background: rgba(235, 175, 80, 0.22); }

/* Toolbar size — the dashboard header wants a roomier button than the table rows */
.tbl-btn-md { padding: 6px 14px; font-size: 0.8rem; }

/* ── Segmented group ──
   Squares the inner corners so a pair of related .tbl-btn reads as one control.
   Keyed off :first-child/:last-child on purpose: the Record/Screens toggles
   replace THEMSELVES (hx-swap="outerHTML") while this wrapper stays put, so a
   marker class would have to be re-emitted by the partial on every swap. */
.tbl-group { display: inline-flex; align-items: center; }
.tbl-group > .tbl-btn { border-radius: 0; }
.tbl-group > .tbl-btn:first-child { border-radius: 7px 0 0 7px; }
.tbl-group > .tbl-btn:last-child { border-radius: 0 7px 7px 0; }
.tbl-group > .tbl-btn:only-child { border-radius: 7px; }
.tbl-group > .tbl-btn + .tbl-btn { margin-left: -1px; }
.tbl-group > .tbl-btn:hover { position: relative; z-index: 1; }

.collapse-arrow > .collapse-title::after { opacity: 0.3; }

/* ═══════════════════════════════════════════════
   HTMX Action Buttons
   ═══════════════════════════════════════════════ */
.action-btn-slot { width: 68px; }
.action-btn-slot .htmx-action-btn { width: 100%; justify-content: center; }
.htmx-action-btn .action-icon { width: 12px; height: 12px; flex-shrink: 0; }
.htmx-action-btn .action-spinner { display: none; }
.htmx-action-btn.htmx-request .action-icon { display: none; }
.htmx-action-btn.htmx-request .action-spinner { display: inline-block; }
.htmx-action-btn.htmx-request { pointer-events: none; opacity: 0.5; }

/* ── Dropdown ── */
.card .overflow-x-auto { overflow: visible; }
.table .dropdown-content {
    margin-top: 2px;
    background: #1c1d28;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════ */
h1 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════
   Form Inputs
   ═══════════════════════════════════════════════ */
.input, .select, .textarea {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.25);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: rgba(100, 180, 230, 0.3);
    box-shadow: 0 0 0 2px rgba(100, 180, 230, 0.06);
    outline: none;
}

/* ═══════════════════════════════════════════════
   Log Colorization
   ═══════════════════════════════════════════════ */
.log-error { color: #e06070; }
.log-success { color: #60c8a0; }
.log-warning { color: #d0a858; }
.log-debug { color: rgba(255, 255, 255, 0.2); }
.log-timestamp { color: rgba(255, 255, 255, 0.25); }
.log-hidden { display: none; }

/* ═══════════════════════════════════════════════
   Report Badges
   ═══════════════════════════════════════════════ */
.report-status-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}
.report-status-error { background: rgba(240, 100, 120, 0.1); color: rgba(240, 100, 120, 0.85); border: 1px solid rgba(240, 100, 120, 0.15); }
.report-status-warning { background: rgba(210, 170, 90, 0.1); color: rgba(210, 170, 90, 0.85); border: 1px solid rgba(210, 170, 90, 0.15); }
.report-status-info { background: rgba(100, 180, 230, 0.08); color: rgba(100, 180, 230, 0.8); border: 1px solid rgba(100, 180, 230, 0.12); }
.report-status-neutral { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); }

/* ═══════════════════════════════════════════════
   Stat Cards
   ═══════════════════════════════════════════════ */
.stat-card {
    background: #1c1d28;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.75rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stat-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
}
.stat-card:hover { border-color: rgba(255, 255, 255, 0.07); }
.stat-card-primary::before { background: rgba(100, 180, 230, 0.6); }
.stat-card-success::before { background: rgba(100, 200, 160, 0.6); }
.stat-card-warning::before { background: rgba(210, 170, 90, 0.6); }
.stat-card-info::before    { background: rgba(120, 165, 235, 0.6); }
.stat-card-neutral::before { background: rgba(255, 255, 255, 0.08); }

.stat-card-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
}
.stat-card-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 0.25rem;
    letter-spacing: -0.02em;
}
.stat-card-sub {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
    margin-top: 0.25rem;
}
.stat-card-icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.75rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-card-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.stat-card-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width 0.5s ease;
    min-width: 2px;
}

/* ═══════════════════════════════════════════════
   Device Table Rows
   ═══════════════════════════════════════════════ */
.device-row-indicator {
    width: 3px; height: 100%; min-height: 2.5rem;
    border-radius: 0 2px 2px 0;
}
.device-row-indicator-running { background: rgba(100, 200, 160, 0.7); box-shadow: 0 0 6px rgba(100, 200, 160, 0.2); }
.device-row-indicator-dead,
.device-row-indicator-hung { background: rgba(240, 100, 120, 0.7); box-shadow: 0 0 6px rgba(240, 100, 120, 0.2); }
.device-row-indicator-stopped { background: rgba(255, 255, 255, 0.06); }
/* A running device that is producing nothing. Declared AFTER -running (same
   specificity, so the later rule wins) because the row is still `running`:
   the status is pid-based and the runner is alive and healthy, it just has no
   work (idle, neutral) or is blocked (parked, amber — one step short of the red
   reserved for dead/hung). */
.device-row-indicator-idle { background: rgba(255, 255, 255, 0.18); box-shadow: none; }
.device-row-indicator-parked { background: rgba(235, 180, 80, 0.75); box-shadow: 0 0 6px rgba(235, 180, 80, 0.2); }

.rate-bar {
    width: 2.5rem; height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    overflow: hidden; flex-shrink: 0;
}
.rate-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }

/* ═══════════════════════════════════════════════
   Port Cards
   ═══════════════════════════════════════════════ */
.port-card { border-radius: 0.5rem; padding: 0.5rem; transition: border-color 0.2s ease; }
.port-card-active { background: #1c1d28; border: 1px solid rgba(100, 200, 160, 0.15); }
.port-card-active:hover { border-color: rgba(100, 200, 160, 0.25); }
.port-card-idle { background: rgba(255, 255, 255, 0.01); border: 1px dashed rgba(255, 255, 255, 0.06); }
.port-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.port-card-number { font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.35); }
.port-card-active .port-card-number { color: rgba(100, 200, 160, 0.8); }
.port-card-port { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6rem; color: rgba(255, 255, 255, 0.15); }
.port-card-body { min-height: 1.5rem; }
.port-card-addr { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.65rem; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.port-card-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6rem; color: rgba(255, 255, 255, 0.2); }
.port-card-empty { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6rem; color: rgba(255, 255, 255, 0.08); text-transform: uppercase; letter-spacing: 0.1em; }

/* ═══════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .drawer-side { z-index: 50; }
}