/* KIOSK canonical theme — generated into one runtime owner. */
/* KIOSK: semantic tokens; independent from the neutral theme. */
:root{color-scheme:light;--bg:#f5f6fa;--surface:#fff;--surface-soft:#f8f9fc;--text:#172033;--muted:#66738a;--border:#e1e6ef;--accent:#e87722;--primary:#ad4b0c;--accent-soft:#fff1e6;--success:#087e65;--success-soft:#e8f7f2;--danger:#b83240;--danger-soft:#fff0f1;--warning:#94610b;--radius:16px;--shadow:0 8px 28px #1d2b4610;--sidebar:220px;--focus:#9b4209;--panel:var(--surface);--card:var(--surface);--line:var(--border);--brand:var(--accent);--input-bg:var(--surface);--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#111827;--surface:#1b2435;--surface-soft:#202b3e;--text:#edf1f8;--muted:#b1bdd1;--border:#354157;--accent:#f39751;--primary:#f6a565;--accent-soft:#3c2c22;--success:#73d5b8;--success-soft:#173c35;--danger:#ffa4ad;--danger-soft:#412a35;--warning:#f3ce83;--focus:#ffc18d;--shadow:0 8px 28px #0002}
*{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html.foundation-busy,html.foundation-busy body{overflow:hidden!important}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--font)}a{color:var(--primary);text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}.foundation-loader[hidden]{display:none!important}:focus-visible{outline:3px solid var(--focus);outline-offset:4px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(26px,2.7vw,36px);line-height:1.18;letter-spacing:-.035em;margin-bottom:12px}h2{font-size:19px;line-height:1.35;margin-bottom:8px}h3{font-size:16px;line-height:1.4;margin-bottom:8px}small{font-size:12px}.muted,small{color:var(--muted)}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-soft);padding:16px;border-radius:12px;max-height:420px;overflow:auto}.fingerprint,.version-path{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.eyebrow{display:block;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}.admin-shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar);position:fixed;inset-block:0;inset-inline-start:0;display:flex;flex-direction:column;background:var(--surface);border-inline-end:1px solid var(--border);padding:28px 16px 20px;z-index:30;overflow:auto}.brand{display:flex;align-items:center;gap:11px;color:var(--text);font-size:23px;font-weight:800;letter-spacing:.035em;margin:0 10px 40px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#231609;font-size:22px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;color:var(--muted);padding:11px 14px;border-radius:10px;font-weight:600;min-height:44px}.sidebar nav a:hover{background:var(--surface-soft);color:var(--text)}.sidebar nav a.active{background:var(--accent-soft);color:var(--primary);box-shadow:inset 3px 0 var(--accent)}[dir=rtl] .sidebar nav a.active{box-shadow:inset -3px 0 var(--accent)}.sidebar-foot{display:grid;gap:4px;margin-top:auto;padding:32px 14px 0}.main{margin-inline-start:var(--sidebar);min-width:0;width:calc(100% - var(--sidebar))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;background:var(--surface);border-bottom:1px solid var(--border);min-height:72px}.topbar strong{font-size:13px}.top-actions,.actions,.form-actions,.card-head,.page-head{display:flex;align-items:center;gap:12px}.top-actions{margin-inline-start:auto}.page-head{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.page-head p{color:var(--muted);max-width:680px;margin-bottom:0}.page-head>.actions{flex-wrap:wrap;justify-content:flex-end;max-width:360px}.content{padding:34px 32px 48px;max-width:1920px;margin:auto}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:22px}.card-head{justify-content:space-between;align-items:flex-start;margin-bottom:18px}.card-head p{color:var(--muted);margin-bottom:0}.btn,.icon-button,.user-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:11px 17px;min-height:44px;font-weight:650;text-align:center;line-height:1.3}.btn:hover,.icon-button:hover{background:var(--surface-soft)}.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}[data-theme=dark] .btn.primary{color:#211509}.btn.primary:hover{filter:brightness(.95)}.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}.btn.compact{padding:8px 12px;font-size:12px;min-height:36px}.icon-button{padding:10px;min-width:44px}.mobile-menu{display:none}.menu-wrap{position:relative}.dropdown{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:190px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);z-index:40}.dropdown a,.dropdown button{display:block;width:100%;text-align:start;padding:10px;background:none;border:0;color:var(--text)}.language-select{width:auto;max-width:120px}.user-chip{font-size:12px;max-width:240px;overflow-wrap:anywhere}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}label{display:grid;gap:7px;font-weight:600}input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{width:100%;min-height:44px;border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--surface);color:var(--text)}textarea{min-height:110px;resize:vertical}input[type=checkbox],input[type=radio]{appearance:none;display:inline-grid;place-items:center;vertical-align:middle;width:20px;height:20px;margin:0 7px 0 0;border:1.5px solid var(--muted);border-radius:5px;background:var(--surface);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--primary);border-color:var(--primary)}input[type=checkbox]:checked:after{content:'✓';color:var(--surface);font-size:14px}input[type=radio]:checked:after{content:'';width:8px;height:8px;border-radius:50%;background:var(--surface)}label:has(input[type=checkbox]),label:has(input[type=radio]){display:flex;align-items:center;flex-wrap:wrap}input:invalid:not(:placeholder-shown):focus{border-color:var(--danger)}.form-actions{margin-top:24px;flex-wrap:wrap}.upload-layout{display:flex;gap:20px;align-items:center}.kiosk-dropzone{position:relative;display:flex;align-items:center;gap:16px;flex:1;min-width:0;border:1.5px dashed var(--border);border-radius:12px;background:var(--surface-soft);padding:20px;cursor:pointer}.kiosk-dropzone>span:last-of-type{display:grid;gap:4px;overflow-wrap:anywhere}.kiosk-dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.kiosk-dropzone:focus-within,.kiosk-dropzone.dragover{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--accent)}.upload-mark{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--primary);font-size:24px}.deployment-board{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));align-items:start;gap:20px;margin-bottom:20px}.deployment-lane{min-width:0;background:var(--surface-soft);border:1px solid var(--border);border-radius:20px;overflow:hidden;min-height:350px}.deployment-lane>header{display:flex;gap:12px;align-items:center;padding:22px 18px;background:var(--surface);border-bottom:1px solid var(--border);min-height:94px}.deployment-lane h2{font-size:17px;margin:0}.lane-symbol{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:var(--accent-soft);color:var(--primary);font-size:25px}.lane-success .lane-symbol{background:var(--success-soft);color:var(--success)}.lane-errors .lane-symbol{background:var(--danger-soft);color:var(--danger)}.count{display:grid;place-items:center;margin-inline-start:auto;background:var(--surface-soft);border-radius:50%;min-width:32px;height:32px;font-weight:700}.lane-content{padding:16px}.deployment-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:22px;margin-bottom:14px;min-width:0}.deployment-card:last-child{margin-bottom:0}.lane-pending .deployment-card{box-shadow:var(--shadow)}.deployment-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.deployment-card-head h3{overflow-wrap:anywhere}.status{display:inline-flex;align-items:center;gap:5px;background:var(--surface-soft);color:var(--muted);border-radius:20px;padding:5px 9px;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.status.approved,.status.installed,.status.validated{background:var(--success-soft);color:var(--success)}.status.failed,.status.recovery_required{background:var(--danger-soft);color:var(--danger)}.version-path{color:var(--muted);margin-bottom:20px}.deployment-stages{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;margin:24px 0;gap:4px}.deployment-stages li{position:relative;text-align:center;font-size:11px;color:var(--muted);overflow-wrap:anywhere}.deployment-stages li:before{content:'';position:absolute;height:2px;top:19px;inset-inline-start:50%;width:100%;background:var(--border)}.deployment-stages li:last-child:before{display:none}.deployment-stages span{position:relative;display:grid;place-items:center;width:40px;height:40px;margin:0 auto 10px;border:2px solid var(--border);border-radius:50%;background:var(--surface);font-size:18px;z-index:1}.deployment-stages .done span{border-color:var(--success);background:var(--success);color:var(--surface)}.deployment-stages .done:before{background:var(--success)}.deployment-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin:20px 0 15px;padding-top:18px;border-top:1px solid var(--border)}.deployment-actions:empty{display:none}.deployment-actions form{margin:0}.deployment-actions .btn{font-size:12px}.empty-state{display:grid;place-items:center;text-align:center;color:var(--muted);padding:64px 15px}.error-detail{color:var(--danger);overflow-wrap:anywhere}.notice.success{border-inline-start:4px solid var(--success)}.notice.error{border-inline-start:4px solid var(--danger)}details>summary{cursor:pointer;font-weight:650;min-height:28px}details[open]>summary{margin-bottom:20px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:start;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-soft)}th,td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:top}td small{display:block;margin-top:3px}.list-toolbar,.list-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}.list-toolbar input[type=search]{max-width:360px}.list-footer{justify-content:flex-end}.confirmation-card{max-width:760px;margin-inline:auto}.confirmation-card dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px}.confirmation-card dt{color:var(--muted)}.confirmation-card dd{margin:0;overflow-wrap:anywhere}.dialog-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:#10182888;z-index:100}.dialog-card{width:min(560px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:var(--shadow)}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}.foundation-loader{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:#10182866;backdrop-filter:blur(4px)}.loader-card{display:grid;gap:14px;width:min(360px,90vw);border-radius:20px;padding:30px;background:var(--surface);box-shadow:var(--shadow)}.loader-mark{display:flex;gap:6px}.loader-mark span{width:9px;height:9px;background:var(--accent);border-radius:50%;animation:kiosk-pulse 1.1s infinite alternate}.loader-mark span:nth-child(2){animation-delay:.2s}.loader-mark span:nth-child(3){animation-delay:.4s}.loader-progress{height:4px;border-radius:4px;background:var(--border);overflow:hidden}.loader-progress i{display:block;height:100%;background:var(--accent)}.auth-page{display:grid;place-items:center;min-height:100dvh;padding:70px 24px 24px}.auth-language{position:absolute;inset-block-start:20px;inset-inline-end:24px}.auth-shell{display:grid;place-items:center;min-height:100dvh;padding:24px}.auth-card{width:min(460px,100%);padding:36px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.auth-card form{display:grid;gap:18px}.grid,.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.impersonation-banner{position:relative;z-index:60;padding:14px 24px;background:var(--accent-soft);border-bottom:1px solid var(--accent);display:flex;justify-content:space-between;align-items:center}.impersonation-banner small{display:block}.grid-2,.builder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:22px}.metric,.box{padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.metric strong{display:block;font-size:28px;letter-spacing:-.035em}.card-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}.stack{display:grid;gap:18px}.compact-stack{gap:12px}.span-2{grid-column:1/-1}.full{width:100%}.invalid-feedback,.form-error{color:var(--danger);font-size:12px}.status.healthy{background:var(--success-soft);color:var(--success)}.status.blocked,.danger-soft{background:var(--danger-soft);color:var(--danger)}.tag{display:inline-block;padding:4px 9px;background:var(--surface-soft);border:1px solid var(--border);border-radius:7px;font-size:12px}.inline-form,.list-toolbar-actions,.draft-list-head,.draft-bulk-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.auth-heading{margin-bottom:26px}.auth-link{display:block;margin-top:16px}.timeline,.draft-list,.file-list,.operation-list{display:grid;gap:12px}.draft-item,.operation{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:12px;overflow-wrap:anywhere}.draft-item>div,.operation>div{min-width:0}.operation-actions{display:flex;gap:8px;margin-inline-start:auto}.divider{height:1px;background:var(--border);margin:24px 0}.breadcrumbs{margin:15px 0;overflow-wrap:anywhere}.ide-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:#10182899}.ide-shell{width:min(1500px,96vw);height:min(900px,92dvh);display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.ide-shell>header,.ide-shell>footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 22px;flex:none}.ide-shell small{display:block}.ide-shell code{font-size:11px;overflow-wrap:anywhere}.ide-searchbar{display:flex;gap:10px;padding:12px;flex-wrap:wrap}.ide-searchbar input{flex:1;min-width:120px}.ide-editor{display:flex;min-height:0;flex:1;border-block:1px solid var(--border);background:var(--surface-soft)}.ide-editor pre{margin:0;border-radius:0;font:13px/1.65 ui-monospace,monospace;text-align:end;overflow:hidden;min-width:50px}.ide-editor textarea{flex:1;resize:none;border:0;border-radius:0;white-space:pre;overflow:auto;font:13px/1.65 ui-monospace,monospace;padding:16px}.ide-backdrop.fullscreen{padding:0}.ide-backdrop.fullscreen .ide-shell{width:100vw;height:100dvh;border-radius:0}[data-file-upload]{padding:20px;border:1.5px dashed var(--border);border-radius:12px;background:var(--surface-soft)}[data-file-upload].is-dragging{border-color:var(--primary);background:var(--accent-soft)}.topbar-maintenance{color:var(--warning);font-size:12px}
@keyframes kiosk-pulse{to{opacity:.3;transform:translateY(-4px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(min-width:901px){.sidebar{transform:none!important}}@media(max-width:1250px){.deployment-board{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.lane-errors{grid-column:1/-1;min-height:180px}.lane-errors .empty-state{padding:24px}.page-head{flex-direction:column}.page-head>.actions{justify-content:flex-start;max-width:none}}@media(max-width:900px){:root{--sidebar:190px}.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open,body.sidebar-open .sidebar{transform:translateX(0)}[dir=rtl] .sidebar{transform:translateX(100%)}[dir=rtl] .sidebar.open,[dir=rtl] body.sidebar-open .sidebar{transform:translateX(0)}.main{margin-inline-start:0;width:100%}.mobile-menu{display:inline-flex}.topbar{padding:14px 20px}.content{padding:28px 20px}.top-actions{gap:8px}.user-chip{max-width:145px}}@media(max-width:600px){.grid-2,.builder-grid{grid-template-columns:minmax(0,1fr)}.ide-backdrop{padding:0}.ide-shell{width:100vw;height:100dvh;border-radius:0}.ide-shell>header,.ide-shell>footer{padding:12px}.ide-shell .actions{flex-wrap:wrap}.deployment-board{grid-template-columns:minmax(0,1fr)}.lane-errors{grid-column:auto}.deployment-lane{min-height:180px}.lane-content{padding:12px}.deployment-card{padding:18px}.topbar{padding:12px;flex-wrap:wrap}.topbar>.top-actions{width:100%;justify-content:flex-end}.content{padding:24px 14px}.card{padding:18px}.upload-layout{align-items:stretch;flex-direction:column}.kiosk-dropzone{padding:16px}.page-head>.actions{width:100%}.page-head>.actions .btn{flex:1;font-size:12px}.form-grid{grid-template-columns:minmax(0,1fr)}.card-head{flex-direction:column}.confirmation-card dl{grid-template-columns:minmax(0,1fr);gap:8px}.confirmation-card dd{margin-bottom:8px}.dialog-backdrop{padding:12px}.dialog-card{max-height:calc(100dvh - 24px);padding:20px}}

/* ============================================================
   SCREENFLOW BACKOFFICE — CORE.CSS
   Design System: Tokens, Reset, Typography, Base
   ============================================================ */

/* ---- Google Fonts ---- */
400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ============================================================
   DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand */
  --brand-primary:        #F26F26;
  --brand-primary-hover:  #D95F1A;
  --brand-primary-light:  #FEF1E9;
  --brand-primary-muted:  rgba(242,111,38,0.12);
  --brand-secondary:      #1E1C24;
  --brand-accent:         #623BD7;

  /* Content */
  --color-text-primary:   #1E1C24;
  --color-text-secondary: #4E5359;
  --color-text-tertiary:  #A3ACB6;
  --color-text-disabled:  #DADEE2;
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      #F26F26;
  --color-text-link-hover:#D95F1A;

  /* Backgrounds */
  --color-bg-app:         #F5F7FA;
  --color-bg-surface:     #FFFFFF;
  --color-bg-subtle:      #F1F4F7;
  --color-bg-muted:       #E7ECF2;
  --color-bg-overlay:     rgba(30,28,36,0.48);

  /* Status */
  --color-success:        #36915F;
  --color-success-bg:     #ECF8F1;
  --color-success-border: #43B577;
  --color-warning:        #977620;
  --color-warning-bg:     #FEF9EB;
  --color-warning-border: #F8C236;
  --color-danger:         #A32700;
  --color-danger-bg:      #FAE3DD;
  --color-danger-border:  #CC3100;
  --color-info:           #3E76BB;
  --color-info-bg:        #EDF4FD;
  --color-info-border:    #4D92E7;

  /* Borders */
  --color-border:         #D1D8DE;
  --color-border-strong:  #C9CACF;
  --color-border-hover:   #ADB0B6;
  --color-border-focus:   #F26F26;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(30,28,36,0.06);
  --shadow-sm:   0 1px 4px rgba(30,28,36,0.08), 0 1px 2px rgba(30,28,36,0.04);
  --shadow-md:   0 4px 12px rgba(30,28,36,0.10), 0 2px 4px rgba(30,28,36,0.06);
  --shadow-lg:   0 8px 24px rgba(30,28,36,0.12), 0 4px 8px rgba(30,28,36,0.06);
  --shadow-xl:   0 16px 48px rgba(30,28,36,0.16), 0 8px 16px rgba(30,28,36,0.08);
  --shadow-focus:0 0 0 3px rgba(242,111,38,0.22);

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Spacing (8px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-display: 'Raleway', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  28px;
  --text-5xl:  36px;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Layout */
  --sidebar-width:       228px;
  --sidebar-width-mini:  64px;
  --topbar-height:       56px;
  --content-max-width:   1440px;

  /* Transitions */
  --transition-fast:   all 0.12s ease;
  --transition-base:   all 0.18s ease;
  --transition-slow:   all 0.28s ease;
  --transition-spring: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal-bg:  1040;
  --z-offcanvas: 1050;
  --z-modal:     1060;
  --z-popover:   1070;
  --z-toast:     1090;
  --z-tooltip:   1100;

  /* ── Compatibility aliases ─────────────────────────────────
     Some pages use alternate token names. These aliases ensure
     they resolve correctly without altering every HTML file.
  ──────────────────────────────────────────────────────────── */
  /* Background aliases */
  --bg-tertiary:           var(--color-bg-subtle);
  --color-bg-secondary:    var(--color-bg-subtle);
  --color-bg-tertiary:     var(--color-bg-subtle);
  --color-surface:         var(--color-bg-surface);
  --color-hover:           var(--color-bg-muted);

  /* Brand / primary aliases */
  --primary:               var(--brand-primary);
  --color-primary:         var(--brand-primary);
  --color-primary-light:   var(--brand-primary-light);
  --color-primary-muted:   var(--brand-primary-muted);
  --color-purple:          var(--brand-accent);

  /* Semantic color aliases */
  --success:               var(--color-success);
  --warning:               var(--color-warning);
  --danger:                var(--color-danger);
  --info:                  var(--color-info);

  /* Muted / bg semantic aliases */
  --color-success-muted:   var(--color-success-bg);
  --color-warning-muted:   var(--color-warning-bg);
  --color-danger-muted:    var(--color-danger-bg);
}

/* ============================================================
   DARK MODE TOKENS
   ============================================================ */
[data-theme="dark"] {
  --color-text-primary:   rgba(255,255,255,0.92);
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.42);
  --color-text-disabled:  rgba(255,255,255,0.28);
  --color-text-inverse:   #1E1C24;

  --color-bg-app:         #1A1D27;
  --color-bg-surface:     #222531;
  --color-bg-subtle:      #2A2E3B;
  --color-bg-muted:       #323645;
  --color-bg-overlay:     rgba(0,0,0,0.6);

  --color-border:         rgba(255,255,255,0.10);
  --color-border-strong:  rgba(255,255,255,0.15);
  --color-border-hover:   rgba(255,255,255,0.22);

  --color-success-bg:     rgba(67,181,119,0.12);
  --color-warning-bg:     rgba(248,194,54,0.12);
  --color-danger-bg:      rgba(204,49,0,0.12);
  --color-info-bg:        rgba(77,146,231,0.12);

  --shadow-sm:  0 1px 4px rgba(0,0,0,0.24);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.28);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.36);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.44);
}

/* ============================================================
   RESET & BOX MODEL
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: var(--transition-fast);
}
a:hover { color: var(--color-text-link-hover); }

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   ============================================================ */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}

