/* ═══════════════════════════════════════════════════════════
   VideoManagement – Three-theme design tokens (vm- prefix)
   Themes: light | gray (default dark) | black
   Follows LDataBrain shared design system (see docs/05-frontend-ui.md)
   ═══════════════════════════════════════════════════════════ */

/* ── Base text colour ── */
html { color: light-dark(#16191f, #f1f5f9); }

/* ── Card surfaces ── */
.vm-card,
.vm-outer-card {
    background: light-dark(#ffffff, rgb(51,65,85));
    border-color: light-dark(#d5dbdb, rgba(71,85,105,.5));
    color: light-dark(#16191f, rgb(241 245 249));
}

/* ── Stat / KPI tiles ── */
.vm-stat-card {
    background: light-dark(#f7f8f8, rgba(255,255,255,.03));
    border-color: light-dark(#adb8c4, rgba(255,255,255,.06));
    color: light-dark(#16191f, rgb(241 245 249));
    box-shadow: 0 6px 24px -4px light-dark(rgba(0,0,0,.15), rgba(0,0,0,.55)),
                0 0 0 1px light-dark(rgba(0,0,0,.06), rgba(255,255,255,.07));
}
.vm-stat-label  { color: light-dark(#0073bb, #7dd3fc) !important; font-weight: 600; }
.vm-stat-value  { color: light-dark(#16191f, #f1f5f9) !important; font-weight: 700; }
.vm-stat-helper { color: light-dark(#545b64, #94a3b8) !important; }

/* ── Section title ── */
.vm-section-title { color: light-dark(#16191f, #cbd5e1) !important; }

/* ── Table surfaces ── */
.vm-table-wrapper {
    background: light-dark(#ffffff, rgb(51,65,85));
    border-color: light-dark(#d5dbdb, rgba(71,85,105,.5));
    color: light-dark(#16191f, rgb(241 245 249));
}
.vm-table-header {
    background: light-dark(#f7f8f8, rgba(255,255,255,.05)) !important;
    color: light-dark(#16191f, rgb(241 245 249)) !important;
}
.vm-filter-row {
    background: light-dark(#f7f8f8, rgba(255,255,255,.03)) !important;
    color: light-dark(#16191f, rgb(241 245 249)) !important;
}
.vm-filter-input {
    background: light-dark(#ffffff, rgba(15,23,42,.40)) !important;
    border-color: light-dark(#aab7b8, rgba(255,255,255,.10)) !important;
    color: light-dark(#16191f, rgb(241 245 249)) !important;
}

/* ── Buttons / action elements ── */
.vm-action-btn {
    border-color: light-dark(#d5dbdb, rgba(255,255,255,.10));
    color: light-dark(#16191f, rgb(241 245 249));
}
.vm-action-btn:hover { background: light-dark(#f2f3f3, rgba(255,255,255,.08)); }

/* ── Form elements ── */
.vm-form-card {
    background: light-dark(#ffffff, rgb(51,65,85));
    border-color: light-dark(#d5dbdb, rgba(71,85,105,.5));
    color: light-dark(#16191f, rgb(241 245 249));
}
.vm-form-label {
    color: light-dark(#16191f, #cbd5e1);
    font-weight: 500;
}
.vm-form-input,
.vm-form-select,
.vm-form-textarea {
    background: light-dark(#ffffff, rgba(15,23,42,.40));
    border-color: light-dark(#aab7b8, rgba(255,255,255,.10));
    color: light-dark(#16191f, rgb(241 245 249));
}
.vm-form-input:focus,
.vm-form-select:focus,
.vm-form-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
    outline: none;
}
.vm-form-input::placeholder,
.vm-form-textarea::placeholder {
    color: light-dark(#687078, rgba(148,163,184,.6));
}
.vm-form-help {
    color: light-dark(#545b64, #94a3b8);
    font-size: .75rem;
}
.vm-form-error {
    color: light-dark(#d13212, #fca5a5);
    font-size: .75rem;
}

/* ── Muted / dim text ── */
.vm-text-muted { color: light-dark(#545b64, #94a3b8); }
.vm-text-dim   { color: light-dark(#687078, #64748b); }

/* ── Alert banners ── */
.vm-alert-success {
    background: light-dark(#f2fcf3, rgba(16,185,129,.08));
    border-color: light-dark(#b5eac0, rgba(16,185,129,.35));
    color: light-dark(#037f0c, #6ee7b7);
}
.vm-alert-error {
    background: light-dark(#fdf3f1, rgba(239,68,68,.08));
    border-color: light-dark(#fcc8be, rgba(239,68,68,.35));
    color: light-dark(#d13212, #fca5a5);
}
.vm-alert-warning {
    background: light-dark(#fef9e8, rgba(234,179,8,.08));
    border-color: light-dark(#f5d481, rgba(234,179,8,.35));
    color: light-dark(#8a6d04, #fde68a);
}

/* ── Protocol / tag pill ── */
.vm-pill {
    background: light-dark(#e9ebeb, rgba(71,85,105,.5));
    color: light-dark(#16191f, #e2e8f0);
}

/* ── Backdrop overlay for popups / modals ── */
.vm-backdrop {
    background: light-dark(rgba(0,0,0,.25), rgba(0,0,0,.55));
    backdrop-filter: blur(2px);
}

/* ── Dividers ── */
.vm-divider {
    border-color: light-dark(#d5dbdb, rgba(71,85,105,.4));
}

/* ── Tab switcher ── */
.vm-tab {
    color: light-dark(#545b64, #94a3b8);
    border-bottom: 2px solid transparent;
    padding: .5rem 1rem;
    font-weight: 500;
    transition: color .15s, border-color .15s;
}
.vm-tab:hover { color: light-dark(#16191f, #e2e8f0); }
.vm-tab.active,
.vm-tab[aria-selected="true"] {
    color: light-dark(#0073bb, #7dd3fc);
    border-bottom-color: light-dark(#0073bb, #7dd3fc);
}

/* ── Row hover via CSS class (for JS-free usage) ── */
.vm-row-hover:hover {
    background: light-dark(#f2f3f3, rgba(71,85,105,.3));
}

/* ═══════════════════════════════════════════════
   Black theme overrides
   ═══════════════════════════════════════════════ */
html[data-theme="black"] .vm-card,
html[data-theme="black"] .vm-outer-card {
    background: rgba(28,28,28,1) !important;
    border-color: rgba(255,255,255,.06) !important;
}
html[data-theme="black"] .vm-stat-card {
    background: rgba(255,255,255,.02) !important;
    border-color: rgba(255,255,255,.05) !important;
    box-shadow: 0 6px 24px -4px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04) !important;
}
html[data-theme="black"] .vm-table-wrapper {
    background: rgba(28,28,28,1) !important;
    border-color: rgba(255,255,255,.06) !important;
}
html[data-theme="black"] .vm-table-header {
    background: rgba(255,255,255,.04) !important;
}
html[data-theme="black"] .vm-filter-row {
    background: rgba(255,255,255,.02) !important;
}
html[data-theme="black"] .vm-form-card {
    background: rgba(28,28,28,1) !important;
    border-color: rgba(255,255,255,.06) !important;
}
html[data-theme="black"] .vm-form-input,
html[data-theme="black"] .vm-form-select,
html[data-theme="black"] .vm-form-textarea {
    background: rgba(17,17,17,.8) !important;
    border-color: rgba(255,255,255,.08) !important;
}
html[data-theme="black"] .vm-row-hover:hover {
    background: rgba(255,255,255,.04) !important;
}
html[data-theme="black"] .vm-pill {
    background: rgba(255,255,255,.08) !important;
}

/* ═══════════════════════════════════════════════
   Gray theme accent cards
   ═══════════════════════════════════════════════ */
html[data-theme="gray"] .vm-stat-card {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(148,163,184,.45) !important;
    box-shadow: 0 6px 24px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07) !important;
}

/* ═══════════════════════════════════════════════
   Light theme table borders
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .vm-table-wrapper th,
html[data-theme="light"] .vm-table-wrapper td {
    border-color: #d5dbdb !important;
}
html[data-theme="light"] .vm-table-wrapper thead th {
    border-bottom-color: #adb8c4 !important;
}
html[data-theme="light"] .vm-row-hover:hover {
    background: #f2f3f3 !important;
}