/* ============================================================
   ScreenFlow — fixes.css  (v2 — slim, targeted)
   Only classes genuinely absent from core/layout/components/pages.
   Load order: after responsive.css.
   ============================================================ */


/* ============================================================
   1. CSS VARIABLE ALIASES
   Short names used in some inline styles → real tokens
   ============================================================ */
:root {
  --primary:            var(--brand-primary);
  --primary-hover:      var(--brand-primary-hover);
  --primary-ghost:      var(--brand-primary-muted);
  --primary-muted:      var(--brand-primary-muted);
  --surface-card:       var(--color-bg-surface);
  --surface-overlay:    var(--color-bg-subtle);
  --surface-bg:         var(--color-bg-primary);
  --bg-primary:         var(--color-bg-surface);
  --bg-secondary:       var(--color-bg-subtle);
  --bg-tertiary:        var(--color-bg-subtle);
  --text-primary:       var(--color-text-primary);
  --text-secondary:     var(--color-text-secondary);
  --text-muted:         var(--color-text-tertiary);
  --text-tertiary:      var(--color-text-tertiary);
  --border-color:       var(--color-border);
  --border-primary:     var(--color-border);
  --border-strong:      var(--color-border-strong);
  --color-primary:      var(--brand-primary);
  --color-success:      #10B981;
  --color-warning:      #F59E0B;
  --color-danger:       #EF4444;
  --color-info:         #3B82F6;
  --color-success-bg:   rgba(16,185,129,0.10);
  --color-warning-bg:   rgba(245,158,11,0.10);
  --color-danger-bg:    rgba(239,68,68,0.10);
  --color-info-bg:      rgba(59,130,246,0.10);
  --color-success-border: rgba(16,185,129,0.30);
  --color-danger-border:  rgba(239,68,68,0.30);
  --brand-primary-focus:  rgba(242,111,38,0.12);
  --input-bg: var(--color-bg-surface);
}


/* ============================================================
   2. BOOTSTRAP-COMPAT UTILITIES (absent from core.css)
   ============================================================ */
.w-100 { width: 100% !important; }
.me-1  { margin-right: var(--space-1) !important; }
.me-2  { margin-right: var(--space-2) !important; }
.me-3  { margin-right: var(--space-3) !important; }
.ms-1  { margin-left: var(--space-1) !important; }
.ms-2  { margin-left: var(--space-2) !important; }
.ms-3  { margin-left: var(--space-3) !important; }
.ml-auto { margin-left: auto !important; }
.align-items-center       { align-items: center !important; }
.align-items-start        { align-items: flex-start !important; }
.justify-content-between  { justify-content: space-between !important; }
.justify-content-center   { justify-content: center !important; }

/* btn-group */
.btn-group { display:inline-flex; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); }
.btn-group .btn { border-radius:0; border:none; border-right:1px solid var(--color-border); margin:0; }
.btn-group .btn:last-child { border-right:none; }
.btn-group .btn.active { background:var(--brand-primary-muted); color:var(--brand-primary); font-weight:600; }

/* table variants */
.table { width:100%; border-collapse:collapse; }
.table thead th { padding:var(--space-3) var(--space-4); text-align:left; font-size:var(--text-xs); font-weight:700; color:var(--color-text-tertiary); letter-spacing:.06em; text-transform:uppercase; background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border); }
.table tbody tr { border-bottom:1px solid var(--color-border); transition:var(--transition-fast); }
.table tbody tr:last-child { border-bottom:none; }
.table tbody tr:hover { background:var(--color-bg-subtle); }
.table tbody td { padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); vertical-align:middle; }
.table tbody td strong { color:var(--color-text-primary); font-weight:600; }
.table-footer { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-5); border-top:1px solid var(--color-border); font-size:var(--text-sm); color:var(--color-text-tertiary); background:var(--color-bg-subtle); }
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-hover tbody tr:hover { background:var(--color-bg-subtle); }
.table-striped tbody tr:nth-child(even) { background:var(--color-bg-subtle); }
.table-sm th, .table-sm td { padding:var(--space-2) var(--space-3) !important; }

/* modal aliases */
.modal-overlay { position:fixed; inset:0; background:var(--color-bg-overlay,rgba(0,0,0,.5)); z-index:var(--z-modal-bg,1040); display:flex; align-items:center; justify-content:center; padding:var(--space-4); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .18s ease; }
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal-overlay .modal { transform:translateY(20px) scale(.97); transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.modal-overlay.open .modal { transform:translateY(0) scale(1); }


/* ============================================================
   3. FORM ELEMENTS (aliases / missing variants)
   ============================================================ */

/* form-input = alias of form-control */
.form-input { display:block; width:100%; padding:var(--space-2) var(--space-3); font-size:var(--text-sm); font-family:var(--font-body); color:var(--color-text-primary); background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); height:40px; outline:none; line-height:1.5; transition:border-color .15s,box-shadow .15s; }
.form-input:hover  { border-color:var(--color-border-hover); }
.form-input:focus  { border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-focus); }
.form-input::placeholder { color:var(--color-text-tertiary); }
.form-input:disabled { background:var(--color-bg-subtle); cursor:not-allowed; opacity:.7; }

.form-checkbox { width:16px; height:16px; accent-color:var(--brand-primary); cursor:pointer; flex-shrink:0; }

.form-label { display:flex; align-items:center; justify-content:space-between; font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); margin-bottom:0; }
.form-label-link { font-size:var(--text-xs); color:var(--brand-primary); font-weight:500; text-decoration:none; margin-left:auto; }
.form-label-link:hover { text-decoration:underline; }
.form-label-required::after { content:' *'; color:var(--color-danger); }

/* has-prefix / has-suffix — input padding adjustments */
.input-group { position:relative; display:flex; width:100%; }
.input-group > .form-input,
.input-group > .form-control { width:100%; }

.input-prefix { position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center; padding:0 var(--space-3); color:var(--color-text-tertiary); pointer-events:none; z-index:1; }
.input-prefix svg { width:16px; height:16px; }
.has-prefix { padding-left:38px !important; }
.has-suffix { padding-right:38px !important; }

.input-suffix-btn { position:absolute; right:0; top:0; bottom:0; display:flex; align-items:center; padding:0 var(--space-3); background:none; border:none; cursor:pointer; color:var(--color-text-tertiary); z-index:1; transition:color .15s; }
.input-suffix-btn:hover { color:var(--color-text-primary); }

