/* ===================================================================
   Tamin Tarkhis 24 — Preset Color Themes (TT24_THEME_PRESETS_V1)
   Cosmetic-only, additive, override-only stylesheet. No JS/PHP/DB behavior
   changes. Loaded last so [data-tt24-palette] (higher specificity than any
   plain :root block) wins regardless of load order of the files it overrides.

   IMPORTANT: uses a DEDICATED attribute, `data-tt24-palette`, NOT
   `data-theme` -- `data-theme` is already occupied by an existing (currently
   disabled) light/dark mechanism, and assets/tt24-premium.js forcibly resets
   `html[data-theme]` back to "light" on every DOM mutation. Reusing it would
   make this switcher get silently wiped every ~120ms.

   Token architecture note (why so many variables per theme): this codebase
   layers 2 separate live custom-property systems that both ultimately drive
   the same visible colors:
     1) assets/tt24-premium.css :root -- --tt24-primary-*, --tt24-gray-*,
        --tt24-brand-*, --tt24-bg-*, --tt24-border-*, --tt24-text-*, semantic
        tokens, PLUS it re-maps the older --navy/--gold/--bg/--card/--ink/
        --line/--green/--red/--amber/--blue-bg/--radius/--shadow* names to
        `var(--tt24-*)`. Because this file loads after assets/app.css, it is
        the final word on all of those older names already -- overriding
        its --tt24-* tokens here is enough to re-color them everywhere.
     2) assets/app.css's own "Premium Minimal SaaS UI Refresh v2" block
        (line ~962) -- a THIRD, independently-named token set (--brand-*,
        --accent-*, --gray-* unprefixed, --bg-page, --bg-card,
        --border-subtle/strong, --text-heading/body/muted/disabled,
        --shadow-soft/--shadow-lift) that tt24-premium.css does NOT touch
        (different names), and that some rules (e.g. `html{background:
        var(--bg-page)}`) read directly. Both systems are overridden below
        so every generation of component CSS repaints consistently.

   Palette sources (cited per theme below each block).
   =================================================================== */

/* ===================================================================
   THEME: warm  (Preset A — softer / warmer)
   Based on: Tailwind CSS "Rose" (primary/brand) + "Stone" (warm neutral
   gray) color families -- https://tailwindcss.com/docs/colors ; the
   Pantone 2026 Color of the Year "Cloud Dancer" trend toward warm, pale,
   organic off-white backgrounds instead of stark/cold white
   -- https://www.zekagraphic.com/30-creative-color-palette-ideas-for-2026/ ,
   https://recursion.software/blog/ui-color-trends-2026 ; and general
   feminine-palette convention (soft rose/mauve tones, warm ivory neutrals,
   gentle/elegant feel paired with strong text contrast for readability)
   -- https://www.media.io/color-palette/feminine-color-palette.html
   =================================================================== */
html[data-tt24-palette="warm"] {
  color-scheme: light;

  /* tt24-premium.css tokens */
  --tt24-primary-50:  #FFF1F2;
  --tt24-primary-100: #FFE4E6;
  --tt24-primary-200: #FECDD3;
  --tt24-primary-300: #FDA4AF;
  --tt24-primary-400: #FB7185;
  --tt24-primary-500: #F43F5E;
  --tt24-primary-600: #E11D48;
  --tt24-primary-700: #BE123C;
  --tt24-primary-800: #9F1239;
  --tt24-primary-900: #881337;

  --tt24-brand-navy:  #881337;
  --tt24-brand-green: #16A34A;
  --tt24-brand-red:   #E11D48;
  --tt24-brand-gold:  #E8A33D;

  --tt24-gray-50:  #FAFAF9;
  --tt24-gray-100: #F5F5F4;
  --tt24-gray-200: #E7E5E4;
  --tt24-gray-300: #D6D3D1;
  --tt24-gray-400: #A8A29E;
  --tt24-gray-500: #78716C;
  --tt24-gray-600: #57534E;
  --tt24-gray-700: #44403C;
  --tt24-gray-800: #292524;
  --tt24-gray-900: #1C1917;
  --tt24-gray-950: #0C0A09;

  --tt24-bg-page:     #FBF4F1;
  --tt24-bg-surface:  #FFFFFF;
  --tt24-bg-soft:     #FDF8F6;
  --tt24-bg-sidebar:  rgba(255, 250, 248, .88);
  --tt24-bg-elevated: rgba(255, 255, 255, .96);
  --tt24-border:       #F0DEE2;
  --tt24-border-soft:  #F7ECEE;
  --tt24-border-strong:#E2C4CB;

  --tt24-success: #15803D; --tt24-success-bg: #EEFBF1; --tt24-success-border: #BBF7D0;
  --tt24-warning: #B45309; --tt24-warning-bg: #FFFBEB; --tt24-warning-border: #FED7AA;
  --tt24-danger:  #BE123C; --tt24-danger-bg:  #FFF1F2; --tt24-danger-border:  #FECDD3;
  --tt24-info:    #86198F; --tt24-info-bg:    #FDF4FF; --tt24-info-border:    #F5D0FE;

  --tt24-text-title:    #1C1917;
  --tt24-text-body:     #44403C;
  --tt24-text-muted:    #78716C;
  --tt24-text-disabled: #A8A29E;

  --tt24-shadow-xs:      0 1px 2px rgba(136,19,55,.05);
  --tt24-shadow-card:    0 1px 2px rgba(136,19,55,.04), 0 10px 30px rgba(136,19,55,.06);
  --tt24-shadow-hover:   0 18px 48px rgba(136,19,55,.12);
  --tt24-shadow-popover: 0 24px 80px rgba(136,19,55,.18);

  /* app.css "v2" tokens (independent of tt24-premium.css, still live) */
  --brand-50:#FFF1F2; --brand-100:#FFE4E6; --brand-200:#FECDD3; --brand-300:#FDA4AF;
  --brand-400:#FB7185; --brand-500:#F43F5E; --brand-600:#E11D48; --brand-700:#BE123C;
  --brand-800:#9F1239; --brand-900:#881337; --brand-950:#4C0519;
  --accent-50:#FEF7EC; --accent-100:#FCEACB; --accent-300:#F4C878; --accent-500:#E8A33D;
  --accent-600:#CC8527; --accent-700:#A8681C;
  --gray-50:#FAFAF9; --gray-100:#F5F5F4; --gray-200:#E7E5E4; --gray-300:#D6D3D1;
  --gray-400:#A8A29E; --gray-500:#78716C; --gray-600:#57534E; --gray-700:#44403C;
  --gray-800:#292524; --gray-900:#1C1917; --gray-950:#0C0A09;
  --bg-page:#FBF4F1; --bg-card:#FFFFFF;
  --border-subtle:#F0DEE2; --border-strong:#E2C4CB;
  --text-heading:#1C1917; --text-body:#44403C; --text-muted:#78716C; --text-disabled:#A8A29E;
  --shadow-soft: 0 8px 24px rgba(136,19,55,.06);
  --shadow-lift: 0 18px 48px rgba(136,19,55,.12);
}

/* ===================================================================
   THEME: bold  (Preset B — bolder / cooler-darker)
   Based on: Tailwind CSS "Slate" (neutral) + "Indigo" (primary/brand)
   color families -- https://tailwindcss.com/docs/colors ; 2026 dark-mode
   SaaS/dashboard conventions -- true greys (not pure black) with layered
   elevation via subtle background shifts, 1-2 saturated accent colors, and
   a deep navy/near-black #0F172A-#1E293B range signaling "sophistication,
   authority, precision" for technical/professional tools
   -- https://colorlib.com/wp/dark-admin-dashboard-templates/ ,
   https://www.aydesign.ai/blog/dark-mode-dashboard-design-patterns-2026 .
   `--tt24-brand-navy` is intentionally kept at the exact value the app's
   own existing default already uses for `--tt24-primary-900` (#0B1220),
   so this dark theme reads as a natural extension of the app's own DNA
   rather than an unrelated palette bolted on.
   =================================================================== */
html[data-tt24-palette="bold"] {
  color-scheme: dark;

  --tt24-primary-50:  #EEF2FF;
  --tt24-primary-100: #E0E7FF;
  --tt24-primary-200: #C7D2FE;
  --tt24-primary-300: #A5B4FC;
  --tt24-primary-400: #818CF8;
  --tt24-primary-500: #6366F1;
  --tt24-primary-600: #4F46E5;
  --tt24-primary-700: #4338CA;
  --tt24-primary-800: #3730A3;
  --tt24-primary-900: #0B1220;

  --tt24-brand-navy:  #0B1220;
  --tt24-brand-green: #34D399;
  --tt24-brand-red:   #F87171;
  --tt24-brand-gold:  #FBBF24;

  --tt24-gray-50:  #F8FAFC;
  --tt24-gray-100: #F1F5F9;
  --tt24-gray-200: #E2E8F0;
  --tt24-gray-300: #CBD5E1;
  --tt24-gray-400: #94A3B8;
  --tt24-gray-500: #64748B;
  --tt24-gray-600: #475569;
  --tt24-gray-700: #334155;
  --tt24-gray-800: #1E293B;
  --tt24-gray-900: #0F172A;
  --tt24-gray-950: #020617;

  --tt24-bg-page:     #0B1220;
  --tt24-bg-surface:  #161F32;
  --tt24-bg-soft:     #111827;
  --tt24-bg-sidebar:  rgba(11, 18, 32, .92);
  --tt24-bg-elevated: rgba(22, 31, 50, .96);
  --tt24-border:       #24304A;
  --tt24-border-soft:  #1C2540;
  --tt24-border-strong:#384766;

  --tt24-success: #34D399; --tt24-success-bg: #052E22; --tt24-success-border: #0F5132;
  --tt24-warning: #FBBF24; --tt24-warning-bg: #3F2D0E; --tt24-warning-border: #78350F;
  --tt24-danger:  #F87171; --tt24-danger-bg:  #3F1212; --tt24-danger-border:  #7F1D1D;
  --tt24-info:    #818CF8; --tt24-info-bg:    #1E1B4B; --tt24-info-border:    #3730A3;

  --tt24-text-title:    #F1F5F9;
  --tt24-text-body:     #CBD5E1;
  --tt24-text-muted:    #94A3B8;
  --tt24-text-disabled: #64748B;

  --tt24-shadow-xs:      0 1px 2px rgba(0,0,0,.4);
  --tt24-shadow-card:    0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45);
  --tt24-shadow-hover:   0 18px 48px rgba(0,0,0,.55);
  --tt24-shadow-popover: 0 24px 80px rgba(0,0,0,.65);

  --brand-50:#EEF2FF; --brand-100:#E0E7FF; --brand-200:#C7D2FE; --brand-300:#A5B4FC;
  --brand-400:#818CF8; --brand-500:#6366F1; --brand-600:#4F46E5; --brand-700:#4338CA;
  --brand-800:#3730A3; --brand-900:#312E81; --brand-950:#1E1B4B;
  --accent-50:#FFFBEB; --accent-100:#FEF3C7; --accent-300:#FCD34D; --accent-500:#F59E0B;
  --accent-600:#D97706; --accent-700:#B45309;
  --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1E293B; --gray-900:#0F172A; --gray-950:#020617;
  --bg-page:#0B1220; --bg-card:#161F32;
  --border-subtle:#24304A; --border-strong:#384766;
  --text-heading:#F1F5F9; --text-body:#CBD5E1; --text-muted:#94A3B8; --text-disabled:#64748B;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.4);
  --shadow-lift: 0 18px 48px rgba(0,0,0,.55);
}

/* ===================================================================
   THEME: neutral  (Preset C — balanced, works for anyone)
   Based on: Tailwind CSS "Slate" (neutral) + "Cyan" (primary/brand,
   deliberately the same hue family already used by the app's own current
   default brand scale, for continuity) -- https://tailwindcss.com/docs/colors ;
   Material Design 3's systematic tonal-palette approach, where a small
   set of key hues drive the whole UI in a perceptually-consistent way
   -- https://m3.material.io/styles/color/system/how-the-system-works ,
   https://m3.material.io/styles/color/roles ; and WCAG AA contrast
   (4.5:1 body text) as the baseline for a palette meant to be safe/legible
   for the widest audience -- https://accessiblepalette.com/ .
   =================================================================== */