.label-sm {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.text-muted    { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }
.text-disabled { color: var(--color-text-disabled) !important; }
.text-primary  { color: var(--brand-primary) !important; }
.text-success  { color: var(--color-success) !important; }
.text-warning  { color: var(--color-warning) !important; }
.text-danger   { color: var(--color-danger) !important; }
.text-info     { color: var(--color-info) !important; }
.text-sm       { font-size: var(--text-sm) !important; }
.text-xs       { font-size: var(--text-xs) !important; }
.text-base     { font-size: var(--text-base) !important; }
.text-lg       { font-size: var(--text-lg) !important; }
.text-xl       { font-size: var(--text-xl) !important; }
.fw-400        { font-weight: 400; }
.fw-500        { font-weight: 500; }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-block       { display: block; }
.d-inline-flex { display: inline-flex; }
.d-none        { display: none !important; }

.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.align-end     { align-items: flex-end; }
.justify-center{ justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.flex-1        { flex: 1 1 0%; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }

.p-0  { padding: 0 !important; }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }

.bg-surface { background-color: var(--color-bg-surface); }
.bg-subtle  { background-color: var(--color-bg-subtle); }
.bg-brand   { background-color: var(--brand-primary); }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.text-ellipsis   { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.whitespace-nowrap{ white-space: nowrap; }
.pointer-none    { pointer-events: none; }
.opacity-0       { opacity: 0; }
.opacity-50      { opacity: 0.5; }

.cursor-pointer  { cursor: pointer; }
.select-none     { user-select: none; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* ============================================================
   FOCUS VISIBLE
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ============================================================
   SCREENFLOW BACKOFFICE — LAYOUT.CSS
   Sidebar, Topbar, Content Area, Footer, Responsive
   ============================================================ */

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg-app);
}

.app-main {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-shell.sidebar-mini .app-main {
  margin-left: var(--sidebar-width-mini);
}

.app-shell.sidebar-hidden .app-main {
  margin-left: 0;
}

.page-content {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-fixed);
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1), transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.app-shell.sidebar-mini .sidebar {
  width: var(--sidebar-width-mini);
}

/* ---- Sidebar Brand ---- */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--brand-primary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: white;
}

.sidebar-brand-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}

.sidebar-brand-name span {
  color: var(--brand-primary);
}

/* ---- Sidebar Toggle ---- */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--color-text-secondary);
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.sidebar-toggle:hover {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.sidebar-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.24s ease;
}

.app-shell.sidebar-mini .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ---- Role Badge in Sidebar ---- */
.sidebar-role-badge {
  margin: var(--space-3) var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-role-badge.role-admin {
  background: var(--brand-primary-light);
  color: var(--brand-primary);
}

.sidebar-role-badge.role-superadmin {
  background: rgba(98,59,215,0.10);
  color: var(--brand-accent);
}

.sidebar-role-badge.role-user {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.sidebar-role-badge .role-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  background: currentColor;
}

/* ---- Sidebar Nav ---- */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-2) 0 var(--space-4);
}

.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-group {
  margin-bottom: var(--space-1);
}

.nav-group-label {
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.app-shell.sidebar-mini .nav-group-label {
  visibility: hidden;
  height: 0;
  padding: 0;
}

.nav-item {
  display: block;
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin: 1px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border: none;
  background: none;
  width: calc(100% - var(--space-4));
  text-align: left;
}

.nav-link:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.nav-link.active {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
  font-weight: 600;
}

.nav-link.active .nav-icon {
  color: var(--brand-primary);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: var(--transition-fast);
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
  color: var(--brand-primary);
}

.nav-icon svg {
  width: 16px;
  height: 16px;
}

.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.app-shell.sidebar-mini .nav-label,
.app-shell.sidebar-mini .nav-group-label span,
.app-shell.sidebar-mini .sidebar-role-badge span,
.app-shell.sidebar-mini .sidebar-brand-name {
  opacity: 0;
  pointer-events: none;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand-primary);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.app-shell.sidebar-mini .nav-badge { opacity: 0; }

.nav-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.nav-item.open > .nav-link .nav-arrow {
  transform: rotate(90deg);
}

.app-shell.sidebar-mini .nav-arrow { opacity: 0; }

/* ---- Submenu ---- */
.nav-submenu {
  display: none;
  padding: var(--space-1) 0 var(--space-1) calc(var(--space-4) + 20px + var(--space-3));
}

.nav-item.open > .nav-submenu {
  display: block;
  animation: submenu-open 0.18s ease;
}

@keyframes submenu-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-submenu .nav-link {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 var(--space-2);
  width: calc(100% - var(--space-4));
}

.nav-submenu .nav-link:hover { color: var(--color-text-primary); }
.nav-submenu .nav-link.active {
  color: var(--brand-primary);
  font-weight: 600;
  background: none;
}
.nav-submenu .nav-link.active::before {
  content: '';
  position: absolute;
  left: calc(-1 * (var(--space-3) + 1px));
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 14px;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
}

/* ---- Sidebar Footer ---- */
.sidebar-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-user:hover { background: var(--color-bg-subtle); }

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s ease;
}

.app-shell.sidebar-mini .sidebar-user-info { opacity: 0; }

.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-height);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.topbar-menu-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.topbar-menu-btn svg { width: 20px; height: 20px; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  flex-wrap: wrap;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs li a {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.breadcrumbs li a:hover { color: var(--brand-primary); }

.breadcrumbs li span {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

.breadcrumbs li::after {
  content: '/';
  color: var(--color-text-disabled);
  font-size: var(--text-sm);
}

.breadcrumbs li:last-child::after { display: none; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ---- Topbar Push/Sync btn ---- */
.btn-sync {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-text-primary);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  border: none;
}

.btn-sync:hover { opacity: 0.88; }

.btn-sync.syncing .sync-icon {
  animation: spin 1s linear infinite;
}

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

/* ---- Topbar Workspace Selector ---- */
.workspace-selector {
  position: relative;
}

.workspace-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.workspace-btn:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

/* ---- Topbar Notification btn ---- */
.topbar-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
}

.topbar-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.topbar-btn svg { width: 18px; height: 18px; }

.topbar-btn .notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--brand-primary);
  border: 2px solid var(--color-bg-surface);
  border-radius: var(--radius-full);
}

/* ---- Topbar User Avatar ---- */
.topbar-avatar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
}

.topbar-avatar:hover { background: var(--color-bg-subtle); }