/* password field */
.password-field { position:relative; }
.password-toggle { position:absolute; right:0; top:0; bottom:0; display:flex; align-items:center; padding:0 var(--space-3); background:none; border:none; cursor:pointer; color:var(--color-text-tertiary); z-index:1; }

/* form-control-sm / form-select-sm */
.form-control-sm { height:32px; padding:var(--space-1) var(--space-2); font-size:var(--text-xs); border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-bg-surface); color:var(--color-text-primary); outline:none; }
.form-control-sm:focus { border-color:var(--brand-primary); box-shadow:0 0 0 2px var(--brand-primary-focus); }
.form-select-sm { height:32px; padding:var(--space-1) var(--space-2); padding-right:28px; font-size:var(--text-xs); border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-bg-surface); color:var(--color-text-primary); outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238B96A5'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 6px center; background-size:14px; cursor:pointer; }

/* form-grid */
.form-grid   { display:grid; gap:var(--space-4); }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }

/* toggle switch */
.form-switch-track { display:inline-flex; align-items:center; width:40px; height:22px; border-radius:11px; background:var(--color-border); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.form-switch-track::after { content:''; width:16px; height:16px; border-radius:50%; background:#fff; position:absolute; left:3px; top:3px; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
input:checked + .form-switch-track,
.form-switch-track.on { background:var(--brand-primary); }
input:checked + .form-switch-track::after,
.form-switch-track.on::after { transform:translateX(18px); }


.toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.toggle-track { width:40px; height:22px; border-radius:11px; background:var(--color-border); position:relative; transition:background .2s; flex-shrink:0; }
.toggle-track::after { content:''; width:16px; height:16px; border-radius:50%; background:#fff; position:absolute; left:3px; top:3px; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle input:checked ~ .toggle-track,
.toggle.on .toggle-track { background:var(--brand-primary); }
.toggle input:checked ~ .toggle-track::after,
.toggle.on .toggle-track::after { transform:translateX(18px); }

.form-switch input[type="checkbox"] {display: none;}
/* ============================================================
   4. AUTH PAGES (new class names not in pages.css)
   ============================================================ */

.auth-shell { display:flex; min-height:100vh; background:var(--color-bg-primary); }
.auth-panel { flex:0 0 480px; max-width:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-10) var(--space-8); background:var(--color-bg-surface); border-right:1px solid var(--color-border); overflow-y:auto; }
.auth-card  { width:100%; max-width:380px; }

/* Centered auth (forgot/reset) */
.auth-shell.auth-shell-centered { align-items:center; justify-content:center; background:var(--color-bg-secondary); }
.auth-shell.auth-shell-centered .auth-visual { display:none; }
.auth-shell.auth-shell-centered .auth-panel  { flex:none; max-width:100%; background:transparent; border:none; padding:var(--space-8) var(--space-5); }
.auth-card-centered { width:100%; max-width:440px; background:var(--color-bg-surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-8); border:1px solid var(--color-border); }

/* Visual right panel */
.auth-visual { flex:1; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1E1C24 0%,#2D2840 60%,#1a1631 100%); padding:var(--space-12) var(--space-10); position:relative; overflow:hidden; }
.auth-visual::before { content:''; position:absolute; top:-120px; right:-120px; width:400px; height:400px; background:radial-gradient(circle,rgba(242,111,38,.18) 0%,transparent 70%); pointer-events:none; }
.auth-visual-content { position:relative; z-index:1; max-width:440px; color:#fff; }
.auth-visual-badge { display:inline-flex; align-items:center; gap:var(--space-2); background:rgba(242,111,38,.15); border:1px solid rgba(242,111,38,.3); color:#F26F26; padding:var(--space-1) var(--space-3); border-radius:20px; font-size:var(--text-xs); font-weight:600; margin-bottom:var(--space-5); }
.auth-visual-title { font-family:var(--font-display); font-size:36px; font-weight:800; color:#fff; line-height:1.15; letter-spacing:-.03em; margin-bottom:var(--space-4); }
.auth-visual-subtitle { font-size:var(--text-base); color:rgba(255,255,255,.65); line-height:1.65; margin-bottom:var(--space-8); }

.auth-features { display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-8); }
.auth-feature { display:flex; align-items:flex-start; gap:var(--space-3); }
.auth-feature-icon { width:32px; height:32px; border-radius:var(--radius-md); background:rgba(242,111,38,.18); border:1px solid rgba(242,111,38,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#F26F26; }
.auth-feature-desc { font-size:var(--text-xs); color:rgba(255,255,255,.5); line-height:1.5; }

.auth-testimonial { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:var(--space-5); }
.auth-testimonial-text { font-size:var(--text-sm); color:rgba(255,255,255,.8); line-height:1.65; font-style:italic; margin-bottom:var(--space-4); }
.auth-testimonial-author { display:flex; align-items:center; gap:var(--space-3); }
.auth-testimonial-name { font-size:var(--text-sm); font-weight:600; color:#fff; }
.auth-testimonial-role { font-size:var(--text-xs); color:rgba(255,255,255,.5); margin-top:1px; }

.auth-sso { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.btn-sso { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%; padding:var(--space-3) var(--space-4); background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:500; color:var(--color-text-primary); cursor:pointer; transition:var(--transition-fast); }
.btn-sso:hover { border-color:var(--color-border-hover); background:var(--color-bg-subtle); }

.auth-steps { display:flex; align-items:center; gap:0; margin-bottom:var(--space-6); }
.auth-step  { display:flex; align-items:center; gap:var(--space-2); }

@media (max-width:900px) {
  .auth-panel  { flex:1; max-width:100%; border-right:none; padding:var(--space-8) var(--space-5); }
  .auth-visual { display:none; }
}


/* ============================================================
   5. LOCK SCREEN
   ============================================================ */
.lock-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1E1C24 0%,#2D2840 100%); padding:var(--space-6); position:relative; overflow:hidden; }
.lock-card  { width:100%; max-width:380px; background:var(--color-bg-surface); border-radius:var(--radius-2xl); box-shadow:0 24px 64px rgba(0,0,0,.4); padding:var(--space-8); position:relative; z-index:1; text-align:center; }
.lock-brand { display:flex; align-items:center; justify-content:center; gap:var(--space-2); margin-bottom:var(--space-6); }
.lock-brand-icon { width:32px; height:32px; border-radius:var(--radius-md); background:var(--brand-primary); display:flex; align-items:center; justify-content:center; }
.lock-brand-name { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--color-text-primary); letter-spacing:-.02em; }
.lock-brand-name span { color:var(--brand-primary); }
.lock-avatar-wrap { position:relative; display:inline-block; margin-bottom:var(--space-4); }
.lock-avatar { width:72px; height:72px; border-radius:50%; background:var(--brand-primary-muted); color:var(--brand-primary); font-family:var(--font-display); font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center; border:3px solid var(--color-bg-surface); box-shadow:0 4px 12px rgba(242,111,38,.2); }
.lock-badge { position:absolute; bottom:0; right:-4px; width:20px; height:20px; background:var(--color-success); border-radius:50%; border:2px solid var(--color-bg-surface); display:flex; align-items:center; justify-content:center; }
.lock-name  { font-family:var(--font-display); font-size:var(--text-xl); font-weight:700; color:var(--color-text-primary); margin-bottom:var(--space-1); }
.lock-email { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-bottom:var(--space-5); }
.lock-time  { font-family:var(--font-display); font-size:40px; font-weight:800; color:var(--color-text-primary); letter-spacing:-.04em; line-height:1; margin-bottom:2px; }
.lock-date-str { font-size:var(--text-sm); color:var(--color-text-tertiary); margin-bottom:var(--space-5); }
.lock-divider  { height:1px; background:var(--color-border); margin:var(--space-5) 0; }
.lock-hint     { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:var(--space-3); }
.lock-switch-link { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:var(--space-4); display:block; }
.lock-switch-link a { color:var(--brand-primary); font-weight:500; }
.lock-actions { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }
.lock-role-badge { display:inline-block; margin-bottom:var(--space-2); }


/* ============================================================
   6. TOPBAR CLASSES (missing from layout.css)
   ============================================================ */
.topbar-breadcrumb { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--color-text-tertiary); }
.topbar-breadcrumb a { color:var(--color-text-tertiary); text-decoration:none; }
.topbar-breadcrumb a:hover { color:var(--color-text-primary); }
.topbar-breadcrumb span { color:var(--color-text-primary); font-weight:500; }
.topbar-breadcrumb svg { width:12px; height:12px; opacity:.4; flex-shrink:0; }

.topbar-search { display:flex; align-items:center; gap:var(--space-2); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:0 var(--space-3); height:36px; min-width:200px; transition:border-color .15s; }
.topbar-search:focus-within { border-color:var(--brand-primary); background:var(--color-bg-surface); }
.topbar-search input { border:none; background:none; outline:none; font-size:var(--text-sm); color:var(--color-text-primary); width:100%; }
.topbar-search input::placeholder { color:var(--color-text-tertiary); }

.topbar-icon-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--color-text-secondary); border-radius:var(--radius-md); cursor:pointer; transition:var(--transition-fast); }
.topbar-icon-btn:hover { background:var(--color-bg-subtle); color:var(--color-text-primary); }

.topbar-user { display:flex; align-items:center; gap:var(--space-2); cursor:pointer; padding:var(--space-1) var(--space-2); border-radius:var(--radius-md); transition:var(--transition-fast); }
.topbar-user:hover { background:var(--color-bg-subtle); }
.topbar-user-name { font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); }

.topbar-actions { display:flex; align-items:center; gap:var(--space-2); }
.topbar-notif-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--color-danger); border:2px solid var(--color-bg-surface); }
.topbar-btn-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; border-radius:8px; background:var(--color-danger); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--color-bg-surface); }

