/* =====================================================================
   Prime Car — «Showroom» theme (2026-10-22)
   Direction: docs/UI_REFERENCE_ANALYSIS.md · prototype: prototype/showroom/
   Warm off-white canvas, charcoal ink, Prime red only as an accent, big
   soft cards, pill controls, hatch = reserved, shimmer instead of spinners.
   Everything is scoped under :root[data-theme="showroom"] so the Classic
   theme is untouched. Light tokens first, dark tokens after, then components.
   ===================================================================== */

/* ------------------------------------------------------------ light tokens */
:root[data-theme="showroom"] {
    color-scheme: light;

    --pc-primary:      #E5333F;
    --pc-primary-600:  #C41F2D;
    --pc-primary-700:  #A5121E;
    --pc-primary-050:  #FDECEC;
    --pc-primary-100:  #F9D3D5;
    --pc-primary-200:  #F4AAB0;

    --pc-gold:         #E2A417;
    --pc-gold-050:     #FBF0C9;
    --pc-gold-strong:  #B98300;
    --pc-gold-ink:     #7A5A00;
    --pc-violet:       #E2A417;
    --pc-violet-050:   #FBF0C9;
    --pc-sky:          #2E7BC6;
    --pc-sky-050:      #DFEEFB;
    --pc-coral:        #D93A44;
    --pc-coral-050:    #FBE3E4;
    --pc-green:        #2E9B62;
    --pc-green-050:    #DDF3E6;
    --pc-amber:        #D38C12;
    --pc-amber-050:    #FBF0C9;

    --pc-dark:         #161616;
    --pc-dark-2:       #262521;

    --pc-canvas:       #F3F2EE;
    --pc-surface:      #FFFFFF;
    --pc-surface-2:    #F6F5F2;
    --pc-line:         rgba(52, 44, 30, .09);
    --pc-line-strong:  rgba(52, 44, 30, .16);
    --pc-track:        rgba(52, 44, 30, .08);

    --pc-ink:          #161616;
    --pc-body:         #57544E;
    --pc-muted:        #8A867F;
    --pc-faint:        #ABA79F;
    --pc-on-dark:      #F6F5F2;

    --pc-r-card:  26px;
    --pc-r-inner: 16px;
    --pc-r-icon:  13px;
    --pc-r-chip:  11px;

    --pc-shadow-xs:   0 1px 2px rgba(22, 22, 22, .04);
    --pc-shadow-sm:   0 1px 2px rgba(22, 22, 22, .04), 0 10px 26px -14px rgba(22, 22, 22, .12);
    --pc-shadow-md:   0 2px 4px rgba(22, 22, 22, .05), 0 20px 40px -20px rgba(22, 22, 22, .2);
    --pc-shadow-lg:   0 2px 6px rgba(22, 22, 22, .06), 0 32px 64px -28px rgba(22, 22, 22, .3);
    --pc-shadow-hero: 0 18px 40px -22px rgba(22, 22, 22, .4);

    --pc-num:  "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
    --pc-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --pc-ok-ink:       #1F6B43;
    --pc-warn-ink:     #7A5A00;
    --pc-err-ink:      #A3202B;
    --pc-info-ink:     #1E5C93;
    --pc-reserved-ink: #A3202B;
    --pc-ok-tint:      #DDF3E6;
    --pc-warn-tint:    #FBF0C9;
    --pc-err-tint:     #FBE3E4;
    --pc-info-tint:    #DFEEFB;
    --pc-ok-line:      #B5E0C6;
    --pc-warn-line:    #EEDC9B;
    --pc-err-line:     #F2B9BD;

    --pc-canvas-art: none;
    --pc-scroll:       rgba(22, 22, 22, .18);
    --pc-scroll-hover: rgba(22, 22, 22, .34);

    --pc-side-bg:      rgba(255, 255, 255, .66);
    --pc-side-border:  rgba(52, 44, 30, .08);
    --pc-side-strong:  #161616;
    --pc-side-text:    #57544E;
    --pc-side-muted:   #8A867F;
    --pc-side-label:   #9B978F;
    --pc-side-icon:    #6E6A63;
    --pc-side-hover:   rgba(22, 22, 22, .045);
    --pc-side-active-bg:     #FFFFFF;
    --pc-side-active-ink:    #161616;
    --pc-side-active-icon:   #E5333F;
    --pc-side-active-shadow: 0 1px 2px rgba(22, 22, 22, .05), 0 8px 20px -12px rgba(22, 22, 22, .25);
    --pc-side-active-badge-bg:  #161616;
    --pc-side-active-badge-ink: #fff;
    --pc-side-card:      #161616;
    --pc-side-card-line: transparent;
    --pc-side-scroll:       rgba(22, 22, 22, .16);
    --pc-side-scroll-hover: rgba(22, 22, 22, .3);

    --pc-chart-primary: #E5333F; --pc-chart-violet: #E2A417; --pc-chart-coral: #EF7B82;
    --pc-chart-green:   #3FA772; --pc-chart-amber:  #E7B24A; --pc-chart-sky:   #5B9BD5;
    --pc-chart-dark:    #161616; --pc-chart-grid:   rgba(52, 44, 30, .1); --pc-chart-axis: #8A867F;

    --sr-hatch: repeating-linear-gradient(-45deg, var(--pc-primary) 0 3px, var(--pc-primary-100) 3px 7px);
    --sr-hero-bg:
        radial-gradient(120% 90% at 100% 0%, #FFD9B8 0%, rgba(255, 217, 184, 0) 55%),
        radial-gradient(90% 80% at 0% 100%, #FBE3D3 0%, rgba(251, 227, 211, 0) 60%),
        #FFF4EA;
    --sr-hero-ink: #161616;
    --sr-hero-sub: #7A5A45;
    --sr-sk:    #E8E6E1;
    --sr-sk-hi: rgba(255, 255, 255, .75);
}

/* ------------------------------------------------------------- dark tokens */
:root[data-theme="showroom"][data-mode="dark"] {
    color-scheme: dark;

    --pc-primary:      #F0464F;
    --pc-primary-600:  #D8323C;
    --pc-primary-700:  #B8222C;
    --pc-primary-050:  rgba(240, 70, 79, .14);
    --pc-primary-100:  rgba(240, 70, 79, .30);
    --pc-primary-200:  rgba(240, 70, 79, .45);

    --pc-gold-050:     rgba(226, 164, 23, .16);
    --pc-gold-ink:     #F0C661;
    --pc-violet-050:   rgba(226, 164, 23, .16);
    --pc-sky-050:      rgba(91, 155, 213, .16);
    --pc-coral-050:    rgba(240, 70, 79, .15);
    --pc-green-050:    rgba(63, 167, 114, .17);
    --pc-amber-050:    rgba(231, 178, 74, .16);

    --pc-dark:         #2C2B28;
    --pc-dark-2:       #353430;

    --pc-canvas:       #11110F;
    --pc-surface:      #1B1B19;
    --pc-surface-2:    #242421;
    --pc-line:         rgba(255, 250, 240, .08);
    --pc-line-strong:  rgba(255, 250, 240, .15);
    --pc-track:        rgba(255, 250, 240, .08);

    --pc-ink:          #F3F2EE;
    --pc-body:         #BDB9B1;
    --pc-muted:        #8F8B84;
    --pc-faint:        #6D6A64;

    --pc-shadow-xs:   0 1px 2px rgba(0, 0, 0, .4);
    --pc-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -16px rgba(0, 0, 0, .7);
    --pc-shadow-md:   0 2px 4px rgba(0, 0, 0, .4), 0 22px 44px -22px rgba(0, 0, 0, .8);
    --pc-shadow-lg:   0 2px 6px rgba(0, 0, 0, .45), 0 34px 70px -30px rgba(0, 0, 0, .9);

    --pc-ok-ink:       #6FD49B;
    --pc-warn-ink:     #F0C661;
    --pc-err-ink:      #FF8A82;
    --pc-info-ink:     #8DBDF0;
    --pc-reserved-ink: #FF8A82;
    --pc-primary-ink:  #FF8A90;
    --pc-ok-tint:      rgba(111, 212, 155, .13);
    --pc-warn-tint:    rgba(240, 198, 97, .13);
    --pc-err-tint:     rgba(255, 138, 130, .13);
    --pc-info-tint:    rgba(141, 189, 240, .13);
    --pc-ok-line:      rgba(111, 212, 155, .3);
    --pc-warn-line:    rgba(240, 198, 97, .3);
    --pc-err-line:     rgba(255, 138, 130, .3);

    --pc-scroll:       rgba(255, 250, 240, .16);
    --pc-scroll-hover: rgba(255, 250, 240, .3);

    --pc-side-bg:      rgba(27, 27, 25, .78);
    --pc-side-border:  rgba(255, 250, 240, .07);
    --pc-side-strong:  #F3F2EE;
    --pc-side-text:    #BDB9B1;
    --pc-side-muted:   #8F8B84;
    --pc-side-label:   #7E7A73;
    --pc-side-icon:    #A6A29A;
    --pc-side-hover:   rgba(255, 250, 240, .05);
    --pc-side-active-bg:     #2A2A27;
    --pc-side-active-ink:    #F3F2EE;
    --pc-side-active-icon:   #F0464F;
    --pc-side-active-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --pc-side-active-badge-bg:  #F3F2EE;
    --pc-side-active-badge-ink: #11110F;
    --pc-side-card:      #262522;
    --pc-side-card-line: rgba(255, 250, 240, .06);
    --pc-side-scroll:       rgba(255, 250, 240, .16);
    --pc-side-scroll-hover: rgba(255, 250, 240, .3);

    --pc-chart-dark:  #F3F2EE; --pc-chart-grid: rgba(255, 250, 240, .09); --pc-chart-axis: #8F8B84;

    --sr-hero-bg:
        radial-gradient(120% 90% at 100% 0%, rgba(240, 122, 29, .28) 0%, rgba(240, 122, 29, 0) 55%),
        radial-gradient(90% 80% at 0% 100%, rgba(229, 51, 63, .16) 0%, rgba(229, 51, 63, 0) 60%),
        #201B17;
    --sr-hero-ink: #F6EFE8;
    --sr-hero-sub: #C9AE98;
    --sr-sk:    #262623;
    --sr-sk-hi: rgba(255, 250, 240, .07);
}

/* ================================================================ COMPONENTS */
[data-theme="showroom"] body { background: var(--pc-canvas); }

/* ---- sidebar: light glass rail, active item = raised white tile ---- */
[data-theme="showroom"] .sidebar {
    backdrop-filter: blur(16px) saturate(1.2);
    padding: 18px 14px;
    gap: 12px;
}
[data-theme="showroom"] .brand__name { font-family: var(--pc-font); font-size: 16.5px; letter-spacing: 0; }
[data-theme="showroom"] .nav-group__label { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 12px 12px 4px; }
[data-theme="showroom"] .nav-item { padding: 10px 12px; border-radius: 14px; font-size: 13.5px; }
[data-theme="showroom"] .nav-item.is-active { font-weight: 600; }
[data-theme="showroom"] .nav-item__badge { font-family: var(--pc-font); background: var(--pc-primary); }
[data-theme="showroom"] .role-chip {
    color: var(--pc-ink); background: var(--pc-surface); border-color: var(--pc-line);
    box-shadow: var(--pc-shadow-xs); font-weight: 600;
}
[data-theme="showroom"] .role-chip__dot { background: var(--pc-primary); }
[data-theme="showroom"] .cta-card { color: #fff; border-radius: 22px; padding: 16px; }
[data-theme="showroom"] .cta-card__title { color: #fff; }
[data-theme="showroom"] .cta-card__sub { color: rgba(255, 255, 255, .62); }
[data-theme="showroom"] .cta-card::after { display: none; }
[data-theme="showroom"] .cta-card__icon { background: rgba(255, 255, 255, .1); }
[data-theme="showroom"] .cta-card .sr-car { display: block; width: 82%; margin: -4px auto 8px; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); }
[data-theme="showroom"] .cta-card .btn { border-radius: 999px; background: #fff; color: #161616; border-color: transparent; }
[data-theme="showroom"] .cta-card .btn .icon { color: var(--pc-primary); }

/* ---- topbar: no bar, the page breathes on the canvas ---- */
[data-theme="showroom"] .topbar {
    background: color-mix(in srgb, var(--pc-canvas) 82%, transparent);
    border-bottom-color: transparent;
    padding-block: 16px;
}
[data-theme="showroom"] .topbar__title { font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
[data-theme="showroom"] .icon-btn { border-radius: 50%; background: var(--pc-surface); border-color: var(--pc-line); box-shadow: none; }
[data-theme="showroom"] .icon-btn:hover { transform: none; box-shadow: var(--pc-shadow-sm); }
[data-theme="showroom"] .lang-switch { box-shadow: none; padding: 4px; }
[data-theme="showroom"] .lang-switch a { padding: 6px 12px; }
[data-theme="showroom"] .lang-switch a.is-active { background: var(--pc-ink); color: var(--pc-canvas); }
[data-theme="showroom"] .avatar { border-radius: 50%; background: var(--pc-primary-050); color: var(--pc-primary-600); box-shadow: none; font-weight: 700; }
[data-theme="showroom"][data-mode="dark"] .avatar { color: #FFB3B8; }
[data-theme="showroom"] .notif__panel { border-radius: 20px; padding: 10px; }

/* ---- cards: big radius, no border, soft lift ---- */
[data-theme="showroom"] .card,
[data-theme="showroom"] .stat,
[data-theme="showroom"] .lv,
[data-theme="showroom"] .table-wrap,
[data-theme="showroom"] .form-card,
[data-theme="showroom"] .placeholder-card { border-color: transparent; }
[data-theme="showroom"][data-mode="dark"] .card,
[data-theme="showroom"][data-mode="dark"] .stat,
[data-theme="showroom"][data-mode="dark"] .lv,
[data-theme="showroom"][data-mode="dark"] .table-wrap,
[data-theme="showroom"][data-mode="dark"] .form-card { border-color: var(--pc-line); }
[data-theme="showroom"] .card { padding: 20px 22px; }
[data-theme="showroom"] .card--pad-lg { padding: 22px 24px; }
[data-theme="showroom"] .card__title { font-size: 16px; font-weight: 600; }
[data-theme="showroom"] .sec-t { font-weight: 600; font-size: 16px; }
[data-theme="showroom"] .sec-t::before { width: 6px; height: 6px; border-radius: 50%; }

/* KPI (stat + kpi): label small, number big & medium weight, neutral icon tile */
[data-theme="showroom"] .stat { padding: 18px 20px; gap: 4px; }
[data-theme="showroom"] .stat:hover { transform: none; box-shadow: var(--pc-shadow-md); }
[data-theme="showroom"] .stat__icon,
[data-theme="showroom"] .kci { border-radius: 12px; background: var(--pc-surface-2); color: var(--pc-ink); }
[data-theme="showroom"] .stat__value,
[data-theme="showroom"] .kcv { font-weight: 600; letter-spacing: -.02em; font-size: 30px; }
[data-theme="showroom"] .stat__label { font-weight: 500; }
[data-theme="showroom"] .kct { font-weight: 500; color: var(--pc-body); }
[data-theme="showroom"] .theme-green .stat__icon, [data-theme="showroom"] .kci--ok { background: var(--pc-green-050); color: var(--pc-ok-ink); }
[data-theme="showroom"] .theme-amber .stat__icon, [data-theme="showroom"] .kci--warn,
[data-theme="showroom"] .theme-violet .stat__icon { background: var(--pc-amber-050); color: var(--pc-warn-ink); }
[data-theme="showroom"] .theme-coral .stat__icon { background: var(--pc-coral-050); color: var(--pc-err-ink); }
[data-theme="showroom"] .theme-primary .stat__icon { background: var(--pc-primary-050); color: var(--pc-primary-600); }
[data-theme="showroom"] .kci--gold { background: var(--pc-gold-050); color: var(--pc-gold-ink); }
/* the one highlighted metric = ink card (red stays for genuine attention) */
[data-theme="showroom"] .stat--hero,
[data-theme="showroom"] .card--red,
[data-theme="showroom"] .card--ink { background: var(--pc-dark); color: #fff; border-color: transparent; }
[data-theme="showroom"] .stat--hero::after { display: none; }
[data-theme="showroom"] .stat--hero .stat__icon,
[data-theme="showroom"] .card--red .kci,
[data-theme="showroom"] .card--ink .kci { background: rgba(255, 255, 255, .1); color: #fff; }
[data-theme="showroom"] .card--red .kct, [data-theme="showroom"] .card--red .kcs { color: rgba(255, 255, 255, .7); }
[data-theme="showroom"] .card--red .kcv .unit, [data-theme="showroom"] .card--ink .kcv .unit { color: rgba(255, 255, 255, .55); }
[data-theme="showroom"] .card--gold { background: linear-gradient(150deg, #FFE7A3, #F7CF5E); color: #4A3600; }
[data-theme="showroom"][data-mode="dark"] .card--gold { background: linear-gradient(150deg, #4E3B0E, #352806); color: #F6DC8C; }
[data-theme="showroom"] .dec { opacity: .38; }
[data-theme="showroom"] .card--red .dec, [data-theme="showroom"] .card--ink .dec, [data-theme="showroom"] .stat--hero .dec { opacity: .45; }

/* metric rows / quick cards / tasks */
[data-theme="showroom"] .metric { border-radius: 14px; }
[data-theme="showroom"] .metric__ic, [data-theme="showroom"] .task-card__ic, [data-theme="showroom"] .tl-ic, [data-theme="showroom"] .activity__dot { border-radius: 12px; }
[data-theme="showroom"] .quick-card, [data-theme="showroom"] .task-card { border-radius: 16px; background: var(--pc-surface-2); border-color: transparent; }
[data-theme="showroom"] .quick-card:hover, [data-theme="showroom"] .task-card:hover { background: var(--pc-surface); border-color: var(--pc-line); }
[data-theme="showroom"] .tl-i { border-bottom-style: solid; border-bottom-color: var(--pc-line); }

/* ---- buttons: pills ---- */
[data-theme="showroom"] .btn { border-radius: 999px; font-weight: 600; padding: 10px 18px; }
[data-theme="showroom"] .btn--sm { border-radius: 999px; padding: 7px 14px; }
[data-theme="showroom"] .btn--lg { padding: 13px 24px; }
[data-theme="showroom"] .btn--primary { box-shadow: none; }
[data-theme="showroom"] .btn--primary:hover { box-shadow: 0 8px 18px -10px rgba(229, 51, 63, .7); }
[data-theme="showroom"] .btn--ghost { background: var(--pc-surface); border-color: var(--pc-line-strong); }
[data-theme="showroom"] .act-btn, [data-theme="showroom"] .lv-act { border-radius: 50%; background: var(--pc-surface); }

/* ---- inputs ---- */
[data-theme="showroom"] .input { border-radius: 16px; border-width: 1px; background: var(--pc-surface-2); }
[data-theme="showroom"] .input:focus { background: var(--pc-surface); box-shadow: 0 0 0 4px var(--pc-primary-050); }
[data-theme="showroom"] .select, [data-theme="showroom"] .search-box input { border-radius: 999px; box-shadow: none; }
[data-theme="showroom"] .upload, [data-theme="showroom"] .dropzone { border-radius: 18px; }
[data-theme="showroom"] .form-card { border-radius: var(--pc-r-card); }

/* ---- chips, pills, status ---- */
[data-theme="showroom"] .pill { font-weight: 600; }
[data-theme="showroom"] .pill--ok { color: var(--pc-ok-ink); }
[data-theme="showroom"] .pill--warn { color: var(--pc-warn-ink); }
[data-theme="showroom"] .pill--err, [data-theme="showroom"] .pill--red { color: var(--pc-err-ink); }
[data-theme="showroom"] .pill--ink { background: var(--pc-dark); }
[data-theme="showroom"][data-mode="dark"] .pill--ink { background: var(--pc-ink); color: var(--pc-canvas); }
[data-theme="showroom"] .chip[aria-pressed="true"], [data-theme="showroom"] .cat-chip.is-active { background: var(--pc-ink); color: var(--pc-canvas); border-color: transparent; }
[data-theme="showroom"] .chip[aria-pressed="true"]:hover { color: var(--pc-canvas); }
[data-theme="showroom"] .badge-st { font-weight: 600; }
/* hatch = reserved, everywhere */
[data-theme="showroom"] .st--reserved,
[data-theme="showroom"] .car-ident__st--reserved { background: var(--pc-primary-050); color: var(--pc-err-ink); position: relative; }
[data-theme="showroom"] .st--reserved::before { background: var(--sr-hatch); width: 10px; height: 10px; border-radius: 3px; }

/* ---- list views (.lv) and tables ---- */
[data-theme="showroom"] .lv-title { font-weight: 700; font-size: 18px; }
[data-theme="showroom"] .lv-head { padding: 18px 22px; }
[data-theme="showroom"] .lv-views { padding: 0 22px 14px; }
[data-theme="showroom"] .srch, [data-theme="showroom"] .lv-select, [data-theme="showroom"] .lv-input { background-color: var(--pc-surface-2); border-color: transparent; }
[data-theme="showroom"] .srch:focus-within { border-color: var(--pc-primary-100); background-color: var(--pc-surface); }
[data-theme="showroom"] .lv-t th,
[data-theme="showroom"] .table thead th { background: transparent; color: var(--pc-muted); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; border-block-color: var(--pc-line); }
[data-theme="showroom"] .lv-t td { height: 58px; }
[data-theme="showroom"] .lv-t tbody tr:hover, [data-theme="showroom"] .table tbody tr:hover { background: var(--pc-surface-2); }
[data-theme="showroom"] .lv-t tbody tr:hover td:first-child::before { width: 3px; border-radius: 3px; }
[data-theme="showroom"] .idn__ic { background: var(--pc-surface-2); box-shadow: none; border-radius: 11px; }
[data-theme="showroom"] .idn__ic .icon, [data-theme="showroom"] .idn__ic .icon::before { color: var(--pc-ink); }
[data-theme="showroom"] .cell-car__ic, [data-theme="showroom"] .detail-hero__ic { background: var(--pc-surface-2); color: var(--pc-ink); }
[data-theme="showroom"] .lv-foot { padding: 14px 22px; }
[data-theme="showroom"] .pagination .is-current { background: var(--pc-ink); border-color: var(--pc-ink); color: var(--pc-canvas); }
[data-theme="showroom"] .pagination a, [data-theme="showroom"] .pagination .pg { border-radius: 50%; }
[data-theme="showroom"] .mono, [data-theme="showroom"] .car-ident__vin { font-family: var(--pc-mono); letter-spacing: .01em; }

/* ---- empty states: Primo, the mascot (svg injected by showroom.js) ---- */
[data-theme="showroom"] .lv-empty .ic.has-primo,
[data-theme="showroom"] .empty-state .ic.has-primo { width: 96px; height: 96px; background: none; border-radius: 0; }
[data-theme="showroom"] .ic.has-primo svg { width: 96px; height: 96px; }

/* ---- dashboard hero (showroom only markup, see dashboard/index.php) ---- */
.sr-hero { display: none; }
[data-theme="showroom"] .sr-hero { display: block; position: relative; isolation: isolate; margin: 54px 0 var(--pc-s6); min-height: 248px; }
[data-theme="showroom"] .sr-hero + .ph { display: none; }
.sr-hero__lift { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 18px 26px rgba(120, 60, 20, .14)); }
[data-mode="dark"] .sr-hero__lift { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
.sr-hero__bg {
    position: absolute; inset: 0; border-radius: var(--pc-r-card); background: var(--sr-hero-bg);
    -webkit-mask: radial-gradient(circle 35px at var(--sr-bite-x, 30px) calc(100% - 30px), transparent 34px, #000 35px);
            mask: radial-gradient(circle 35px at var(--sr-bite-x, 30px) calc(100% - 30px), transparent 34px, #000 35px);
}
:root[dir="ltr"] .sr-hero__bg { --sr-bite-x: calc(100% - 30px); }
.sr-hero__bg::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .32; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-mode="dark"] .sr-hero__bg::after { mix-blend-mode: screen; opacity: .12; }
.sr-hero__body { position: relative; z-index: 2; padding: 26px 28px 30px; max-width: 58%; color: var(--sr-hero-ink); min-height: 248px; display: flex; flex-direction: column; }
.sr-hero__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .72); color: #9A4A12; font-size: 12px; font-weight: 600; }
[data-mode="dark"] .sr-hero__tag { background: rgba(255, 255, 255, .08); color: #F7B98A; }
.sr-hero__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F07A1D; }
.sr-hero__hi { margin: 14px 0 4px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.sr-hero__sub { color: var(--sr-hero-sub); font-size: 13.5px; }
.sr-hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; padding-inline-start: 0; }
.sr-hero__acts .btn--ghost { background: rgba(255, 255, 255, .7); border-color: transparent; color: #161616; }
[data-mode="dark"] .sr-hero__acts .btn--ghost { background: rgba(255, 255, 255, .08); color: var(--sr-hero-ink); }
.sr-hero__car {
    position: absolute; z-index: 3; pointer-events: none; inset-inline-end: 3%; top: -62px; width: 29%; max-width: 350px; height: auto;
    filter: drop-shadow(0 26px 20px rgba(110, 50, 10, .26)); transition: transform .5s var(--pc-ease-out);
}
:root[dir="rtl"] .sr-hero__car { inset-inline-end: auto; inset-inline-start: auto; left: 8%; }
:root[dir="ltr"] .sr-hero__car { right: 8%; left: auto; transform: scaleX(-1); }
.sr-hero:hover .sr-hero__car { transform: translateY(-5px) rotate(-1.2deg); }
:root[dir="ltr"] .sr-hero:hover .sr-hero__car { transform: scaleX(-1) translateY(-5px) rotate(-1.2deg); }
.sr-hero__notch { position: absolute; z-index: 4; bottom: 0; width: 60px; height: 60px; display: grid; place-items: center; left: 0; }
:root[dir="ltr"] .sr-hero__notch { left: auto; right: 0; }
.sr-hero__notch a { width: 52px; height: 52px; border-radius: 50%; background: var(--pc-dark); color: #fff; display: grid; place-items: center; box-shadow: var(--pc-shadow-md); transition: transform .2s; }
[data-mode="dark"] .sr-hero__notch a { background: var(--pc-ink); color: var(--pc-canvas); }
.sr-hero__notch a:hover { transform: scale(1.06); }
:root[dir="ltr"] .sr-hero__notch .icon { transform: scaleX(-1); }

/* ---- skeleton shimmer (page entry) — see showroom.js ---- */
@keyframes sr-shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
html.sr-loading [data-theme] .app-content .card,
html.sr-loading .app-content .card,
html.sr-loading .app-content .stat,
html.sr-loading .app-content .lv,
html.sr-loading .app-content .table-wrap,
html.sr-loading .app-content .form-card {
    position: relative; overflow: hidden;
}
html.sr-loading .app-content :is(.card, .stat, .lv, .table-wrap, .form-card) > * { visibility: hidden; }
html.sr-loading .app-content :is(.card, .stat, .lv, .table-wrap, .form-card) {
    background: var(--sr-sk) !important; box-shadow: none !important; border-color: transparent !important;
}
html.sr-loading .app-content :is(.card, .stat, .lv, .table-wrap, .form-card)::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(100deg, transparent 20%, var(--sr-sk-hi) 45%, transparent 70%) 0 0 / 220% 100% no-repeat,
        linear-gradient(var(--sr-sk-hi), var(--sr-sk-hi)) var(--sr-sk-x, 100%) 20px / 38% 11px no-repeat,
        linear-gradient(var(--sr-sk-hi), var(--sr-sk-hi)) var(--sr-sk-x, 100%) 42px / 60% 20px no-repeat;
    animation: sr-shimmer 1.2s linear infinite;
}
:root[dir="ltr"] { --sr-sk-x: 20px; }
html.sr-loading .sr-hero__car { opacity: 0; transform: translateY(10px); }
html.sr-loading .sr-hero__bg { background: var(--sr-sk); }
.sr-in { animation: sr-rise .5s var(--pc-ease-out) both; animation-delay: var(--sr-d, 0ms); }
@keyframes sr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* the showroom entrance replaces the classic reveal (no double animation) */
html.sr-on [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---- long operations: the 360° car (form submits with files, exports) ---- */
.sr-busy { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: color-mix(in srgb, var(--pc-canvas) 70%, transparent); backdrop-filter: blur(3px); }
.sr-busy.is-on { display: grid; }
.sr-busy__box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 30px; border-radius: 24px; background: var(--pc-surface); box-shadow: var(--pc-shadow-lg); color: var(--pc-ink); font-weight: 600; font-size: 14px; }
.sr-spin { width: 80px; height: 64px; background: url("../../img/showroom/car-spin.png") 0 0 / 1920px 64px no-repeat; animation: sr-spin 1.6s steps(24) infinite; transform: scale(1.3); margin: 6px 0; }
@keyframes sr-spin { to { background-position: -1920px 0; } }

/* ---- mode switch (both themes) ---- */
.mode-btn .icon-sun { display: none; }
[data-mode="dark"] .mode-btn .icon-sun { display: inline-flex; }
[data-mode="dark"] .mode-btn .icon-moon { display: none; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
    [data-theme="showroom"] .sidebar { background: var(--pc-surface); backdrop-filter: none; }
}
@media (max-width: 900px) {
    /* phones/tablets: the car sits in the flow above the text, still breaking the top edge */
    [data-theme="showroom"] .sr-hero { margin-top: 36px; min-height: 0; }
    .sr-hero__car { position: relative; display: block; top: auto; left: auto !important; right: auto !important; inset-inline: auto;
        width: min(78%, 340px); max-width: none; height: auto; margin: -38px auto -6px; transform: none !important; }
    :root[dir="ltr"] .sr-hero__car { transform: scaleX(-1) !important; }
    .sr-hero:hover .sr-hero__car { transform: none !important; }
    .sr-hero__body { max-width: none; min-height: 0; padding: 4px 20px 84px; }
    .sr-hero__hi { font-size: 22px; }
}
@media (max-width: 520px) {
    /* KPI strips read as a 2-up grid on phones (less scrolling); an odd count lets the lead card span */
    [data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    [data-theme="showroom"] .app-content .grid:has(> .stat, > .card > .kpi) > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
    [data-theme="showroom"] .stat { padding: 14px 14px 16px; }
    [data-theme="showroom"] .stat > div:last-child { padding-inline-end: 0; padding-top: 40px; }
    [data-theme="showroom"] .stat__top { inset-block-start: 12px; inset-inline-end: 12px; }
    [data-theme="showroom"] .stat__icon { width: 36px; height: 36px; }
    [data-theme="showroom"] .stat__icon .icon { font-size: 17px; }
    [data-theme="showroom"] .stat__value, [data-theme="showroom"] .kcv { font-size: 22px; }
}
@media (max-width: 720px) {
    [data-theme="showroom"] .topbar__title { font-size: 18px; }
    [data-theme="showroom"] .card { padding: 18px; }
    [data-theme="showroom"] .card--pad-lg { padding: 18px; }
    [data-theme="showroom"] .lv-head, [data-theme="showroom"] .lv-views { padding-inline: 14px; }
    [data-theme="showroom"] .lv-t tbody tr { border-radius: 18px; border-color: transparent; box-shadow: var(--pc-shadow-sm); }
    [data-theme="showroom"][data-mode="dark"] .lv-t tbody tr { border-color: var(--pc-line); }
    [data-theme="showroom"] .stat__value, [data-theme="showroom"] .kcv { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-spin { animation: none; }
    html.sr-loading .app-content :is(.card, .stat, .lv, .table-wrap, .form-card)::after { animation: none; }
}
@media print {
    html.sr-loading .app-content :is(.card, .stat, .lv, .table-wrap, .form-card) > * { visibility: visible; }
    .sr-hero__car, .sr-busy { display: none !important; }
}

/* ---- split-pane apps (chat, AI assistant, WhatsApp inbox) follow the card language ---- */
[data-theme="showroom"] :is(.chat-list, .chat-thread, .ai-list, .ai-main, .wa-list, .wa-side, .wa-thread) {
    border-radius: var(--pc-r-card); border-color: transparent; box-shadow: var(--pc-shadow-sm);
}
[data-theme="showroom"][data-mode="dark"] :is(.chat-list, .chat-thread, .ai-list, .ai-main, .wa-list, .wa-side, .wa-thread) { border-color: var(--pc-line); }
[data-theme="showroom"] :is(.chat-composer textarea, .ai-composer textarea) { border-radius: 18px; background: var(--pc-surface-2); border-color: transparent; }

/* ---- login: the promo half becomes the showroom stage, the car parked at the bottom ---- */
[data-theme="showroom"] .auth { background: var(--pc-canvas); }
[data-theme="showroom"] .auth__promo { background: var(--sr-hero-bg); color: var(--sr-hero-ink); margin: 16px; border-radius: 32px; }
[data-theme="showroom"] .auth__promo::before { display: none; }
[data-theme="showroom"] .auth__promo::after {
    content: ""; inset: auto; inset-block-end: 6%; left: 50%; width: min(78%, 520px); height: 46%; border-radius: 0;
    transform: translateX(-50%); background: url("../../img/showroom/car-hero.png") center bottom / contain no-repeat;
    filter: drop-shadow(0 26px 20px rgba(110, 50, 10, .25));
}
[data-theme="showroom"] .auth__promo-body { margin-block: 8% auto; }
[data-theme="showroom"] .auth__promo h2 { color: var(--sr-hero-ink); }
[data-theme="showroom"] .auth__promo p { color: var(--sr-hero-sub); }
[data-theme="showroom"] .auth__point .tick { background: rgba(255, 255, 255, .7); color: var(--pc-primary); }
[data-theme="showroom"][data-mode="dark"] .auth__point .tick { background: rgba(255, 255, 255, .08); }
[data-theme="showroom"] .auth__brand b { color: var(--sr-hero-ink); }

/* ===== review round 1 — systemic fixes ===== */
/* desktop row height only; phone list-cards use the auto rows from app.css */
@media (max-width: 720px) { [data-theme="showroom"] .lv-t td { height: auto; } }
/* car identity: let the name wrap instead of ellipsising the make/model away */
[data-theme="showroom"] .car-ident .t b { white-space: normal; }
/* form dropdowns match the text inputs (pills stay for toolbar filters only) */
[data-theme="showroom"] :is(.field, .form-grid) .select,
[data-theme="showroom"] :is(.field, .form-grid) select.input { border-radius: 16px; background-color: var(--pc-surface-2); border-color: transparent; min-height: 48px; height: 48px; }
[data-theme="showroom"] :is(.field, .form-grid) .select:focus { background-color: var(--pc-surface); border-color: var(--pc-primary); }
/* ids, dates and money never break mid-token */
[data-theme="showroom"] :is(.lv-t, .table) :is(td[dir="ltr"], td .mono, td .num, bdi) { white-space: nowrap; }
/* links read as ink, red only on hover (red stays for the one CTA) */
[data-theme="showroom"] .form-link { color: var(--pc-ink); text-decoration: underline; text-decoration-color: var(--pc-line-strong); text-underline-offset: 3px; }
[data-theme="showroom"] .form-link:hover { color: var(--pc-primary); text-decoration-color: currentColor; }
/* KPI values never run under the corner icon; long money shrinks */
[data-theme="showroom"] .stat > div:last-child { padding-inline-end: 56px; }
[data-theme="showroom"] .stat__value { font-size: clamp(20px, 2.1vw, 30px); white-space: nowrap; }
[data-theme="showroom"] .grid:has(> .stat) { align-items: start; }
/* date range inputs in list headers stay compact */
[data-theme="showroom"] .lv-head input[type="date"], [data-theme="showroom"] .lv-tools input[type="date"] { width: 170px; flex: none; }
/* action cells never clip their buttons */
[data-theme="showroom"] .lv-t td.c-act, [data-theme="showroom"] .lv-t th.c-act { white-space: nowrap; }
@media (max-width: 720px) {
    /* chip rows (status filters, module sub-navs) scroll sideways instead of stacking 4–8 rows */
    [data-theme="showroom"] :is(.ship-tabs, .lv-views, .cat-chips) {
        flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
        -webkit-mask: linear-gradient(to left, #000 88%, transparent); mask: linear-gradient(to left, #000 88%, transparent);
    }
    :root[dir="ltr"][data-theme="showroom"] :is(.ship-tabs, .lv-views, .cat-chips) { -webkit-mask: linear-gradient(to right, #000 88%, transparent); mask: linear-gradient(to right, #000 88%, transparent); }
    [data-theme="showroom"] :is(.ship-tabs, .lv-views, .cat-chips)::-webkit-scrollbar { display: none; }
    [data-theme="showroom"] :is(.ship-tabs, .lv-views) .chip { flex: none; min-height: 38px; }
    /* filter toolbars: two even columns instead of ragged widths */
    [data-theme="showroom"] .lv-tools > :is(.lv-select, .lv-input) { flex: 1 1 calc(50% - 6px); max-width: none !important; }
    [data-theme="showroom"] .stat > div:last-child { padding-inline-end: 0; }
}
/* review round 1 (group A) */
[data-theme="showroom"] .select, [data-theme="showroom"] .lv-select { background-color: var(--pc-surface-2); border-color: transparent; }
[data-theme="showroom"] .sr-hero { margin-bottom: calc(var(--pc-s6) + 10px); }
[data-theme="showroom"] .adsch-name { background: var(--pc-dark); box-shadow: none; border-radius: 999px; }
[data-theme="showroom"][data-mode="dark"] .adsch-name { background: var(--pc-surface-2); color: var(--pc-ink); }
[data-theme="showroom"] .adsch-rep, [data-theme="showroom"] .ad-card { border-radius: var(--pc-r-inner); }
[data-theme="showroom"] .att-acts { flex-wrap: nowrap; gap: 6px; }
[data-theme="showroom"] .stat__value .unit { font-size: 13px; }
@media (max-width: 720px) {
    [data-theme="showroom"] .topbar__title { white-space: normal; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    [data-theme="showroom"] .table-scroll { -webkit-mask: linear-gradient(to left, #000 90%, transparent); mask: linear-gradient(to left, #000 90%, transparent); }
}
/* dark-mode review fixes */
[data-theme="showroom"][data-mode="dark"] .pill--ink { background: var(--pc-surface-2); color: var(--pc-ink); }
[data-theme="showroom"][data-mode="dark"] .sr-hero__notch a { background: var(--pc-surface-2); color: var(--pc-ink); box-shadow: 0 0 0 1px var(--pc-line-strong); }
[data-mode="dark"] .btn:disabled, [data-mode="dark"] .btn[disabled] { background: var(--pc-surface-2); color: var(--pc-faint); border-color: var(--pc-line); filter: none; opacity: 1; }
[data-theme="showroom"] .auth__promo .lang-switch { background: rgba(255, 255, 255, .72) !important; }
[data-theme="showroom"][data-mode="dark"] .auth__promo .lang-switch { background: rgba(255, 255, 255, .08) !important; }
/* round-2 fixes */
/* narrow KPI tiles: icon moves above the number so long money never runs under it */
[data-theme="showroom"] .stat { container-type: inline-size; }
@container (max-width: 250px) {
    .stat .stat__top { position: static; margin-bottom: 10px; }
    .stat > div:last-child { padding-inline-end: 0 !important; }
}
/* inside table rows a primary action becomes a soft red pill (one solid red CTA per view) */
[data-theme="showroom"] :is(.lv-t, .table, .att-acts) .btn--primary { background: var(--pc-primary-050); color: var(--pc-primary-ink); box-shadow: none; }
[data-theme="showroom"] :is(.lv-t, .table, .att-acts) .btn--primary:hover { background: var(--pc-primary); color: #fff; }
[data-theme="showroom"] .adsch-edit { color: var(--pc-ink); }
[data-theme="showroom"] .adsch-edit:hover { color: var(--pc-primary); }
/* dark: active chips/tabs are a raised surface, not a bright white pill */
[data-theme="showroom"][data-mode="dark"] :is(.chip[aria-pressed="true"], .cat-chip.is-active, .lang-switch a.is-active) {
    background: #3A3935; color: var(--pc-ink); box-shadow: inset 0 0 0 1px var(--pc-line-strong);
}
[data-theme="showroom"][data-mode="dark"] .card--gold { background: var(--pc-surface); border: 1px solid var(--pc-warn-line); color: var(--pc-ink); }
[data-theme="showroom"][data-mode="dark"] .card--gold .kcv { color: var(--pc-warn-ink); }
[data-theme="showroom"][data-mode="dark"] .card--gold .kci { background: var(--pc-warn-tint); color: var(--pc-warn-ink); }
.th-form { margin: 0; } .th-note { margin: 8px 0 14px; font-size: 12px; color: var(--pc-muted); line-height: 1.6; }