/* ---- Upgrade Banner ---- */
.upgrade-banner {
  background: linear-gradient(135deg, #FEF9EB 0%, #FEF1E9 100%);
  border-bottom: 1px solid var(--color-warning-border);
  padding: var(--space-2) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.upgrade-banner strong { color: var(--color-text-primary); }
.upgrade-banner a { color: var(--brand-primary); font-weight: 600; }

.upgrade-banner-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

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

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.page-header-left { flex: 1; min-width: 0; }

.page-header-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-header-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-header-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ============================================================
   GRID SYSTEM
   ============================================================ */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }

/* ============================================================
   SIDEBAR OVERLAY (mobile)
   ============================================================ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: calc(var(--z-fixed) - 1);
  backdrop-filter: blur(2px);
  animation: fade-in 0.18s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .col-span-3,
  .col-span-4  { grid-column: span 2; }
}

@media (max-width: 768px) {
  :root {
    --space-6: 20px;
    --topbar-height: 52px;
  }

  .app-main { margin-left: 0 !important; }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
    width: var(--sidebar-width) !important;
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-open .sidebar-overlay {
    display: block;
  }

  .topbar-menu-btn { display: flex; }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: 1fr; }

  .col-span-2,
  .col-span-3,
  .col-span-4 { grid-column: span 1; }

  .page-header { flex-direction: column; align-items: flex-start; }

  .upgrade-banner {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }

  .topbar { padding: 0 var(--space-4); }
  .page-content { padding: var(--space-4); }
}

@media (max-width: 480px) {
  .page-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .btn-sync span { display: none; }
  .workspace-btn span { display: none; }

  .topbar-right .topbar-btn:not(:last-child) { display: none; }
}

/* ============================================================
   SCREENFLOW BACKOFFICE — COMPONENTS.CSS
   Buttons, Cards, Badges, Forms, Tables, Modals, Dropdowns...
   ============================================================ */

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
  letter-spacing: 0.02em;
  font-family: var(--font-display);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-xs  { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm  { width: 32px; height: 32px; font-size: 12px; }
.avatar-md  { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg  { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl  { width: 64px; height: 64px; font-size: 20px; }
.avatar-2xl { width: 80px; height: 80px; font-size: 24px; }

.avatar-green   { background: var(--color-success-bg); color: var(--color-success); }
.avatar-blue    { background: var(--color-info-bg); color: var(--color-info); }
.avatar-purple  { background: rgba(98,59,215,0.10); color: var(--brand-accent); }
.avatar-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.avatar-red     { background: var(--color-danger-bg); color: var(--color-danger); }

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group .avatar {
  border: 2px solid var(--color-bg-surface);
  margin-left: -8px;
}

.avatar-group .avatar:first-child { margin-left: 0; }

/* ============================================================
   STATUS INDICATOR
   ============================================================ */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-dot.online    { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success-bg); }
.status-dot.offline   { background: var(--color-text-disabled); }
.status-dot.warning   { background: var(--color-warning-border); box-shadow: 0 0 0 2px var(--color-warning-bg); }
.status-dot.danger    { background: var(--color-danger-border); box-shadow: 0 0 0 2px var(--color-danger-bg); }
.status-dot.info      { background: var(--color-info-border); }
.status-dot.pulse {
  animation: pulse-dot 2s ease infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(54,145,95,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(54,145,95,0); }
}

/* ============================================================
   BADGE
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.badge svg { width: 10px; height: 10px; }

.badge-primary  { background: var(--brand-primary-light); color: var(--brand-primary); }
.badge-success  { background: var(--color-success-bg);    color: var(--color-success); }
.badge-warning  { background: var(--color-warning-bg);    color: var(--color-warning); }
.badge-danger   { background: var(--color-danger-bg);     color: var(--color-danger); }
.badge-info     { background: var(--color-info-bg);       color: var(--color-info); }
.badge-default  { background: var(--color-bg-subtle);     color: var(--color-text-secondary); }
.badge-dark     { background: var(--color-text-primary);  color: white; }
.badge-purple   { background: rgba(98,59,215,0.10);       color: var(--brand-accent); }

.badge-sm { padding: 1px 6px; font-size: 10px; }
.badge-lg { padding: 4px 10px; font-size: var(--text-sm); }

.badge-outline-success { background: transparent; border: 1px solid var(--color-success-border); color: var(--color-success); }
.badge-outline-danger  { background: transparent; border: 1px solid var(--color-danger-border);  color: var(--color-danger); }
.badge-outline-warning { background: transparent; border: 1px solid var(--color-warning-border); color: var(--color-warning); }
.badge-outline-info    { background: transparent; border: 1px solid var(--color-info-border);    color: var(--color-info); }

/* Device status badges */
.badge-online  { background: var(--color-success-bg); color: var(--color-success); }
.badge-offline { background: var(--color-bg-subtle);  color: var(--color-text-tertiary); }
.badge-maintenance { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error   { background: var(--color-danger-bg);  color: var(--color-danger); }

/* Role badges */
.badge-role-superadmin { background: rgba(98,59,215,0.10); color: var(--brand-accent); }
.badge-role-admin      { background: var(--brand-primary-light); color: var(--brand-primary); }
.badge-role-user       { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

.btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-xs  { padding: 2px 10px; font-size: var(--text-xs); }
.btn-sm  { padding: 5px 12px; font-size: var(--text-sm); }
.btn-lg  { padding: 10px 20px; font-size: var(--text-base); }
.btn-xl  { padding: 13px 24px; font-size: var(--text-md); }
.btn-icon { padding: var(--space-2); aspect-ratio: 1; }
.btn-icon-sm { padding: 6px; aspect-ratio: 1; }

.btn-primary {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}
.btn-primary:hover   { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn-primary:active  { transform: scale(0.98); }

.btn-secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); border-color: var(--color-border-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }

.btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}
.btn-danger:hover { background: #a32700; }

.btn-danger-soft {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: transparent;
}
.btn-danger-soft:hover { background: var(--color-danger-border); color: white; }

.btn-success {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
}
.btn-success:hover { background: #2d7a51; }

.btn-dark {
  background: var(--color-text-primary);
  color: white;
  border-color: var(--color-text-primary);
}
.btn-dark:hover { opacity: 0.88; }

.btn-purple {
  background: var(--brand-accent);
  color: white;
  border-color: var(--brand-accent);
}
.btn-purple:hover { background: #4423A9; }

.btn-outline {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline:hover { background: var(--brand-primary-light); }

.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.btn.loading .btn-label { opacity: 0; }
.btn.loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  overflow: hidden;
}

.card:hover { box-shadow: var(--shadow-md); }

.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.card-body {
  padding: var(--space-5);
}

.card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-flush .card-body { padding: 0; }

/* KPI / Stat Card */
.stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--stat-accent, var(--brand-primary));
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stat-bg, var(--brand-primary-muted));
  color: var(--stat-accent, var(--brand-primary));
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

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

.stat-card-value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}

.stat-card-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.stat-card-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-2);
}

.stat-card-trend.up   { color: var(--color-success); }
.stat-card-trend.down { color: var(--color-danger); }
.stat-card-trend svg  { width: 12px; height: 12px; }

.stat-card-trend-label {
  color: var(--color-text-tertiary);
  font-weight: 400;
  margin-left: 2px;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-label .required {
  color: var(--color-danger);
  font-size: var(--text-xs);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.form-error svg { width: 12px; height: 12px; }

.form-control {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  transition: var(--transition-fast);
  outline: none;
  line-height: 1.5;
}

.form-control:hover { border-color: var(--color-border-hover); }

.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-focus);
}

.form-control::placeholder { color: var(--color-text-tertiary); }
.form-control:disabled     { background: var(--color-bg-subtle); cursor: not-allowed; opacity: 0.7; }

.form-control.is-error   { border-color: var(--color-danger-border); }
.form-control.is-success { border-color: var(--color-success-border); }

.form-control.form-control-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
}

textarea.form-control {
  resize: vertical;
  min-height: 90px;
}

.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.input-group .form-control {
  flex: 1;
}

.input-group-prefix,
.input-group-suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.input-group-prefix {
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group-suffix {
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group .form-control:not(:first-child) { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group .form-control:not(:last-child)  { border-radius: var(--radius-md) 0 0 var(--radius-md); }

.input-icon-wrapper {
  position: relative;
}

.input-icon-wrapper .form-control {
  padding-left: 36px;
}

.input-icon-wrapper .input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.input-icon-wrapper .input-icon svg { width: 15px; height: 15px; }

.input-icon-wrapper.input-icon-right .form-control { padding-left: var(--space-3); padding-right: 36px; }
.input-icon-wrapper.input-icon-right .input-icon   { left: auto; right: 11px; }

/* Select */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A3ACB6'%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 10px center;
  background-size: 14px;
  padding-right: 32px;
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.form-check-input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--brand-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* Switch */
.form-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.switch-input { display: none; }

.switch-track {
  width: 40px;
  height: 22px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  position: relative;
  transition: var(--transition-base);
  border: 2px solid transparent;
  flex-shrink: 0;
  cursor: pointer;
}

.switch-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: white;
  border-radius: var(--radius-full);
  transition: var(--transition-spring);
  box-shadow: var(--shadow-xs);
}

.switch-input:checked + .switch-track {
  background: var(--brand-primary);
}

.switch-input:checked + .switch-track::after {
  left: calc(100% - 18px);
}

.switch-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-container {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-toolbar {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--color-bg-surface);
}

.table-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.table-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.table-search {
  position: relative;
  min-width: 220px;
}

.table-search .form-control {
  padding-left: 34px;
  background: var(--color-bg-subtle);
  border-color: transparent;
}

.table-search .form-control:focus {
  background: var(--color-bg-surface);
  border-color: var(--brand-primary);
}

.table-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  display: flex;
}

.table-search .search-icon svg { width: 14px; height: 14px; }

.bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-fast);
}

.bulk-actions.active {
  opacity: 1;
  pointer-events: auto;
}

.bulk-count {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
}

.table-wrap {
  overflow-x: auto;
}

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

table.data-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: 0.06em;
  text-transform: uppercase;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: var(--transition-fast);
}

table.data-table thead th:hover { color: var(--color-text-secondary); }

table.data-table thead th.sortable::after {
  content: '↕';
  margin-left: var(--space-1);
  opacity: 0.4;
  font-size: 10px;
}

table.data-table thead th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--brand-primary); }
table.data-table thead th.sort-desc::after { content: '↓'; opacity: 1; color: var(--brand-primary); }

table.data-table thead th:first-child { padding-left: var(--space-5); }
table.data-table thead th:last-child  { padding-right: var(--space-5); text-align: right; }

table.data-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: var(--transition-fast);
}

table.data-table tbody tr:last-child { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--color-bg-subtle); }
table.data-table tbody tr.selected { background: var(--brand-primary-muted); }

table.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

table.data-table tbody td:first-child { padding-left: var(--space-5); }
table.data-table tbody td:last-child  { padding-right: var(--space-5); }

table.data-table tbody td strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.td-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  transition: var(--transition-fast);
  cursor: pointer;
}

.action-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.action-btn.danger:hover { color: var(--color-danger); background: var(--color-danger-bg); }
.action-btn svg { width: 15px; height: 15px; }

.table-pagination {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-bg-surface);
}

.table-pagination-info {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 0 var(--space-2);
  background: var(--color-bg-surface);
}

.pagination-btn:hover      { border-color: var(--brand-primary); color: var(--brand-primary); }
.pagination-btn.active     { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.pagination-btn:disabled   { opacity: 0.4; pointer-events: none; }
.pagination-btn svg        { width: 14px; height: 14px; }
.pagination-dots           { color: var(--color-text-tertiary); padding: 0 var(--space-1); }

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 180px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  padding: var(--space-1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.dropdown-menu.align-left { right: auto; left: 0; transform-origin: top left; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.dropdown-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.dropdown-item.danger { color: var(--color-danger); }
.dropdown-item.danger:hover { background: var(--color-danger-bg); }
.dropdown-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-tertiary); }
.dropdown-item.danger svg { color: var(--color-danger); }

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}

.dropdown-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: var(--z-modal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  backdrop-filter: blur(3px);
  animation: backdrop-in 0.18s ease;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.modal-backdrop.open,
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.modal-backdrop.open .modal,
.modal-overlay.open .modal {
  transform: translateY(0) scale(1);
}

.modal-sm { max-width: 400px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 900px; }

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.modal-close:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.modal-close svg { width: 18px; height: 18px; }

.modal-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ============================================================
   ALERT
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}

.alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-icon svg { width: 16px; height: 16px; }

.alert-content { flex: 1; }
.alert-title { font-weight: 700; margin-bottom: 2px; }
.alert-close { flex-shrink: 0; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; }
.alert-close:hover { opacity: 1; }

.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger); }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 340px;
  pointer-events: auto;
  animation: toast-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast.hiding {
  opacity: 0;
  transform: translateX(20px) scale(0.95);
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.toast-icon svg { width: 18px; height: 18px; }

.toast.success .toast-icon { color: var(--color-success); }
.toast.error   .toast-icon { color: var(--color-danger); }
.toast.warning .toast-icon { color: var(--color-warning); }
.toast.info    .toast-icon { color: var(--color-info); }

.toast-content { flex: 1; min-width: 0; }
.toast-title   { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-primary); }
.toast-message { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.toast-close   { flex-shrink: 0; color: var(--color-text-tertiary); cursor: pointer; padding: 2px; }
.toast-close:hover { color: var(--color-text-primary); }
.toast-close svg { width: 14px; height: 14px; }

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tabs-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.tab-btn {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-fast);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tab-btn:hover { color: var(--color-text-secondary); }

.tab-btn.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.tab-btn .tab-count {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.tab-btn.active .tab-count {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fade-in 0.18s ease; }

/* Pill tabs variant */
.tabs-nav.tabs-pills {
  border-bottom: none;
  background: var(--color-bg-subtle);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  gap: var(--space-1);
  display: inline-flex;
}

.tabs-nav.tabs-pills .tab-btn {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
}

.tabs-nav.tabs-pills .tab-btn.active {
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
}

/* ============================================================
   PROGRESS & LOADER
   ============================================================ */
.progress {
  height: 6px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.progress-success .progress-bar { background: var(--color-success); }
.progress-warning .progress-bar { background: var(--color-warning-border); }
.progress-danger  .progress-bar { background: var(--color-danger); }

.progress-sm { height: 4px; }
.progress-lg { height: 8px; }

/* Spinner */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-bg-muted);
  border-top-color: var(--brand-primary);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-xl { width: 48px; height: 48px; border-width: 3px; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, var(--color-bg-muted) 50%, var(--color-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text    { height: 14px; border-radius: var(--radius-sm); }
.skeleton-title   { height: 22px; border-radius: var(--radius-sm); }
.skeleton-circle  { border-radius: var(--radius-full); }
.skeleton-card    { height: 120px; border-radius: var(--radius-lg); }
.skeleton-avatar  { width: 40px; height: 40px; border-radius: var(--radius-full); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  gap: var(--space-4);
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-xl);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}

.empty-state-icon svg { width: 36px; height: 36px; }

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.empty-state-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 360px;
  line-height: var(--leading-relaxed);
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { display: flex; flex-direction: column; }

.timeline-item {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  position: relative;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  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: 4px;
  z-index: 1;
}

.timeline-dot.success { background: var(--color-success); box-shadow: 0 0 0 2px var(--color-success-bg); }
.timeline-dot.warning { background: var(--color-warning-border); box-shadow: 0 0 0 2px var(--color-warning-bg); }
.timeline-dot.danger  { background: var(--color-danger); box-shadow: 0 0 0 2px var(--color-danger-bg); }
.timeline-dot.offline { background: var(--color-text-disabled); box-shadow: none; }

.timeline-connector {
  flex: 1;
  width: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}

.timeline-content { flex: 1; min-width: 0; }
.timeline-title   { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.timeline-text    { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; line-height: var(--leading-relaxed); }
.timeline-time    { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); }

/* ============================================================
   FILE UPLOAD
   ============================================================ */
.upload-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.upload-area:hover,
.upload-area.dragover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-muted);
}

.upload-area-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: var(--transition-base);
}

.upload-area:hover .upload-area-icon {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
}

.upload-area-icon svg { width: 24px; height: 24px; }
.upload-area-title { font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); }
.upload-area-subtitle { font-size: var(--text-sm); color: var(--color-text-tertiary); }
.upload-area-subtitle span { color: var(--brand-primary); font-weight: 600; }

/* ============================================================
   TOOLTIP
   ============================================================ */
[data-tooltip] {
  position: relative;
  cursor: default;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: var(--color-text-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: var(--z-tooltip);
}

[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.breadcrumb-nav a { color: var(--color-text-tertiary); transition: var(--transition-fast); }
.breadcrumb-nav a:hover { color: var(--brand-primary); }
.breadcrumb-nav .bc-sep { color: var(--color-text-disabled); }
.breadcrumb-nav .bc-current { color: var(--color-text-primary); font-weight: 500; }

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion { display: flex; flex-direction: column; gap: var(--space-2); }

.accordion-item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  cursor: pointer;
  user-select: none;
  transition: var(--transition-fast);
  gap: var(--space-3);
}

.accordion-header:hover { background: var(--color-bg-subtle); }

.accordion-title { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); }

.accordion-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.accordion-item.open .accordion-arrow { transform: rotate(180deg); }

.accordion-body {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.accordion-item.open .accordion-body { display: block; animation: fade-in 0.18s ease; }

/* ============================================================
   OFFCANVAS
   ============================================================ */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: var(--z-offcanvas);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.offcanvas-backdrop.open { opacity: 1; pointer-events: auto; }

.offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: calc(100vw - 40px);
  height: 100vh;
  background: var(--color-bg-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-offcanvas) + 1);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.offcanvas.open { transform: translateX(0); }