.notif-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--color-danger); border:2px solid var(--color-bg-surface); }


/* ============================================================
   7. SIDEBAR EXTRAS
   ============================================================ */
.sidebar-nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--brand-primary-muted); color:var(--brand-primary); font-size:10px; font-weight:700; margin-left:auto; flex-shrink:0; }
.sidebar-collapse-btn { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-surface); cursor:pointer; color:var(--color-text-tertiary); transition:var(--transition-fast); }
.sidebar-collapse-btn:hover { color:var(--color-text-primary); border-color:var(--color-border-hover); }


/* ============================================================
   8. TABS (new class names not in components.css)
   ============================================================ */
.tabs-line { display:flex; flex-direction:row; align-items:center; gap:0; border-bottom:2px solid var(--color-border); }
.tab-item  { padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:500; color:var(--color-text-tertiary); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; white-space:nowrap; }
.tab-item:hover  { color:var(--color-text-secondary); }
.tab-item.active { color:var(--brand-primary); border-bottom-color:var(--brand-primary); font-weight:600; }
.tab-panel { animation:fade-in .18s ease; }

.device-tabs { display:flex; border-bottom:2px solid var(--color-border); gap:0; }
.device-tab  { padding:var(--space-2) var(--space-4); font-size:var(--text-sm); font-weight:500; color:var(--color-text-tertiary); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s,border-color .15s; }
.device-tab:hover  { color:var(--color-text-secondary); }
.device-tab.active { color:var(--brand-primary); border-bottom-color:var(--brand-primary); font-weight:600; }
.device-tab-pane        { display:none; }
.device-tab-pane.active { display:block; }


/* ============================================================
   9. STAT / KPI
   ============================================================ */
.stat-icon { width:40px; height:40px; border-radius:var(--radius-lg); background:var(--brand-primary-muted); color:var(--brand-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:20px; height:20px; }
.stat-icon.stat-icon-success { background:var(--color-success-bg); color:var(--color-success); }
.stat-icon.stat-icon-warning { background:var(--color-warning-bg); color:var(--color-warning); }
.stat-icon.stat-icon-danger  { background:var(--color-danger-bg);  color:var(--color-danger); }
.stat-icon.stat-icon-info    { background:var(--color-info-bg);    color:var(--color-info); }
.stat-icon.stat-icon-purple  { background:#EDE9FE; color:#7C3AED; }
.stat-value  { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; color:var(--color-text-primary); letter-spacing:-.03em; line-height:1; }
.stat-label  { font-size:var(--text-sm); color:var(--color-text-secondary); margin-top:var(--space-1); }
.stat-delta  { display:inline-flex; align-items:center; gap:3px; font-size:var(--text-xs); font-weight:600; margin-top:var(--space-1); }
.delta-up    { color:var(--color-success); }
.delta-down  { color:var(--color-danger); }
.kpi-trend   { display:inline-flex; align-items:center; gap:3px; font-size:var(--text-xs); font-weight:600; margin-top:var(--space-1); }

.kpi-card    { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-4) var(--space-5); }
.kpi-value   { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:800; color:var(--color-text-primary); letter-spacing:-.03em; line-height:1; }
.kpi-label   { font-size:var(--text-xs); color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.kpi-delta   { display:inline-flex; align-items:center; gap:3px; font-size:var(--text-xs); font-weight:700; padding:2px 7px; border-radius:20px; }
.kpi-delta.up   { background:var(--color-success-bg); color:var(--color-success); }
.kpi-delta.down { background:var(--color-danger-bg);  color:var(--color-danger); }


/* ============================================================
   10. DEVICE PAGE COMPONENTS
   ============================================================ */
.device-monitoring-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-4); }
.incident-list  { display:flex; flex-direction:column; gap:0; }
.incident-item  { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); font-size:var(--text-sm); transition:var(--transition-fast); }
.incident-item:last-child { border-bottom:none; }
.incident-item:hover { background:var(--color-bg-subtle); }