html[data-tt24-palette="neutral"] {
  color-scheme: light;

  --tt24-primary-50:  #ECFEFF;
  --tt24-primary-100: #CFFAFE;
  --tt24-primary-200: #A5F3FC;
  --tt24-primary-300: #67E8F9;
  --tt24-primary-400: #22D3EE;
  --tt24-primary-500: #06B6D4;
  --tt24-primary-600: #0891B2;
  --tt24-primary-700: #0E7490;
  --tt24-primary-800: #155E75;
  --tt24-primary-900: #164E63;

  --tt24-brand-navy:  #164E63;
  --tt24-brand-green: #16A34A;
  --tt24-brand-red:   #DC2626;
  --tt24-brand-gold:  #CA8A04;

  --tt24-gray-50:  #F8FAFC;
  --tt24-gray-100: #F1F5F9;
  --tt24-gray-200: #E2E8F0;
  --tt24-gray-300: #CBD5E1;
  --tt24-gray-400: #94A3B8;
  --tt24-gray-500: #64748B;
  --tt24-gray-600: #475569;
  --tt24-gray-700: #334155;
  --tt24-gray-800: #1E293B;
  --tt24-gray-900: #0F172A;
  --tt24-gray-950: #020617;

  --tt24-bg-page:     #F8FAFC;
  --tt24-bg-surface:  #FFFFFF;
  --tt24-bg-soft:     #F1F5F9;
  --tt24-bg-sidebar:  rgba(255, 255, 255, .88);
  --tt24-bg-elevated: rgba(255, 255, 255, .96);
  --tt24-border:       #E2E8F0;
  --tt24-border-soft:  #EDF2F7;
  --tt24-border-strong:#CBD5E1;

  --tt24-success: #15803D; --tt24-success-bg: #DCFCE7; --tt24-success-border: #BBF7D0;
  --tt24-warning: #B45309; --tt24-warning-bg: #FEF3C7; --tt24-warning-border: #FED7AA;
  --tt24-danger:  #B91C1C; --tt24-danger-bg:  #FEE2E2; --tt24-danger-border:  #FECACA;
  --tt24-info:    #0369A1; --tt24-info-bg:    #E0F2FE; --tt24-info-border:    #BAE6FD;

  --tt24-text-title:    #0F172A;
  --tt24-text-body:     #334155;
  --tt24-text-muted:    #64748B;
  --tt24-text-disabled: #94A3B8;

  --tt24-shadow-xs:      0 1px 2px rgba(15,23,42,.04);
  --tt24-shadow-card:    0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.05);
  --tt24-shadow-hover:   0 18px 48px rgba(15,23,42,.10);
  --tt24-shadow-popover: 0 24px 80px rgba(15,23,42,.18);

  --brand-50:#ECFEFF; --brand-100:#CFFAFE; --brand-200:#A5F3FC; --brand-300:#67E8F9;
  --brand-400:#22D3EE; --brand-500:#06B6D4; --brand-600:#0891B2; --brand-700:#0E7490;
  --brand-800:#155E75; --brand-900:#164E63; --brand-950:#083344;
  --accent-50:#FFFBEB; --accent-100:#FEF3C7; --accent-300:#FCD34D; --accent-500:#F59E0B;
  --accent-600:#CA8A04; --accent-700:#A16207;
  --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
  --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1E293B; --gray-900:#0F172A; --gray-950:#020617;
  --bg-page:#F8FAFC; --bg-card:#FFFFFF;
  --border-subtle:#E2E8F0; --border-strong:#CBD5E1;
  --text-heading:#0F172A; --text-body:#334155; --text-muted:#64748B; --text-disabled:#94A3B8;
  --shadow-soft: 0 8px 24px rgba(15,23,42,.05);
  --shadow-lift: 0 18px 48px rgba(15,23,42,.10);
}

/* ===================================================================
   Theme-switcher UI (buttons rendered inside pageDashboard, app.js).
   Deliberately NOT reusing `.tt24-theme-toggle` -- assets/tt24-premium.js
   auto-removes any element with that class on every DOM mutation.
   =================================================================== */