.offcanvas-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-shrink: 0;
}

.offcanvas-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.offcanvas-body  { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); }
.offcanvas-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ============================================================
   SCREENFLOW BACKOFFICE — PAGES.CSS
   Page-specific styles: dashboards, device cards, media, auth, system
   ============================================================ */

/* ============================================================
   DASHBOARD — KPI GRID
   ============================================================ */
.kpi-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kpi-grid { grid-template-columns: 1fr; } }

/* Color accent variants for stat cards */
.stat-accent-primary  { --stat-accent: var(--brand-primary);   --stat-bg: var(--brand-primary-muted); }
.stat-accent-success  { --stat-accent: var(--color-success);   --stat-bg: var(--color-success-bg); }
.stat-accent-info     { --stat-accent: var(--color-info);      --stat-bg: var(--color-info-bg); }
.stat-accent-warning  { --stat-accent: var(--color-warning);   --stat-bg: var(--color-warning-bg); }
.stat-accent-danger   { --stat-accent: var(--color-danger);    --stat-bg: var(--color-danger-bg); }
.stat-accent-purple   { --stat-accent: var(--brand-accent);    --stat-bg: rgba(98,59,215,0.10); }

/* Quick actions grid */
.quick-actions-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.quick-action-card {
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.quick-action-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.quick-action-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
}

.quick-action-card:hover .quick-action-icon {
  background: var(--brand-primary-muted);
  color: var(--brand-primary);
}

.quick-action-icon svg { width: 22px; height: 22px; }
.quick-action-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }

/* Chart wrapper */
.chart-wrapper {
  position: relative;
  width: 100%;
}

.chart-wrapper canvas { max-width: 100%; }

/* Dashboard activity feed */
.activity-feed { display: flex; flex-direction: column; }

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

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

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

.activity-content { flex: 1; min-width: 0; }
.activity-text    { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-snug); }
.activity-text strong { color: var(--color-text-primary); font-weight: 600; }
.activity-time    { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }

/* ============================================================
   DEVICE CARDS
   ============================================================ */
.device-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.device-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
}

.device-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.device-card.selected { border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-primary-muted); }

.device-card-screen {
  aspect-ratio: 16/9;
  background: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.device-card-screen img { width: 100%; height: 100%; object-fit: cover; }

.device-card-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.3);
}

.device-card-preview-placeholder svg { width: 32px; height: 32px; }
.device-card-preview-placeholder span { font-size: var(--text-xs); }

.device-card-status-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.6);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  color: white;
  backdrop-filter: blur(4px);
}

.device-card-status-badge .status-dot { width: 6px; height: 6px; }

.device-card-actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: var(--transition-fast);
}

.device-card:hover .device-card-actions { opacity: 1; }

.device-card-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: var(--transition-fast);
}

.device-card-action-btn:hover { background: var(--brand-primary); }
.device-card-action-btn svg { width: 14px; height: 14px; }

.device-card-body {
  padding: var(--space-3) var(--space-4);
}

.device-card-name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  gap: var(--space-2);
}

.device-card-info {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.device-card-info svg { width: 11px; height: 11px; }

/* ============================================================
   MEDIA LIBRARY
   ============================================================ */
.media-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.media-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
}

.media-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-md); }
.media-card.selected { border-color: var(--brand-primary); box-shadow: 0 0 0 2px var(--brand-primary-muted); }

.media-card-thumb {
  aspect-ratio: 4/3;
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.media-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.media-card-thumb .media-type-icon {
  color: var(--color-text-tertiary);
}

.media-card-thumb .media-type-icon svg { width: 32px; height: 32px; }

.media-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  opacity: 0;
  transition: var(--transition-fast);
}

.media-card:hover .media-card-overlay { opacity: 1; }

.media-card-body {
  padding: var(--space-2) var(--space-3);
}

.media-card-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-size {
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

.media-card-checkbox {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  opacity: 0;
  transition: var(--transition-fast);
}

.media-card:hover .media-card-checkbox,
.media-card.selected .media-card-checkbox { opacity: 1; }

/* ============================================================
   PLAYLIST CARD
   ============================================================ */
.playlist-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
  cursor: pointer;
}

.playlist-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }

.playlist-card-header {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2c2c3e 0%, #1a1a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.playlist-items-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  gap: 2px;
}

.playlist-items-preview .preview-item {
  background: var(--color-bg-muted);
  overflow: hidden;
}

.playlist-items-preview .preview-item img { width: 100%; height: 100%; object-fit: cover; }

.playlist-card-meta {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.playlist-card-body { padding: var(--space-3) var(--space-4); }

.playlist-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.playlist-card-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ============================================================
   CAMPAIGN CARD
   ============================================================ */
.campaign-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.campaign-card:hover { box-shadow: var(--shadow-md); }

.campaign-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.campaign-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.campaign-dates {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.campaign-dates svg { width: 11px; height: 11px; }

.campaign-progress-wrap {
  margin-top: var(--space-3);
}

.campaign-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
}

/* ============================================================
   MONITORING / STATUS PAGE
   ============================================================ */
.monitor-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.monitor-status-row:last-child { border-bottom: none; }

.monitor-device-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.monitor-device-name { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-primary); }
.monitor-device-id   { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.uptime-bar {
  display: flex;
  gap: 2px;
  align-items: center;
}

.uptime-segment {
  width: 8px;
  height: 20px;
  border-radius: 2px;
  background: var(--color-bg-muted);
  transition: var(--transition-fast);
}

.uptime-segment.up      { background: var(--color-success); }
.uptime-segment.down    { background: var(--color-danger); }
.uptime-segment.partial { background: var(--color-warning-border); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-shell {
  min-height: 100vh;
  display: flex;
  background: var(--color-bg-app);
}

.auth-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}

.auth-right {
  width: 48%;
  background: linear-gradient(160deg, #1E1C24 0%, #2c2845 60%, #3d2a5c 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
}

.auth-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242,111,38,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(98,59,215,0.12) 0%, transparent 50%);
}

.auth-box {
  width: 100%;
  max-width: 400px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  text-decoration: none;
}

.auth-brand-icon {
  width: 40px;
  height: 40px;
  background: var(--brand-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.auth-brand-icon svg { width: 22px; height: 22px; }

.auth-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}

.auth-brand-name span { color: var(--brand-primary); }

.auth-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.auth-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  line-height: var(--leading-relaxed);
}

.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-footer {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.auth-footer a { color: var(--brand-primary); font-weight: 600; }

.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  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-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.auth-social-btn:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); }

/* Right side content */
.auth-feature-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: white;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
}

.auth-feature-title span { color: var(--brand-primary); }

.auth-feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.auth-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.auth-feature-item-icon {
  width: 28px;
  height: 28px;
  background: rgba(242,111,38,0.2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-feature-item-icon svg { width: 14px; height: 14px; color: var(--brand-primary); }

/* Screen preview mockup */
.auth-screen-mockup {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-top: var(--space-6);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
}

.auth-screen-mockup .mockup-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.mockup-dot:nth-child(1) { background: #FF5F57; }
.mockup-dot:nth-child(2) { background: #FFBD2E; }
.mockup-dot:nth-child(3) { background: #28CA41; }

.mockup-screen {
  background: #1a1a2e;
  border-radius: var(--radius-md);
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .auth-shell { flex-direction: column; }
  .auth-right { display: none; }
  .auth-left  { padding: var(--space-6) var(--space-4); }
}

/* ============================================================
   SYSTEM / ERROR PAGES
   ============================================================ */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--color-bg-app);
}

.error-page-inner {
  text-align: center;
  max-width: 480px;
}

.error-code {
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #623BD7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-4);
}

.error-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.error-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.error-illustration {
  margin: 0 auto var(--space-6);
  width: 180px;
  height: 140px;
  position: relative;
}

/* Maintenance page */
.maintenance-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: linear-gradient(160deg, #F5F7FA 0%, #EDF0F7 100%);
  text-align: center;
}

.maintenance-icon {
  width: 80px;
  height: 80px;
  background: var(--brand-primary-light);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  color: var(--brand-primary);
}

.maintenance-icon svg { width: 44px; height: 44px; }

.maintenance-progress {
  max-width: 320px;
  margin: var(--space-6) auto 0;
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.settings-sidebar {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-6));
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
}

.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 { width: 16px; height: 16px; flex-shrink: 0; }

.settings-content { display: flex; flex-direction: column; gap: var(--space-5); }

.settings-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.settings-section-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.settings-section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
.settings-section-subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

.settings-section-body { padding: var(--space-5) var(--space-6); }

.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-row:last-child { border-bottom: none; }

.settings-row-label { flex: 1; }
.settings-row-label strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); display: block; }
.settings-row-label span { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.settings-row-control { flex-shrink: 0; min-width: 200px; text-align: right; }

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }
  .settings-row { flex-direction: column; }
  .settings-row-control { text-align: left; min-width: 0; width: 100%; }
}

/* ============================================================
   SUPERADMIN PAGES
   ============================================================ */
.platform-health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) { .platform-health-grid { grid-template-columns: 1fr; } }

.health-indicator {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.health-indicator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.health-indicator-name { font-weight: 600; font-size: var(--text-sm); }
.health-status-operational { color: var(--color-success); }
.health-status-degraded    { color: var(--color-warning); }
.health-status-outage      { color: var(--color-danger); }

.health-gauge {
  height: 4px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.health-gauge-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-success);
  transition: width 0.6s ease;
}

/* Org / Tenant cards */
.org-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: var(--transition-base);
  cursor: pointer;
}

.org-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }

.org-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }

.org-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--brand-primary);
  flex-shrink: 0;
}

.org-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em; }
.org-plan { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.org-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.org-stat-value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); }
.org-stat-label { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ============================================================
   CALENDAR / SCHEDULING
   ============================================================ */
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}

.calendar-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calendar-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  cursor: pointer;
  transition: var(--transition-fast);
}

.calendar-nav-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.calendar-nav-btn svg { width: 14px; height: 14px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-border);
  gap: 1px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.calendar-day-header {
  background: var(--color-bg-subtle);
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.calendar-cell {
  background: var(--color-bg-surface);
  min-height: 100px;
  padding: var(--space-2);
  cursor: pointer;
  transition: var(--transition-fast);
  overflow: hidden;
}

.calendar-cell:hover { background: var(--color-bg-subtle); }

.calendar-cell.other-month { opacity: 0.5; }

.calendar-cell.today {
  background: var(--brand-primary-muted);
}

.calendar-date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}

.calendar-cell.today .calendar-date {
  background: var(--brand-primary);
  color: white;
}

.calendar-event {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  cursor: pointer;
}

.calendar-event.type-campaign   { background: var(--brand-primary-muted); color: var(--brand-primary); }
.calendar-event.type-playlist   { background: var(--color-info-bg); color: var(--color-info); }
.calendar-event.type-maintenance{ background: var(--color-warning-bg); color: var(--color-warning); }

/* ============================================================
   REPORTS / ANALYTICS
   ============================================================ */
.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.date-range-btn {
  padding: var(--space-2) var(--space-3);
  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-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.date-range-btn:hover  { border-color: var(--brand-primary); color: var(--brand-primary); }
.date-range-btn.active { background: var(--brand-primary-muted); border-color: var(--brand-primary); color: var(--brand-primary); font-weight: 600; }

/* Donut wrapper */
.donut-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}

.donut-center-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.donut-center-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

/* ============================================================
   LOGS / AUDIT
   ============================================================ */
.log-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  transition: var(--transition-fast);
}

.log-row:hover { background: var(--color-bg-subtle); }

.log-time {
  width: 130px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  padding-top: 2px;
}

.log-level {
  width: 68px;
  flex-shrink: 0;
}

.log-message {
  flex: 1;
  color: var(--color-text-secondary);
  min-width: 0;
}

.log-message strong { color: var(--color-text-primary); }

.log-source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* ============================================================
   SCREENFLOW BACKOFFICE — RESPONSIVE.CSS
   Mobile-first media query overrides
   ============================================================ */

/* ============================================================
   TABLET — 992px and below
   ============================================================ */
@media (max-width: 992px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .settings-layout { grid-template-columns: 1fr; }
  .settings-sidebar { position: static; }

  .platform-health-grid { grid-template-columns: 1fr; }

  table.data-table thead th:nth-child(n+5):not(:last-child) { display: none; }
  table.data-table tbody td:nth-child(n+5):not(:last-child) { display: none; }

  .auth-right { display: none; }

  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-cell { min-height: auto; }
}

/* ============================================================
   MOBILE — 768px and below
   ============================================================ */