.device-hero       { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); display:flex; align-items:flex-start; gap:var(--space-5); margin-bottom:var(--space-6); flex-wrap:wrap; }
.device-hero-icon  { width:60px; height:60px; border-radius:var(--radius-xl); background:var(--brand-primary-muted); color:var(--brand-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:26px; }
.device-hero-info  { flex:1; min-width:0; }
.device-hero-name  { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; color:var(--color-text-primary); letter-spacing:-.02em; margin-bottom:var(--space-2); }
.device-hero-meta  { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; font-size:var(--text-sm); color:var(--color-text-tertiary); }
.device-hero-actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.device-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.device-stat-card { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); }
.device-stat-icon { width:32px; height:32px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3); font-size:14px; background:var(--color-bg-subtle); color:var(--color-text-secondary); }
.device-stat-value { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; color:var(--color-text-primary); letter-spacing:-.03em; line-height:1; }
.device-stat-label { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }
.detail-row  { display:flex; align-items:flex-start; padding:var(--space-2) 0; border-bottom:1px solid var(--color-border); gap:var(--space-4); font-size:var(--text-sm); }
.detail-row:last-child { border-bottom:none; }
.detail-key  { width:160px; flex-shrink:0; color:var(--color-text-tertiary); font-weight:500; }
.detail-val  { flex:1; color:var(--color-text-primary); font-weight:500; }
.spec-chip   { display:inline-flex; align-items:center; gap:4px; background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:2px 8px; font-size:var(--text-xs); font-family:var(--font-mono); color:var(--color-text-secondary); }


/* ============================================================
   11. MEDIA LIBRARY
   ============================================================ */
.media-check { position:absolute; top:var(--space-2); left:var(--space-2); width:20px; height:20px; border-radius:var(--radius-sm); border:2px solid rgba(255,255,255,.6); background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition-fast); z-index:2; }
.media-check:hover, .media-check.checked { background:var(--brand-primary); border-color:var(--brand-primary); }
.view-toggle     { display:flex; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.view-toggle-btn { padding:var(--space-2) var(--space-3); background:none; border:none; cursor:pointer; color:var(--color-text-tertiary); transition:var(--transition-fast); border-right:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; }
.view-toggle-btn:last-child { border-right:none; }
.view-toggle-btn:hover  { background:var(--color-bg-subtle); color:var(--color-text-primary); }
.view-toggle-btn.active { background:var(--brand-primary-muted); color:var(--brand-primary); }
.view-toggle-btn svg { width:14px; height:14px; }


/* ============================================================
   12. BULK ACTIONS / SEARCH
   ============================================================ */
.bulk-actions-bar { display:none; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); background:var(--brand-primary-muted); border-bottom:1px solid rgba(242,111,38,.2); font-size:var(--text-sm); animation:fade-in .15s ease; }
.bulk-actions-bar.visible { display:flex; }
.search-bar   { display:flex; align-items:center; gap:var(--space-2); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:0 var(--space-3); height:36px; min-width:220px; }
.search-bar:focus-within { border-color:var(--brand-primary); }
.search-bar input { border:none; background:none; outline:none; font-size:var(--text-sm); color:var(--color-text-primary); width:100%; }
.search-bar input::placeholder { color:var(--color-text-tertiary); }
.search-box { display:flex; align-items:center; gap:var(--space-2); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:0 var(--space-3); height:36px; transition:border-color .15s; }
.search-box:focus-within { border-color:var(--brand-primary); background:var(--color-bg-surface); }
.search-input { border:none; background:none; outline:none; font-size:var(--text-sm); color:var(--color-text-primary); width:100%; min-width:160px; }
.search-input::placeholder { color:var(--color-text-tertiary); }


/* ============================================================
   13. PAGINATION (new class names)
   ============================================================ */
.pagination-controls { display:flex; align-items:center; gap:var(--space-1); }
.pagination-ellipsis { padding:0 var(--space-2); color:var(--color-text-tertiary); font-size:var(--text-sm); }
.pagination-info { font-size:var(--text-sm); color:var(--color-text-tertiary); }


/* ============================================================
   14. SETTINGS PAGE
   ============================================================ */
.settings-layout { display:grid; grid-template-columns:220px 1fr; gap:var(--space-5); }
.settings-nav    { display:flex; flex-direction:column; gap:2px; }
.settings-nav-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--radius-lg); font-size:13px; font-weight:500; color:var(--color-text-secondary); cursor:pointer; transition:background var(--transition-fast),color var(--transition-fast); text-decoration:none; border:none; background:none; width:100%; text-align:left; }
.settings-nav-item:hover  { background:var(--color-bg-subtle); color:var(--color-text-primary); }
.settings-nav-item.active { background:var(--brand-primary-muted); color:var(--brand-primary); font-weight:600; }
.settings-nav-item svg { flex-shrink:0; }
.settings-nav-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-tertiary); padding:var(--space-3) var(--space-3) var(--space-1); margin-top:var(--space-2); }
.settings-panel { display:none; }
.settings-panel.active { display:block; }
.settings-section { margin-bottom:var(--space-6); }
.settings-section-title { font-size:14px; font-weight:700; margin-bottom:var(--space-1); color:var(--color-text-primary); }
.settings-section-desc  { font-size:13px; color:var(--color-text-secondary); margin-bottom:var(--space-4); line-height:1.6; }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); gap:var(--space-4); }
.setting-row:last-child { border-bottom:none; }
.setting-label-title { font-size:14px; font-weight:600; margin-bottom:3px; color:var(--color-text-primary); }
.setting-label-desc  { font-size:12px; color:var(--color-text-tertiary); line-height:1.5; }
.setting-control { flex-shrink:0; }
.api-key-row { display:flex; align-items:center; gap:var(--space-2); }
.api-key-input { font-family:var(--font-mono); font-size:12px; background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:6px 12px; flex:1; color:var(--color-text-secondary); }
.plan-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:var(--radius-full); font-size:12px; font-weight:700; background:#EDE9FE; color:#7C3AED; }
.danger-zone { background:var(--color-danger-bg); border:1px solid rgba(239,68,68,.2); border-radius:var(--radius-xl); padding:var(--space-5); }
.danger-zone-title { font-size:14px; font-weight:700; color:var(--color-danger); margin-bottom:var(--space-1); }
.danger-zone-desc  { font-size:13px; color:var(--color-text-secondary); margin-bottom:var(--space-4); }
.webhook-row { background:var(--color-bg-subtle); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-2); display:flex; align-items:center; gap:var(--space-3); }
.webhook-url { font-family:var(--font-mono); font-size:12px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notification-channel { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-bg-subtle); border-radius:var(--radius-lg); margin-bottom:var(--space-2); }
@media (max-width:768px) { .settings-layout { grid-template-columns:1fr; } }