.tt24-palette-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 16px);
  box-shadow: var(--shadow-xs);
}
.tt24-palette-switcher-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-inline-end: 4px;
}
.tt24-palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.tt24-palette-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.tt24-palette-btn:active { transform: translateY(0); }
.tt24-palette-btn .tt24-palette-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  flex: none;
}
.tt24-palette-btn.is-active {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,37,71,.12);
}
.tt24-palette-btn[data-palette="warm"]   .tt24-palette-swatch { background: linear-gradient(135deg,#F43F5E,#FBCFE8); }
.tt24-palette-btn[data-palette="bold"]   .tt24-palette-swatch { background: linear-gradient(135deg,#0B1220,#6366F1); }
.tt24-palette-btn[data-palette="neutral"].tt24-palette-swatch,
.tt24-palette-btn[data-palette="neutral"] .tt24-palette-swatch { background: linear-gradient(135deg,#164E63,#67E8F9); }

/* ===================================================================
   TT24_THEME_PRESETS_V2_DIRECT_SURFACE_OVERRIDES
   Follow-up fix after the v1 release was reviewed against real screenshots:
   v1 only touched CSS *custom properties*. Auditing every visible surface
   on the dashboard revealed most of them are NOT driven by those
   properties at all -- they're literal hardcoded hex/rgba colors baked in
   with `!important` in later "polish pass" files (assets/tt24-d2-shell.css
   for the sidebar/topbar, assets/tt24-d1-dashboard.css for the hero/KPI
   cards/files table, assets/app.css's own later `.card{background:
   rgba(255,255,255,.94) !important}` / `body{background:...!important}`
   rules that silently override the earlier var(--card)/var(--bg-page)
   definitions). Variable overrides can never beat a literal !important
   value, so v1's coverage was real but shallow -- this section targets
   those exact hardcoded selectors directly, per theme, at the SAME or
   higher specificity (attribute selector on <html> adds one more
   selector segment than every rule it overrides) plus matching
   `!important`, so the outcome doesn't depend on file load order.

   Inventory (surface -> which of the 4 token systems governs it,
   wired in v1 / fixed here):
   - Page background            -> app.css hardcoded `body{...!important}`      | NOT wired in v1 -> fixed below
   - Sidebar background/nav     -> tt24-d2-shell.css, 100% hardcoded literals    | NOT wired in v1 -> fixed below
   - Topbar background/text     -> tt24-d2-shell.css, hardcoded (dead dark-mode
                                    variants already exist keyed off data-theme) | NOT wired in v1 -> fixed below
   - Hero banner (desktop)      -> tt24-d1-dashboard.css, hardcoded gradient     | NOT wired in v1 -> fixed below
   - Hero banner (mobile)       -> app.css `.brand-hero` uses var(--brand-*)     | already wired via v1's --brand-* override
   - KPI cards (desktop)        -> tt24-d1-dashboard.css: accent dot/bar used
                                    var(--d1-*) (wired in v1), but card
                                    background/text were hardcoded #fff/#102f50 | NOT wired in v1 -> fixed below
   - Stat cards (mobile)        -> tt24-premium.css, uses var(--tt24-*)         | already wired via v1
   - Generic .card/.info-card   -> app.css LATER rule overrides the var()-based
                                    one with a hardcoded rgba(255,255,255,.94)  | NOT wired in v1 -> fixed below
   - Files table (dashboard)    -> tt24-d1-dashboard.css, 100% hardcoded        | NOT wired in v1 -> fixed below
   - Primary buttons (.btn)     -> app.css, uses var(--brand-600/700)           | already wired via v1
   - Outline buttons            -> app.css, border/text use var(--brand-800)/
                                    var(--border-strong), but background is a
                                    hardcoded #fff (fine on light themes, wrong
                                    on the dark "bold" theme)                   | fixed for bold below
   - Status badges/pills        -> tt24-premium.css, uses var(--tt24-*)         | already wired via v1
   - Table row hover (generic)  -> app.css, uses var(--brand-50)                | already wired via v1
   =================================================================== */

/* ---------- warm ---------- */
html[data-tt24-palette="warm"] body {
  background:
    radial-gradient(circle at 12% 4%, rgba(190,18,60,.06), transparent 28%),
    linear-gradient(180deg,#FBF4F1 0%,#F7ECE8 100%) !important;
}
html[data-tt24-palette="warm"] .card,
html[data-tt24-palette="warm"] .stat,
html[data-tt24-palette="warm"] .info-card,
html[data-tt24-palette="warm"] .m-panel,
html[data-tt24-palette="warm"] .transport-company-card,
html[data-tt24-palette="warm"] .note-box,
html[data-tt24-palette="warm"] .info-grid.mini > div {
  background: rgba(255,251,249,.96) !important;
  border-color: #F0DEE2 !important;
}
html[data-tt24-palette="warm"] .tt24-d2-shell .sidebar {
  background: linear-gradient(180deg, #7C2D42 0%, #5C1F30 100%) !important;
}
html[data-tt24-palette="warm"] .tt24-d2-shell .nav-item.active {
  box-shadow: inset -3px 0 0 #E8A33D !important;
}
html[data-tt24-palette="warm"] .tt24-d2-shell .nav-item.active .ico { color: #F0C382 !important; }
html[data-tt24-palette="warm"] .tt24-d2-shell .tt24-d2-logout:hover { background: rgba(225,29,72,.20) !important; }
html[data-tt24-palette="warm"] .tt24-d2-shell .user-chip .av { color: #7C2D42 !important; }
html[data-tt24-palette="warm"] .tt24-d2-shell .topbar {
  background: rgba(255,250,248,.94) !important;
  border-bottom-color: #F0DEE2 !important;
}
html[data-tt24-palette="warm"] .tt24-d2-shell .topbar .page-title,
html[data-tt24-palette="warm"] .tt24-d2-shell .tt24-d2-topbar-identity b { color: #7C2D42 !important; }
html[data-tt24-palette="warm"] .tt24-d2-shell .tt24-d2-topbar-identity small { color: #9B848C !important; }
html[data-tt24-palette="warm"] .tt24-d2-shell .tt24-d2-topbar-user {
  background: rgba(255,251,249,.98) !important;
  border-color: #F0DEE2 !important;
}
html[data-tt24-palette="warm"] .tt24-d2-shell .tt24-d2-topbar-avatar { background: #7C2D42 !important; }
html[data-tt24-palette="warm"] .tt24-d1-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.18), transparent 27%),
    linear-gradient(128deg,#7C2D42 0%,#9F1239 46%,#E11D48 100%) !important;
}
html[data-tt24-palette="warm"] .tt24-d1-kpi,
html[data-tt24-palette="warm"] .tt24-d1-card,
html[data-tt24-palette="warm"] .tt24-d1-table-wrap { background: #FFFDFC !important; border-color: #F0DEE2 !important; }
html[data-tt24-palette="warm"] .tt24-d1-kpi-top { color: #8B6F78 !important; }
html[data-tt24-palette="warm"] .tt24-d1-kpi strong { color: #3B2530 !important; }
html[data-tt24-palette="warm"] .tt24-d1-kpi small { color: #A78A93 !important; }
html[data-tt24-palette="warm"] .tt24-d1-card-head h3,
html[data-tt24-palette="warm"] .tt24-d1-activity-item b { color: #3B2530 !important; }
html[data-tt24-palette="warm"] .tt24-d1-files-table thead th { background: #FBF3F0 !important; color: #8B6F78 !important; border-bottom-color: #F0DEE2 !important; }
html[data-tt24-palette="warm"] .tt24-d1-files-table tbody td { border-bottom-color: #F5E8EA !important; color: #4A3540 !important; }
html[data-tt24-palette="warm"] .tt24-d1-files-table tbody tr:hover,
html[data-tt24-palette="warm"] .tt24-d1-files-table tbody tr:focus { background: #FDF3F5 !important; }
html[data-tt24-palette="warm"] .tt24-d1-file-ref,
html[data-tt24-palette="warm"] .tt24-d1-row-action { color: #BE123C !important; }

/* ---------- bold ---------- */
html[data-tt24-palette="bold"] body {
  background:
    radial-gradient(circle at 12% 4%, rgba(99,102,241,.12), transparent 28%),
    linear-gradient(180deg,#0B1220 0%,#0D1526 100%) !important;
}
html[data-tt24-palette="bold"] .card,
html[data-tt24-palette="bold"] .stat,
html[data-tt24-palette="bold"] .info-card,
html[data-tt24-palette="bold"] .m-panel,
html[data-tt24-palette="bold"] .transport-company-card,
html[data-tt24-palette="bold"] .note-box,
html[data-tt24-palette="bold"] .info-grid.mini > div {
  background: #161F32 !important;
  border-color: #24304A !important;
  color: #CBD5E1 !important;
}
html[data-tt24-palette="bold"] .card-h h3,
html[data-tt24-palette="bold"] .m-panel h4,
html[data-tt24-palette="bold"] .info-card h4,
html[data-tt24-palette="bold"] .section-title { color: #F1F5F9 !important; }
html[data-tt24-palette="bold"] .tt24-d2-shell .sidebar {
  background: linear-gradient(180deg, #0B1220 0%, #050810 100%) !important;
}
html[data-tt24-palette="bold"] .tt24-d2-shell .nav-item.active {
  box-shadow: inset -3px 0 0 #FBBF24 !important;
}
html[data-tt24-palette="bold"] .tt24-d2-shell .nav-item.active .ico { color: #FBBF24 !important; }
html[data-tt24-palette="bold"] .tt24-d2-shell .tt24-d2-logout:hover { background: rgba(248,113,113,.20) !important; }
html[data-tt24-palette="bold"] .tt24-d2-shell .user-chip .av { color: #0B1220 !important; }
html[data-tt24-palette="bold"] .tt24-d2-shell .topbar {
  background: color-mix(in srgb, #161F32 94%, transparent) !important;
  border-bottom-color: #24304A !important;
}
html[data-tt24-palette="bold"] .tt24-d2-shell .topbar .page-title,
html[data-tt24-palette="bold"] .tt24-d2-shell .tt24-d2-topbar-identity b { color: #F1F5F9 !important; }
html[data-tt24-palette="bold"] .tt24-d2-shell .tt24-d2-topbar-identity small { color: #94A3B8 !important; }
html[data-tt24-palette="bold"] .tt24-d2-shell .tt24-d2-topbar-user {
  background: #161F32 !important;
  border-color: #24304A !important;
}
html[data-tt24-palette="bold"] .tt24-d2-shell .tt24-d2-topbar-avatar { background: #4F46E5 !important; }
html[data-tt24-palette="bold"] .tt24-d1-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.10), transparent 27%),
    linear-gradient(128deg,#0B1220 0%,#1E1B4B 46%,#4338CA 100%) !important;
}
html[data-tt24-palette="bold"] .tt24-d1-kpi,
html[data-tt24-palette="bold"] .tt24-d1-card,
html[data-tt24-palette="bold"] .tt24-d1-table-wrap { background: #161F32 !important; border-color: #24304A !important; }
html[data-tt24-palette="bold"] .tt24-d1-kpi-top { color: #94A3B8 !important; }
html[data-tt24-palette="bold"] .tt24-d1-kpi strong { color: #F1F5F9 !important; }
html[data-tt24-palette="bold"] .tt24-d1-kpi small { color: #64748B !important; }
html[data-tt24-palette="bold"] .tt24-d1-card-head h3,
html[data-tt24-palette="bold"] .tt24-d1-activity-item b { color: #F1F5F9 !important; }
html[data-tt24-palette="bold"] .tt24-d1-files-table thead th { background: #111827 !important; color: #94A3B8 !important; border-bottom-color: #24304A !important; }
html[data-tt24-palette="bold"] .tt24-d1-files-table tbody td { border-bottom-color: #1C2540 !important; color: #CBD5E1 !important; }
html[data-tt24-palette="bold"] .tt24-d1-files-table tbody tr:hover,
html[data-tt24-palette="bold"] .tt24-d1-files-table tbody tr:focus { background: #1B2540 !important; }
html[data-tt24-palette="bold"] .tt24-d1-file-ref,
html[data-tt24-palette="bold"] .tt24-d1-row-action { color: #A5B4FC !important; }
html[data-tt24-palette="bold"] .btn-outline,
html[data-tt24-palette="bold"] .btn-o {
  background: #161F32 !important;
  color: #E2E8F0 !important;
  border-color: #384766 !important;
}
html[data-tt24-palette="bold"] .btn-outline:hover,
html[data-tt24-palette="bold"] .btn-o:hover { background: #1B2540 !important; border-color: #4F46E5 !important; color: #F1F5F9 !important; }
html[data-tt24-palette="bold"] input,
html[data-tt24-palette="bold"] select,
html[data-tt24-palette="bold"] textarea {
  background: #111827 !important;
  color: #E2E8F0 !important;
  border-color: #384766 !important;
}
html[data-tt24-palette="bold"] input::placeholder,
html[data-tt24-palette="bold"] textarea::placeholder { color: #64748B !important; }
html[data-tt24-palette="bold"] table td,
html[data-tt24-palette="bold"] table th { color: #CBD5E1 !important; border-bottom-color: #24304A !important; }
html[data-tt24-palette="bold"] .empty { color: #94A3B8 !important; }

/* ---------- neutral ---------- */
html[data-tt24-palette="neutral"] body {
  background:
    radial-gradient(circle at 12% 4%, rgba(6,182,212,.06), transparent 28%),
    linear-gradient(180deg,#F8FAFC 0%,#F4F7FB 100%) !important;
}
html[data-tt24-palette="neutral"] .card,
html[data-tt24-palette="neutral"] .stat,
html[data-tt24-palette="neutral"] .info-card,
html[data-tt24-palette="neutral"] .m-panel,
html[data-tt24-palette="neutral"] .transport-company-card,
html[data-tt24-palette="neutral"] .note-box,
html[data-tt24-palette="neutral"] .info-grid.mini > div {
  background: rgba(255,255,255,.96) !important;
  border-color: #E2E8F0 !important;
}
html[data-tt24-palette="neutral"] .tt24-d2-shell .sidebar {
  background: linear-gradient(180deg, #164E63 0%, #0F3A48 100%) !important;
}
html[data-tt24-palette="neutral"] .tt24-d2-shell .nav-item.active {
  box-shadow: inset -3px 0 0 #22D3EE !important;
}
html[data-tt24-palette="neutral"] .tt24-d2-shell .nav-item.active .ico { color: #67E8F9 !important; }
html[data-tt24-palette="neutral"] .tt24-d2-shell .tt24-d2-logout:hover { background: rgba(220,38,38,.16) !important; }
html[data-tt24-palette="neutral"] .tt24-d2-shell .user-chip .av { color: #164E63 !important; }
html[data-tt24-palette="neutral"] .tt24-d2-shell .topbar {
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: #E2E8F0 !important;
}
html[data-tt24-palette="neutral"] .tt24-d2-shell .topbar .page-title,
html[data-tt24-palette="neutral"] .tt24-d2-shell .tt24-d2-topbar-identity b { color: #164E63 !important; }
html[data-tt24-palette="neutral"] .tt24-d2-shell .tt24-d2-topbar-identity small { color: #64748B !important; }
html[data-tt24-palette="neutral"] .tt24-d2-shell .tt24-d2-topbar-user {
  background: #fff !important;
  border-color: #E2E8F0 !important;
}
html[data-tt24-palette="neutral"] .tt24-d2-shell .tt24-d2-topbar-avatar { background: #164E63 !important; }
html[data-tt24-palette="neutral"] .tt24-d1-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.16), transparent 27%),
    linear-gradient(128deg,#164E63 0%,#0E7490 46%,#22D3EE 100%) !important;
}
html[data-tt24-palette="neutral"] .tt24-d1-kpi,
html[data-tt24-palette="neutral"] .tt24-d1-card,
html[data-tt24-palette="neutral"] .tt24-d1-table-wrap { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
html[data-tt24-palette="neutral"] .tt24-d1-kpi-top { color: #64748B !important; }
html[data-tt24-palette="neutral"] .tt24-d1-kpi strong { color: #0F172A !important; }
html[data-tt24-palette="neutral"] .tt24-d1-kpi small { color: #94A3B8 !important; }
html[data-tt24-palette="neutral"] .tt24-d1-card-head h3,
html[data-tt24-palette="neutral"] .tt24-d1-activity-item b { color: #0F172A !important; }
html[data-tt24-palette="neutral"] .tt24-d1-files-table thead th { background: #F8FAFC !important; color: #64748B !important; border-bottom-color: #E2E8F0 !important; }
html[data-tt24-palette="neutral"] .tt24-d1-files-table tbody td { border-bottom-color: #EEF2F7 !important; color: #334155 !important; }
html[data-tt24-palette="neutral"] .tt24-d1-files-table tbody tr:hover,
html[data-tt24-palette="neutral"] .tt24-d1-files-table tbody tr:focus { background: #F0F9FB !important; }
html[data-tt24-palette="neutral"] .tt24-d1-file-ref,
html[data-tt24-palette="neutral"] .tt24-d1-row-action { color: #0E7490 !important; }

/* ===================================================================
   Desktop dashboard KPI cards (assets/tt24-d1-dashboard.css) use their
   OWN separately-scoped --d1-* custom properties (defined on
   `.tt24-d1-dashboard`, not :root), a 4th independent token family.
   Overridden here too so the KPI accent bars/dots follow the active
   palette. Note (disclosed, not silently glossed over): a few values in
   that file are hardcoded literal rgba()/hex, not var()-based (the KPI
   glow shadows and the muted label/number text colors) -- those stay a
   neutral dark-navy/grey in all 3 themes rather than being edited here,
   consistent with keeping this pass additive-only.
   =================================================================== */
html[data-tt24-palette="warm"] .tt24-d1-dashboard {
  --d1-navy:#881337; --d1-navy-2:#9F1239; --d1-blue:#BE123C; --d1-cyan:#E11D48;
  --d1-green:#16A34A; --d1-gold:#E8A33D; --d1-red:#E11D48; --d1-bg:#FBF4F1; --d1-line:#F0DEE2;
}
html[data-tt24-palette="bold"] .tt24-d1-dashboard {
  --d1-navy:#0B1220; --d1-navy-2:#312E81; --d1-blue:#4F46E5; --d1-cyan:#6366F1;
  --d1-green:#34D399; --d1-gold:#FBBF24; --d1-red:#F87171; --d1-bg:#111827; --d1-line:#24304A;
}
html[data-tt24-palette="neutral"] .tt24-d1-dashboard {
  --d1-navy:#164E63; --d1-navy-2:#155E75; --d1-blue:#0E7490; --d1-cyan:#22D3EE;
  --d1-green:#16A34A; --d1-gold:#CA8A04; --d1-red:#DC2626; --d1-bg:#F8FAFC; --d1-line:#E2E8F0;
}

/* ===================================================================
   TT24_THEME_SYSTEM_V3 — original TT24 plus four coordinated themes.
   These blocks intentionally follow the legacy presets above. They map both
   generations of TT24 tokens and repaint the few major surfaces that still
   use literal colors in older component stylesheets.
   =================================================================== */
html[data-tt24-palette="original"] {
  color-scheme:light;
  --tt24-primary-50:#EEF4FA;--tt24-primary-100:#DCEAF5;--tt24-primary-200:#BDD7EA;--tt24-primary-300:#8EBADB;--tt24-primary-400:#5797C8;--tt24-primary-500:#2C75AD;--tt24-primary-600:#1E5E94;--tt24-primary-700:#174B78;--tt24-primary-800:#123A5F;--tt24-primary-900:#0F2747;
  --tt24-brand-navy:#0F2747;--tt24-brand-green:#169B62;--tt24-brand-red:#D93535;--tt24-brand-gold:#E4B51C;
  --tt24-gray-50:#F8FAFC;--tt24-gray-100:#F1F5F9;--tt24-gray-200:#E2E8F0;--tt24-gray-300:#CBD5E1;--tt24-gray-400:#94A3B8;--tt24-gray-500:#64748B;--tt24-gray-600:#475569;--tt24-gray-700:#334155;--tt24-gray-800:#1E293B;--tt24-gray-900:#0F172A;--tt24-gray-950:#020617;
  --tt24-bg-page:#F4F7FB;--tt24-bg-surface:#FFFFFF;--tt24-bg-soft:#F7FAFD;--tt24-bg-sidebar:#174B78;--tt24-bg-elevated:#FFFFFF;
  --tt24-border:#DCE6F0;--tt24-border-soft:#EAF0F6;--tt24-border-strong:#B9C9D9;
  --tt24-text-title:#102F50;--tt24-text-body:#344A62;--tt24-text-muted:#66758A;--tt24-text-disabled:#94A3B8;
  --tt24-theme-primary:#0F4C81;--tt24-theme-primary-strong:#0F2747;--tt24-theme-primary-soft:#EEF4FA;--tt24-theme-accent:#E4B51C;--tt24-theme-accent-2:#13A8C6;--tt24-theme-page:#F4F7FB;--tt24-theme-surface:#FFFFFF;--tt24-theme-sidebar:#174B78;--tt24-theme-sidebar-2:#0F3154;--tt24-theme-line:#DCE6F0;--tt24-theme-ink:#102F50;--tt24-theme-muted:#66758A;--tt24-theme-glow:rgba(15,76,129,.28);
}
html[data-tt24-palette="vercel"] {
  color-scheme:light;
  --tt24-primary-50:#FAFAFA;--tt24-primary-100:#F5F5F5;--tt24-primary-200:#E5E5E5;--tt24-primary-300:#D4D4D4;--tt24-primary-400:#A3A3A3;--tt24-primary-500:#737373;--tt24-primary-600:#525252;--tt24-primary-700:#404040;--tt24-primary-800:#262626;--tt24-primary-900:#171717;
  --tt24-brand-navy:#171717;--tt24-brand-green:#15803D;--tt24-brand-red:#DC2626;--tt24-brand-gold:#737373;
  --tt24-gray-50:#FAFAFA;--tt24-gray-100:#F5F5F5;--tt24-gray-200:#E5E5E5;--tt24-gray-300:#D4D4D4;--tt24-gray-400:#A3A3A3;--tt24-gray-500:#737373;--tt24-gray-600:#525252;--tt24-gray-700:#404040;--tt24-gray-800:#262626;--tt24-gray-900:#171717;--tt24-gray-950:#0A0A0A;
  --tt24-bg-page:#F7F7F7;--tt24-bg-surface:#FFFFFF;--tt24-bg-soft:#F5F5F5;--tt24-bg-sidebar:#171717;--tt24-bg-elevated:#FFFFFF;
  --tt24-border:#E5E5E5;--tt24-border-soft:#EFEFEF;--tt24-border-strong:#CFCFCF;
  --tt24-text-title:#171717;--tt24-text-body:#404040;--tt24-text-muted:#737373;--tt24-text-disabled:#A3A3A3;
  --tt24-theme-primary:#171717;--tt24-theme-primary-strong:#000000;--tt24-theme-primary-soft:#F0F0F0;--tt24-theme-accent:#737373;--tt24-theme-accent-2:#A3A3A3;--tt24-theme-page:#F7F7F7;--tt24-theme-surface:#FFFFFF;--tt24-theme-sidebar:#171717;--tt24-theme-sidebar-2:#292929;--tt24-theme-line:#E5E5E5;--tt24-theme-ink:#171717;--tt24-theme-muted:#737373;--tt24-theme-glow:rgba(23,23,23,.24);
}
html[data-tt24-palette="modern"] {
  color-scheme:light;
  --tt24-primary-50:#EFF6FF;--tt24-primary-100:#DBEAFE;--tt24-primary-200:#BFDBFE;--tt24-primary-300:#93C5FD;--tt24-primary-400:#60A5FA;--tt24-primary-500:#3B82F6;--tt24-primary-600:#2563EB;--tt24-primary-700:#1D4ED8;--tt24-primary-800:#1E40AF;--tt24-primary-900:#1E3A8A;
  --tt24-brand-navy:#1E3A5F;--tt24-brand-green:#16A34A;--tt24-brand-red:#DC2626;--tt24-brand-gold:#F59E0B;
  --tt24-gray-50:#F8FAFC;--tt24-gray-100:#F1F5F9;--tt24-gray-200:#E2E8F0;--tt24-gray-300:#CBD5E1;--tt24-gray-400:#94A3B8;--tt24-gray-500:#64748B;--tt24-gray-600:#475569;--tt24-gray-700:#334155;--tt24-gray-800:#1E293B;--tt24-gray-900:#0F172A;--tt24-gray-950:#020617;
  --tt24-bg-page:#F6F9FF;--tt24-bg-surface:#FFFFFF;--tt24-bg-soft:#EFF6FF;--tt24-bg-sidebar:#173B68;--tt24-bg-elevated:#FFFFFF;
  --tt24-border:#DCE7F5;--tt24-border-soft:#EAF1FA;--tt24-border-strong:#BDD0E9;
  --tt24-text-title:#17243B;--tt24-text-body:#334155;--tt24-text-muted:#64748B;--tt24-text-disabled:#94A3B8;
  --tt24-theme-primary:#3B82F6;--tt24-theme-primary-strong:#1E40AF;--tt24-theme-primary-soft:#EFF6FF;--tt24-theme-accent:#60A5FA;--tt24-theme-accent-2:#22B8CF;--tt24-theme-page:#F6F9FF;--tt24-theme-surface:#FFFFFF;--tt24-theme-sidebar:#173B68;--tt24-theme-sidebar-2:#235C9B;--tt24-theme-line:#DCE7F5;--tt24-theme-ink:#17243B;--tt24-theme-muted:#64748B;--tt24-theme-glow:rgba(59,130,246,.32);
}
html[data-tt24-palette="nature"] {
  color-scheme:light;
  --tt24-primary-50:#F0FDF4;--tt24-primary-100:#DCFCE7;--tt24-primary-200:#BBF7D0;--tt24-primary-300:#86EFAC;--tt24-primary-400:#6DDBA7;--tt24-primary-500:#42B883;--tt24-primary-600:#2E9A6B;--tt24-primary-700:#237A57;--tt24-primary-800:#1D6248;--tt24-primary-900:#174C3C;
  --tt24-brand-navy:#174C3C;--tt24-brand-green:#2E9A6B;--tt24-brand-red:#C2414B;--tt24-brand-gold:#B7791F;
  --tt24-gray-50:#F8FBF8;--tt24-gray-100:#F0F5F1;--tt24-gray-200:#DFE9E1;--tt24-gray-300:#C8D8CD;--tt24-gray-400:#91AA9A;--tt24-gray-500:#668071;--tt24-gray-600:#4D6658;--tt24-gray-700:#394E42;--tt24-gray-800:#27392F;--tt24-gray-900:#17261E;--tt24-gray-950:#0D1711;
  --tt24-bg-page:#F3FBF6;--tt24-bg-surface:#FFFFFF;--tt24-bg-soft:#EAF8EF;--tt24-bg-sidebar:#163F35;--tt24-bg-elevated:#FFFFFF;
  --tt24-border:#CFE8D9;--tt24-border-soft:#E1F1E7;--tt24-border-strong:#A9D4BA;
  --tt24-text-title:#18382B;--tt24-text-body:#365746;--tt24-text-muted:#668071;--tt24-text-disabled:#91AA9A;
  --tt24-theme-primary:#2E9A6B;--tt24-theme-primary-strong:#174C3C;--tt24-theme-primary-soft:#EAF8EF;--tt24-theme-accent:#6DDBA7;--tt24-theme-accent-2:#A3C76D;--tt24-theme-page:#F3FBF6;--tt24-theme-surface:#FFFFFF;--tt24-theme-sidebar:#163F35;--tt24-theme-sidebar-2:#22664F;--tt24-theme-line:#CFE8D9;--tt24-theme-ink:#18382B;--tt24-theme-muted:#668071;--tt24-theme-glow:rgba(46,154,107,.3);
}
html[data-tt24-palette="cyberpunk"] {
  color-scheme:light;
  --tt24-primary-50:#FDF2F8;--tt24-primary-100:#FCE7F3;--tt24-primary-200:#FBCFE8;--tt24-primary-300:#F9A8D4;--tt24-primary-400:#F472B6;--tt24-primary-500:#E74398;--tt24-primary-600:#D63384;--tt24-primary-700:#BE185D;--tt24-primary-800:#9D174D;--tt24-primary-900:#831843;
  --tt24-brand-navy:#0E4A57;--tt24-brand-green:#168C67;--tt24-brand-red:#D92D5D;--tt24-brand-gold:#F7C948;
  --tt24-gray-50:#FFFCF4;--tt24-gray-100:#FFF8E7;--tt24-gray-200:#F5EBD4;--tt24-gray-300:#E8D9BB;--tt24-gray-400:#B7A98B;--tt24-gray-500:#82765F;--tt24-gray-600:#655A48;--tt24-gray-700:#4C4335;--tt24-gray-800:#342D24;--tt24-gray-900:#211C17;--tt24-gray-950:#110E0C;
  --tt24-bg-page:#FFF8E7;--tt24-bg-surface:#FFFCF4;--tt24-bg-soft:#FCE7F3;--tt24-bg-sidebar:#0E4A57;--tt24-bg-elevated:#FFFFFF;
  --tt24-border:#E8D9BB;--tt24-border-soft:#F3E9D4;--tt24-border-strong:#D7C39C;
  --tt24-text-title:#0E4A57;--tt24-text-body:#334F53;--tt24-text-muted:#6D7775;--tt24-text-disabled:#A8AAA2;
  --tt24-theme-primary:#D63384;--tt24-theme-primary-strong:#A71962;--tt24-theme-primary-soft:#FCE7F3;--tt24-theme-accent:#22B8CF;--tt24-theme-accent-2:#F7C948;--tt24-theme-page:#FFF8E7;--tt24-theme-surface:#FFFCF4;--tt24-theme-sidebar:#0E4A57;--tt24-theme-sidebar-2:#0F6473;--tt24-theme-line:#E8D9BB;--tt24-theme-ink:#0E4A57;--tt24-theme-muted:#6D7775;--tt24-theme-glow:rgba(214,51,132,.32);
}

html[data-tt24-palette="original"],html[data-tt24-palette="vercel"],html[data-tt24-palette="modern"],html[data-tt24-palette="nature"],html[data-tt24-palette="cyberpunk"] {
  --navy:var(--tt24-theme-primary-strong);--gold:var(--tt24-theme-primary);--bg:var(--tt24-theme-page);--card:var(--tt24-theme-surface);--ink:var(--tt24-theme-ink);--muted:var(--tt24-theme-muted);--line:var(--tt24-theme-line);
  --brand-50:var(--tt24-primary-50);--brand-100:var(--tt24-primary-100);--brand-200:var(--tt24-primary-200);--brand-300:var(--tt24-primary-300);--brand-400:var(--tt24-primary-400);--brand-500:var(--tt24-primary-500);--brand-600:var(--tt24-primary-600);--brand-700:var(--tt24-primary-700);--brand-800:var(--tt24-primary-800);--brand-900:var(--tt24-primary-900);
  --accent-50:var(--tt24-primary-50);--accent-100:var(--tt24-primary-100);--accent-300:var(--tt24-primary-300);--accent-500:var(--tt24-theme-accent);--accent-600:var(--tt24-theme-primary);--accent-700:var(--tt24-theme-primary-strong);
  --gray-50:var(--tt24-gray-50);--gray-100:var(--tt24-gray-100);--gray-200:var(--tt24-gray-200);--gray-300:var(--tt24-gray-300);--gray-400:var(--tt24-gray-400);--gray-500:var(--tt24-gray-500);--gray-600:var(--tt24-gray-600);--gray-700:var(--tt24-gray-700);--gray-800:var(--tt24-gray-800);--gray-900:var(--tt24-gray-900);--gray-950:var(--tt24-gray-950);
  --bg-page:var(--tt24-theme-page);--bg-card:var(--tt24-theme-surface);--border-subtle:var(--tt24-theme-line);--border-strong:var(--tt24-border-strong);--text-heading:var(--tt24-theme-ink);--text-body:var(--tt24-text-body);--text-muted:var(--tt24-theme-muted);--text-disabled:var(--tt24-text-disabled);
  --shadow-soft:0 10px 28px color-mix(in srgb,var(--tt24-theme-primary) 9%,transparent);--shadow-lift:0 18px 48px color-mix(in srgb,var(--tt24-theme-primary) 15%,transparent);
}
html[data-tt24-palette="original"] {--gold:var(--tt24-brand-gold);}

/* Complete surface coverage */
html[data-tt24-palette] body,html[data-tt24-palette] #root,html[data-tt24-palette] .main,html[data-tt24-palette] .content {
  background:radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--tt24-theme-accent) 9%,transparent),transparent 28%),linear-gradient(180deg,var(--tt24-theme-page),color-mix(in srgb,var(--tt24-theme-page) 86%,#fff)) !important;color:var(--tt24-text-body);
}
html[data-tt24-palette] .sidebar,html[data-tt24-palette] .tt24-d2-shell .sidebar {background:radial-gradient(circle at 8% 18%,color-mix(in srgb,var(--tt24-theme-accent) 22%,transparent),transparent 34%),linear-gradient(165deg,var(--tt24-theme-header-1) 0%,var(--tt24-theme-header-2) 62%,var(--tt24-theme-header-3) 125%) !important;}
html[data-tt24-palette] .topbar,html[data-tt24-palette] .tt24-d2-shell .topbar {background:color-mix(in srgb,var(--tt24-theme-surface) 94%,transparent) !important;border-color:var(--tt24-theme-line) !important;backdrop-filter:blur(16px);}
html[data-tt24-palette] .page-title,html[data-tt24-palette] h1,html[data-tt24-palette] h2,html[data-tt24-palette] h3,html[data-tt24-palette] h4 {color:var(--tt24-theme-ink);}
html[data-tt24-palette] .card,html[data-tt24-palette] .stat,html[data-tt24-palette] .info-card,html[data-tt24-palette] .m-panel,html[data-tt24-palette] .modal,html[data-tt24-palette] .modal-c,html[data-tt24-palette] .transport-company-card,html[data-tt24-palette] .note-box,html[data-tt24-palette] .tt24-d1-card,html[data-tt24-palette] .tt24-d1-kpi,html[data-tt24-palette] .tt24-d1-table-wrap {
  background:color-mix(in srgb,var(--tt24-theme-surface) 97%,var(--tt24-theme-primary-soft)) !important;border-color:var(--tt24-theme-line) !important;box-shadow:0 10px 30px color-mix(in srgb,var(--tt24-theme-primary) 7%,transparent) !important;
}
html[data-tt24-palette] input,html[data-tt24-palette] select,html[data-tt24-palette] textarea {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] input:focus,html[data-tt24-palette] select:focus,html[data-tt24-palette] textarea:focus {border-color:var(--tt24-theme-primary) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--tt24-theme-primary) 17%,transparent) !important;}
html[data-tt24-palette] table thead th {background:var(--tt24-theme-primary-soft) !important;color:var(--tt24-theme-ink) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] table tbody td {border-color:color-mix(in srgb,var(--tt24-theme-line) 76%,transparent) !important;}
html[data-tt24-palette] table tbody tr:hover {background:color-mix(in srgb,var(--tt24-theme-primary-soft) 72%,#fff) !important;}
html[data-tt24-palette] .btn-gold,html[data-tt24-palette] .btn.primary,html[data-tt24-palette] .btn.btn-primary {background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong)) !important;border-color:transparent !important;color:#fff !important;box-shadow:0 8px 20px color-mix(in srgb,var(--tt24-theme-primary) 24%,transparent) !important;}
html[data-tt24-palette] .btn-outline,html[data-tt24-palette] .btn-o {background:var(--tt24-theme-surface) !important;border-color:color-mix(in srgb,var(--tt24-theme-primary) 52%,var(--tt24-theme-line)) !important;color:var(--tt24-theme-primary-strong) !important;}
html[data-tt24-palette] a {color:var(--tt24-theme-primary);}

/* Profile theme picker */
.tt24-palette-switcher{margin-top:16px;padding:18px;border:1px solid var(--tt24-theme-line);border-radius:20px;background:var(--tt24-theme-surface);box-shadow:0 12px 34px color-mix(in srgb,var(--tt24-theme-primary) 8%,transparent)}
.tt24-palette-switcher-copy{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:14px}.tt24-palette-switcher-copy>b{color:var(--tt24-theme-ink);font-size:16px}.tt24-palette-switcher-copy>small{color:var(--tt24-theme-muted)}
.tt24-palette-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.tt24-palette-btn{display:flex;align-items:center;gap:11px;min-height:72px;padding:12px;border:1px solid var(--tt24-theme-line);border-radius:15px;background:color-mix(in srgb,var(--tt24-theme-surface) 92%,var(--tt24-theme-primary-soft));color:var(--tt24-theme-ink);cursor:pointer;text-align:right;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.tt24-palette-btn:hover{transform:translateY(-2px);border-color:var(--tt24-theme-primary)}.tt24-palette-btn.is-active{border-color:var(--tt24-theme-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--tt24-theme-primary) 14%,transparent),0 10px 24px color-mix(in srgb,var(--tt24-theme-primary) 14%,transparent)}.tt24-palette-btn b,.tt24-palette-btn small{display:block}.tt24-palette-btn small{margin-top:4px;color:var(--tt24-theme-muted);font-size:10px}.tt24-palette-swatches{display:flex;direction:ltr}.tt24-palette-swatches i{display:block;width:17px;height:32px;background:var(--swatch);border:1px solid rgba(0,0,0,.08)}.tt24-palette-swatches i:first-child{border-radius:8px 0 0 8px}.tt24-palette-swatches i:last-child{border-radius:0 8px 8px 0}

/* ReactBits Line Sidebar: a clearly visible horizontal rail stretches into each item. */
html[data-tt24-palette] .sidebar .nav-item,html[data-tt24-palette] .tt24-d2-shell .nav-item{position:relative;overflow:hidden;padding-left:42px !important;border:1px solid transparent !important;box-shadow:none !important;transition:background .34s ease,color .28s ease,transform .38s cubic-bezier(.2,.9,.25,1.25),padding-left .38s cubic-bezier(.2,.9,.25,1.25)}
html[data-tt24-palette] .sidebar .nav-item::before,html[data-tt24-palette] .tt24-d2-shell .nav-item::before{content:"";position:absolute;left:12px;top:50%;width:18px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--tt24-theme-accent),var(--tt24-theme-accent-2));transform:translateY(-50%);transform-origin:left center;opacity:.72;transition:width .42s cubic-bezier(.16,1.35,.36,1),height .24s ease,opacity .2s ease,box-shadow .28s ease;box-shadow:0 0 8px color-mix(in srgb,var(--tt24-theme-accent) 42%,transparent)}
html[data-tt24-palette] .sidebar .nav-item:hover::before,html[data-tt24-palette] .tt24-d2-shell .nav-item:hover::before{width:46px;height:3px;opacity:1;box-shadow:0 0 15px color-mix(in srgb,var(--tt24-theme-accent) 78%,transparent)}
html[data-tt24-palette] .sidebar .nav-item.active::before,html[data-tt24-palette] .tt24-d2-shell .nav-item.active::before{width:58px;height:3px;opacity:1;box-shadow:0 0 18px color-mix(in srgb,var(--tt24-theme-accent) 86%,transparent)}
html[data-tt24-palette] .sidebar .nav-item:hover,html[data-tt24-palette] .tt24-d2-shell .nav-item:hover{padding-left:66px !important;background:rgba(255,255,255,.09) !important;transform:translateX(-4px)}
html[data-tt24-palette] .sidebar .nav-item.active,html[data-tt24-palette] .tt24-d2-shell .nav-item.active{padding-left:78px !important;background:rgba(255,255,255,.16) !important;border-color:rgba(255,255,255,.13) !important;transform:translateX(-5px)}

/* ReactBits Rubber Segment: the selected pill visibly stretches and snaps into place. */
.tt24-d4a-view-nav{position:relative !important;isolation:isolate;padding:7px !important;border:1px solid var(--tt24-theme-line) !important;background:color-mix(in srgb,var(--tt24-theme-primary-soft) 78%,var(--tt24-theme-surface)) !important;box-shadow:inset 0 2px 6px color-mix(in srgb,var(--tt24-theme-primary) 10%,transparent),0 10px 26px color-mix(in srgb,var(--tt24-theme-primary) 12%,transparent) !important}.tt24-d4a-view-nav .tt24-rubber-indicator{position:absolute;z-index:0;top:6px;bottom:6px;left:var(--tt24-rubber-x,0);width:var(--tt24-rubber-w,0);border:2px solid color-mix(in srgb,var(--tt24-theme-accent) 74%,#fff);border-radius:18px;background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong));box-shadow:0 10px 24px color-mix(in srgb,var(--tt24-theme-primary) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.28);opacity:0;transform:scaleX(.68) scaleY(.86);transition:left .52s cubic-bezier(.2,1.42,.32,1),width .52s cubic-bezier(.2,1.42,.32,1),transform .48s cubic-bezier(.2,1.5,.32,1),opacity .14s ease}.tt24-d4a-view-nav.tt24-rubber-ready .tt24-rubber-indicator{opacity:1;transform:scaleX(1) scaleY(1)}.tt24-d4a-view-nav.tt24-rubber-bounce .tt24-rubber-indicator{animation:tt24-rubber-snap .6s cubic-bezier(.2,.9,.25,1.22)}.tt24-d4a-view-nav>button{position:relative;z-index:1;min-height:54px;background:transparent !important;box-shadow:none !important;border-color:transparent !important;color:var(--tt24-theme-muted) !important;transition:color .28s ease,transform .32s cubic-bezier(.2,1.35,.35,1),letter-spacing .28s ease !important}.tt24-d4a-view-nav>button:hover{color:var(--tt24-theme-primary) !important;transform:translateY(-2px)}.tt24-d4a-view-nav>button.is-active{color:#fff !important;font-weight:900;letter-spacing:.15px;transform:scale(1.035)}.tt24-d4a-view-nav>button:active{transform:scale(.9,1.12)}
@keyframes tt24-rubber-snap{0%{transform:scaleX(.72) scaleY(1.12)}34%{transform:scaleX(1.18) scaleY(.88)}62%{transform:scaleX(.94) scaleY(1.06)}82%{transform:scaleX(1.04) scaleY(.97)}100%{transform:scaleX(1) scaleY(1)}}

/* ReactBits Jelly Radio motion applied to the five independent case actions. */
.tt24-d4-head-actions .btn{position:relative;transform-origin:center;will-change:transform;transition:transform .3s cubic-bezier(.2,1.3,.35,1),box-shadow .28s ease,filter .28s ease !important}.tt24-d4-head-actions .btn:hover{transform:translateY(-4px) scale(1.035);filter:saturate(1.14);box-shadow:0 12px 24px color-mix(in srgb,var(--tt24-theme-primary) 26%,transparent) !important}.tt24-d4-head-actions .btn.tt24-jelly-pop{z-index:2;animation:tt24-jelly-pop .7s cubic-bezier(.2,.9,.25,1.22) !important}
@keyframes tt24-jelly-pop{0%{transform:scale(1,1)}18%{transform:scale(.78,1.22)}38%{transform:scale(1.2,.82)}58%{transform:scale(.9,1.12)}75%{transform:scale(1.08,.94)}88%{transform:scale(.98,1.03)}100%{transform:scale(1,1)}}

/* ReactBits Border Glow: visible at rest and pointer-following on intent. */
@property --tt24-glow-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
html[data-tt24-palette] .tt24-d1-kpi,html[data-tt24-palette] .tt24-d1-card,html[data-tt24-palette] .card:not(.cdu-inbox-page),html[data-tt24-palette] .info-card,html[data-tt24-palette] .m-panel{position:relative;isolation:isolate;--tt24-glow-x:50%;--tt24-glow-y:50%;transition:box-shadow .3s ease,transform .3s ease}
html[data-tt24-palette] .tt24-border-glow-layer{display:block !important;position:absolute !important;z-index:30 !important;pointer-events:none !important;inset:0 !important;border-radius:inherit !important;padding:2px !important;background:radial-gradient(circle 170px at var(--tt24-glow-x) var(--tt24-glow-y),var(--tt24-theme-accent) 0%,var(--tt24-theme-accent-2) 36%,transparent 74%),conic-gradient(from var(--tt24-glow-angle),transparent 0 42%,color-mix(in srgb,var(--tt24-theme-accent) 92%,#fff) 59%,var(--tt24-theme-accent-2) 72%,transparent 90%) !important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;-webkit-mask-composite:xor !important;mask-composite:exclude !important;opacity:.62 !important;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tt24-theme-accent) 62%,transparent)) !important;transition:opacity .22s ease,filter .22s ease !important;animation:tt24-border-glow 4.2s linear infinite !important}
html[data-tt24-palette] .tt24-d1-kpi:hover,html[data-tt24-palette] .tt24-d1-card:hover,html[data-tt24-palette] .card:hover,html[data-tt24-palette] .info-card:hover,html[data-tt24-palette] .m-panel:hover{box-shadow:0 14px 38px color-mix(in srgb,var(--tt24-theme-primary) 18%,transparent),0 0 22px color-mix(in srgb,var(--tt24-theme-accent) 18%,transparent) !important}
html[data-tt24-palette] .tt24-glow-hot>.tt24-border-glow-layer,html[data-tt24-palette] .card:focus-within>.tt24-border-glow-layer{opacity:1 !important;filter:drop-shadow(0 0 15px color-mix(in srgb,var(--tt24-theme-accent) 88%,transparent)) !important}
html[data-tt24-palette] .cdu-inbox-page>.tt24-border-glow-layer{display:none !important}
/* TT24_PORTAL_STAT_GLOW_V1 (owner 2026-09-30): the customer KPI cards use the same animated border instead of a coloured side rail. */
html[data-tt24-palette] .stat.tt24-stat-glow{position:relative;isolation:isolate;--tt24-glow-x:50%;--tt24-glow-y:50%}
html[data-tt24-palette] .stat.tt24-stat-glow::before{display:none !important}
html[data-tt24-palette] #portal-summary .stat.tt24-stat-glow{padding:16px 18px !important}
html[data-tt24-palette] #portal-summary .stat.tt24-stat-glow .v{font-size:22px !important;line-height:1.35 !important;letter-spacing:0 !important}
html[data-tt24-palette] #portal-summary .stat.tt24-stat-glow .l{font-size:12.5px !important;margin-top:4px !important}
html[data-tt24-palette] .modal.s39b-finance-modal .stat.tt24-stat-glow{border:1px solid var(--tt24-theme-line) !important;border-top:1px solid var(--tt24-theme-line) !important;box-shadow:none !important} /* TT24_FIN_BALANCE_GLOW_V1 (owner 2026-10-01): balance cards -- no coloured top/side bars, full glow border instead */
html[data-tt24-palette] .modal.s39b-finance-modal #tt24-rel-box{border:1px solid var(--tt24-theme-line) !important;border-right:1px solid var(--tt24-theme-line) !important} /* TT24_FIN_BALANCE_GLOW_V1: auditor-release card -- no gold side bar */
/* TT24_PORTAL_LIST_TIDY_V1 (owner E2E #15): «جزئیات کامل» and its expand arrow on one line, as a clean pill + round toggle. */
.portal-chevron-cell{white-space:nowrap !important;text-align:center !important;vertical-align:middle !important}
.portal-chevron-cell .tt24-p6a-detail-btn{border-radius:999px !important;padding:4px 12px !important;font-size:12px !important;vertical-align:middle}
.portal-file-summary-row .badge-s{white-space:nowrap !important}
#portal-files-list table th,#portal-files-list table td{padding:10px 8px !important;min-width:0 !important}
#portal-files-list table{width:100% !important}
.portal-row-chevron{display:inline-flex !important;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--tt24-theme-line,#dbe3ee);margin-inline-start:6px;vertical-align:middle;font-size:13px;line-height:1;transition:transform .2s ease,background .2s ease}
.portal-file-summary-row:hover .portal-row-chevron{background:color-mix(in srgb,var(--tt24-theme-accent,#3b82f6) 12%,transparent)}
.tt24-overview-tile{transition:transform .2s ease}
.tt24-overview-tile:hover{transform:translateY(-2px)}
@keyframes tt24-border-glow{to{--tt24-glow-angle:360deg}}

html[data-tt24-palette="original"] .tt24-d1-dashboard{--d1-navy:#0F2747;--d1-navy-2:#163E68;--d1-blue:#2451B9;--d1-cyan:#13A8C6;--d1-green:#169B62;--d1-gold:#E4B51C;--d1-red:#D93535;--d1-bg:#F4F7FB;--d1-line:#DCE6F0}
html[data-tt24-palette="vercel"] .tt24-d1-dashboard{--d1-navy:#171717;--d1-navy-2:#262626;--d1-blue:#404040;--d1-cyan:#737373;--d1-green:#15803D;--d1-gold:#737373;--d1-red:#DC2626;--d1-bg:#F7F7F7;--d1-line:#E5E5E5}
html[data-tt24-palette="modern"] .tt24-d1-dashboard{--d1-navy:#1E3A5F;--d1-navy-2:#1E40AF;--d1-blue:#2563EB;--d1-cyan:#60A5FA;--d1-green:#16A34A;--d1-gold:#F59E0B;--d1-red:#DC2626;--d1-bg:#F6F9FF;--d1-line:#DCE7F5}
html[data-tt24-palette="nature"] .tt24-d1-dashboard{--d1-navy:#174C3C;--d1-navy-2:#237A57;--d1-blue:#2E9A6B;--d1-cyan:#6DDBA7;--d1-green:#2E9A6B;--d1-gold:#B7791F;--d1-red:#C2414B;--d1-bg:#F3FBF6;--d1-line:#CFE8D9}
html[data-tt24-palette="cyberpunk"] .tt24-d1-dashboard{--d1-navy:#0E4A57;--d1-navy-2:#0F6473;--d1-blue:#D63384;--d1-cyan:#22B8CF;--d1-green:#168C67;--d1-gold:#F7C948;--d1-red:#D92D5D;--d1-bg:#FFF8E7;--d1-line:#E8D9BB}

@media(max-width:900px){.tt24-palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}.tt24-palette-switcher-copy{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.tt24-palette-options{grid-template-columns:1fr}.tt24-palette-btn{min-height:62px}}
@media(prefers-reduced-motion:reduce){.tt24-d4a-view-nav .tt24-rubber-indicator,.tt24-d4-head-actions .btn,.sidebar .nav-item,.sidebar .nav-item::before{transition:none !important;animation:none !important}html[data-tt24-palette] .tt24-border-glow-layer{animation:none !important}}

/* ===================================================================
   TT24_THEME_SYSTEM_V4 — literal-color closure.
   Older feature stylesheets contain high-specificity navy/blue/gold literals.
   This final layer deliberately matches those selectors so every prominent
   colored surface follows the active palette instead of merely the sidebar.
   =================================================================== */
html[data-tt24-palette="original"]{--tt24-theme-header-1:#0B2741;--tt24-theme-header-2:#163E68;--tt24-theme-header-3:#2451B9;--tt24-theme-on-primary:#FFFFFF}
html[data-tt24-palette="vercel"]{--tt24-theme-header-1:#090909;--tt24-theme-header-2:#242424;--tt24-theme-header-3:#444444;--tt24-theme-on-primary:#FFFFFF}
html[data-tt24-palette="modern"]{--tt24-theme-header-1:#173B68;--tt24-theme-header-2:#235C9B;--tt24-theme-header-3:#2563EB;--tt24-theme-on-primary:#FFFFFF}
html[data-tt24-palette="nature"]{--tt24-theme-header-1:#123B30;--tt24-theme-header-2:#22664F;--tt24-theme-header-3:#2E9A6B;--tt24-theme-on-primary:#FFFFFF}
html[data-tt24-palette="cyberpunk"]{--tt24-theme-header-1:#0E4A57;--tt24-theme-header-2:#0F6473;--tt24-theme-header-3:#D63384;--tt24-theme-on-primary:#FFFFFF}

/* Dashboard banners, tab rail and literal desktop-dashboard colors. */
html[data-tt24-palette] body .tt24-d1-hero,
html[data-tt24-palette] body .brand-hero,
html[data-tt24-palette] body .dashboard-hero,
html[data-tt24-palette] body .hero {
  border-color:color-mix(in srgb,var(--tt24-theme-accent) 38%,rgba(255,255,255,.28)) !important;
  background:radial-gradient(circle at 86% 18%,rgba(255,255,255,.16),transparent 27%),linear-gradient(128deg,var(--tt24-theme-header-1) 0%,var(--tt24-theme-header-2) 52%,var(--tt24-theme-header-3) 100%) !important;
  box-shadow:0 16px 38px color-mix(in srgb,var(--tt24-theme-header-1) 24%,transparent) !important;
}
html[data-tt24-palette] body .tt24-d1-hero h2,
html[data-tt24-palette] body .tt24-d1-hero p,
html[data-tt24-palette] body .tt24-d1-hero-meta,
html[data-tt24-palette] body .brand-hero-text b,
html[data-tt24-palette] body .brand-hero-text span {color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] body .tt24-d1-kpi strong,
html[data-tt24-palette] body .tt24-d1-card-head h3,
html[data-tt24-palette] body .tt24-d1-activity-item b {color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] body .tt24-d1-kpi-top,
html[data-tt24-palette] body .tt24-d1-kpi small,
html[data-tt24-palette] body .tt24-d1-card-head span,
html[data-tt24-palette] body .tt24-d1-activity-item small {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] body .tt24-d1-table-wrap {border-color:var(--tt24-theme-line) !important;background:var(--tt24-theme-surface) !important;}
html[data-tt24-palette] body .tt24-d1-files-table thead th {background:var(--tt24-theme-primary-soft) !important;color:var(--tt24-theme-muted) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] body .tt24-d1-files-table tbody td {color:var(--tt24-text-body) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] body .tt24-d1-files-table tbody tr:hover,
html[data-tt24-palette] body .tt24-d1-files-table tbody tr:focus {background:color-mix(in srgb,var(--tt24-theme-primary-soft) 78%,#fff) !important;}
html[data-tt24-palette] body .tt24-d1-file-ref,
html[data-tt24-palette] body .tt24-d1-row-action,
html[data-tt24-palette] body .tt24-dash-tabs .tab-btn.active {color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] body .tt24-dash-tabs .tab-btn.active {border-bottom-color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] body .tt24-d1-activity-index {background:var(--tt24-theme-primary-soft) !important;color:var(--tt24-theme-primary) !important;}

/* Production case detail: shell, header, actions, tabs and panel internals. */
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal {background:var(--tt24-theme-page) !important;border-color:var(--tt24-theme-line) !important;box-shadow:0 30px 90px color-mix(in srgb,var(--tt24-theme-header-1) 30%,transparent) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .modal-h.tt24-d4-file-head,
html[data-tt24-palette] .modal.file-modal .m-head {
  border-color:color-mix(in srgb,var(--tt24-theme-accent) 32%,rgba(255,255,255,.2)) !important;
  background:radial-gradient(circle at 13% 12%,color-mix(in srgb,var(--tt24-theme-accent) 24%,transparent),transparent 29%),radial-gradient(circle at 88% 85%,color-mix(in srgb,var(--tt24-theme-accent-2) 18%,transparent),transparent 30%),linear-gradient(135deg,var(--tt24-theme-header-1) 0%,var(--tt24-theme-header-2) 58%,var(--tt24-theme-header-3) 100%) !important;
}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .modal-b {background:radial-gradient(circle at 8% 2%,color-mix(in srgb,var(--tt24-theme-accent) 8%,transparent),transparent 22%),var(--tt24-theme-page) !important;scrollbar-color:var(--tt24-border-strong) transparent;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .mh-num,
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .mh-cust {color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn:not(.btn-red):not(.btn-green) {background:var(--tt24-theme-surface) !important;border-color:color-mix(in srgb,var(--tt24-theme-primary) 68%,var(--tt24-theme-line)) !important;color:var(--tt24-theme-primary-strong) !important;box-shadow:0 8px 18px color-mix(in srgb,var(--tt24-theme-header-1) 15%,transparent) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn.btn-gold {background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong)) !important;border-color:color-mix(in srgb,var(--tt24-theme-accent) 48%,transparent) !important;color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d6-file-close-x {color:var(--tt24-theme-primary-strong) !important;border-color:color-mix(in srgb,var(--tt24-theme-primary) 28%,#fff) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav {border-color:var(--tt24-theme-line) !important;background:color-mix(in srgb,var(--tt24-theme-surface) 94%,transparent) !important;box-shadow:0 8px 26px color-mix(in srgb,var(--tt24-theme-primary) 10%,transparent) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav button {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav button:hover,
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-section-nav button:focus-visible {border-color:color-mix(in srgb,var(--tt24-theme-primary) 40%,var(--tt24-theme-line)) !important;background:var(--tt24-theme-primary-soft) !important;color:var(--tt24-theme-primary-strong) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4a-view-nav > button.is-active {border-color:transparent !important;background:transparent !important;color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card,
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel {border-color:var(--tt24-theme-line) !important;background:var(--tt24-theme-surface) !important;box-shadow:0 8px 24px color-mix(in srgb,var(--tt24-theme-primary) 7%,transparent) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card h4,
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-panel > h4 {border-color:var(--tt24-theme-line) !important;background:linear-gradient(180deg,var(--tt24-theme-surface),var(--tt24-theme-primary-soft)) !important;color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card h4 .hi {background:var(--tt24-theme-primary-soft) !important;color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card .info-row {border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card .info-row .k {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] .modal.file-modal.tt24-d4-file-modal .tt24-d4-info-card .info-row .v {color:var(--tt24-theme-ink) !important;}

/* Finance modal: all blue presentation literals now derive from the theme. */
html[data-tt24-palette] .modal.s39b-finance-modal {background:var(--tt24-theme-page) !important;border-color:var(--tt24-theme-line) !important;box-shadow:0 28px 78px color-mix(in srgb,var(--tt24-theme-header-1) 28%,transparent) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .modal-h {background:linear-gradient(135deg,var(--tt24-theme-header-1),var(--tt24-theme-header-2) 62%,var(--tt24-theme-header-3)) !important;border-color:color-mix(in srgb,var(--tt24-theme-accent) 30%,rgba(255,255,255,.2)) !important;color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .modal-h h2,
html[data-tt24-palette] .modal.s39b-finance-modal .modal-h .modal-title,
html[data-tt24-palette] .modal.s39b-finance-modal .modal-h > div:first-child,
html[data-tt24-palette] .modal.s39b-finance-modal .tt24-d6-finance-identity {color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .modal-b {background:radial-gradient(circle at 7% 5%,color-mix(in srgb,var(--tt24-theme-accent) 8%,transparent),transparent 24%),var(--tt24-theme-page) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .modal-f,
html[data-tt24-palette] .modal.s39b-finance-modal .card-h,
html[data-tt24-palette] .modal.s39b-finance-modal .table-wrap,
html[data-tt24-palette] .modal.s39b-finance-modal .tt24-d6-finance-receipts {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .modal-b > .card:first-child {background:var(--tt24-theme-primary-soft) !important;border-color:color-mix(in srgb,var(--tt24-theme-primary) 34%,var(--tt24-theme-line)) !important;border-right-color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .modal-b > .card:first-child .muted,
html[data-tt24-palette] .modal.s39b-finance-modal .card-h h3,
html[data-tt24-palette] .modal.s39b-finance-modal tbody td,
html[data-tt24-palette] .modal.s39b-finance-modal .stat .v {color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .card-h h3::before {background:var(--tt24-theme-primary) !important;box-shadow:0 0 0 5px color-mix(in srgb,var(--tt24-theme-primary) 14%,transparent) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal thead th {background:var(--tt24-theme-primary-soft) !important;color:var(--tt24-theme-muted) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal tbody td {border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal tbody tr:hover td {background:color-mix(in srgb,var(--tt24-theme-primary-soft) 72%,#fff) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .stat {border-color:var(--tt24-theme-line) !important;border-top-color:var(--tt24-theme-primary) !important;background:color-mix(in srgb,var(--tt24-theme-surface) 84%,var(--tt24-theme-primary-soft)) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .stat .l {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] .modal.s39b-finance-modal .btn.btn-gold {background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong)) !important;border-color:var(--tt24-theme-primary-strong) !important;color:var(--tt24-theme-on-primary) !important;box-shadow:0 7px 16px color-mix(in srgb,var(--tt24-theme-primary) 20%,transparent) !important;}

/* Remaining prominent legacy headers used across forms, documents and inline shells. */
html[data-tt24-palette] .tt24-s39d-modal-head,
html[data-tt24-palette] .tt24-s39d-enhanced .modal-h,
html[data-tt24-palette] .tt24-s39d-enhanced .file-head,
html[data-tt24-palette] .tt24-s39d-enhanced .s39b-file-head,
html[data-tt24-palette] .uj3-shell-head {background:linear-gradient(135deg,var(--tt24-theme-header-1),var(--tt24-theme-header-2),var(--tt24-theme-header-3)) !important;color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .cdu-tab.active {background:var(--tt24-theme-primary) !important;border-color:var(--tt24-theme-primary) !important;color:var(--tt24-theme-on-primary) !important;}

/* Documents and customer portal details. */
html[data-tt24-palette] .modal.tt24-d7-docs-modal {background:var(--tt24-theme-page) !important;}
html[data-tt24-palette] .modal.tt24-d7-docs-modal > .modal-h,
html[data-tt24-palette] .modal.tt24-d7-upload-modal > .modal-h {background:linear-gradient(135deg,var(--tt24-theme-header-1),var(--tt24-theme-header-2),var(--tt24-theme-header-3)) !important;color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.tt24-d7-docs-modal > .modal-h h3,
html[data-tt24-palette] .modal.tt24-d7-upload-modal > .modal-h h3,
html[data-tt24-palette] .tt24-d7-docs-identity {color:var(--tt24-theme-on-primary) !important;}
html[data-tt24-palette] .modal.tt24-d7-docs-modal > .modal-h .close-x {color:var(--tt24-theme-primary-strong) !important;border-color:color-mix(in srgb,var(--tt24-theme-primary) 24%,#fff) !important;}
html[data-tt24-palette] .modal.tt24-d7-docs-modal > .modal-b,
html[data-tt24-palette] .modal.tt24-d7-upload-modal > .modal-b {background:var(--tt24-theme-page) !important;}
html[data-tt24-palette] .modal.tt24-d7-docs-modal > .modal-f,
html[data-tt24-palette] .tt24-d7-doc-stat,
html[data-tt24-palette] .modal.tt24-d7-docs-modal .tt24-transport-docs-mini,
html[data-tt24-palette] .tt24-d7-docs-section,
html[data-tt24-palette] .tt24-d7-docs-empty {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .tt24-d7-docs-section-head,
html[data-tt24-palette] .tt24-d7-docs-table th {background:var(--tt24-theme-primary-soft) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .tt24-d7-doc-stat b,
html[data-tt24-palette] .tt24-d7-docs-section-head span,
html[data-tt24-palette] .tt24-d7-doc-name,
html[data-tt24-palette] .tt24-d7-doc-audit b,
html[data-tt24-palette] .tt24-d7-docs-table td {color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] .tt24-d7-doc-stat span,
html[data-tt24-palette] .tt24-d7-doc-description,
html[data-tt24-palette] .tt24-d7-doc-size,
html[data-tt24-palette] .tt24-d7-doc-audit span {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] .tt24-d7-docs-section-head small {background:color-mix(in srgb,var(--tt24-theme-primary-soft) 75%,var(--tt24-theme-surface)) !important;color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] .tt24-p6a-nav {background:var(--tt24-theme-primary-soft) !important;}
html[data-tt24-palette] .tt24-p6a-nav button {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] .tt24-p6a-nav button:hover {border-color:var(--tt24-theme-primary) !important;background:var(--tt24-theme-surface) !important;color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] .tt24-p6a-nav button.is-active {border-color:var(--tt24-theme-primary) !important;background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong)) !important;color:var(--tt24-theme-on-primary) !important;box-shadow:0 6px 14px color-mix(in srgb,var(--tt24-theme-primary) 20%,transparent) !important;}
html[data-tt24-palette] .tt24-p6a-history-item {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;}

/* Persisted palette also covers the signed-out/login experience. */
html[data-tt24-palette] .tt24-l1-auth {--l1-navy:var(--tt24-theme-primary-strong);--l1-navy-2:var(--tt24-theme-header-2);--l1-cyan:var(--tt24-theme-primary);--l1-cyan-2:var(--tt24-theme-accent);--l1-gold:var(--tt24-theme-accent-2);--l1-text:var(--tt24-theme-ink);--l1-muted:var(--tt24-theme-muted);--l1-line:var(--tt24-theme-line);--l1-page:var(--tt24-theme-page);background:var(--tt24-theme-page) !important;}
html[data-tt24-palette] .tt24-l1-brand {background:linear-gradient(135deg,var(--tt24-theme-header-1) 0%,var(--tt24-theme-header-2) 54%,var(--tt24-theme-header-3) 86%,var(--tt24-theme-accent-2) 130%) !important;}
html[data-tt24-palette] .tt24-l1-form-panel {background:var(--tt24-theme-page) !important;}
/* TT24_LOGIN_FIBERS_FOLLOW_THEME_V1: the «نصب اپلیکیشن» button carried a fixed teal inline gradient */
html[data-tt24-palette] .tt24-l1-auth .tt24-l1-install {background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong)) !important;border-color:transparent !important;}
html[data-tt24-palette] .tt24-l1-auth .login-card.tt24-l1-card {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;box-shadow:0 18px 54px color-mix(in srgb,var(--tt24-theme-primary) 12%,transparent) !important;}
html[data-tt24-palette] .tt24-l1-step-title {color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] .tt24-l1-auth .tt24-l1-input {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;color:var(--tt24-theme-ink) !important;}

/* Inline/portal surfaces whose legacy templates carry neutral literals. */
html[data-tt24-palette] .push-panel,
html[data-tt24-palette] .portal-file-summary-row,
html[data-tt24-palette] .portal-file-detail-row,
html[data-tt24-palette] .portal-inline-detail,
html[data-tt24-palette] .portal-inline-detail .card,
html[data-tt24-palette] .portal-finance-inline,
html[data-tt24-palette] .portal-finance-inline .card,
html[data-tt24-palette] .tt24-pf-section,
html[data-tt24-palette] .tt24-transport-docs-mini,
html[data-tt24-palette] .tt24-s42ic-doc-panel,
html[data-tt24-palette] .tt24-s42ic-doc-row {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;}
html[data-tt24-palette] .portal-inline-detail,
html[data-tt24-palette] .portal-finance-inline {border-top-color:var(--tt24-theme-primary) !important;box-shadow:0 10px 28px color-mix(in srgb,var(--tt24-theme-primary) 8%,transparent) !important;}
html[data-tt24-palette] .portal-file-summary-row:hover,
html[data-tt24-palette] .portal-finance-summary-row:hover,
html[data-tt24-palette] .tt24-s42ic-doc-row:hover {background:var(--tt24-theme-primary-soft) !important;}
html[data-tt24-palette] .tt24-s42ic-doc-title,
html[data-tt24-palette] .tt24-s42ic-doc-name {color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] .tt24-s42ic-doc-sub,
html[data-tt24-palette] .tt24-s42ic-doc-row label,
html[data-tt24-palette] .tt24-s42ic-msg {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] .tt24-s42ic-doc-row select,
html[data-tt24-palette] .tt24-s42ic-doc-row input {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;color:var(--tt24-theme-ink) !important;}

/* Preserve TT24's original navy-and-gold action language. */
html[data-tt24-palette="original"] .btn-gold,
html[data-tt24-palette="original"] .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn.btn-gold,
html[data-tt24-palette="original"] .modal.s39b-finance-modal .btn.btn-gold {
  background:linear-gradient(180deg,#F6D767,#E4B51C) !important;
  border-color:#C4920A !important;
  color:#2F2503 !important;
  box-shadow:0 8px 20px rgba(196,146,10,.24) !important;
}

/* Nature clarity pass: green is an accent, not a veil over the whole UI. */
html[data-tt24-palette="nature"] {
  --tt24-bg-page:#F8FAFC;--tt24-bg-soft:#F4F7F5;
  --tt24-text-title:#172033;--tt24-text-body:#334155;--tt24-text-muted:#64748B;
  --tt24-theme-page:#F8FAFC;--tt24-theme-primary-soft:#EFF7F2;
  --tt24-theme-ink:#172033;--tt24-theme-muted:#64748B;
}
html[data-tt24-palette="nature"] body,
html[data-tt24-palette="nature"] #root,
html[data-tt24-palette="nature"] .main,
html[data-tt24-palette="nature"] .content {
  background:linear-gradient(180deg,#FBFCFD 0%,#F6F8FA 100%) !important;
}
html[data-tt24-palette="nature"] .card,
html[data-tt24-palette="nature"] .stat,
html[data-tt24-palette="nature"] .info-card,
html[data-tt24-palette="nature"] .m-panel,
html[data-tt24-palette="nature"] .tt24-d1-kpi,
html[data-tt24-palette="nature"] .tt24-d1-card,
html[data-tt24-palette="nature"] .tt24-d1-table-wrap {
  background:#FFFFFF !important;
}
html[data-tt24-palette="nature"] .tt24-d1-kpi strong,
html[data-tt24-palette="nature"] .tt24-d1-card h3,
html[data-tt24-palette="nature"] .card h3,
html[data-tt24-palette="nature"] .card h4,
html[data-tt24-palette="nature"] table td {
  color:#172033 !important;
}
html[data-tt24-palette="nature"] .sidebar .nav-item,
html[data-tt24-palette="nature"] .tt24-d2-shell .sidebar .nav-item,
html[data-tt24-palette="nature"] .btn-gold,
html[data-tt24-palette="nature"] .btn.primary,
html[data-tt24-palette="nature"] .btn.btn-primary,
html[data-tt24-palette="nature"] .cdu-tab.active,
html[data-tt24-palette="nature"] .tt24-p6a-nav button.is-active {
  color:#FFFFFF !important;
}
html[data-tt24-palette="nature"] .tt24-d1-hero :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette="nature"] .modal.file-modal .m-head :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette="nature"] .modal.s39b-finance-modal > .modal-h :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette="nature"] .tt24-s39d-modal-head :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette="nature"] .modal.tt24-d7-docs-modal > .modal-h :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette="nature"] .modal.tt24-d7-upload-modal > .modal-h :is(h1,h2,h3,h4,b,strong,span,small) {
  color:#FFFFFF !important;
}

/* ===================================================================
   TT24_THEME_MODAL_CLOSURE_V1
   One contrast contract for every dialog implementation in the product.
   Specificity intentionally exceeds late runtime styles from app.js/app2.js.
   =================================================================== */
html[data-tt24-palette] body .modal,
html[data-tt24-palette] body .tt24-sh-panel,
html[data-tt24-palette] body .tt24-ch {
  background:var(--tt24-theme-page) !important;
  border:1px solid var(--tt24-theme-line) !important;
  box-shadow:0 28px 82px color-mix(in srgb,var(--tt24-theme-header-1) 30%,transparent) !important;
}
html[data-tt24-palette] body.tt24-internal-shell .modal:not(.file-modal):not(.s39b-internal-modal) > .modal-h,
html[data-tt24-palette] body .modal.file-modal > .modal-h,
html[data-tt24-palette] body .modal.file-modal > .m-head,
html[data-tt24-palette] body .modal.s39b-internal-modal > .modal-h,
html[data-tt24-palette] body .modal > .tt24-s39d-modal-head,
html[data-tt24-palette] body .tt24-sh-panel > .tt24-sh-head,
html[data-tt24-palette] body .tt24-ch > .tt24-ch-h,
html[data-tt24-palette] body .uj3-shell-head {
  background:linear-gradient(135deg,var(--tt24-theme-header-1) 0%,var(--tt24-theme-header-2) 60%,var(--tt24-theme-header-3) 100%) !important;
  border-color:color-mix(in srgb,var(--tt24-theme-accent) 32%,rgba(255,255,255,.24)) !important;
  color:#FFFFFF !important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--tt24-theme-header-1) 20%,transparent) !important;
}
html[data-tt24-palette] body.tt24-internal-shell .modal:not(.file-modal):not(.s39b-internal-modal) > .modal-h > :not(.close-x),
html[data-tt24-palette] body.tt24-internal-shell .modal:not(.file-modal):not(.s39b-internal-modal) > .modal-h :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette] body .modal.file-modal > :is(.modal-h,.m-head) :is(h1,h2,h3,h4,b,strong,span,small,.modal-title),
html[data-tt24-palette] body .modal.s39b-internal-modal > .modal-h :is(h1,h2,h3,h4,b,strong,span,small,.modal-title),
html[data-tt24-palette] body .modal > .tt24-s39d-modal-head :is(h1,h2,h3,h4,b,strong,span,small,.modal-title),
html[data-tt24-palette] body .tt24-sh-head :is(.tt24-sh-title,.tt24-sh-sub,h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette] body .tt24-ch-h :is(h1,h2,h3,h4,b,strong,span,small),
html[data-tt24-palette] body .uj3-shell-head :is(h1,h2,h3,h4,b,strong,span,small) {
  color:#FFFFFF !important;
  text-shadow:0 1px 2px rgba(0,0,0,.16) !important;
}
html[data-tt24-palette] body .modal > .modal-h .close-x,
html[data-tt24-palette] body .modal > .m-head .close-x,
html[data-tt24-palette] body .modal .tt24-d6-file-close-x,
html[data-tt24-palette] body .tt24-sh-close,
html[data-tt24-palette] body .tt24-ch-x {
  background:#FFFFFF !important;
  border:1px solid color-mix(in srgb,var(--tt24-theme-primary) 24%,#FFFFFF) !important;
  color:var(--tt24-theme-primary-strong) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
}
html[data-tt24-palette] body.tt24-internal-shell .modal:not(.file-modal):not(.s39b-internal-modal) > .modal-b,
html[data-tt24-palette] body .modal.file-modal > .modal-b,
html[data-tt24-palette] body .modal.s39b-internal-modal > .modal-b,
html[data-tt24-palette] body .tt24-sh-body,
html[data-tt24-palette] body .tt24-ch-b {
  background:var(--tt24-theme-page) !important;
  color:var(--tt24-text-body) !important;
}
html[data-tt24-palette] body.tt24-internal-shell .modal:not(.file-modal):not(.s39b-internal-modal) > .modal-f,
html[data-tt24-palette] body .modal.file-modal > .modal-f,
html[data-tt24-palette] body .modal.s39b-internal-modal > .modal-f {
  background:var(--tt24-theme-surface) !important;
  border-color:var(--tt24-theme-line) !important;
}
html[data-tt24-palette] body .modal :is(label,.field label,.muted),
html[data-tt24-palette] body .tt24-sh-body,
html[data-tt24-palette] body .tt24-ch-b {
  color:var(--tt24-theme-muted) !important;
}
html[data-tt24-palette] body .modal :is(input,select,textarea) {
  background:var(--tt24-theme-surface) !important;
  border-color:var(--tt24-theme-line) !important;
  color:var(--tt24-theme-ink) !important;
}
html[data-tt24-palette] body .modal :is(input,textarea)::placeholder {
  color:color-mix(in srgb,var(--tt24-theme-muted) 72%,#FFFFFF) !important;
}
html[data-tt24-palette] body .modal .card,
html[data-tt24-palette] body .modal .stat,
html[data-tt24-palette] body .modal .table-wrap,
html[data-tt24-palette] body .modal .info-card,
html[data-tt24-palette] body .modal .m-panel {
  background:var(--tt24-theme-surface) !important;
  border-color:var(--tt24-theme-line) !important;
}
html[data-tt24-palette] body .modal .card :is(h1,h2,h3,h4,b,strong),
html[data-tt24-palette] body .modal .stat :is(h1,h2,h3,h4,b,strong),
html[data-tt24-palette] body .modal .table-wrap :is(h1,h2,h3,h4,b,strong) {
  color:var(--tt24-theme-ink) !important;
}

/* Case-header actions: unmistakable hover/focus feedback above legacy !important rules. */
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn {
  transition:transform .32s cubic-bezier(.2,1.35,.35,1),background .24s ease,color .24s ease,border-color .24s ease,box-shadow .28s ease,filter .24s ease !important;
  transform-origin:center !important;
}
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn:not(.btn-red):not(.btn-green):hover,
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn:not(.btn-red):not(.btn-green):focus-visible {
  background:linear-gradient(135deg,var(--tt24-theme-primary),var(--tt24-theme-primary-strong)) !important;
  border-color:color-mix(in srgb,var(--tt24-theme-accent) 78%,#FFFFFF) !important;
  color:#FFFFFF !important;
  transform:translateY(-5px) scale(1.045) !important;
  filter:saturate(1.18) brightness(1.06) !important;
  box-shadow:0 14px 28px color-mix(in srgb,var(--tt24-theme-primary) 38%,transparent),0 0 0 3px color-mix(in srgb,var(--tt24-theme-accent) 24%,transparent) !important;
}
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn:is(.btn-red,.btn-green):hover,
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn:is(.btn-red,.btn-green):focus-visible {
  transform:translateY(-5px) scale(1.045) !important;
  filter:saturate(1.22) brightness(1.08) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.24),0 0 0 3px color-mix(in srgb,currentColor 22%,transparent) !important;
}
html[data-tt24-palette="original"] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn.btn-gold:hover,
html[data-tt24-palette="original"] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn.btn-gold:focus-visible {
  background:linear-gradient(180deg,#FFE78A,#E4B51C) !important;
  border-color:#FFF3B5 !important;
  color:#2F2503 !important;
  box-shadow:0 14px 28px rgba(196,146,10,.34),0 0 0 3px rgba(255,231,138,.3) !important;
}
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4-head-actions .btn.tt24-jelly-pop {
  z-index:5 !important;
  animation:tt24-jelly-pop .7s cubic-bezier(.2,.9,.25,1.22) !important;
}

/* ===================================================================
   TT24_THEME_CONTRAST_AND_QUICK_SWITCH_V1
   Final contrast contract for dark/light surfaces plus one-click palettes.
   =================================================================== */

/* The login illustration is always a dark branded surface. Keep every
   piece of its copy legible even when the generic h1/h2 palette rule wins. */
html[data-tt24-palette] body .tt24-l1-brand :is(.tt24-l1-eyebrow,.tt24-l1-brand-title,.tt24-l1-brand-desc,.tt24-l1-brand-url),
html[data-tt24-palette] body .tt24-l1-mobile-brand-copy :is(.tt24-l1-eyebrow,.tt24-l1-brand-title,.tt24-l1-brand-desc,.tt24-l1-brand-url) {
  color:#FFFFFF !important;
  text-shadow:0 2px 12px rgba(0,0,0,.32) !important;
}
/* TT24_LOGIN_BRAND_TIDY_V1 (owner 2026-10-01): no box around the subtitle; the big brand title faded ~20% */
html[data-tt24-palette] body .tt24-l1-brand .tt24-l1-eyebrow {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html[data-tt24-palette] body .tt24-l1-brand .tt24-l1-brand-title {opacity:.8 !important;}

/* File-header badges sit on a dark gradient, but the successor badge itself
   is intentionally light. Do not inherit the header's white text into it. */
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .m-head .mh-badge.jan-badge {
  background:#FFFFFF !important;
  color:var(--tt24-theme-primary-strong) !important;
  border:2px solid var(--tt24-theme-accent) !important;
  text-shadow:none !important;
  box-shadow:0 5px 14px rgba(0,0,0,.16) !important;
}
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .m-head .mh-badge.route-green {background:#16A34A !important;color:#FFFFFF !important;border:2px solid #BBF7D0 !important;text-shadow:none !important;}
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .m-head .mh-badge.route-red {background:#DC2626 !important;color:#FFFFFF !important;border:2px solid #FECACA !important;text-shadow:none !important;}
html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .m-head .mh-badge.route-yellow {background:#FACC15 !important;color:#241A00 !important;border:2px solid #FEF08A !important;text-shadow:none !important;}

/* Compact five-theme shortcut, rendered beside the signed-in identity and
   repeated in the sidebar footer so it remains available on narrow screens. */
.tt24-quick-themes {
  direction:ltr;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px 7px;
  border:1px solid var(--tt24-theme-line);
  border-radius:999px;
  background:color-mix(in srgb,var(--tt24-theme-surface) 94%,transparent);
  box-shadow:0 5px 14px color-mix(in srgb,var(--tt24-theme-primary) 10%,transparent);
}
.tt24-quick-theme {
  appearance:none;
  width:23px;
  height:23px;
  min-width:23px;
  padding:2px;
  border:1px solid color-mix(in srgb,var(--quick-a) 38%,#FFFFFF);
  border-radius:50%;
  background:#FFFFFF;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tt24-quick-theme > span {
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  background:conic-gradient(from 35deg,var(--quick-a) 0 46%,var(--quick-b) 46% 72%,var(--quick-c) 72% 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);
}
.tt24-quick-theme:hover,.tt24-quick-theme:focus-visible {transform:translateY(-2px) scale(1.13);outline:none;box-shadow:0 5px 12px color-mix(in srgb,var(--quick-a) 34%,transparent);}
.tt24-quick-theme.is-active {border-color:var(--quick-a);transform:scale(1.12);box-shadow:0 0 0 2px var(--tt24-theme-surface),0 0 0 4px var(--quick-a);}
.tt24-quick-themes--sidebar {display:flex;margin:0 0 8px;padding:7px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);box-shadow:none;}
.tt24-quick-themes--sidebar .tt24-quick-theme {width:25px;height:25px;min-width:25px;}

/* The classic TT24 sidebar now shares the same navy family as the hero and
   modal headers; its typography also follows the same white hierarchy. */
html[data-tt24-palette="original"] body .tt24-d2-shell .sidebar {
  background:radial-gradient(circle at 8% 18%,rgba(228,181,28,.15),transparent 32%),linear-gradient(165deg,#0B2741 0%,#174B78 62%,#2451B9 135%) !important;
  box-shadow:-10px 0 32px rgba(15,49,84,.16) !important;
}
html[data-tt24-palette] body .tt24-d2-shell .sidebar :is(.sidebar-head .t,.user-chip .nm,.nav-item:hover,.nav-item.active) {color:#FFFFFF !important;}
html[data-tt24-palette] body .tt24-d2-shell .sidebar :is(.sidebar-head .s,.user-chip .rl,.nav-sep) {color:rgba(255,255,255,.68) !important;}

/* Vercel is deliberately crisp monochrome: no tinted veil, no low-contrast
   middle greys on primary copy, and neutral shadows only. */
html[data-tt24-palette="vercel"] body,
html[data-tt24-palette="vercel"] body #root,
html[data-tt24-palette="vercel"] body .main,
html[data-tt24-palette="vercel"] body .content {background:#F7F7F7 !important;color:#171717 !important;}
html[data-tt24-palette="vercel"] body :is(.card,.stat,.info-card,.m-panel,.tt24-d1-card,.tt24-d1-kpi,.tt24-d1-table-wrap) {
  background:#FFFFFF !important;
  border-color:#D4D4D4 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.08) !important;
}
html[data-tt24-palette="vercel"] body :is(.card,.stat,.info-card,.m-panel,.tt24-d1-card,.tt24-d1-kpi,.tt24-d1-table-wrap) :is(h1,h2,h3,h4,b,strong,td) {color:#111111 !important;}
html[data-tt24-palette="vercel"] body :is(.tt24-d1-hero,.brand-hero,.dashboard-hero,.hero,.modal-h,.m-head,.tt24-s39d-modal-head,.uj3-shell-head) :is(h1,h2,h3,h4,p,b,strong,small) {color:#FFFFFF !important;}
html[data-tt24-palette="vercel"] body .tt24-d2-shell .sidebar {background:linear-gradient(180deg,#111111,#202020) !important;}
html[data-tt24-palette="vercel"] body .tt24-d2-shell .sidebar .nav-item {color:#FFFFFF !important;}
html[data-tt24-palette="vercel"] body .tt24-d2-shell .sidebar :is(.nav-sep,.sidebar-head .s,.user-chip .rl) {color:#D4D4D4 !important;}
html[data-tt24-palette="vercel"] body .topbar,
html[data-tt24-palette="vercel"] body .tt24-d2-topbar-user {background:#FFFFFF !important;border-color:#D4D4D4 !important;backdrop-filter:none !important;}
html[data-tt24-palette="vercel"] body .topbar :is(.page-title,.tt24-d2-topbar-identity b,.tt24-d2-topbar-identity small) {color:#111111 !important;}
html[data-tt24-palette="vercel"] body .tt24-d1-dashboard :is(.tt24-d1-kpi-top,.tt24-d1-kpi small,.tt24-d1-card-head span,.tt24-d1-card-head h3,.tt24-d1-kpi strong,.tt24-d1-activity-item b,.tt24-d1-activity-item small,.muted,th,td) {
  color:#111111 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html[data-tt24-palette="vercel"] body .tt24-d1-dashboard :is(.tt24-d1-file-ref,.tt24-d1-row-action,a) {color:#000000 !important;}

/* Cyberpunk needs both signature hues in the sidebar, not a flat teal slab. */
html[data-tt24-palette="cyberpunk"] body .tt24-d2-shell .sidebar {
  background:radial-gradient(circle at 12% 16%,rgba(247,201,72,.14),transparent 28%),linear-gradient(165deg,#0E4A57 0%,#0F6473 54%,#8F2968 88%,#D63384 125%) !important;
}
html[data-tt24-palette] body .tt24-d2-shell .sidebar-foot {
  background:color-mix(in srgb,var(--tt24-theme-header-1) 58%,transparent) !important;
}

/* Customer portal parity.  app2 injects its compact/mobile rules after the
   main styles, so these selectors deliberately carry palette specificity and
   !important to keep every customer surface in the selected theme. */
html[data-tt24-palette] body :is(.portal-card-compact,.portal-mobile-card,.portal-mobile-detail,.portal-inline-detail .card,.portal-finance-inline .card,.portal-doc-card,.receipt-card,.portal-unloading-card,.tt24-transport-docs-mini) {
  background:var(--tt24-theme-surface) !important;
  border-color:var(--tt24-theme-line) !important;
  color:var(--tt24-theme-ink) !important;
}
html[data-tt24-palette] body :is(.portal-mobile-meta>div,.portal-timeline-step,.portal-inline-action-msg) {
  background:color-mix(in srgb,var(--tt24-theme-surface) 82%,var(--tt24-theme-primary-soft)) !important;
  border-color:var(--tt24-theme-line) !important;
}
html[data-tt24-palette] body :is(.portal-mobile-card.is-open,.portal-finance-card.is-open) {
  background:color-mix(in srgb,var(--tt24-theme-surface) 70%,var(--tt24-theme-primary-soft)) !important;
  border-color:color-mix(in srgb,var(--tt24-theme-primary) 48%,var(--tt24-theme-line)) !important;
}
html[data-tt24-palette] body :is(.portal-mobile-card b,.portal-mobile-title,.portal-mobile-meta b,.portal-doc-title,.portal-msg-body,.portal-timeline-step b) {color:var(--tt24-theme-ink) !important;}
html[data-tt24-palette] body :is(.portal-mobile-label,.portal-mobile-meta span,.portal-mobile-meta small,.portal-doc-meta,.portal-msg-date) {color:var(--tt24-theme-muted) !important;}
html[data-tt24-palette] body .portal-row-chevron {background:var(--tt24-theme-surface) !important;border-color:var(--tt24-theme-line) !important;color:var(--tt24-theme-primary) !important;}
html[data-tt24-palette] body .portal-row-chevron.is-open {background:var(--tt24-theme-primary-soft) !important;border-color:var(--tt24-theme-primary) !important;color:var(--tt24-theme-primary-strong) !important;}
html[data-tt24-palette="vercel"] body :is(.portal-card-compact,.portal-mobile-card,.portal-mobile-detail,.portal-inline-detail,.portal-finance-inline,.portal-doc-card,.receipt-card) :is(b,strong,h1,h2,h3,h4,p,span,small,td) {color:#111111 !important;opacity:1 !important;text-shadow:none !important;}

/* Intermediate-width hardening: preserve one clean tab row and prevent the
   optional desktop shortcut from competing with page identity/notifications. */
@media (min-width:881px) and (max-width:1080px) {
  html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4a-view-nav {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    min-height:0 !important;
  }
  html[data-tt24-palette] body .modal.file-modal.tt24-d4-file-modal .tt24-d4a-view-nav .tt24-rubber-indicator {
    top:6px !important;
    bottom:6px !important;
  }
}
@media (max-width:1180px) {.tt24-quick-themes--topbar {display:none;}}

@media(max-width:880px){
  html[data-tt24-palette] .modal.file-modal .m-head,
  html[data-tt24-palette] .modal.s39b-finance-modal .modal-h {background:linear-gradient(135deg,var(--tt24-theme-header-1),var(--tt24-theme-header-2),var(--tt24-theme-header-3)) !important;}
}
/* TT24_PORTAL_FINANCE_ALERT_V1 (owner 2026-10-01): pulsing dot on the customer's «مالی» tab while a payment request is open */
.tt24-tab-alert{position:relative !important}
.tt24-tab-alert::after{content:"";position:absolute;top:6px;inset-inline-end:8px;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:tt24-tab-alert-pulse 1.4s ease-out infinite;pointer-events:none}
@keyframes tt24-tab-alert-pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
@media(prefers-reduced-motion:reduce){.tt24-tab-alert::after{animation:none}}
/* TT24_UJ3_FIT_V1 (owner 2026-10-01): the unified case list's toolbar had fixed minimum columns (~780 px) and stuck out of
   its glowing card whenever the content area was narrower (side menu open, laptop, embedded browser). It now wraps;
   the table keeps scrolling inside its own box. */
.uj3-card{min-width:0}
.uj3-toolbar{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important}
.uj3-toolbar > *{min-width:0}
.uj3-table-wrap{max-width:100%}

/* TT24_QUICK_THEME_SHAPE_ALL_V1 (2026-10-02): on phones the global mobile button rules (padding, 44px min-height,
   radius) squashed the palette swatches into empty white ovals (sidebar, topbar, external panels). */
html body .tt24-quick-themes .tt24-quick-theme{flex:0 0 auto !important;width:23px !important;height:23px !important;min-width:23px !important;min-height:23px !important;max-height:23px !important;padding:2px !important;border-radius:50% !important;line-height:1 !important;box-sizing:border-box !important}
html body .tt24-quick-themes--sidebar .tt24-quick-theme{width:25px !important;height:25px !important;min-width:25px !important;min-height:25px !important;max-height:25px !important}
html body .tt24-quick-themes .tt24-quick-theme > span{display:block !important;width:100% !important;height:100% !important;border-radius:50% !important}

/* TT24_MOBILE_COMPACT_BUTTONS_V1 (owner 2026-10-03): on phones many stacked legacy rules forced every button to
   >=44px tall / 15px text, so action buttons («+ پاسخ قابل مشاهده برای صاحب کالا»، «+ خبر دستی»، «فعال‌سازی اعلان»…)
   looked oversized. One last, more compact rule for buttons only (inputs keep their 16px anti-zoom size). */
@media (max-width:768px){
  html.tt24-mobile-html body.tt24-mobile .btn,
  html.tt24-mobile-html body.tt24-mobile button.btn{min-height:36px !important;height:auto !important;padding:6px 12px !important;font-size:13px !important;line-height:1.5 !important;border-radius:12px !important}
  html.tt24-mobile-html body.tt24-mobile .btn.btn-sm,
  html.tt24-mobile-html body.tt24-mobile button.btn-sm{min-height:32px !important;padding:4px 10px !important;font-size:12px !important}
  /* notification-center filter chips: wrapped into tall boxes and the «فقط خوانده‌نشده» label broke one letter per line */
  html body .notif-toolbar{align-items:center !important}
  html body .notif-toolbar .btn{flex:0 0 auto !important;width:auto !important;white-space:nowrap !important}
  html body .notif-toolbar > label{flex:1 0 100% !important;width:100% !important;white-space:nowrap !important;margin:2px 0 0 !important}
  html body .notif-toolbar > label input[type=checkbox]{width:18px !important;height:18px !important;min-width:18px !important;min-height:18px !important;flex:0 0 18px !important;margin:0 !important}
}

/* TT24_MOBILE_GLOW_STATIC_V1 (owner 2026-10-03, «لگ می‌زنه»): every card carried a continuously rotating conic
   border glow + drop-shadow filter + mask compositing -- with dozens of cards a phone GPU repaints non-stop.
   On phones the glow stays (same colours) but is static and unfiltered. */
@media (max-width:768px), (hover:none) and (pointer:coarse){
  html[data-tt24-palette] .tt24-border-glow-layer{animation:none !important;filter:none !important;will-change:auto !important}
  html[data-tt24-palette] .tt24-glow-hot>.tt24-border-glow-layer,html[data-tt24-palette] .card:focus-within>.tt24-border-glow-layer{filter:none !important}
}

/* TT24_KEYBOARD_RESIZE_V1 fallback: while the on-screen keyboard is open (mobile-pwa.js sets --tt24-kb), every open window
   ends above the keyboard, so its own scroll can always reach the bottom buttons. */
html.tt24-kb-open .modal-bg,
html.tt24-kb-open .tt24-s42h-modal-back{bottom:var(--tt24-kb,0px) !important;height:auto !important;max-height:calc(100% - var(--tt24-kb,0px)) !important}
html.tt24-kb-open .modal-bg > .modal{max-height:100% !important}