@media (max-width: 768px) {
  /* Page header */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .page-header-actions { width: 100%; }
  .page-header-actions .btn { flex: 1; justify-content: center; }

  /* KPI grid */
  .kpi-grid { grid-template-columns: 1fr; }

  /* Tables */
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-toolbar-left, .table-toolbar-right { width: 100%; }
  .table-search { min-width: 0; width: 100%; }

  table.data-table thead th:nth-child(n+4):not(:last-child) { display: none; }
  table.data-table tbody td:nth-child(n+4):not(:last-child) { display: none; }

  .table-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Cards */
  .device-grid { grid-template-columns: 1fr; }
  .media-grid  { grid-template-columns: repeat(2, 1fr); }

  /* Auth */
  .auth-left  { padding: var(--space-5) var(--space-4); }
  .auth-box   { max-width: 100%; }
  .auth-title { font-size: var(--text-3xl); }

  /* Modals */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh;
    transform: translateY(100%);
  }

  .modal-backdrop.open .modal { transform: translateY(0); }

  /* Offcanvas */
  .offcanvas { width: 100%; max-width: 100%; }

  /* Toast */
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
  }

  .toast { max-width: 100%; }

  /* Settings */
  .settings-row { flex-direction: column; gap: var(--space-2); }
  .settings-row-control { text-align: left; min-width: 0; width: 100%; }

  /* Upload */
  .upload-area { padding: var(--space-5); }

  /* Calendar */
  .calendar-toolbar { flex-direction: column; align-items: flex-start; }
  .calendar-grid { grid-template-columns: repeat(7, 1fr); }
  .calendar-day-header { font-size: 9px; padding: var(--space-1); }
  .calendar-cell { min-height: 60px; padding: var(--space-1); }
  .calendar-event { display: none; }
  .calendar-cell.has-events::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background: var(--brand-primary);
    border-radius: var(--radius-full);
    margin: 0 auto;
  }

  /* Error pages */
  .error-code { font-size: 80px; }

  /* Org cards */
  .org-stats { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ============================================================
   SMALL MOBILE — 480px and below
   ============================================================ */
@media (max-width: 480px) {
  .page-header-title { font-size: var(--text-2xl); }

  .media-grid { grid-template-columns: repeat(2, 1fr); }

  .auth-title { font-size: var(--text-2xl); }

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

  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }

  .breadcrumbs { display: none; }

  /* Hide non-critical table columns on very small screens */
  table.data-table thead th:nth-child(n+3):not(:last-child) { display: none; }
  table.data-table tbody td:nth-child(n+3):not(:last-child) { display: none; }

  /* Stack auth form elements */
  .auth-form .btn { width: 100%; }

  .modal-header { padding: var(--space-4); }
  .modal-body   { padding: var(--space-4); }
  .modal-footer { padding: var(--space-3) var(--space-4); flex-direction: column; }
  .modal-footer .btn { width: 100%; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .sidebar,
  .topbar,
  .upgrade-banner,
  .toast-container,
  .modal-backdrop,
  .btn-sync,
  .page-header-actions { display: none !important; }

  .app-main { margin-left: 0 !important; }

  body { background: white; color: black; }

  .card, .stat-card, .table-container {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}

/* ============================================================
   ScreenFlow — custom.css  (v1)
   Only classes genuinely absent from core/layout/components/pages.
   Load order: after responsive.css.
   ============================================================ */

.modal {overflow: scroll;}
.form-switch {margin-top: var(--space-3);}

/* ============================================================
   ScreenFlow — custom_bare.css  (v1)
   Only classes genuinely absent from core/layout/components/pages.
   Load order: after responsive.css.
   ============================================================ */

.form-switch {margin-top:var(--space-3)}

/* ============================================================
   YODECK SHELL — CSS Override pour l'espace content
   Appliqué sur body.space-content uniquement.
   Reproduit fidèlement l'UI de Yodeck (sidebar, topbar,
   nav items, cards, badges, menus contextuels, états vides).
   ============================================================ */

/* ---- Variables spécifiques Yodeck ---- */
body.space-content {
  --yd-orange:           #E87722;
  --yd-orange-hover:     #D16819;
  --yd-orange-light:     #FEF3EB;
  --yd-orange-muted:     rgba(232,119,34,0.10);
  --yd-sidebar-width:    220px;
  --yd-topbar-height:    56px;
  --yd-nav-item-h:       40px;
  --yd-font:             'Inter', 'DM Sans', sans-serif;

  /* Override tokens pour aligner Yodeck */
  --brand-primary:        #E87722;
  --brand-primary-hover:  #D16819;
  --brand-primary-light:  #FEF3EB;
  --brand-primary-muted:  rgba(232,119,34,0.10);
  --sidebar-width:        220px;
  --topbar-height:        56px;
  --color-bg-app:         #F5F6FA;
  --color-bg-surface:     #FFFFFF;
  --color-border:         #E8ECF0;
  font-family: var(--yd-font);
}

/* ---- Import Inter font (Yodeck équivalent) ---- */
body.space-content {
  font-family: 'Inter', 'DM Sans', sans-serif;
}

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

body.space-content .sidebar {
  width: var(--yd-sidebar-width);
  background: #FFFFFF;
  border-right: 1px solid #E8ECF0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Logo / Brand */
body.space-content .sidebar-brand {
  height: var(--yd-topbar-height);
  padding: 0 16px;
  border-bottom: 1px solid #E8ECF0;
  gap: 10px;
}

body.space-content .sidebar-brand-icon {
  width: 30px;
  height: 30px;
  background: var(--yd-orange);
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.03em;
  font-family: var(--yd-font);
  flex-shrink: 0;
}

body.space-content .sidebar-brand-name {
  font-family: var(--yd-font);
  font-size: 15px;
  font-weight: 700;
  color: #1A1A2E;
  letter-spacing: -0.02em;
}

/* Toggle collapse */
body.space-content .sidebar-toggle {
  right: -10px;
  width: 20px;
  height: 20px;
}

/* ---- NAV — Structure Yodeck (flat, pas de groupes) ---- */

body.space-content .sidebar-nav {
  padding: 8px 0;
  flex: 1;
}

body.space-content .sidebar-nav .nav-group {
  margin: 0;
  padding: 0;
}

/* Masquer les labels de groupe dans l'espace content Yodeck */
body.space-content .sidebar-nav .nav-group-label {
  display: none;
}

/* Item de nav */
body.space-content .sidebar-nav .nav-item {
  margin: 1px 8px;
}

body.space-content .sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  height: var(--yd-nav-item-h);
  border-radius: 8px;
  color: #3D4555;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--yd-font);
  text-decoration: none;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

body.space-content .sidebar-nav .nav-link:hover {
  background: #F5F6FA;
  color: #1A1A2E;
}

body.space-content .sidebar-nav .nav-link.active {
  background: var(--yd-orange-light);
  color: var(--yd-orange);
  font-weight: 600;
}

body.space-content .sidebar-nav .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #8A93A2;
  font-size: 20px; /* Material Icons size */
  transition: color 0.13s;
}

body.space-content .sidebar-nav .nav-link.active .nav-icon {
  color: var(--yd-orange);
}

body.space-content .sidebar-nav .nav-link:hover .nav-icon {
  color: #1A1A2E;
}

body.space-content .sidebar-nav .nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron pour dropdown Media */
body.space-content .sidebar-nav .nav-chevron {
  margin-left: auto;
  font-size: 16px;
  color: #B0B8C1;
  transition: transform 0.2s;
  flex-shrink: 0;
}

body.space-content .sidebar-nav .nav-link.expanded .nav-chevron,
body.space-content .sidebar-nav .nav-item.open .nav-chevron {
  transform: rotate(180deg);
}

/* Sous-items Media (dropdown) */
body.space-content .sidebar-nav .nav-subnav {
  list-style: none;
  margin: 0;
  padding: 2px 0 4px 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

body.space-content .sidebar-nav .nav-item.open .nav-subnav {
  max-height: 300px;
}

body.space-content .sidebar-nav .nav-subitem {
  margin: 1px 8px 1px 30px;
}

body.space-content .sidebar-nav .nav-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  border-radius: 6px;
  color: #5E687A;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--yd-font);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

body.space-content .sidebar-nav .nav-sublink:hover {
  background: #F5F6FA;
  color: #1A1A2E;
}

body.space-content .sidebar-nav .nav-sublink.active {
  background: var(--yd-orange-light);
  color: var(--yd-orange);
  font-weight: 600;
}

body.space-content .sidebar-nav .nav-subicon {
  font-size: 16px;
  color: #B0B8C1;
  width: 18px;
  flex-shrink: 0;
}

body.space-content .sidebar-nav .nav-sublink.active .nav-subicon {
  color: var(--yd-orange);
}

/* ---- Sidebar footer (Knowledge Hub) ---- */
body.space-content .sidebar-footer {
  border-top: 1px solid #E8ECF0;
  padding: 8px;
}

/* Knowledge Hub accordéon */
body.space-content .yd-knowledge-hub {
  border-radius: 8px;
  overflow: hidden;
}

body.space-content .yd-knowledge-hub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #5E687A;
  font-family: var(--yd-font);
  transition: background 0.12s;
  user-select: none;
}

body.space-content .yd-knowledge-hub-header:hover {
  background: #F5F6FA;
}

body.space-content .yd-knowledge-hub-chevron {
  font-size: 16px;
  margin-left: auto;
  color: #B0B8C1;
  transition: transform 0.2s;
}

body.space-content .yd-knowledge-hub.open .yd-knowledge-hub-chevron {
  transform: rotate(180deg);
}

body.space-content .yd-knowledge-hub-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

body.space-content .yd-knowledge-hub.open .yd-knowledge-hub-body {
  max-height: 200px;
}

body.space-content .yd-knowledge-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 36px;
  font-size: 12px;
  color: #5E687A;
  text-decoration: none;
  transition: color 0.12s;
  font-family: var(--yd-font);
}

body.space-content .yd-knowledge-link:hover {
  color: var(--yd-orange);
}

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

body.space-content .topbar {
  height: var(--yd-topbar-height);
  background: #FFFFFF;
  border-bottom: 1px solid #E8ECF0;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

body.space-content .topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.space-content .topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Titre de page dans topbar */
body.space-content .topbar-page-title {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A2E;
  font-family: var(--yd-font);
  letter-spacing: -0.02em;
}

/* Icône boutons topbar */
body.space-content .topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #5E687A;
  font-size: 22px;
  transition: background 0.12s, color 0.12s;
}

body.space-content .topbar-icon-btn:hover {
  background: #F5F6FA;
  color: #1A1A2E;
}

/* Workspace selector */
body.space-content .yd-workspace-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 36px;
  border: 1px solid #E8ECF0;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #3D4555;
  font-family: var(--yd-font);
  transition: border-color 0.12s, background 0.12s;
}

body.space-content .yd-workspace-btn:hover {
  background: #F5F6FA;
  border-color: #D0D7DE;
}

/* User avatar topbar */
body.space-content .yd-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  height: 36px;
  border: 1px solid #E8ECF0;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: var(--yd-font);
  transition: background 0.12s;
}

body.space-content .yd-user-btn:hover {
  background: #F5F6FA;
}

body.space-content .yd-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yd-orange-muted);
  color: var(--yd-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--yd-font);
  flex-shrink: 0;
}

/* CTA "Push to Screens" */
body.space-content .btn-push-screens {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  background: var(--yd-orange);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--yd-font);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.13s, box-shadow 0.13s;
  white-space: nowrap;
}

body.space-content .btn-push-screens:hover {
  background: var(--yd-orange-hover);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(232,119,34,0.30);
}

body.space-content .btn-push-screens .material-icons {
  font-size: 18px;
}

/* ============================================================
   APP MAIN (ajustement sidebar width)
   ============================================================ */

body.space-content .app-main {
  margin-left: var(--yd-sidebar-width);
}

body.space-content .page-content {
  padding: 24px;
  background: #F5F6FA;
  min-height: calc(100vh - var(--yd-topbar-height));
}

/* ============================================================
   PAGE HEADER YODECK
   ============================================================ */

body.space-content .yd-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

body.space-content .yd-page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.space-content .yd-page-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A2E;
  font-family: var(--yd-font);
  letter-spacing: -0.02em;
  margin: 0;
}

body.space-content .yd-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   TOOLBAR YODECK (au-dessus des listes)
   ============================================================ */

body.space-content .yd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

body.space-content .yd-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

body.space-content .yd-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Search bar */
body.space-content .yd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  border: 1px solid #E8ECF0;
  border-radius: 8px;
  background: #FFFFFF;
  min-width: 220px;
  max-width: 340px;
  transition: border-color 0.13s, box-shadow 0.13s;
}

body.space-content .yd-search:focus-within {
  border-color: var(--yd-orange);
  box-shadow: 0 0 0 3px rgba(232,119,34,0.12);
}

body.space-content .yd-search .material-icons {
  font-size: 18px;
  color: #B0B8C1;
  flex-shrink: 0;
}

body.space-content .yd-search input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #1A1A2E;
  font-family: var(--yd-font);
  width: 100%;
}

body.space-content .yd-search input::placeholder {
  color: #B0B8C1;
}

/* Bouton icône toolbar */
body.space-content .yd-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #E8ECF0;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  color: #5E687A;
  font-size: 20px;
  transition: background 0.12s, border-color 0.12s;
  text-decoration: none;
}

body.space-content .yd-icon-btn:hover {
  background: #F5F6FA;
  border-color: #D0D7DE;
  color: #1A1A2E;
}

body.space-content .yd-icon-btn.active {
  background: var(--yd-orange-light);
  border-color: var(--yd-orange);
  color: var(--yd-orange);
}

/* Per-page selector */
body.space-content .yd-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8A93A2;
  font-family: var(--yd-font);
}

body.space-content .yd-per-page select {
  border: 1px solid #E8ECF0;
  border-radius: 6px;
  background: #fff;
  padding: 3px 6px;
  font-size: 12px;
  color: #3D4555;
  font-family: var(--yd-font);
  cursor: pointer;
}

/* ============================================================
   TABLEAU YODECK
   ============================================================ */

body.space-content .yd-table-wrap {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E8ECF0;
  overflow: hidden;
}

body.space-content .yd-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--yd-font);
}

body.space-content .yd-table thead th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #8A93A2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #E8ECF0;
  background: #FAFBFC;
  white-space: nowrap;
  text-align: left;
}

body.space-content .yd-table thead th.check-col {
  width: 44px;
  padding: 10px 16px 10px 16px;
}

body.space-content .yd-table tbody tr {
  border-bottom: 1px solid #F0F3F5;
  transition: background 0.10s;
}

body.space-content .yd-table tbody tr:last-child {
  border-bottom: none;
}

body.space-content .yd-table tbody tr:hover {
  background: #FAFBFC;
}

body.space-content .yd-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  color: #3D4555;
  vertical-align: middle;
}

body.space-content .yd-table tbody td.check-col {
  padding: 12px 16px;
}

/* Thumbnail + name cell */
body.space-content .yd-cell-name {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.space-content .yd-thumb {
  width: 48px;
  height: 36px;
  border-radius: 4px;
  background: #F0F3F5;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.space-content .yd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.space-content .yd-thumb .material-icons {
  font-size: 20px;
  color: #C0C8D0;
}

body.space-content .yd-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A2E;
  font-family: var(--yd-font);
}

body.space-content .yd-item-meta {
  font-size: 11px;
  color: #8A93A2;
  margin-top: 1px;
}

/* Badge type media */
body.space-content .yd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--yd-font);
  white-space: nowrap;
}

body.space-content .yd-badge-gray {
  background: #F0F3F5;
  color: #5E687A;
}

body.space-content .yd-badge-green {
  background: #EDFBF3;
  color: #1E8A4A;
}

body.space-content .yd-badge-red {
  background: #FEE8E4;
  color: #CC3320;
}

body.space-content .yd-badge-orange {
  background: var(--yd-orange-light);
  color: var(--yd-orange);
}

body.space-content .yd-badge-blue {
  background: #EEF4FF;
  color: #3B6FD4;
}

body.space-content .yd-badge-premium {
  background: #FFF8E1;
  color: #B45309;
}

/* Status dot */
body.space-content .yd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--yd-font);
  font-weight: 500;
}

body.space-content .yd-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