/* ============================================================
   15. AUDIT LOGS
   ============================================================ */
.log-filter { padding:var(--space-1) var(--space-3); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:20px; font-size:var(--text-xs); font-weight:500; color:var(--color-text-secondary); cursor:pointer; transition:var(--transition-fast); }
.log-filter:hover  { border-color:var(--color-border-hover); color:var(--color-text-primary); }
.log-filter.active { background:var(--brand-primary-muted); border-color:var(--brand-primary); color:var(--brand-primary); }
.audit-filters { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
.audit-stats  { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); margin-bottom:var(--space-6); }
.audit-stat-card  { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5); display:flex; align-items:flex-start; gap:var(--space-3); }
.audit-stat-icon  { width:36px; height:36px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.audit-stat-value { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; color:var(--color-text-primary); letter-spacing:-.03em; line-height:1; }
.audit-stat-label { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:2px; }
.log-action      { font-size:var(--text-sm); color:var(--color-text-secondary); }
.log-actor-name  { font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); }
.log-actor-role  { font-size:var(--text-xs); color:var(--color-text-tertiary); }
.log-event-type  { font-size:var(--text-xs); font-weight:700; }
.log-pagination  { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-5); border-top:1px solid var(--color-border); font-size:var(--text-sm); color:var(--color-text-tertiary); background:var(--color-bg-subtle); }
.filter-group    { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.page-info       { font-size:var(--text-sm); color:var(--color-text-tertiary); }


/* ============================================================
   16. ORGANIZATIONS
   ============================================================ */
.org-list-row    { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); transition:var(--transition-fast); }
.org-list-row:hover { background:var(--color-bg-subtle); }
.org-list-header { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-2) var(--space-5); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-tertiary); background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border); }
.org-list-org    { display:flex; align-items:center; gap:var(--space-3); min-width:0; }
.org-logo-sm     { width:36px; height:36px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; color:#fff; }
.logo-blue  { background:#3B82F6; } .logo-green  { background:#10B981; }
.logo-purple{ background:#7C3AED; } .logo-pink   { background:#EC4899; }
.logo-teal  { background:#14B8A6; }
.org-domain  { font-size:var(--text-xs); color:var(--color-text-tertiary); font-family:var(--font-mono); }
.health-bar  { width:80px; height:4px; background:var(--color-border); border-radius:2px; overflow:hidden; }
.health-bar-fill { height:100%; border-radius:2px; background:var(--color-success); transition:width .3s ease; }
.notif-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:9px; background:var(--color-danger); color:#fff; font-size:10px; font-weight:700; padding:0 5px; }
.plan-starter    { background:var(--color-bg-subtle);  color:var(--color-text-secondary); }
.plan-business   { background:var(--brand-primary-muted); color:var(--brand-primary); }
.plan-enterprise { background:#EDE9FE; color:#7C3AED; }
.plan-trial      { background:#FEF3C7; color:#D97706; }
.form-label-required::after { content:' *'; color:var(--color-danger); }


/* ============================================================
   17. ROLES / PERMISSIONS MATRIX
   ============================================================ */
.roles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-5); margin-bottom:var(--space-8); }
.role-card  { background:var(--color-bg-surface); border:2px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); cursor:pointer; transition:all .2s; }
.role-card:hover  { border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-muted); }
.role-card.active { border-color:var(--brand-primary); background:var(--brand-primary-muted); }
.role-card-header { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.role-icon  { width:44px; height:44px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.role-icon.superadmin { background:#fef3c7; color:#d97706; }
.role-icon.admin { background:#ede9fe; color:#7c3aed; }
.role-icon.user  { background:#d1fae5; color:#059669; }
.role-icon.viewer{ background:#dbeafe; color:#2563eb; }
.role-card-title { font-weight:700; font-size:1rem; color:var(--color-text-primary); }
.role-card-desc  { font-size:.8rem; color:var(--color-text-tertiary); margin-top:2px; }
.role-stat       { display:flex; gap:var(--space-4); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-border); }
.role-stat-item  { text-align:center; }
.role-stat-item strong { display:block; font-size:1.2rem; font-weight:700; color:var(--color-text-primary); }
.role-stat-item span   { font-size:.7rem; color:var(--color-text-tertiary); text-transform:uppercase; letter-spacing:.04em; }
.perm-matrix  { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; }
.perm-matrix-toolbar { display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border); flex-wrap:wrap; gap:var(--space-3); }
.perm-matrix-title { font-weight:700; font-size:var(--text-base); color:var(--color-text-primary); }
.perm-table-wrap { overflow-x:auto; }
.perm-table { width:100%; border-collapse:collapse; min-width:700px; }
.perm-table thead th { padding:var(--space-3) var(--space-4); font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-tertiary); background:var(--color-bg-subtle); text-align:center; white-space:nowrap; }
.perm-table thead th:first-child { text-align:left; min-width:220px; position:sticky; left:0; background:var(--color-bg-subtle); z-index:2; }
.perm-table tbody tr { border-bottom:1px solid var(--color-border); }
.perm-table tbody tr:last-child { border-bottom:none; }
.perm-table tbody tr:hover { background:var(--color-bg-subtle); }
.perm-table tbody td { padding:var(--space-3) var(--space-4); text-align:center; vertical-align:middle; }
.perm-table tbody td:first-child { text-align:left; position:sticky; left:0; background:var(--color-bg-surface); z-index:1; }
.perm-table tbody tr:hover td:first-child { background:var(--color-bg-subtle); }
.perm-section-header td { background:var(--color-bg-subtle) !important; font-weight:700; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-tertiary); padding:var(--space-2) var(--space-4) !important; }
.perm-label { font-size:var(--text-sm); font-weight:500; color:var(--color-text-primary); }
.perm-label small { display:block; font-size:var(--text-xs); color:var(--color-text-tertiary); font-weight:400; }
.perm-check { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; }
.perm-check.yes { background:rgba(16,185,129,.12); color:#059669; }
.perm-check.no  { background:var(--color-bg-subtle); color:var(--color-text-tertiary); }
.perm-role-header { display:flex; flex-direction:column; align-items:center; gap:4px; }
.legend { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--color-text-secondary); }
.legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }


/* ============================================================
   18. LAYOUT EDITOR (playlists/layouts.html)
   ============================================================ */
.layouts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4); }
.layout-card  { background:var(--color-bg-surface); border:2px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:var(--transition-fast); }
.layout-card:hover    { border-color:var(--color-border-hover); box-shadow:var(--shadow-sm); }
.layout-card.is-selected { border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-muted); }
.layout-preview { aspect-ratio:16/9; background:#111; position:relative; overflow:hidden; }
.layout-screen  { position:absolute; inset:8px; background:#1a1a2e; border-radius:3px; overflow:hidden; }
.layout-name { font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); }
.layout-desc { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:2px; }
.layout-meta { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:var(--space-2); }
.layout-footer { padding:var(--space-3); border-top:1px solid var(--color-border); background:var(--color-bg-subtle); display:flex; align-items:center; justify-content:space-between; }
.layout-badge { display:inline-flex; align-items:center; padding:1px 7px; border-radius:20px; font-size:10px; font-weight:700; background:var(--color-bg-subtle); color:var(--color-text-secondary); border:1px solid var(--color-border); }
.is-selected  { border-color:var(--brand-primary) !important; }

/* Zone layout classes */
.lz { position:absolute; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:rgba(255,255,255,.7); overflow:hidden; }
.lz-main   { background:rgba(242,111,38,.5); }
.lz-side   { background:rgba(59,130,246,.5); }
.lz-ticker { background:rgba(16,185,129,.5); }
.lz-corner { background:rgba(124,58,237,.5); }
.ls-fullscreen .lz-main { inset:0; }
.ls-sidepanel .lz-main  { top:0; left:0; right:30%; bottom:0; }
.ls-sidepanel .lz-side  { top:0; left:70%; right:0; bottom:0; }
.ls-quad .lz:nth-child(1){ top:0;left:0;width:50%;height:50%; }
.ls-quad .lz:nth-child(2){ top:0;left:50%;width:50%;height:50%; }
.ls-quad .lz:nth-child(3){ top:50%;left:0;width:50%;height:50%; }
.ls-quad .lz:nth-child(4){ top:50%;left:50%;width:50%;height:50%; }
.ls-ticker .lz-main   { top:0;left:0;right:0;height:88%; }
.ls-ticker .lz-ticker { bottom:0;left:0;right:0;height:12%; }
.ls-pip .lz-main      { inset:0; }
.ls-pip .lz-corner    { bottom:8px;right:8px;width:30%;height:28%; border-radius:3px; }

/* Editor panels */
.editor-canvas-wrap { position:relative; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; background:#0f0f0f; }
.editor-canvas { display:block; width:100%; aspect-ratio:16/9; background:#111; position:relative; }
.editor-zone   { position:absolute; border:2px solid rgba(242,111,38,.7); background:rgba(242,111,38,.08); cursor:move; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:11px; color:rgba(255,255,255,.8); font-weight:600; transition:border-color .15s; }
.editor-zone:hover, .editor-zone.selected { border-color:var(--brand-primary); background:rgba(242,111,38,.18); }
.editor-sidebar { width:260px; flex-shrink:0; border-left:1px solid var(--color-border); background:var(--color-bg-surface); display:flex; flex-direction:column; }
.editor-sidebar-tabs { display:flex; border-bottom:1px solid var(--color-border); }
.editor-stab  { flex:1; padding:var(--space-2) var(--space-3); font-size:var(--text-xs); font-weight:600; text-align:center; cursor:pointer; color:var(--color-text-tertiary); background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--transition-fast); }
.editor-stab:hover  { color:var(--color-text-secondary); }
.editor-stab.active { color:var(--brand-primary); border-bottom-color:var(--brand-primary); }
.editor-props { flex:1; overflow-y:auto; padding:var(--space-4); }
.editor-prop-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-disabled); margin-bottom:var(--space-2); }
.editor-prop-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-2); font-size:var(--text-sm); }
.editor-input-mini { width:72px; padding:var(--space-1) var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:var(--text-xs); text-align:center; background:var(--color-bg-subtle); color:var(--color-text-primary); outline:none; }
.editor-input-mini:focus { border-color:var(--brand-primary); }
.editor-toolbar { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--color-border); background:var(--color-bg-subtle); }
.editor-toolbar-title { font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); flex:1; }
.editor-panel { display:flex; flex:1; overflow:hidden; }
.editor-stage { flex:1; padding:var(--space-5); background:var(--color-bg-secondary); display:flex; flex-direction:column; gap:var(--space-4); overflow:auto; }
.zones-list { display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3); }
.zone-list-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--color-bg-subtle); border:1px solid var(--color-border); font-size:var(--text-sm); cursor:pointer; transition:var(--transition-fast); }
.zone-list-item:hover, .zone-list-item.selected { border-color:var(--brand-primary); background:var(--brand-primary-muted); }
.zone-list-dot  { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.zone-list-name { flex:1; font-weight:500; color:var(--color-text-primary); }
.zone-list-btn  { width:24px; height:24px; border:none; background:none; cursor:pointer; color:var(--color-text-tertiary); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; transition:var(--transition-fast); font-size:12px; }
.zone-list-btn:hover { background:var(--color-border); color:var(--color-text-primary); }
.zone-chip      { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; background:var(--color-bg-subtle); border:1px solid var(--color-border); font-size:11px; font-weight:500; color:var(--color-text-secondary); }
.zone-chip-dot  { width:8px; height:8px; border-radius:50%; background:var(--brand-primary); flex-shrink:0; }
.res-pills { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
.res-pill  { padding:3px 10px; border-radius:20px; border:1px solid var(--color-border); font-size:var(--text-xs); font-weight:500; color:var(--color-text-secondary); background:var(--color-bg-subtle); cursor:pointer; transition:var(--transition-fast); }
.res-pill:hover  { border-color:var(--brand-primary); color:var(--brand-primary); }
.res-pill.active { background:var(--brand-primary-muted); border-color:var(--brand-primary); color:var(--brand-primary); font-weight:600; }


/* ============================================================
   19. CALENDAR (fixes wrong token names in inline style)
   The inline style uses --bg-primary, --border-primary etc.
   The :root aliases above handle those.
   Additional calendar-specific corrections:
   ============================================================ */
.calendar-wrap { background:var(--color-bg-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day-header { padding:var(--space-2) var(--space-3); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-tertiary); text-align:center; border-bottom:1px solid var(--color-border); background:var(--color-bg-subtle); }
.cal-day { min-height:110px; padding:var(--space-2); border-right:1px solid var(--color-border); border-bottom:1px solid var(--color-border); position:relative; vertical-align:top; transition:background .15s; cursor:pointer; }
.cal-day:hover { background:var(--color-bg-subtle); }
.cal-day:nth-child(7n){ border-right:none; }
.cal-day.other-month  { opacity:.45; }
.cal-day.today        { background:rgba(242,111,38,.04); }
.cal-day-num { font-size:.8rem; font-weight:700; color:var(--color-text-secondary); margin-bottom:var(--space-1); display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:50%; }
.cal-day.today .cal-day-num { background:var(--brand-primary); color:#fff; }
.cal-event { display:block; padding:2px 6px; border-radius:var(--radius-sm); font-size:.7rem; font-weight:600; margin-bottom:2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity .15s; }
.cal-event:hover { opacity:.8; }
.cal-event.ev-primary { background:rgba(242,111,38,.15); color:var(--brand-primary); border-left:3px solid var(--brand-primary); }
.cal-event.ev-success { background:rgba(16,185,129,.15); color:var(--color-success); border-left:3px solid var(--color-success); }
.cal-event.ev-purple  { background:rgba(139,92,246,.15); color:#8b5cf6; border-left:3px solid #8b5cf6; }
.cal-event.ev-blue    { background:rgba(59,130,246,.15); color:#3b82f6; border-left:3px solid #3b82f6; }
.cal-event.ev-warning { background:rgba(234,179,8,.15); color:var(--color-warning); border-left:3px solid var(--color-warning); }
.cal-more { font-size:.65rem; color:var(--color-text-tertiary); font-weight:600; cursor:pointer; padding:1px 4px; }
.cal-more:hover { color:var(--brand-primary); }
.cal-nav-btn { width:32px; height:32px; border-radius:var(--radius-md); border:1px solid var(--color-border); background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--color-text-secondary); transition:all .15s; }
.cal-nav-btn:hover { background:var(--color-bg-subtle); color:var(--color-text-primary); }
.cal-view-tab { padding:5px 12px; font-size:.8rem; font-weight:600; border-radius:var(--radius-md); cursor:pointer; border:none; background:none; color:var(--color-text-secondary); transition:all .15s; }
.cal-view-tab.active { background:var(--color-bg-surface); color:var(--color-text-primary); box-shadow:var(--shadow-sm); }
.upcoming-item { display:flex; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--color-border); }
.upcoming-item:last-child { border-bottom:none; }
.upcoming-date-col { text-align:center; min-width:40px; }
.upcoming-day   { font-size:1.4rem; font-weight:900; font-family:var(--font-mono); color:var(--color-text-primary); line-height:1; }
.upcoming-month { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-tertiary); font-weight:700; }
.upcoming-name  { font-size:.85rem; font-weight:700; color:var(--color-text-primary); margin-bottom:2px; }
.upcoming-meta  { font-size:.72rem; color:var(--color-text-tertiary); }
.upcoming-dot   { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:5px; }


/* ============================================================
   20. UI KIT SPECIFIC
   ============================================================ */
.uikit-body    { display:flex; min-height:100vh; }
.uikit-nav     { width:220px; flex-shrink:0; border-right:1px solid var(--color-border); background:var(--color-bg-surface); padding:var(--space-5) 0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.uikit-nav-label { padding:var(--space-2) var(--space-4); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-disabled); }
.uikit-nav-link  { display:block; padding:var(--space-2) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); text-decoration:none; transition:var(--transition-fast); border-left:2px solid transparent; }
.uikit-nav-link:hover  { color:var(--color-text-primary); background:var(--color-bg-subtle); }
.uikit-nav-link.active { color:var(--brand-primary); background:var(--brand-primary-muted); border-left-color:var(--brand-primary); font-weight:600; }
.uikit-content { flex:1; overflow-y:auto; padding:var(--space-8); }
.uikit-section { margin-bottom:var(--space-12); padding-bottom:var(--space-12); border-bottom:1px solid var(--color-border); }
.uikit-section:last-child { border-bottom:none; }
.uikit-section-title { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:800; color:var(--color-text-primary); letter-spacing:-.02em; margin-bottom:var(--space-2); }
.uikit-section-desc  { font-size:var(--text-sm); color:var(--color-text-secondary); margin-bottom:var(--space-6); line-height:1.6; }
.demo-block   { background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-4); }
.demo-preview { padding:var(--space-8); background:var(--color-bg-primary); display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--space-3); }
.demo-label   { padding:var(--space-2) var(--space-4); background:var(--color-bg-subtle); border-top:1px solid var(--color-border); font-size:var(--text-xs); color:var(--color-text-tertiary); font-family:var(--font-mono); }
.variant-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--space-3); }
.acc-body { padding:0 var(--space-4) var(--space-4); font-size:var(--text-sm); color:var(--color-text-secondary); line-height:1.65; border-top:1px solid var(--color-border); padding-top:var(--space-3); }
.skeleton-line { height:14px; border-radius:var(--radius-sm); background:linear-gradient(90deg,var(--color-bg-subtle) 25%,var(--color-border) 50%,var(--color-bg-subtle) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; margin-bottom:var(--space-2); }
@keyframes skeleton-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
.tooltip-wrap { position:relative; display:inline-flex; align-items:center; }
.tooltip-box  { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#1E1C24; color:#fff; font-size:11px; font-weight:500; padding:4px 10px; border-radius:var(--radius-sm); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; z-index:100; }
.tooltip-wrap:hover .tooltip-box { opacity:1; }
.tl-item { display:flex; gap:var(--space-3); position:relative; }
.tl-dot-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.tl-dot  { width:12px; height:12px; border-radius:50%; background:var(--brand-primary); border:2px solid var(--color-bg-surface); box-shadow:0 0 0 2px var(--brand-primary-muted); flex-shrink:0; margin-top:3px; }
.tl-line { width:2px; flex:1; background:var(--color-border); margin-top:4px; min-height:20px; }
.tl-body { flex:1; padding-bottom:var(--space-5); }
.tl-title { font-size:var(--text-sm); font-weight:600; color:var(--color-text-primary); margin-bottom:2px; }
.tl-desc  { font-size:var(--text-xs); color:var(--color-text-secondary); line-height:1.5; }
.tl-time  { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:3px; }
.timeline-meta { font-size:var(--text-xs); color:var(--color-text-tertiary); margin-top:3px; }
.stepper-wrap { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-6); }
.step-dot  { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; background:var(--color-bg-subtle); color:var(--color-text-tertiary); border:2px solid var(--color-border); transition:var(--transition-fast); }
.step-dot.active { background:var(--brand-primary); color:#fff; border-color:var(--brand-primary); }
.step-dot.done   { background:var(--color-success); color:#fff; border-color:var(--color-success); }
.step-line { flex:1; height:2px; background:var(--color-border); border-radius:1px; }
.step-line.done { background:var(--color-success); }


/* ============================================================
   21. MISC / SHARED
   ============================================================ */
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-dot-online  { background:var(--color-success); box-shadow:0 0 0 2px rgba(16,185,129,.15); }
.status-dot-offline { background:var(--color-danger);  box-shadow:0 0 0 2px rgba(239,68,68,.15); }
.status-dot-idle    { background:var(--color-warning); box-shadow:0 0 0 2px rgba(245,158,11,.15); }
.badge-secondary    { background:var(--color-bg-subtle); color:var(--color-text-secondary); border:1px solid var(--color-border); }
.badge-xs           { padding:1px 5px; font-size:9px; border-radius:4px; }
.btn-warning        { background:var(--color-warning); color:#fff; border:none; }
.btn-warning:hover  { background:#d97706; }
.btn-spinner        { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; flex-shrink:0; }
.main-wrapper { display:flex; flex:1; min-height:0; overflow:hidden; }
.main-content { flex:1; overflow-y:auto; padding:var(--space-6) var(--space-8); }
.page-header-content { display:block; min-width:0; flex:1; }
.page-actions { display:flex; align-items:center; gap:var(--space-2); }
.section-desc { font-size:var(--text-sm); color:var(--color-text-secondary); margin-bottom:var(--space-4); line-height:1.6; }
.responsive-note { display:none; font-size:var(--text-xs); color:var(--color-text-tertiary); background:var(--color-bg-subtle); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); margin-bottom:var(--space-4); }
@media(max-width:768px){ .responsive-note{ display:block; } .form-grid-2{ grid-template-columns:1fr; } .main-content{ padding:var(--space-4); } }
.hide-mobile { }
@media(max-width:768px){ .hide-mobile{ display:none !important; } }
@keyframes sf-fade-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.sf-fade-in { animation:sf-fade-in .2s ease forwards; }
.bronze { color:#CD7F32; } .silver { color:#A8A9AD; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:992px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }


/* ============================================================
   TOPBAR SVG SIZE FIXES — prevents giant search icons
   ============================================================ */

/* Constrain ALL SVGs inside topbar to reasonable sizes */
.topbar svg,
.topbar-search svg,
.topbar-icon-btn svg,
.topbar-actions svg,
.topbar-btn svg,
.topbar-left svg,
.topbar-right svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Menu button (hamburger) can be slightly bigger */
.topbar-menu-btn svg,
.topbar-mobile-toggle svg {
  width: 20px;
  height: 20px;
}

/* Search icon specifically smaller */
.topbar-search svg {
  width: 15px;
  height: 15px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* Breadcrumb separator arrow */
.topbar-breadcrumb svg {
  width: 12px;
  height: 12px;
  opacity: 0.4;
}

/* Dropdown chevron */
.topbar-avatar svg,
.topbar-user svg {
  width: 12px;
  height: 12px;
}

/* Settings panel improvements */
.settings-section + .settings-section {
  margin-top: var(--space-2);
}

/* Calendar grid must be visible */
.cal-shell {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 1024px) {
  .cal-shell { grid-template-columns: 1fr; }
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cal-title {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-text-primary);
}
.cal-view-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-subtle);
  padding: 3px;
  border-radius: var(--radius-lg);
}

/* Campaign table column widths */
.campaigns-table th:nth-child(1) { width: 32px; }
.campaigns-table th:nth-child(2) { min-width: 200px; }
.campaigns-table th:nth-child(3) { width: 90px; }
.campaigns-table th:nth-child(4) { min-width: 140px; }
.campaigns-table th:nth-child(5) { width: 80px; }
.campaigns-table th:nth-child(6) { width: 110px; }
.campaigns-table th:nth-child(7) { width: 110px; }
.campaigns-table th:nth-child(8) { width: 80px; }
.campaigns-table td { white-space: nowrap; }
.campaigns-table td:nth-child(2) { white-space: normal; }


/* ============================================================
   SETTINGS PAGE — fix .settings-section inside .card-body
   pages.css treats it as a standalone card, but settings.html
   uses it as a sub-section divider inside an existing card.
   ============================================================ */
.card-body .settings-section {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-6);
}
.card-body .settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.card-body .settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}
.card-body .settings-section-desc {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}


/* ============================================================
   SUPPLEMENTAL — missing utility and typography classes
   ============================================================ */

/* page-subtitle — text below page-title in page-header */
.page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: 1.5;
}

/* Bootstrap-compat flex utilities */
.d-flex  { display: flex !important; }
.gap-2   { gap: var(--space-2) !important; }
.gap-3   { gap: var(--space-3) !important; }
.gap-4   { gap: var(--space-4) !important; }
.flex-1  { flex: 1 !important; }

/* zone-label / zone-handle — used in layout editor zones */
.zone-label  { font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.7); pointer-events:none; }
.zone-handle { position:absolute; bottom:2px; right:2px; width:8px; height:8px; border-right:2px solid rgba(255,255,255,.4); border-bottom:2px solid rgba(255,255,255,.4); }

/* editor-panel-pane — used by data-editor-tab switching */
.editor-panel-pane { display:none; }
.editor-panel-pane.active { display:block; }

/* layout-card missing state style */
.layout-card.active { border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-muted); }