body.space-content .yd-status-dot.online   { background: #28C76F; }
body.space-content .yd-status-dot.offline  { background: #EA5455; }
body.space-content .yd-status-dot.init     { background: #A8B0BE; }
body.space-content .yd-status-dot.pending  { background: #FF9F43; }

/* ============================================================
   MENU CONTEXTUEL ⋮ (3 points)
   ============================================================ */

body.space-content .yd-ctx-wrap {
  position: relative;
  display: inline-flex;
}

body.space-content .yd-ctx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #8A93A2;
  font-size: 20px;
  transition: background 0.12s, color 0.12s;
}

body.space-content .yd-ctx-btn:hover,
body.space-content .yd-ctx-wrap.open .yd-ctx-btn {
  background: #F0F3F5;
  color: #1A1A2E;
}

body.space-content .yd-ctx-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: #FFFFFF;
  border: 1px solid #E8ECF0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,26,46,0.12), 0 2px 6px rgba(26,26,46,0.06);
  padding: 4px 0;
  z-index: 999;
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}

body.space-content .yd-ctx-wrap.open .yd-ctx-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

body.space-content .yd-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: #3D4555;
  font-family: var(--yd-font);
  cursor: pointer;
  transition: background 0.10s;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

body.space-content .yd-ctx-item:hover {
  background: #F5F6FA;
}

body.space-content .yd-ctx-item .material-icons {
  font-size: 18px;
  color: #8A93A2;
  flex-shrink: 0;
}

body.space-content .yd-ctx-item.danger {
  color: #CC3320;
}

body.space-content .yd-ctx-item.danger .material-icons {
  color: #CC3320;
}

body.space-content .yd-ctx-separator {
  height: 1px;
  background: #F0F3F5;
  margin: 4px 0;
}

/* ============================================================
   EMPTY STATE YODECK
   ============================================================ */

body.space-content .yd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}

body.space-content .yd-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #F0F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

body.space-content .yd-empty-icon .material-icons {
  font-size: 40px;
  color: #C0C8D0;
}

body.space-content .yd-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A2E;
  font-family: var(--yd-font);
  margin-bottom: 8px;
}

body.space-content .yd-empty-desc {
  font-size: 13px;
  color: #8A93A2;
  font-family: var(--yd-font);
  max-width: 320px;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ============================================================
   CARDS GRILLE YODECK (media, screens, etc.)
   ============================================================ */

body.space-content .yd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

body.space-content .yd-card {
  background: #FFFFFF;
  border: 1px solid #E8ECF0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
}

body.space-content .yd-card:hover {
  border-color: #D0D7DE;
  box-shadow: 0 4px 16px rgba(26,26,46,0.08);
}

body.space-content .yd-card-thumb {
  aspect-ratio: 16/9;
  background: #F0F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

body.space-content .yd-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.space-content .yd-card-thumb .material-icons {
  font-size: 32px;
  color: #C0C8D0;
}

/* Hover reveal actions sur les cards */
body.space-content .yd-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,46,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}

body.space-content .yd-card:hover .yd-card-overlay {
  opacity: 1;
}

body.space-content .yd-card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer;
  color: #FFFFFF;
  font-size: 18px;
  transition: background 0.12s;
}

body.space-content .yd-card-action:hover {
  background: rgba(255,255,255,0.35);
}

body.space-content .yd-card-body {
  padding: 10px 12px;
}

body.space-content .yd-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A2E;
  font-family: var(--yd-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.space-content .yd-card-sub {
  font-size: 11px;
  color: #8A93A2;
  margin-top: 2px;
  font-family: var(--yd-font);
}

body.space-content .yd-card-check {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 0;
  transition: opacity 0.12s;
}

body.space-content .yd-card:hover .yd-card-check,
body.space-content .yd-card.selected .yd-card-check {
  opacity: 1;
}

body.space-content .yd-card.selected {
  border-color: var(--yd-orange);
  box-shadow: 0 0 0 2px var(--yd-orange-muted);
}

/* ============================================================
   DASHBOARD WIDGETS YODECK
   ============================================================ */

body.space-content .yd-greeting-card {
  background: var(--yd-orange);
  border-radius: 12px;
  padding: 24px 28px;
  color: #FFFFFF;
  font-family: var(--yd-font);
  margin-bottom: 20px;
}

body.space-content .yd-greeting-card h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

body.space-content .yd-greeting-card p {
  font-size: 13px;
  margin: 0;
  opacity: 0.85;
}

/* Widget cards */
body.space-content .yd-widget {
  background: #FFFFFF;
  border: 1px solid #E8ECF0;
  border-radius: 12px;
  overflow: hidden;
}

body.space-content .yd-widget-header {
  padding: 14px 20px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
  font-family: var(--yd-font);
  border-bottom: 1px solid #F0F3F5;
}

body.space-content .yd-widget-body {
  padding: 16px 20px;
}

/* Screen status counters */
body.space-content .yd-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #F0F3F5;
}

body.space-content .yd-status-cell {
  background: #FFFFFF;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  display: block;
}

body.space-content .yd-status-cell:hover {
  background: #FAFBFC;
}

body.space-content .yd-status-cell-label {
  font-size: 12px;
  color: #8A93A2;
  font-family: var(--yd-font);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

body.space-content .yd-status-cell-label .material-icons {
  font-size: 14px;
}

body.space-content .yd-status-cell-count {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A2E;
  font-family: var(--yd-font);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Recent activities */
body.space-content .yd-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #F0F3F5;
  font-family: var(--yd-font);
}

body.space-content .yd-activity-item:last-child {
  border-bottom: none;
}

body.space-content .yd-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C0C8D0;
  flex-shrink: 0;
  margin-top: 4px;
}

body.space-content .yd-activity-time {
  font-size: 11px;
  color: #B0B8C1;
  white-space: nowrap;
  flex-shrink: 0;
}

body.space-content .yd-activity-text {
  font-size: 12px;
  color: #5E687A;
  line-height: 1.5;
  flex: 1;
}

body.space-content .yd-activity-link {
  color: var(--yd-orange);
  text-decoration: none;
  font-weight: 600;
}

body.space-content .yd-activity-link:hover {
  text-decoration: underline;
}

/* ============================================================
   MODAL YODECK
   ============================================================ */

body.space-content .yd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,46,0.50);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

body.space-content .yd-modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

body.space-content .yd-modal {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(26,26,46,0.20), 0 8px 20px rgba(26,26,46,0.10);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s;
  font-family: var(--yd-font);
}

body.space-content .yd-modal-overlay.show .yd-modal {
  transform: translateY(0) scale(1);
}

body.space-content .yd-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #F0F3F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.space-content .yd-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0;
}

body.space-content .yd-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #8A93A2;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}

body.space-content .yd-modal-close:hover {
  background: #F0F3F5;
  color: #1A1A2E;
}

body.space-content .yd-modal-body {
  padding: 20px 24px;
}

body.space-content .yd-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #F0F3F5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================================
   BOUTONS YODECK
   ============================================================ */

body.space-content .yd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--yd-font);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.13s, box-shadow 0.13s, border-color 0.13s;
  white-space: nowrap;
}

body.space-content .yd-btn-primary {
  background: var(--yd-orange);
  color: #FFFFFF;
}

body.space-content .yd-btn-primary:hover {
  background: var(--yd-orange-hover);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(232,119,34,0.28);
}

body.space-content .yd-btn-ghost {
  background: #FFFFFF;
  color: #3D4555;
  border: 1px solid #E8ECF0;
}

body.space-content .yd-btn-ghost:hover {
  background: #F5F6FA;
  border-color: #D0D7DE;
  color: #1A1A2E;
}

body.space-content .yd-btn-danger {
  background: #FFFFFF;
  color: #CC3320;
  border: 1px solid #FCCBC5;
}

body.space-content .yd-btn-danger:hover {
  background: #FEE8E4;
}

body.space-content .yd-btn .material-icons {
  font-size: 18px;
}

/* ============================================================
   BREADCRUMB YODECK
   ============================================================ */

body.space-content .yd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-family: var(--yd-font);
  margin-bottom: 16px;
}

body.space-content .yd-breadcrumb a {
  color: #8A93A2;
  text-decoration: none;
  transition: color 0.12s;
}

body.space-content .yd-breadcrumb a:hover {
  color: var(--yd-orange);
}

body.space-content .yd-breadcrumb .sep {
  color: #C0C8D0;
  font-size: 16px;
}

body.space-content .yd-breadcrumb .current {
  color: #1A1A2E;
  font-weight: 500;
}

/* ============================================================
   CHECKBOXES YODECK
   ============================================================ */

body.space-content .yd-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--yd-orange);
  cursor: pointer;
}

/* ============================================================
   TOGGLE SWITCH YODECK
   ============================================================ */

body.space-content .yd-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

body.space-content .yd-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

body.space-content .yd-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #D0D7DE;
  border-radius: 100px;
  transition: background 0.2s;
}

body.space-content .yd-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

body.space-content .yd-toggle input:checked + .yd-toggle-slider {
  background: var(--yd-orange);
}

body.space-content .yd-toggle input:checked + .yd-toggle-slider::before {
  transform: translateX(16px);
}

/* ============================================================
   FORMULAIRES YODECK
   ============================================================ */

body.space-content .yd-form-group {
  margin-bottom: 18px;
}

body.space-content .yd-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A2E;
  font-family: var(--yd-font);
  margin-bottom: 6px;
}

body.space-content .yd-input,
body.space-content .yd-select,
body.space-content .yd-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #D0D7DE;
  border-radius: 8px;
  font-size: 13px;
  color: #1A1A2E;
  font-family: var(--yd-font);
  background: #FFFFFF;
  transition: border-color 0.13s, box-shadow 0.13s;
  outline: none;
  box-sizing: border-box;
}

body.space-content .yd-input:focus,
body.space-content .yd-select:focus,
body.space-content .yd-textarea:focus {
  border-color: var(--yd-orange);
  box-shadow: 0 0 0 3px rgba(232,119,34,0.12);
}

body.space-content .yd-textarea {
  resize: vertical;
  min-height: 90px;
}

body.space-content .yd-hint {
  font-size: 11px;
  color: #8A93A2;
  margin-top: 4px;
  font-family: var(--yd-font);
}

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

body.space-content .yd-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #F0F3F5;
  font-family: var(--yd-font);
}

body.space-content .yd-pagination-info {
  font-size: 12px;
  color: #8A93A2;
}

body.space-content .yd-pagination-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.space-content .yd-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #E8ECF0;
  background: #FFFFFF;
  font-size: 12px;
  color: #5E687A;
  cursor: pointer;
  font-family: var(--yd-font);
  transition: background 0.12s, border-color 0.12s;
}

body.space-content .yd-page-btn:hover {
  background: #F5F6FA;
  border-color: #D0D7DE;
}

body.space-content .yd-page-btn.active {
  background: var(--yd-orange);
  border-color: var(--yd-orange);
  color: #FFFFFF;
  font-weight: 600;
}

body.space-content .yd-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   NOTIFICATION TOAST
   ============================================================ */

body.space-content .yd-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

body.space-content .yd-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #E8ECF0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(26,26,46,0.12);
  font-size: 13px;
  font-family: var(--yd-font);
  color: #1A1A2E;
  min-width: 240px;
  max-width: 360px;
  pointer-events: all;
  animation: yd-toast-in 0.25s ease;
}

body.space-content .yd-toast.success { border-left: 3px solid #28C76F; }
body.space-content .yd-toast.error   { border-left: 3px solid #EA5455; }
body.space-content .yd-toast.info    { border-left: 3px solid #3B82F6; }

@keyframes yd-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  body.space-content .sidebar {
    transform: translateX(-100%);
    z-index: 200;
  }

  body.space-content .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.space-content .app-main {
    margin-left: 0;
  }
}

/* ============================================================
   COMPAT LAYER — Ancien design system → Yodeck Shell
   Override les classes .card, .btn, .page-header, .alert
   dans l'espace content pour utiliser les styles Yodeck.
   ============================================================ */

body.space-content .card {
  background: #FFFFFF;
  border: 1px solid #E8ECF0;
  border-radius: 12px;
  box-shadow: none;
  font-family: var(--yd-font);
}

body.space-content .card-header {
  padding: 14px 20px;
  border-bottom: 1px solid #F0F3F5;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A2E;
}

body.space-content .card-body {
  padding: 20px;
}

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

body.space-content .page-header-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A2E;
  font-family: var(--yd-font);
  letter-spacing: -0.02em;
  margin: 0;
}

body.space-content .page-header-left { display: flex; align-items: center; gap: 12px; }
body.space-content .page-header-actions { display: flex; gap: 8px; }

/* Override .btn vers .yd-btn */
body.space-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--yd-font);
  cursor: pointer;
  border: 1px solid #E8ECF0;
  text-decoration: none;
  transition: background 0.13s, border-color 0.13s;
}

body.space-content .btn-primary {
  background: var(--yd-orange);
  color: #FFFFFF;
  border-color: var(--yd-orange);
}
body.space-content .btn-primary:hover { background: var(--yd-orange-hover); color: #fff; }

body.space-content .btn-secondary,
body.space-content .btn-ghost {
  background: #FFFFFF;
  color: #3D4555;
}
body.space-content .btn-secondary:hover,
body.space-content .btn-ghost:hover { background: #F5F6FA; }

body.space-content .btn-danger {
  background: #FFFFFF;
  color: #CC3320;
  border-color: #FCCBC5;
}
body.space-content .btn-danger:hover { background: #FEE8E4; }

body.space-content .btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

/* Form controls */
body.space-content .form-group { margin-bottom: 18px; }
body.space-content .form-label,
body.space-content label.label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A2E;
  font-family: var(--yd-font);
  margin-bottom: 6px;
}

body.space-content .form-control,
body.space-content input[type="text"]:not(.yd-input):not(.yd-search input),
body.space-content input[type="url"]:not(.yd-input),
body.space-content input[type="email"]:not(.yd-input),
body.space-content input[type="number"]:not(.yd-input),
body.space-content select:not(.yd-select):not(.yd-per-page select),
body.space-content textarea:not(.yd-textarea) {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #D0D7DE;
  border-radius: 8px;
  font-size: 13px;
  color: #1A1A2E;
  font-family: var(--yd-font);
  background: #FFFFFF;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.13s, box-shadow 0.13s;
}

body.space-content .form-control:focus {
  border-color: var(--yd-orange);
  box-shadow: 0 0 0 3px rgba(232,119,34,0.12);
}

/* Alerts */
body.space-content .alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--yd-font);
  margin-bottom: 16px;
}
body.space-content .alert-success { background: #EDFBF3; border: 1px solid #43B577; color: #1E8A4A; }
body.space-content .alert-danger  { background: #FEE8E4; border: 1px solid #FCCBC5; color: #CC3320; }
body.space-content .alert-warning { background: #FFF8E1; border: 1px solid #F8C236; color: #B45309; }
body.space-content .alert-info    { background: #EEF4FF; border: 1px solid #4D92E7; color: #3B6FD4; }

/* Badge legacy */
body.space-content .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
body.space-content .badge-secondary { background: #F0F3F5; color: #5E687A; }

/* Tables legacy */
body.space-content table.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--yd-font);
  font-size: 13px;
}
body.space-content table.table th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #8A93A2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #E8ECF0;
  background: #FAFBFC;
  text-align: left;
}
body.space-content table.table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F0F3F5;
  color: #3D4555;
  vertical-align: middle;
}
body.space-content table.table tbody tr:hover { background: #FAFBFC; }

/* DataTables pagination */
body.space-content .dataTables_wrapper .dataTables_info,
body.space-content .dataTables_wrapper .dataTables_paginate {
  font-size: 12px;
  color: #8A93A2;
  font-family: var(--yd-font);
  margin-top: 12px;
}

body.space-content .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #E8ECF0;
  background: #FFFFFF;
  font-size: 12px;
  color: #5E687A;
  cursor: pointer;
  margin: 0 2px;
  text-decoration: none;
}

body.space-content .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--yd-orange);
  border-color: var(--yd-orange);
  color: #FFFFFF;
  font-weight: 600;
}

body.space-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
  background: #F5F6FA;
}

body.space-content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/**
 * kiosk-patch.css — correctifs et extensions CSS kiosk-v4
 * Charger après components.css dans le layout principal.
 */

/* ─── Validation States (forms.html #validation) ─────────────────────── */

.form-control.is-invalid,
.form-input.is-invalid {
  border-color: var(--color-danger);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='%23ef4444' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.invalid-feedback {
  font-size: .78rem;
  color: var(--color-danger);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

/* ─── Skeleton pulse (tables.html #loading-table) ─────────────────────── */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.skeleton-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  background: var(--bg-tertiary, #f1f5f9);
  border-radius: var(--radius-md);
}

/* ============================================================
   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); }

:root{--dt-row-selected: 13, 110, 253;--dt-row-selected-text: 255, 255, 255;--dt-row-selected-link: 228, 228, 228;--dt-row-stripe: 0, 0, 0;--dt-row-hover: 0, 0, 0;--dt-column-ordering: 0, 0, 0;--dt-header-align-items: center;--dt-header-vertical-align: middle;--dt-html-background: white}:root.dark{--dt-html-background: rgb(33, 37, 41)}table.dataTable tbody td.dt-control{text-align:center;cursor:pointer}table.dataTable tbody td.dt-control:before{display:inline-block;box-sizing:border-box;content:"";border-top:5px solid transparent;border-left:10px solid rgba(0, 0, 0, 0.5);border-bottom:5px solid transparent;border-right:0px solid transparent}table.dataTable tbody tr.dt-hasChild td.dt-control:before{border-top:10px solid rgba(0, 0, 0, 0.5);border-left:5px solid transparent;border-bottom:0px solid transparent;border-right:5px solid transparent}table.dataTable tfoot:empty{display:none}html.dark table.dataTable td.dt-control:before,:root[data-bs-theme=dark] table.dataTable td.dt-control:before,:root[data-theme=dark] table.dataTable td.dt-control:before{border-left-color:rgba(255, 255, 255, 0.5)}html.dark table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before{border-top-color:rgba(255, 255, 255, 0.5);border-left-color:transparent}div.dt-scroll{width:100%}div.dt-scroll-body thead tr,div.dt-scroll-body tfoot tr{height:0}div.dt-scroll-body thead tr th,div.dt-scroll-body thead tr td,div.dt-scroll-body tfoot tr th,div.dt-scroll-body tfoot tr td{height:0 !important;padding-top:0px !important;padding-bottom:0px !important;border-top-width:0px !important;border-bottom-width:0px !important}div.dt-scroll-body thead tr th div.dt-scroll-sizing,div.dt-scroll-body thead tr td div.dt-scroll-sizing,div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,div.dt-scroll-body tfoot tr td div.dt-scroll-sizing{height:0 !important;overflow:hidden !important}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead>tr>th.dt-orderable-asc .dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc .dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:before{position:absolute;display:block;bottom:50%;content:"▲";content:"▲"/""}table.dataTable thead>tr>th.dt-orderable-desc .dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc .dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:after{position:absolute;display:block;top:50%;content:"▼";content:"▼"/""}table.dataTable thead>tr>th.dt-orderable-asc .dt-column-order,table.dataTable thead>tr>th.dt-orderable-desc .dt-column-order,table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order,table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order,table.dataTable thead>tr>td.dt-orderable-asc .dt-column-order,table.dataTable thead>tr>td.dt-orderable-desc .dt-column-order,table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order,table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order{position:relative;width:12px;height:20px}table.dataTable thead>tr>th.dt-orderable-asc .dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-asc .dt-column-order:after,table.dataTable thead>tr>th.dt-orderable-desc .dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-desc .dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-asc .dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc .dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc .dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-desc .dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:after{left:0;opacity:.125;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc{cursor:pointer}table.dataTable thead>tr>th.dt-orderable-asc:hover,table.dataTable thead>tr>th.dt-orderable-desc:hover,table.dataTable thead>tr>td.dt-orderable-asc:hover,table.dataTable thead>tr>td.dt-orderable-desc:hover{outline:2px solid rgba(0, 0, 0, 0.05);outline-offset:-2px}table.dataTable thead>tr>th.dt-ordering-asc .dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc .dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc .dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc .dt-column-order:after{opacity:.6}table.dataTable thead>tr>th.dt-orderable-none:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order:empty,table.dataTable thead>tr>th.sorting_desc_disabled .dt-column-order:after,table.dataTable thead>tr>th.sorting_asc_disabled .dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-none:not(.dt-ordering-asc,.dt-ordering-desc) .dt-column-order:empty,table.dataTable thead>tr>td.sorting_desc_disabled .dt-column-order:after,table.dataTable thead>tr>td.sorting_asc_disabled .dt-column-order:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead>tr>th div.dt-column-header,table.dataTable thead>tr>th div.dt-column-footer,table.dataTable thead>tr>td div.dt-column-header,table.dataTable thead>tr>td div.dt-column-footer,table.dataTable tfoot>tr>th div.dt-column-header,table.dataTable tfoot>tr>th div.dt-column-footer,table.dataTable tfoot>tr>td div.dt-column-header,table.dataTable tfoot>tr>td div.dt-column-footer{display:flex;justify-content:space-between;align-items:var(--dt-header-align-items);gap:4px}table.dataTable thead>tr>th div.dt-column-header .dt-column-title,table.dataTable thead>tr>th div.dt-column-footer .dt-column-title,table.dataTable thead>tr>td div.dt-column-header .dt-column-title,table.dataTable thead>tr>td div.dt-column-footer .dt-column-title,table.dataTable tfoot>tr>th div.dt-column-header .dt-column-title,table.dataTable tfoot>tr>th div.dt-column-footer .dt-column-title,table.dataTable tfoot>tr>td div.dt-column-header .dt-column-title,table.dataTable tfoot>tr>td div.dt-column-footer .dt-column-title{flex-grow:1}table.dataTable thead>tr>th div.dt-column-header .dt-column-title:empty,table.dataTable thead>tr>th div.dt-column-footer .dt-column-title:empty,table.dataTable thead>tr>td div.dt-column-header .dt-column-title:empty,table.dataTable thead>tr>td div.dt-column-footer .dt-column-title:empty,table.dataTable tfoot>tr>th div.dt-column-header .dt-column-title:empty,table.dataTable tfoot>tr>th div.dt-column-footer .dt-column-title:empty,table.dataTable tfoot>tr>td div.dt-column-header .dt-column-title:empty,table.dataTable tfoot>tr>td div.dt-column-footer .dt-column-title:empty{display:none}div.dt-scroll-body>table.dataTable>thead>tr>th,div.dt-scroll-body>table.dataTable>thead>tr>td{overflow:hidden}:root.dark table.dataTable thead>tr>th.dt-orderable-asc:hover,:root.dark table.dataTable thead>tr>th.dt-orderable-desc:hover,:root.dark table.dataTable thead>tr>td.dt-orderable-asc:hover,:root.dark table.dataTable thead>tr>td.dt-orderable-desc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>th.dt-orderable-asc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>th.dt-orderable-desc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>td.dt-orderable-asc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>td.dt-orderable-desc:hover{outline:2px solid rgba(255, 255, 255, 0.05)}div.dt-processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-22px;text-align:center;padding:2px;z-index:10}div.dt-processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dt-processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgb(13, 110, 253);background:rgb(var(--dt-row-selected));animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dt-processing>div:last-child>div:nth-child(1){left:8px;animation:datatables-loader-1 .6s infinite}div.dt-processing>div:last-child>div:nth-child(2){left:8px;animation:datatables-loader-2 .6s infinite}div.dt-processing>div:last-child>div:nth-child(3){left:32px;animation:datatables-loader-2 .6s infinite}div.dt-processing>div:last-child>div:nth-child(4){left:56px;animation:datatables-loader-3 .6s infinite}@keyframes datatables-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes datatables-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes datatables-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th,table.dataTable td{box-sizing:border-box}table.dataTable th.dt-type-numeric,table.dataTable th.dt-type-date,table.dataTable td.dt-type-numeric,table.dataTable td.dt-type-date{text-align:right}table.dataTable th.dt-type-numeric div.dt-column-header,table.dataTable th.dt-type-numeric div.dt-column-footer,table.dataTable th.dt-type-date div.dt-column-header,table.dataTable th.dt-type-date div.dt-column-footer,table.dataTable td.dt-type-numeric div.dt-column-header,table.dataTable td.dt-type-numeric div.dt-column-footer,table.dataTable td.dt-type-date div.dt-column-header,table.dataTable td.dt-type-date div.dt-column-footer{flex-direction:row-reverse}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-left div.dt-column-header,table.dataTable th.dt-left div.dt-column-footer,table.dataTable td.dt-left div.dt-column-header,table.dataTable td.dt-left div.dt-column-footer{flex-direction:row}table.dataTable th.dt-center,table.dataTable td.dt-center{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-right div.dt-column-header,table.dataTable th.dt-right div.dt-column-footer,table.dataTable td.dt-right div.dt-column-header,table.dataTable td.dt-right div.dt-column-footer{flex-direction:row-reverse}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-justify div.dt-column-header,table.dataTable th.dt-justify div.dt-column-footer,table.dataTable td.dt-justify div.dt-column-header,table.dataTable td.dt-justify div.dt-column-footer{flex-direction:row}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable th.dt-empty,table.dataTable td.dt-empty{text-align:center;vertical-align:top}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left;vertical-align:var(--dt-header-vertical-align)}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-left div.dt-column-header,table.dataTable thead th.dt-head-left div.dt-column-footer,table.dataTable thead td.dt-head-left div.dt-column-header,table.dataTable thead td.dt-head-left div.dt-column-footer,table.dataTable tfoot th.dt-head-left div.dt-column-header,table.dataTable tfoot th.dt-head-left div.dt-column-footer,table.dataTable tfoot td.dt-head-left div.dt-column-header,table.dataTable tfoot td.dt-head-left div.dt-column-footer{flex-direction:row}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-right div.dt-column-header,table.dataTable thead th.dt-head-right div.dt-column-footer,table.dataTable thead td.dt-head-right div.dt-column-header,table.dataTable thead td.dt-head-right div.dt-column-footer,table.dataTable tfoot th.dt-head-right div.dt-column-header,table.dataTable tfoot th.dt-head-right div.dt-column-footer,table.dataTable tfoot td.dt-head-right div.dt-column-header,table.dataTable tfoot td.dt-head-right div.dt-column-footer{flex-direction:row-reverse}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-justify div.dt-column-header,table.dataTable thead th.dt-head-justify div.dt-column-footer,table.dataTable thead td.dt-head-justify div.dt-column-header,table.dataTable thead td.dt-head-justify div.dt-column-footer,table.dataTable tfoot th.dt-head-justify div.dt-column-header,table.dataTable tfoot th.dt-head-justify div.dt-column-footer,table.dataTable tfoot td.dt-head-justify div.dt-column-header,table.dataTable tfoot td.dt-head-justify div.dt-column-footer{flex-direction:row}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}:root{--dt-row-hover-alpha: 0.035;--dt-row-stripe-alpha: 0.023;--dt-column-ordering-alpha: 0.019;--dt-row-selected-stripe-alpha: 0.923;--dt-row-selected-column-ordering-alpha: 0.919}table.dataTable{width:100%;margin:0 auto;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable>thead>tr>th,table.dataTable>thead>tr>td{padding:10px;border-bottom:1px solid rgba(0, 0, 0, 0.3)}table.dataTable>thead>tr>th:active,table.dataTable>thead>tr>td:active{outline:none}table.dataTable>tfoot>tr>th,table.dataTable>tfoot>tr>td{border-top:1px solid rgba(0, 0, 0, 0.3);padding:10px 10px 6px 10px}table.dataTable>tbody>tr{background-color:transparent}table.dataTable>tbody>tr:first-child>*{border-top:none}table.dataTable>tbody>tr:last-child>*{border-bottom:none}table.dataTable>tbody>tr.selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.9);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);color:rgb(255, 255, 255);color:rgb(var(--dt-row-selected-text))}table.dataTable>tbody>tr.selected a{color:rgb(228, 228, 228);color:rgb(var(--dt-row-selected-link))}table.dataTable>tbody>tr>th,table.dataTable>tbody>tr>td{padding:8px 10px}table.dataTable.row-border>tbody>tr>*,table.dataTable.display>tbody>tr>*{border-top:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.row-border>tbody>tr:first-child>*,table.dataTable.display>tbody>tr:first-child>*{border-top:none}table.dataTable.row-border>tbody>tr.selected+tr.selected>td,table.dataTable.display>tbody>tr.selected+tr.selected>td{border-top-color:rgba(13, 110, 253, 0.65);border-top-color:rgba(var(--dt-row-selected), 0.65)}table.dataTable.cell-border>tbody>tr>*{border-top:1px solid rgba(0, 0, 0, 0.15);border-right:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.cell-border>tbody>tr>*:first-child{border-left:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.cell-border>tbody>tr:first-child>*{border-top:1px solid rgba(0, 0, 0, 0.3)}table.dataTable.stripe>tbody>tr:nth-child(odd)>*,table.dataTable.display>tbody>tr:nth-child(odd)>*{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.023);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), var(--dt-row-stripe-alpha))}table.dataTable.stripe>tbody>tr:nth-child(odd).selected>*,table.dataTable.display>tbody>tr:nth-child(odd).selected>*{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.923);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-stripe-alpha))}table.dataTable.hover>tbody>tr:hover>*,table.dataTable.display>tbody>tr:hover>*{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.035);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha))}table.dataTable.hover>tbody>tr.selected:hover>*,table.dataTable.display>tbody>tr.selected:hover>*{box-shadow:inset 0 0 0 9999px #0d6efd !important;box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important}table.dataTable.order-column>tbody tr>.sorting_1,table.dataTable.order-column>tbody tr>.sorting_2,table.dataTable.order-column>tbody tr>.sorting_3,table.dataTable.display>tbody tr>.sorting_1,table.dataTable.display>tbody tr>.sorting_2,table.dataTable.display>tbody tr>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), var(--dt-column-ordering-alpha))}table.dataTable.order-column>tbody tr.selected>.sorting_1,table.dataTable.order-column>tbody tr.selected>.sorting_2,table.dataTable.order-column>tbody tr.selected>.sorting_3,table.dataTable.display>tbody tr.selected>.sorting_1,table.dataTable.display>tbody tr.selected>.sorting_2,table.dataTable.display>tbody tr.selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-column-ordering-alpha))}table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1,table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.054);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha)))}table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_2,table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.047);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007))}table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_3,table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.039);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015))}table.dataTable.display>tbody>tr:nth-child(odd).selected>.sorting_1,table.dataTable.order-column.stripe>tbody>tr:nth-child(odd).selected>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.954);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)))}table.dataTable.display>tbody>tr:nth-child(odd).selected>.sorting_2,table.dataTable.order-column.stripe>tbody>tr:nth-child(odd).selected>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.947);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007))}table.dataTable.display>tbody>tr:nth-child(odd).selected>.sorting_3,table.dataTable.order-column.stripe>tbody>tr:nth-child(odd).selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.939);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015))}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.082);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha)))}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.074);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007))}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.062);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015))}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.982);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)))}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.974);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007))}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.962);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015))}table.dataTable.compact thead th,table.dataTable.compact thead td,table.dataTable.compact tfoot th,table.dataTable.compact tfoot td,table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}div.dt-container div.dt-layout-row{display:flex;justify-content:space-between;align-items:center;width:100%;margin:.75em 0}div.dt-container div.dt-layout-row div.dt-layout-cell{display:flex;justify-content:space-between;align-items:center}div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start{justify-content:flex-start;margin-right:auto}div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end{justify-content:flex-end;margin-left:auto}div.dt-container div.dt-layout-row div.dt-layout-cell:empty{display:none}@media screen and (max-width: 767px){div.dt-container div.dt-layout-row:not(.dt-layout-table){display:block}div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell{display:block;text-align:center}div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell>*{margin:.5em 0}div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-start{margin-right:0}div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-end{margin-left:0}}div.dt-container div.dt-layout-start>*:not(:last-child){margin-right:1em}div.dt-container div.dt-layout-end>*:not(:first-child){margin-left:1em}div.dt-container div.dt-layout-full{width:100%}div.dt-container div.dt-layout-full>*:only-child{margin-left:auto;margin-right:auto}div.dt-container div.dt-layout-table>div{display:block !important}@media screen and (max-width: 767px){div.dt-container div.dt-layout-start>*:not(:last-child){margin-right:0}div.dt-container div.dt-layout-end>*:not(:first-child){margin-left:0}}div.dt-container{position:relative;clear:both}div.dt-container .dt-search input{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;color:inherit;margin-left:3px}div.dt-container .dt-input{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;color:inherit}div.dt-container select.dt-input{padding:4px}div.dt-container .dt-paging .dt-paging-button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;color:inherit !important;border:1px solid transparent;border-radius:2px;background:transparent}div.dt-container .dt-paging .dt-paging-button.current,div.dt-container .dt-paging .dt-paging-button.current:hover{color:inherit !important;border:1px solid rgba(0, 0, 0, 0.3);background-color:rgba(0, 0, 0, 0.05);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229.5, 229.5, 229.5, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.05)));background:-webkit-linear-gradient(top, rgba(229.5, 229.5, 229.5, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:-moz-linear-gradient(top, rgba(229.5, 229.5, 229.5, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:-ms-linear-gradient(top, rgba(229.5, 229.5, 229.5, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:-o-linear-gradient(top, rgba(229.5, 229.5, 229.5, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);background:linear-gradient(to bottom, rgba(229.5, 229.5, 229.5, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%)}div.dt-container .dt-paging .dt-paging-button.disabled,div.dt-container .dt-paging .dt-paging-button.disabled:hover,div.dt-container .dt-paging .dt-paging-button.disabled:active{cursor:default;color:rgba(0, 0, 0, 0.5) !important;border:1px solid transparent;background:transparent;box-shadow:none}div.dt-container .dt-paging .dt-paging-button:hover{color:white !important;border:1px solid #111;background-color:#111;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(88.4, 88.4, 88.4)), color-stop(100%, #111));background:-webkit-linear-gradient(top, rgb(88.4, 88.4, 88.4) 0%, #111 100%);background:-moz-linear-gradient(top, rgb(88.4, 88.4, 88.4) 0%, #111 100%);background:-ms-linear-gradient(top, rgb(88.4, 88.4, 88.4) 0%, #111 100%);background:-o-linear-gradient(top, rgb(88.4, 88.4, 88.4) 0%, #111 100%);background:linear-gradient(to bottom, rgb(88.4, 88.4, 88.4) 0%, #111 100%)}div.dt-container .dt-paging .dt-paging-button:active{outline:none;background-color:rgb(11.9, 11.9, 11.9);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(42.5, 42.5, 42.5)), color-stop(100%, rgb(11.9, 11.9, 11.9)));background:-webkit-linear-gradient(top, rgb(42.5, 42.5, 42.5) 0%, rgb(11.9, 11.9, 11.9) 100%);background:-moz-linear-gradient(top, rgb(42.5, 42.5, 42.5) 0%, rgb(11.9, 11.9, 11.9) 100%);background:-ms-linear-gradient(top, rgb(42.5, 42.5, 42.5) 0%, rgb(11.9, 11.9, 11.9) 100%);background:-o-linear-gradient(top, rgb(42.5, 42.5, 42.5) 0%, rgb(11.9, 11.9, 11.9) 100%);background:linear-gradient(to bottom, rgb(42.5, 42.5, 42.5) 0%, rgb(11.9, 11.9, 11.9) 100%);box-shadow:inset 0 0 3px #111}div.dt-container .dt-paging .ellipsis{padding:0 1em}div.dt-container .dt-length,div.dt-container .dt-search,div.dt-container .dt-info,div.dt-container .dt-processing,div.dt-container .dt-paging{color:inherit}div.dt-container .dataTables_scroll{clear:both}div.dt-container .dataTables_scroll div.dt-scroll-body{-webkit-overflow-scrolling:touch}div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>th,div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>td,div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>th,div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>td{vertical-align:middle}div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>th>div.dataTables_sizing,div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>td>div.dataTables_sizing,div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>th>div.dataTables_sizing,div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}div.dt-container.dt-empty-footer tbody>tr:last-child>*{border-bottom:1px solid rgba(0, 0, 0, 0.3)}div.dt-container.dt-empty-footer .dt-scroll-body{border-bottom:1px solid rgba(0, 0, 0, 0.3)}div.dt-container.dt-empty-footer .dt-scroll-body tbody>tr:last-child>*{border-bottom:none}html.dark{--dt-row-hover: 255, 255, 255;--dt-row-stripe: 255, 255, 255;--dt-column-ordering: 255, 255, 255}html.dark table.dataTable>thead>tr>th,html.dark table.dataTable>thead>tr>td{border-bottom:1px solid rgb(89, 91, 94)}html.dark table.dataTable>thead>tr>th:active,html.dark table.dataTable>thead>tr>td:active{outline:none}html.dark table.dataTable>tfoot>tr>th,html.dark table.dataTable>tfoot>tr>td{border-top:1px solid rgb(89, 91, 94)}html.dark table.dataTable.row-border>tbody>tr>*,html.dark table.dataTable.display>tbody>tr>*{border-top:1px solid rgb(64, 67, 70)}html.dark table.dataTable.row-border>tbody>tr:first-child>*,html.dark table.dataTable.display>tbody>tr:first-child>*{border-top:none}html.dark table.dataTable.row-border>tbody>tr.selected+tr.selected>td,html.dark table.dataTable.display>tbody>tr.selected+tr.selected>td{border-top-color:rgba(13, 110, 253, 0.65);border-top-color:rgba(var(--dt-row-selected), 0.65)}html.dark table.dataTable.cell-border>tbody>tr>th,html.dark table.dataTable.cell-border>tbody>tr>td{border-top:1px solid rgb(64, 67, 70);border-right:1px solid rgb(64, 67, 70)}html.dark table.dataTable.cell-border>tbody>tr>th:first-child,html.dark table.dataTable.cell-border>tbody>tr>td:first-child{border-left:1px solid rgb(64, 67, 70)}html.dark .dt-container.dt-empty-footer table.dataTable{border-bottom:1px solid rgb(89, 91, 94)}html.dark .dt-container .dt-search input,html.dark .dt-container .dt-length select{border:1px solid rgba(255, 255, 255, 0.2);background-color:var(--dt-html-background)}html.dark .dt-container .dt-paging .dt-paging-button.current,html.dark .dt-container .dt-paging .dt-paging-button.current:hover{border:1px solid rgb(89, 91, 94);background:rgba(255, 255, 255, 0.15)}html.dark .dt-container .dt-paging .dt-paging-button.disabled,html.dark .dt-container .dt-paging .dt-paging-button.disabled:hover,html.dark .dt-container .dt-paging .dt-paging-button.disabled:active{color:#666 !important}html.dark .dt-container .dt-paging .dt-paging-button:hover{border:1px solid rgb(53, 53, 53);background:rgb(53, 53, 53)}html.dark .dt-container .dt-paging .dt-paging-button:active{background:rgb(58.1, 58.1, 58.1)}*[dir=rtl] table.dataTable thead th,*[dir=rtl] table.dataTable thead td,*[dir=rtl] table.dataTable tfoot th,*[dir=rtl] table.dataTable tfoot td{text-align:right}*[dir=rtl] table.dataTable th.dt-type-numeric,*[dir=rtl] table.dataTable th.dt-type-date,*[dir=rtl] table.dataTable td.dt-type-numeric,*[dir=rtl] table.dataTable td.dt-type-date{text-align:left}*[dir=rtl] div.dt-container div.dt-layout-cell.dt-start{text-align:right}*[dir=rtl] div.dt-container div.dt-layout-cell.dt-end{text-align:left}*[dir=rtl] div.dt-container div.dt-search input{margin:0 3px 0 0}

/* KIOSK R5 shell contract repair — original application is the visual authority. */
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.sidebar .nav-icon{font-family:inherit;font-size:16px;font-weight:700;line-height:1}
.sidebar-brand-icon{font-family:inherit}
.topbar-avatar{border:0;background:transparent;cursor:pointer}
.language-select{height:34px;border:1px solid var(--color-border,#e2e8f0);border-radius:8px;background:var(--color-bg-primary,#fff);color:var(--color-text-primary,#1a1a2e);padding:0 28px 0 10px;font:inherit;font-size:12px}
.page-content{min-width:0}
@media(max-width:768px){.breadcrumbs li:not(:last-child){display:none}.language-select{max-width:105px}}
/* KIOSK installer — product-grade wizard shell. */
.auth-page:has(.setup-shell){display:block;padding:0;background:#f5f7fb}.auth-page:has(.setup-shell)>.auth-card{width:100%;max-width:none;min-height:100dvh;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}.auth-page:has(.setup-shell)>.auth-language{z-index:5;top:22px;right:32px}.setup-shell{max-width:1320px;margin:0 auto;padding:28px 32px 56px}.setup-hero{display:flex;align-items:center;justify-content:space-between;padding-right:150px;margin-bottom:34px}.setup-brand{display:flex;align-items:center;gap:12px}.setup-brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f36c21;color:#fff;font-size:22px;font-weight:800}.setup-brand strong,.setup-brand small{display:block}.setup-brand strong{font-size:18px;letter-spacing:-.02em}.setup-brand small,.setup-secure{font-size:12px;color:#8a93a2}.setup-secure{padding:7px 10px;border:1px solid #e3e8ef;border-radius:999px;background:#fff}.setup-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e1e6ed;border-radius:14px;overflow:hidden}.setup-steps li{display:flex;align-items:center;gap:10px;padding:16px 18px;border-right:1px solid #edf0f4;color:#9aa4b2}.setup-steps li:last-child{border-right:0}.setup-steps li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f0f2f6;font-size:12px;font-weight:800}.setup-steps strong,.setup-steps small{display:block}.setup-steps strong{font-size:12px}.setup-steps small{font-size:10px;margin-top:2px}.setup-steps li.active{color:#1a1a2e;background:#fff9f5}.setup-steps li.active>span{background:#f36c21;color:#fff}.setup-steps li.done{color:#1f9d73}.setup-steps li.done>span{background:#e1f7ef;color:#148363}.setup-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);gap:22px;align-items:start}.setup-main,.setup-side{background:#fff;border:1px solid #e1e6ed;border-radius:16px;box-shadow:0 2px 8px rgba(28,39,60,.04)}.setup-main{padding:30px}.setup-side{padding:22px}.setup-section-head,.setup-side-head,.setup-form-footer,.setup-success-strip,.setup-check-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.setup-section-head{padding-bottom:24px;border-bottom:1px solid #edf0f4}.setup-section-head h1{font-size:27px;margin-bottom:6px}.setup-section-head p{margin:0;color:#697386}.setup-form{padding-top:6px}.setup-form-footer{align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid #edf0f4}.setup-form-footer small{max-width:480px}.setup-side-head{align-items:center;padding-bottom:16px;border-bottom:1px solid #edf0f4}.setup-side-head strong,.setup-side-head small{display:block}.setup-check-row{align-items:flex-start;padding:14px 0;border-bottom:1px solid #edf0f4}.setup-check-row:last-child{border-bottom:0}.setup-check-icon{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:8px;background:#f4f6f9;color:#687386;font-weight:800}.setup-check-copy{min-width:0;flex:1}.setup-check-copy strong,.setup-check-copy small{display:block}.setup-check-copy strong{font-size:12px}.setup-check-copy small{font-size:11px;margin-top:3px;overflow-wrap:anywhere}.setup-remediation{color:#b45309!important}.setup-error{display:grid;gap:3px;margin:20px 0;padding:14px 16px;border:1px solid #fecaca;border-radius:10px;background:#fff1f2;color:#b42318}.setup-success-strip{justify-content:flex-start;align-items:center;margin:20px 0;padding:14px 16px;border-radius:10px;background:#edfdf7;color:#147d64}.setup-success-strip>span{font-size:20px}.setup-success-strip strong,.setup-success-strip small{display:block}.setup-side details{margin-top:14px;padding-top:14px;border-top:1px solid #edf0f4}.setup-side summary{font-size:12px}.setup-side details>p{font-size:11px;color:#8a93a2;margin:8px 0}.setup-main input{background:#fbfcfe}.setup-main input:focus{border-color:#f36c21;box-shadow:0 0 0 3px rgba(243,108,33,.12);outline:0}@media(max-width:900px){.setup-shell{padding:20px 16px 40px}.setup-hero{padding-right:0;margin-bottom:72px}.setup-grid{grid-template-columns:1fr}.setup-steps{grid-template-columns:1fr 1fr}.setup-steps li:nth-child(2){border-right:0}.setup-steps li:nth-child(-n+2){border-bottom:1px solid #edf0f4}}@media(max-width:560px){.setup-steps{grid-template-columns:1fr}.setup-steps li{border-right:0;border-bottom:1px solid #edf0f4}.setup-section-head,.setup-form-footer{flex-direction:column}.setup-main{padding:22px}.setup-grid .form-grid{grid-template-columns:1fr}.setup-grid .span-2{grid-column:auto}.setup-secure{display:none}}