/* ============================================================
   JurisCRM Themes — v4 (design tokens + dark depth)
   ============================================================ */

/* ---------- DESIGN TOKENS (global) ---------- */
:root{
  /* Spacing */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Radius */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;

  /* Typography */
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
  --fs-lg:16px; --fs-xl:20px; --fs-2xl:25px; --fs-3xl:32px;

  /* Transitions */
  --t-fast:.15s cubic-bezier(.4,0,.2,1);
  --t-base:.22s cubic-bezier(.4,0,.2,1);
  --t-slow:.35s cubic-bezier(.4,0,.2,1);
  --t-bounce:.35s cubic-bezier(.16,1,.3,1);

  /* Elevation */
  --elev-1:0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --elev-2:0 2px 4px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --elev-3:0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --elev-4:0 16px 40px rgba(0,0,0,.12);
}

/* Density */
html[data-density="compact"]{--sp-mul:.85;--row-h:34px}
html[data-density="cozy"]{--sp-mul:1;--row-h:44px}
html[data-density="roomy"]{--sp-mul:1.15;--row-h:52px}

/* ---------- DEFAULT (Standard) ---------- */
/* RREGULLIM: më parë --gold, --navy-3 DHE --sel ishin fjalë për fjalë E
   NJËJTA ngjyrë (#447b96) — kjo është arsyeja pse gradientet dilnin "të
   sheshta" (pa kontrast, sepse gradient(--navy,--gold) ishte në fakt një
   ngjyrë e vetme), pse theksi (--sel) "zhdukej" mbi sidebar-in navy (të
   dyja blu të ngjashme), dhe pse --green (statuset "të suksesshme") ishte
   gabimisht i vendosur në blu, jo jeshile. Paleta e re ka një ar TË
   VËRTETË (ngjyrë krejt tjetër nga blu-navy), gjë që bën gradientet reale
   dhe theksin dukshëm të dallueshëm nga sfondi. --on-gold u rillogarit si
   TEKST I ERRËT (jo më i bardhë), sepse mbi një ar të çelët/mesatar teksti
   i bardhë ka kontrast shumë të dobët — kjo ishte pikërisht burimi i
   problemit "background me ngjyrën e tekstit".
*/
html[data-theme="default"],
html:not([data-theme]){
  --navy:#1B2A3F;--navy-2:#0E1826;--navy-3:#2F4560;
  --gold:#C9A227;--gold-2:#E3C876;--gold-soft:#FBF4E3;
  --bg:#F4F6FA;--card:#FFFFFF;--text:#1B2430;--muted:#64748B;
  --line:#E4E9F0;--red:#B0303F;--red-soft:#FCE7E9;
  --green:#1E8E5A;--blue:#3B6EA5;--sel:#C9A227;--orange:#C08A45;
  --side-text:#C7D2E0;

  --on-gold:#241A05;--on-navy:#FFFFFF;--on-surface:#1B2430;
  --surface-1:#FFFFFF;--surface-2:#F7F9FC;--surface-3:#F1F4F9;
  --scrim:rgba(10,16,26,.50);
  --shadow:0 10px 28px rgba(10,20,35,.08);
  --sidebar-hover:rgba(255,255,255,.08);
  --sidebar-line:rgba(255,255,255,.10);
  --selection:color-mix(in srgb,var(--sel) 30%,transparent);
  --scroll-track:var(--surface-3);--scroll-thumb:#C9A227;
  --deep:#1B2A3F;--deep-2:#0E1826;--gold-ink:#8A6B14;
}
/* Sidebar me gradient real 3-ngjyrash (navy → navy e thellë), plus një
   theks gati-i-padukshëm i gjelbër-ari në buzë — jo më ngjyrë e sheshtë. */
html[data-theme="default"] .sidebar{
  background:linear-gradient(180deg,#24374F 0%,#1B2A3F 55%,#0E1826 100%);
  box-shadow:inset -1px 0 0 rgba(201,162,39,.16);
}
/* Zëri aktiv i menysë tani ka gradient TË VËRTETË ari (dy nuanca ari, jo
   dy nuanca blu si më parë) — dallohet qartë nga sfondi navy i sidebar-it. */
html[data-theme="default"] .nav-item.is-active{
  background:linear-gradient(90deg,#E3C876,#C9A227);color:var(--on-gold);
}
html[data-theme="default"] .nav-item.is-active .ico-grad,
html[data-theme="default"] .nav-item.is-active .ico{
  color:var(--on-gold);-webkit-text-fill-color:var(--on-gold);
}
html[data-theme="default"] .btn-gold{
  background:linear-gradient(180deg,#E3C876,#C9A227);color:var(--on-gold);
}
html[data-theme="default"] .btn-gold:hover{background:#AD8318;color:var(--on-gold)}
html[data-theme="default"] .avatar{
  background:linear-gradient(135deg,#E3C876,#C9A227);color:var(--on-gold);
}
html[data-theme="default"] .kpi.kpi-gold .k-value,
html[data-theme="default"] .link{color:#8A6B14}
/* "Cep i bukur me ngjyrë" — një shkëlqim i butë ari në qoshen e sipërme
   djathtas të çdo karte, i dukshëm por diskret (mezi ndihet, jo i lodhshëm
   për sy) — pikërisht si kërkesa: "tek një cep me një ngjyrë". */
html[data-theme="default"] .card:not(.shine){
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 45%),
    var(--surface-1);
}

/* ---------- CUSTOM (bazë strukturore; ngjyra vjen nga accent_style_block()) ---------- */
html[data-theme="custom"]{
  --navy:#1B2A3F;--navy-2:#0E1826;--navy-3:#2F4560;
  --gold:#6C8EEF;--gold-2:#A9BCF5;--gold-soft:#EDF1FE;
  --bg:#F4F6FA;--card:#FFFFFF;--text:#1B2430;--muted:#64748B;
  --line:#E4E9F0;--red:#B0303F;--red-soft:#FCE7E9;
  --green:#1E8E5A;--blue:#3B6EA5;--sel:#6C8EEF;--orange:#C08A45;
  --side-text:#C7D2E0;
  --on-gold:#151A2E;--on-navy:#FFFFFF;--on-surface:#1B2430;
  --surface-1:#FFFFFF;--surface-2:#F7F9FC;--surface-3:#F1F4F9;
  --scrim:rgba(10,16,26,.50);
  --shadow:0 10px 28px rgba(10,20,35,.08);
  --sidebar-hover:rgba(255,255,255,.08);
  --sidebar-line:rgba(255,255,255,.10);
  --selection:color-mix(in srgb,var(--sel) 30%,transparent);
  --scroll-track:var(--surface-3);--scroll-thumb:var(--sel);
  --deep:#1B2A3F;--deep-2:#0E1826;--gold-ink:#3355B8;
}
html[data-theme="custom"] .nav-item.is-active{background:var(--sel);color:var(--on-gold)}
html[data-theme="custom"] .btn-gold{background:var(--sel);color:var(--on-gold)}

/* ---------- CLASSIC (me ngjyrat e Standard) ---------- */
html[data-theme="classic"]{
  --navy:#2d3d51;--navy-2:#13233A;--navy-3:#447b96;
  --gold:#447b96;--gold-2:#0B8A5F;--gold-soft:#E8F8F2;
  --bg:#F3F6FA;--card:#FFFFFF;--text:#1E293B;--muted:#64748B;
  --line:#E6EDF4;--red:#864453;--red-soft:#FFE4E6;
  --green:#0B8A5F;--blue:#3B82F6;--sel:#447b96;--orange:#F59E0B;
  --side-text:#C5D0DC;

  --on-gold:#FFFFFF;--on-navy:#FFFFFF;--on-surface:#1E293B;
  --surface-1:#FFFFFF;--surface-2:#F7F9FC;--surface-3:#F8FAFC;
  --scrim:rgba(15,23,42,.45);
  --shadow:0 8px 24px rgba(14,27,44,.06);
  --sidebar-hover:rgba(255,255,255,.10);
  --sidebar-line:rgba(255,255,255,.10);
  --selection:rgba(68,123,150,.35);
  --scroll-track:var(--surface-3);--scroll-thumb:var(--sel);
  --deep:#1E2A3D;--deep-2:#0F1B2E;--gold-ink:#0B8A5F;
}
html[data-theme="classic"] .sidebar{background:var(--navy);color:var(--side-text)}
html[data-theme="classic"] .nav-item{color:var(--side-text)}
html[data-theme="classic"] .nav-item:hover{background:var(--sidebar-hover);color:#fff}
html[data-theme="classic"] .nav-item.is-active{
  background:linear-gradient(90deg,#6fa3bd,#447b96);color:var(--on-gold);
}
html[data-theme="classic"] .nav-item.is-active .ico-grad,
html[data-theme="classic"] .nav-item.is-active .ico{
  color:var(--on-gold);-webkit-text-fill-color:var(--on-gold);
}
html[data-theme="classic"] .btn-gold{
  background:linear-gradient(180deg,#5a91ab,#447b96);color:var(--on-gold);
}
html[data-theme="classic"] .btn-gold:hover{background:#356b82;color:#fff}
html[data-theme="classic"] .kpi.kpi-gold .k-value,
html[data-theme="classic"] .link{color:#0B8A5F}
/* Seleksioni i tekstit tani vjen nga rregulli global ::selection (yellow) te
   fundi i themes.css — nuk i duhet më mbivendosje e veçantë për "classic". */

/* ---------- AIR ---------- */
html[data-theme="air"]{
  --navy:#EEF3FB;--navy-2:#E2EAF6;--navy-3:#2563EB;
  --gold:#2563EB;--gold-2:#1D4ED8;--gold-soft:#DBEAFE;
  --bg:#F4F7FC;--card:#FFFFFF;--text:#0F172A;--muted:#64748B;
  --line:#E2E8F0;--red:#E11D48;--red-soft:#FFE4E6;
  --green:#059669;--blue:#2563EB;--sel:#2563EB;--orange:#F59E0B;
  --side-text:#334155;
  --on-gold:#FFFFFF;--on-navy:#0F172A;--on-surface:#0F172A;
  --surface-1:#FFFFFF;--surface-2:#F1F5FB;--surface-3:#EEF3FB;
  --scrim:rgba(15,23,42,.40);--shadow:0 8px 24px rgba(15,23,42,.06);
  --sidebar-hover:#E8F0FE;--sidebar-line:#E2E8F0;
  --selection:rgba(37,99,235,.25);
  --scroll-track:#EEF3FB;--scroll-thumb:#2563EB;
  --deep:#132A52;--deep-2:#0B1830;--gold-ink:#1D4ED8;
}
html[data-theme="air"] .sidebar{
  background:#F8FAFF;color:var(--side-text);
  border-right:1px solid var(--line);box-shadow:none;
}
html[data-theme="air"] .brand{color:#0F172A}
html[data-theme="air"] .brand small{color:#64748B}
html[data-theme="air"] .nav-item{color:#475569}
html[data-theme="air"] .nav-item:hover{background:var(--sidebar-hover);color:#1D4ED8}
html[data-theme="air"] .nav-item.is-active{background:#2563EB;color:#fff}
html[data-theme="air"] .nav-item .ico-grad,
html[data-theme="air"] .nav-item .ico{color:#64748B;-webkit-text-fill-color:#64748B}
html[data-theme="air"] .nav-item.is-active .ico-grad,
html[data-theme="air"] .nav-item.is-active .ico{color:#fff;-webkit-text-fill-color:#fff}
html[data-theme="air"] .side-user{border-top-color:var(--line)}
html[data-theme="air"] .side-user strong{color:#0F172A}
html[data-theme="air"] .side-user small{color:#64748B}
html[data-theme="air"] .btn-gold{background:#2563EB;color:#fff}
html[data-theme="air"] .btn-gold:hover{background:#1D4ED8;color:#fff}
html[data-theme="air"] .avatar{background:#2563EB;color:#fff}
html[data-theme="air"] .nav-badge{background:#DBEAFE;color:#1D4ED8}
html[data-theme="air"] .nav-item.is-active .nav-badge{background:rgba(255,255,255,.22);color:#fff}

/* ---------- VIOLET ---------- */
html[data-theme="violet"]{
  --navy:#E8ECFF;--navy-2:#DDE3FF;--navy-3:#4F46E5;
  --gold:#4F46E5;--gold-2:#4338CA;--gold-soft:#EEF2FF;
  --bg:#F3F5FF;--card:#FFFFFF;--text:#1E1B4B;--muted:#6366A5;
  --line:#E0E4F8;--red:#BE123C;--red-soft:#FFE4E6;
  --green:#0D9488;--blue:#4F46E5;--sel:#4F46E5;--orange:#D97706;
  --side-text:#312E81;
  --on-gold:#FFFFFF;--on-navy:#1E1B4B;--on-surface:#1E1B4B;
  --surface-1:#FFFFFF;--surface-2:#F0F2FF;--surface-3:#EAEDFF;
  --scrim:rgba(30,27,75,.40);--shadow:0 8px 24px rgba(30,27,75,.07);
  --sidebar-hover:#DDD6FE;--sidebar-line:#E0E4F8;
  --selection:rgba(79,70,229,.25);
  --scroll-track:#EAEDFF;--scroll-thumb:#4F46E5;
  --deep:#312E81;--deep-2:#1E1B4B;--gold-ink:#4338CA;
}
html[data-theme="violet"] .sidebar{
  background:linear-gradient(180deg,#EEF1FF,#E4E9FF);
  color:var(--side-text);border-right:1px solid var(--line);box-shadow:none;
}
html[data-theme="violet"] .brand{color:#1E1B4B}
html[data-theme="violet"] .brand small{color:#6366A5}
html[data-theme="violet"] .nav-item{color:#4338CA}
html[data-theme="violet"] .nav-item:hover{background:var(--sidebar-hover);color:#3730A3}
html[data-theme="violet"] .nav-item.is-active{background:#4F46E5;color:#fff}
html[data-theme="violet"] .nav-item .ico-grad,
html[data-theme="violet"] .nav-item .ico{color:#6366F1;-webkit-text-fill-color:#6366F1}
html[data-theme="violet"] .nav-item.is-active .ico-grad,
html[data-theme="violet"] .nav-item.is-active .ico{color:#fff;-webkit-text-fill-color:#fff}
html[data-theme="violet"] .side-user{border-top-color:var(--line)}
html[data-theme="violet"] .side-user strong{color:#1E1B4B}
html[data-theme="violet"] .side-user small{color:#6366A5}
html[data-theme="violet"] .btn-gold{background:#4F46E5;color:#fff}
html[data-theme="violet"] .btn-gold:hover{background:#4338CA;color:#fff}
html[data-theme="violet"] .avatar{background:#4F46E5;color:#fff}
html[data-theme="violet"] .nav-badge{background:#EEF2FF;color:#4338CA}
html[data-theme="violet"] .nav-item.is-active .nav-badge{background:rgba(255,255,255,.22);color:#fff}

/* ---------- THEME PICKER ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.theme-card{
  border:2px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface-1);
  text-align:left;padding:0;cursor:pointer;
  width:100%;color:var(--text);font:inherit;
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.theme-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-2);
}
.theme-card.is-on{
  border-color:var(--sel);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 22%,transparent),var(--elev-2);
}
.theme-preview{height:88px;display:flex}
.theme-preview .tp-side{width:28%}
.theme-preview .tp-main{flex:1;padding:10px 8px}
.theme-preview .tp-bar{height:10px;border-radius:6px;width:70%;margin-bottom:8px}
.theme-preview .tp-row{height:8px;border-radius:4px;width:100%;margin-bottom:6px;opacity:.75}
.theme-meta{padding:10px 12px}
.theme-meta strong{display:block;color:var(--text)}
.theme-meta span{color:var(--muted);font-size:var(--fs-sm)}
.theme-group{
  margin:18px 0 10px;font-size:var(--fs-md);letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
@media (max-width:980px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.theme-grid{grid-template-columns:1fr}}

/* ---------- TEMA "PERSONALIZUAR" (CUSTOM) ---------- */
/* E njëjta kartë ".theme-card" si çdo temë tjetër, por PA qenë vetë
   <button> (sepse brenda saj ka një <input type="color">, dhe HTML nuk
   lejon element interaktiv brenda një <button> tjetër). Struktura dhe
   emërtimet (strong/span/theme-preview/theme-meta) mbeten identike me
   kartat e temave normale, siç u kërkua. */
.theme-card-custom{cursor:default}
.theme-preview-custom{
  height:88px;display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(127,127,127,.10) 0 10px, transparent 10px 20px),
    linear-gradient(135deg,#fdfdfd,#eef0f3);
}
.theme-preview-custom input[type="color"]{
  width:52px;height:52px;padding:0;border:3px solid #fff;border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer;background:none;
}
.theme-preview-custom input[type="color"]::-webkit-color-swatch{border:0;border-radius:50%}
.theme-preview-custom input[type="color"]::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.theme-card-custom .theme-meta .btn{margin-top:8px;width:100%;justify-content:center}

/* ============================================================
   TË BARDHA ME SHKËLQIM (LIGHT / PEARL FAMILY)
   3 tema krejtësisht të bardha (sidebar i bardhë, jo navy si te "shine_*"
   ekzistuese), me një vijë shkëlqimi diagonale (::after) mbi sidebar që
   jep efektin "gloss"/"pearl". Përdorin prefiksin "shine_" në ID vetëm që
   të trashëgojnë automatikisht rregullat e përbashkëta të familjes shine
   (html[data-theme^="shine_"] më poshtë) — jo sepse kanë sidebar të errët.
   ============================================================ */
html[data-theme="shine_pearl"]{
  --navy:#EDEFF5;--navy-2:#E3E7F0;--navy-3:#6C8EEF;
  --gold:#6C8EEF;--gold-2:#A9BCF5;--gold-soft:#EDF1FE;
  --bg:#FAFBFF;--card:#FFFFFF;--text:#1E2A45;--muted:#647089;
  --line:#E3E8F5;--red:#D14D61;--red-soft:#FDE7EA;
  --green:#2E9E76;--blue:#6C8EEF;--sel:#6C8EEF;--orange:#E0A83D;
  --side-text:#39456B;
  --on-gold:#FFFFFF;--on-navy:#1E2A45;--on-surface:#1E2A45;
  --surface-1:#FFFFFF;--surface-2:#F5F7FD;--surface-3:#EDF1FE;
  --scrim:rgba(30,42,69,.35);--shadow:0 8px 24px rgba(108,142,239,.10);
  --sidebar-hover:#EEF1FE;--sidebar-line:#E3E8F5;
  --selection:rgba(108,142,239,.25);
  --scroll-track:#EDF1FE;--scroll-thumb:#6C8EEF;
  --deep:#1E2A45;--deep-2:#141B30;--gold-ink:#4A63C9;
}
html[data-theme="shine_platinum"]{
  --navy:#EEF0F3;--navy-2:#E2E6EB;--navy-3:#7C8FA6;
  --gold:#7C8FA6;--gold-2:#B7C2D0;--gold-soft:#EFF2F6;
  --bg:#F8F9FB;--card:#FFFFFF;--text:#262B33;--muted:#697488;
  --line:#E3E7EC;--red:#C2495B;--red-soft:#FBE5E8;
  --green:#37886E;--blue:#5B7A99;--sel:#7C8FA6;--orange:#C0904A;
  --side-text:#3A4250;
  --on-gold:#FFFFFF;--on-navy:#262B33;--on-surface:#262B33;
  --surface-1:#FFFFFF;--surface-2:#F5F6F8;--surface-3:#EFF2F6;
  --scrim:rgba(38,43,51,.35);--shadow:0 8px 24px rgba(124,143,166,.12);
  --sidebar-hover:#EEF1F5;--sidebar-line:#E3E7EC;
  --selection:rgba(124,143,166,.28);
  --scroll-track:#EFF2F6;--scroll-thumb:#7C8FA6;
  --deep:#262B33;--deep-2:#181C22;--gold-ink:#4E5A6B;
}
html[data-theme="shine_ivory"]{
  --navy:#F3EDE0;--navy-2:#E9DFC9;--navy-3:#C08A45;
  --gold:#C9A227;--gold-2:#E3C876;--gold-soft:#FBF4E3;
  --bg:#FFFDF6;--card:#FFFFFF;--text:#3A2F1E;--muted:#8A7857;
  --line:#EFE2C4;--red:#B5584A;--red-soft:#F7E3DE;
  --green:#7C8F4E;--blue:#7C8FA6;--sel:#C08A45;--orange:#C08A45;
  --side-text:#4A3B22;
  --on-gold:#FFFFFF;--on-navy:#3A2F1E;--on-surface:#3A2F1E;
  --surface-1:#FFFFFF;--surface-2:#FBF6EB;--surface-3:#FBF4E3;
  --scrim:rgba(58,47,30,.35);--shadow:0 8px 24px rgba(192,138,69,.12);
  --sidebar-hover:#F7EFDA;--sidebar-line:#EFE2C4;
  --selection:rgba(192,138,69,.28);
  --scroll-track:#FBF4E3;--scroll-thumb:#C08A45;
  --deep:#3A2F1E;--deep-2:#241C11;--gold-ink:#8A6423;
}
/* Sidebar krejtësisht i bardhë (jo gradient navy si te shine_gold etj.) me
   një shkëlqim diagonal (::after) — dhënë me qëllim "shkëlqim" (gloss). */
html[data-theme="shine_pearl"] .sidebar,
html[data-theme="shine_platinum"] .sidebar,
html[data-theme="shine_ivory"] .sidebar{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--surface-2) 55%,var(--surface-3) 100%);
  color:var(--side-text);
  border-right:1px solid var(--line);
  box-shadow:4px 0 24px rgba(0,0,0,.05);
  position:relative;overflow:hidden;
}
html[data-theme="shine_pearl"] .sidebar::after,
html[data-theme="shine_platinum"] .sidebar::after,
html[data-theme="shine_ivory"] .sidebar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.9),transparent 40%);
}
html[data-theme="shine_pearl"] .brand,
html[data-theme="shine_platinum"] .brand,
html[data-theme="shine_ivory"] .brand{color:var(--text)}
html[data-theme="shine_pearl"] .brand small,
html[data-theme="shine_platinum"] .brand small,
html[data-theme="shine_ivory"] .brand small{color:var(--gold-ink)}
html[data-theme="shine_pearl"] .nav-item,
html[data-theme="shine_platinum"] .nav-item,
html[data-theme="shine_ivory"] .nav-item{color:var(--side-text)}
html[data-theme="shine_pearl"] .nav-item:hover,
html[data-theme="shine_platinum"] .nav-item:hover,
html[data-theme="shine_ivory"] .nav-item:hover{background:var(--sidebar-hover);color:var(--text)}
html[data-theme="shine_pearl"] .nav-item.is-active,
html[data-theme="shine_platinum"] .nav-item.is-active,
html[data-theme="shine_ivory"] .nav-item.is-active{
  background:linear-gradient(90deg,var(--gold-2),var(--gold));color:var(--on-gold);
}
html[data-theme="shine_pearl"] .nav-item .ico,
html[data-theme="shine_pearl"] .nav-item .ico-grad,
html[data-theme="shine_platinum"] .nav-item .ico,
html[data-theme="shine_platinum"] .nav-item .ico-grad,
html[data-theme="shine_ivory"] .nav-item .ico,
html[data-theme="shine_ivory"] .nav-item .ico-grad{color:var(--gold-ink);-webkit-text-fill-color:var(--gold-ink)}
html[data-theme="shine_pearl"] .nav-item.is-active .ico,
html[data-theme="shine_pearl"] .nav-item.is-active .ico-grad,
html[data-theme="shine_platinum"] .nav-item.is-active .ico,
html[data-theme="shine_platinum"] .nav-item.is-active .ico-grad,
html[data-theme="shine_ivory"] .nav-item.is-active .ico,
html[data-theme="shine_ivory"] .nav-item.is-active .ico-grad{color:var(--on-gold);-webkit-text-fill-color:var(--on-gold)}
html[data-theme="shine_pearl"] .side-user,
html[data-theme="shine_platinum"] .side-user,
html[data-theme="shine_ivory"] .side-user{border-top-color:var(--line)}
html[data-theme="shine_pearl"] .side-user strong,
html[data-theme="shine_platinum"] .side-user strong,
html[data-theme="shine_ivory"] .side-user strong{color:var(--text)}
html[data-theme="shine_pearl"] .btn-gold,
html[data-theme="shine_platinum"] .btn-gold,
html[data-theme="shine_ivory"] .btn-gold{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--on-gold);
}
html[data-theme="shine_pearl"] .avatar,
html[data-theme="shine_platinum"] .avatar,
html[data-theme="shine_ivory"] .avatar{background:var(--gold);color:var(--on-gold)}

/* ---------- SHINE FAMILY ---------- */
html[data-theme="shine_gold"]{
  --navy:#1A2740;--navy-2:#121B2E;--navy-3:#C9A227;
  --gold:#D4AF37;--gold-2:#F1D27A;--gold-soft:#F6EFD8;
  --bg:#F6EFD8;--card:#FFFBF2;--text:#1C2B3A;--muted:#7A6A4A;
  --line:#E8D9A8;--red:#B45309;--red-soft:#FEF3C7;
  --green:#3F7D4E;--blue:#1E4E8C;--sel:#D4AF37;--orange:#C47B12;
  --side-text:#F6EFD8;
  --on-gold:#1B1403;--on-navy:#F6EFD8;--on-surface:#1C2B3A;
  --surface-1:#FFFBF2;--surface-2:#FBF3DC;--surface-3:#F6EFD8;
  --scrim:rgba(26,39,64,.45);--shadow:0 8px 24px rgba(26,39,64,.10);
  --sidebar-hover:rgba(255,255,255,.14);
  --sidebar-line:rgba(212,175,55,.35);
  --selection:rgba(212,175,55,.30);
  --scroll-track:#F6EFD8;--scroll-thumb:#D4AF37;
  --deep:#1A2740;--deep-2:#121B2E;--gold-ink:#8A6B14;
}
html[data-theme="shine_gold"] .sidebar{
  background:linear-gradient(180deg,#243656 0%,#1A2740 45%,#121B2E 100%);
  box-shadow:inset -1px 0 0 rgba(212,175,55,.35);
}
html[data-theme="shine_gold"] .nav-item.is-active{
  background:linear-gradient(90deg,#F1D27A,#C9A227);color:var(--on-gold);
}
html[data-theme="shine_gold"] .btn-gold{
  background:linear-gradient(180deg,#F1D27A,#C9A227);color:var(--on-gold);
}
html[data-theme="shine_gold"] .card,
html[data-theme="shine_gold"] .kpi,
html[data-theme="shine_gold"] .topbar{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF8E7 100%);
}
html[data-theme="shine_gold"] .week .wh{
  background:linear-gradient(180deg,#F1D27A,#C9A227);color:var(--on-gold);
}

html[data-theme="shine_ocean"]{
  --navy:#0B3A4A;--navy-2:#062833;--navy-3:#14B8A6;
  --gold:#2DD4BF;--gold-2:#5EEAD4;--gold-soft:#E6F7F7;
  --bg:#E8F4F4;--card:#F7FFFE;--text:#134E4A;--muted:#5B7C7A;
  --line:#BFE8E2;--red:#E11D48;--red-soft:#FFE4E6;
  --green:#0F766E;--blue:#0891B2;--sel:#14B8A6;--orange:#F59E0B;
  --side-text:#D1FAF5;
  --on-gold:#042F2E;--on-navy:#D1FAF5;--on-surface:#134E4A;
  --surface-1:#F7FFFE;--surface-2:#E8FAF8;--surface-3:#E6F7F7;
  --scrim:rgba(11,58,74,.45);--shadow:0 8px 24px rgba(11,58,74,.10);
  --sidebar-hover:rgba(255,255,255,.14);
  --sidebar-line:rgba(45,212,191,.30);
  --selection:rgba(20,184,166,.30);
  --scroll-track:#E6F7F7;--scroll-thumb:#14B8A6;
  --deep:#0B3A4A;--deep-2:#062833;--gold-ink:#0D6C63;
}
html[data-theme="shine_ocean"] .sidebar{
  background:linear-gradient(180deg,#0E5A68 0%,#0B3A4A 55%,#062833 100%);
}
html[data-theme="shine_ocean"] .nav-item.is-active{
  background:linear-gradient(90deg,#5EEAD4,#0D9488);color:var(--on-gold);
}
html[data-theme="shine_ocean"] .btn-gold{
  background:linear-gradient(180deg,#5EEAD4,#0D9488);color:var(--on-gold);
}
html[data-theme="shine_ocean"] .card,
html[data-theme="shine_ocean"] .kpi,
html[data-theme="shine_ocean"] .topbar{
  background:linear-gradient(180deg,#FFFFFF 0%,#E6FFFB 100%);
}
html[data-theme="shine_ocean"] .week .wh{
  background:linear-gradient(180deg,#5EEAD4,#0D9488);color:var(--on-gold);
}

html[data-theme="shine_rose"]{
  --navy:#4A2A38;--navy-2:#351D28;--navy-3:#E8A0B4;
  --gold:#E8A0B4;--gold-2:#F9C5D5;--gold-soft:#FBEFF3;
  --bg:#FBF0F3;--card:#FFF8FA;--text:#3F1D2B;--muted:#8A5A6A;
  --line:#F0D0DA;--red:#BE123C;--red-soft:#FFE4E6;
  --green:#0D9488;--blue:#9D174D;--sel:#E11D74;--orange:#E11D74;
  --side-text:#FCE7F3;
  --on-gold:#FFFFFF;--on-navy:#FCE7F3;--on-surface:#3F1D2B;
  --surface-1:#FFF8FA;--surface-2:#FBEAF0;--surface-3:#FBEFF3;
  --scrim:rgba(74,42,56,.45);--shadow:0 8px 24px rgba(74,42,56,.10);
  --sidebar-hover:rgba(255,255,255,.14);
  --sidebar-line:rgba(232,160,180,.30);
  --selection:rgba(225,29,116,.25);
  --scroll-track:#FBEFF3;--scroll-thumb:#E11D74;
  --deep:#4A2A38;--deep-2:#351D28;--gold-ink:#A3145A;
}
html[data-theme="shine_rose"] .sidebar{
  background:linear-gradient(180deg,#6B3A4C 0%,#4A2A38 50%,#351D28 100%);
}
html[data-theme="shine_rose"] .nav-item.is-active{
  background:linear-gradient(90deg,#F9C5D5,#E11D74);color:var(--on-gold);
}
html[data-theme="shine_rose"] .btn-gold{
  background:linear-gradient(180deg,#F9C5D5,#DB2777);color:var(--on-gold);
}
html[data-theme="shine_rose"] .btn-gold:hover{background:#C11760;color:#fff}
html[data-theme="shine_rose"] .card,
html[data-theme="shine_rose"] .kpi,
html[data-theme="shine_rose"] .topbar{
  background:linear-gradient(180deg,#FFFFFF 0%,#FDF2F8 100%);
}
html[data-theme="shine_rose"] .week .wh{
  background:linear-gradient(180deg,#F9C5D5,#E11D74);color:var(--on-gold);
}

html[data-theme="shine_aurora"]{
  --navy:#2A2158;--navy-2:#1B1640;--navy-3:#A78BFA;
  --gold:#A78BFA;--gold-2:#C4B5FD;--gold-soft:#F3EEFF;
  --bg:#F3EEFF;--card:#FBFAFF;--text:#1E1B4B;--muted:#6D68A8;
  --line:#DDD6FE;--red:#BE123C;--red-soft:#FFE4E6;
  --green:#34D399;--blue:#7C3AED;--sel:#7C3AED;--orange:#F59E0B;
  --side-text:#EDE9FE;
  --on-gold:#FFFFFF;--on-navy:#EDE9FE;--on-surface:#1E1B4B;
  --surface-1:#FBFAFF;--surface-2:#F3EEFF;--surface-3:#EDE9FE;
  --scrim:rgba(42,33,88,.45);--shadow:0 8px 24px rgba(42,33,88,.10);
  --sidebar-hover:rgba(255,255,255,.14);
  --sidebar-line:rgba(167,139,250,.30);
  --selection:rgba(124,58,237,.25);
  --scroll-track:#EDE9FE;--scroll-thumb:#7C3AED;
  --deep:#2A2158;--deep-2:#1B1640;--gold-ink:#5B21B6;
}
html[data-theme="shine_aurora"] .sidebar{
  background:linear-gradient(180deg,#4C3B8C 0%,#2A2158 48%,#1B1640 100%);
}
html[data-theme="shine_aurora"] .nav-item.is-active{
  background:linear-gradient(90deg,#C4B5FD,#7C3AED);color:var(--on-gold);
}
html[data-theme="shine_aurora"] .btn-gold{
  background:linear-gradient(180deg,#C4B5FD,#6D28D9);color:var(--on-gold);
}
html[data-theme="shine_aurora"] .btn-gold:hover{background:#5B21B6;color:#fff}
html[data-theme="shine_aurora"] .card,
html[data-theme="shine_aurora"] .kpi,
html[data-theme="shine_aurora"] .topbar{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F3FF 100%);
}
html[data-theme="shine_aurora"] .week .wh{
  background:linear-gradient(180deg,#C4B5FD,#7C3AED);color:var(--on-gold);
}

html[data-theme^="shine_"] .sidebar{position:relative}
html[data-theme^="shine_"] .nav-item:hover{
  background:var(--sidebar-hover);color:#fff;
}
html[data-theme^="shine_"] .nav-item.is-active:hover{color:var(--on-gold)}
html[data-theme^="shine_"] .card.shine{
  background:
    linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,#fff,var(--gold-soft));
}

/* ---------- DARK FAMILY ---------- */
html[data-theme^="dark"] .topbar,
html[data-theme^="dark"] .card,
html[data-theme^="dark"] .kpi,
html[data-theme^="dark"] .tbl th,
html[data-theme^="dark"] .tbl td,
html[data-theme^="dark"] .search input,
html[data-theme^="dark"] .field input,
html[data-theme^="dark"] .field select,
html[data-theme^="dark"] .field textarea,
html[data-theme^="dark"] .btn-outline,
html[data-theme^="dark"] .chip,
html[data-theme^="dark"] .filters select,
html[data-theme^="dark"] .filters input,
html[data-theme^="dark"] .lookup-q,
html[data-theme^="dark"] .lookup-list,
html[data-theme^="dark"] .lookup-item,
html[data-theme^="dark"] .theme-card,
html[data-theme^="dark"] .filegrid-item,
html[data-theme^="dark"] .pager a,
html[data-theme^="dark"] .tabs a,
html[data-theme^="dark"] .tabs button,
html[data-theme^="dark"] .month-chip,
html[data-theme^="dark"] .ico-act,
html[data-theme^="dark"] .preview,
html[data-theme^="dark"] .txt-preview,
html[data-theme^="dark"] .ai-box,
html[data-theme^="dark"] .ai-panel,
html[data-theme^="dark"] .conflict-item,
html[data-theme^="dark"] .login-card,
html[data-theme^="dark"] .dash-toast,
html[data-theme^="dark"] .notif-drop,
html[data-theme^="dark"] .toast{
  background:var(--surface-1);
  color:var(--text);
  border-color:var(--line);
}
html[data-theme^="dark"] .tbl th{background:var(--surface-3);color:var(--muted)}
html[data-theme^="dark"] .tbl tr:hover td{background:var(--surface-2)}
html[data-theme^="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme^="dark"] .nav-item{color:#fff}
html[data-theme^="dark"] .brand{color:#fff}
html[data-theme^="dark"] .brand small{color:var(--gold-2)}
html[data-theme^="dark"] .side-user,
html[data-theme^="dark"] .side-user strong{color:#fff}
html[data-theme^="dark"] .side-user small{color:var(--gold-2)}
html[data-theme^="dark"] .nav-item .ico,
html[data-theme^="dark"] .nav-item .ico-grad,
html[data-theme^="dark"] .nav-item .las,
html[data-theme^="dark"] .sidebar .ico,
html[data-theme^="dark"] .sidebar .ico-grad,
html[data-theme^="dark"] .sidebar .las{color:#fff;-webkit-text-fill-color:#fff}

html[data-theme="dark"] .nav-item .ico,
html[data-theme="dark"] .nav-item .ico-grad,
html[data-theme="dark"] .sidebar .ico-grad,
html[data-theme="dark"] .ico-brand{color:#93C5FD;-webkit-text-fill-color:#93C5FD}
html[data-theme="dark_brown"] .nav-item .ico,
html[data-theme="dark_brown"] .nav-item .ico-grad,
html[data-theme="dark_brown"] .nav-item .las,
html[data-theme="dark_brown"] .sidebar .ico,
html[data-theme="dark_brown"] .sidebar .ico-grad,
html[data-theme="dark_brown"] .ico-brand,
html[data-theme="dark_brown"] .brand small{color:#E8C39A;-webkit-text-fill-color:#E8C39A}
html[data-theme="dark_ink"] .nav-item .ico,
html[data-theme="dark_ink"] .nav-item .ico-grad,
html[data-theme="dark_ink"] .sidebar .ico-grad,
html[data-theme="dark_ink"] .ico-brand{color:#E4E4E7;-webkit-text-fill-color:#E4E4E7}
html[data-theme="dark_green"] .nav-item .ico,
html[data-theme="dark_green"] .nav-item .ico-grad,
html[data-theme="dark_green"] .nav-item .las,
html[data-theme="dark_green"] .sidebar .ico,
html[data-theme="dark_green"] .sidebar .ico-grad,
html[data-theme="dark_green"] .ico-brand{color:#6EE7B7;-webkit-text-fill-color:#6EE7B7}

html[data-theme^="dark"] .nav-item.is-active .ico,
html[data-theme^="dark"] .nav-item.is-active .ico-grad{color:#fff;-webkit-text-fill-color:#fff}
html[data-theme="dark_brown"] .nav-item.is-active .ico,
html[data-theme="dark_brown"] .nav-item.is-active .ico-grad{color:#1C1410;-webkit-text-fill-color:#1C1410}
html[data-theme="dark_ink"] .nav-item.is-active .ico,
html[data-theme="dark_ink"] .nav-item.is-active .ico-grad{color:#000;-webkit-text-fill-color:#000}
html[data-theme="dark_green"] .nav-item.is-active .ico,
html[data-theme="dark_green"] .nav-item.is-active .ico-grad{color:#022C22;-webkit-text-fill-color:#022C22}

html[data-theme^="dark"] .ico,
html[data-theme^="dark"] .ico-grad,
html[data-theme^="dark"] .las.ico-grad{color:var(--gold-2);-webkit-text-fill-color:var(--gold-2)}
html[data-theme^="dark"] .icon-btn{color:var(--gold-2)}
html[data-theme^="dark"] .ico-act{
  background:var(--surface-2);border-color:var(--line);color:var(--gold-2);
}
html[data-theme^="dark"] h1,
html[data-theme^="dark"] h2,
html[data-theme^="dark"] h3{color:var(--text)}
html[data-theme^="dark"] .k-value,
html[data-theme^="dark"] .page-head h1{color:#fff}
html[data-theme^="dark"] .tbl td a,
html[data-theme^="dark"] .link{color:var(--gold-2)}
html[data-theme^="dark"] .panel-head{
  background:var(--surface-3);color:var(--text);border-color:var(--line);
}
html[data-theme^="dark"] .panel-head h2,
html[data-theme^="dark"] .panel-head h3{color:var(--text)}
html[data-theme^="dark"] .case-file-head{color:#fff}
html[data-theme^="dark"] .case-file-head h3{color:#fff}
html[data-theme^="dark"] .case-doc:hover{background:rgba(255,255,255,.06)}

html[data-theme^="dark"] .badge-urgent{
  background:color-mix(in srgb,var(--red) 25%,var(--surface-1));
  color:color-mix(in srgb,var(--red) 85%,#fff);
}
html[data-theme^="dark"] .badge-process{
  background:color-mix(in srgb,var(--blue) 25%,var(--surface-1));
  color:color-mix(in srgb,var(--blue) 85%,#fff);
}
html[data-theme^="dark"] .badge-wait{
  background:color-mix(in srgb,var(--orange) 25%,var(--surface-1));
  color:color-mix(in srgb,var(--orange) 85%,#fff);
}
html[data-theme^="dark"] .badge-done{
  background:color-mix(in srgb,var(--gold) 25%,var(--surface-1));
  color:var(--gold-2);
}
html[data-theme^="dark"] .badge-today{
  background:color-mix(in srgb,var(--gold) 28%,var(--surface-1));
  color:var(--gold-2);
}
html[data-theme^="dark"] .badge-overdue{
  background:color-mix(in srgb,var(--red) 28%,var(--surface-1));
  color:color-mix(in srgb,var(--red) 85%,#fff);
}
html[data-theme^="dark"] .flash-success{
  background:color-mix(in srgb,var(--green) 20%,var(--surface-1));
  color:color-mix(in srgb,var(--green) 85%,#fff);
  border-color:color-mix(in srgb,var(--green) 40%,transparent);
}
html[data-theme^="dark"] .flash-error{
  background:color-mix(in srgb,var(--red) 20%,var(--surface-1));
  color:color-mix(in srgb,var(--red) 85%,#fff);
  border-color:color-mix(in srgb,var(--red) 40%,transparent);
}
html[data-theme^="dark"] .flash-info{
  background:color-mix(in srgb,var(--blue) 20%,var(--surface-1));
  color:color-mix(in srgb,var(--blue) 85%,#fff);
  border-color:color-mix(in srgb,var(--blue) 40%,transparent);
}
html[data-theme^="dark"] .conflict-alert{color:color-mix(in srgb,var(--red) 85%,#fff)}

/* ---------- DARK (blu e natës) ---------- */
html[data-theme="dark"]{
  --navy:#1E293B;--navy-2:#172033;--navy-3:#334155;
  --gold:#60A5FA;--gold-2:#93C5FD;--gold-soft:#1E3A5F;
  --bg:#0F1729;--card:#1A2438;--text:#E8EDF5;--muted:#A3B1C6;
  --line:#2C3A52;--red:#FB7185;--red-soft:#3F1D24;
  --green:#34D399;--blue:#60A5FA;--sel:#3B82F6;--orange:#FBBF24;
  --side-text:#CBD5E1;
  --on-gold:#0B1220;--on-navy:#E8EDF5;--on-surface:#E8EDF5;
  --surface-1:#1A2438;--surface-2:#1F2A42;--surface-3:#25324d;
  --scrim:rgba(0,0,0,.60);--shadow:0 8px 24px rgba(0,0,0,.35);
  --sidebar-hover:rgba(96,165,250,.14);
  --sidebar-line:rgba(96,165,250,.20);
  --selection:rgba(96,165,250,.35);
  --scroll-track:#1E293B;--scroll-thumb:#3B82F6;
  --deep:#1E293B;--deep-2:#172033;--gold-ink:#93C5FD;
}
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#22304A 0%,#1A2438 55%,#141C2E 100%);
}
html[data-theme="dark"] .nav-item.is-active{
  background:linear-gradient(90deg,#60A5FA,#2563EB);color:#fff;
}
html[data-theme="dark"] .btn-gold{
  background:linear-gradient(180deg,#60A5FA,#2563EB);color:#fff;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .topbar{
  background:linear-gradient(180deg,#1F2A42 0%,#1A2438 100%);
}
html[data-theme="dark"] .week .wh{
  background:linear-gradient(180deg,#60A5FA,#2563EB);color:#fff;
}

/* ---------- DARK BROWN ---------- */
html[data-theme="dark_brown"]{
  --navy:#3A2A20;--navy-2:#2A1C14;--navy-3:#4A3628;
  --gold:#D6A36A;--gold-2:#E8C39A;--gold-soft:#3B2A20;
  --bg:#1E1510;--card:#2A1F17;--text:#F3E6D8;--muted:#C9AE8E;
  --line:#4A3428;--red:#E07A5F;--red-soft:#3A1C16;
  --green:#A3B18A;--blue:#C4A484;--sel:#D6A36A;--orange:#E0A45E;
  --side-text:#E8D5C4;
  --on-gold:#1C1410;--on-navy:#E8D5C4;--on-surface:#F3E6D8;
  --surface-1:#2A1F17;--surface-2:#33261C;--surface-3:#3B2A20;
  --scrim:rgba(20,14,10,.65);--shadow:0 8px 24px rgba(0,0,0,.35);
  --sidebar-hover:rgba(232,195,154,.14);
  --sidebar-line:rgba(232,195,154,.20);
  --selection:rgba(214,163,106,.35);
  --scroll-track:#3B2A20;--scroll-thumb:#D6A36A;
  --deep:#3A2A20;--deep-2:#2A1C14;--gold-ink:#E8C39A;
}
html[data-theme="dark_brown"] .sidebar{
  background:linear-gradient(180deg,#4A3628 0%,#3A2A20 55%,#241810 100%);
}
html[data-theme="dark_brown"] .nav-item.is-active{
  background:linear-gradient(90deg,#E8C39A,#B7791F);color:var(--on-gold);
}
html[data-theme="dark_brown"] .btn-gold{
  background:linear-gradient(180deg,#E8C39A,#B7791F);color:var(--on-gold);
}
html[data-theme="dark_brown"] .card,
html[data-theme="dark_brown"] .kpi,
html[data-theme="dark_brown"] .topbar{
  background:linear-gradient(180deg,#2F231A 0%,#2A1F17 100%);
}
html[data-theme="dark_brown"] .week .wh{
  background:linear-gradient(180deg,#E8C39A,#B7791F);color:var(--on-gold);
}

/* ---------- DARK INK ---------- */
html[data-theme="dark_ink"]{
  --navy:#2A2A2E;--navy-2:#1F1F23;--navy-3:#3A3A40;
  --gold:#A1A1AA;--gold-2:#E4E4E7;--gold-soft:#26262B;
  --bg:#18181B;--card:#222226;--text:#FAFAFA;--muted:#B4B4BC;
  --line:#33333A;--red:#F87171;--red-soft:#3F1D1D;
  --green:#4ADE80;--blue:#A1A1AA;--sel:#E4E4E7;--orange:#FBBF24;
  --side-text:#D4D4D8;
  --on-gold:#0A0A0A;--on-navy:#FAFAFA;--on-surface:#FAFAFA;
  --surface-1:#222226;--surface-2:#2A2A2E;--surface-3:#28282D;
  --scrim:rgba(0,0,0,.60);--shadow:0 8px 24px rgba(0,0,0,.40);
  --sidebar-hover:rgba(228,228,231,.12);
  --sidebar-line:rgba(228,228,231,.18);
  --selection:rgba(228,228,231,.25);
  --scroll-track:#28282D;--scroll-thumb:#A1A1AA;
  --deep:#2A2A2E;--deep-2:#1F1F23;--gold-ink:#E4E4E7;
}
html[data-theme="dark_ink"] .sidebar{
  background:linear-gradient(180deg,#2E2E33 0%,#222226 55%,#18181B 100%);
}
html[data-theme="dark_ink"] .nav-item.is-active{
  background:linear-gradient(90deg,#E4E4E7,#A1A1AA);color:var(--on-gold);
}
html[data-theme="dark_ink"] .btn-gold{
  background:linear-gradient(180deg,#FAFAFA,#A1A1AA);color:var(--on-gold);
}
html[data-theme="dark_ink"] .card,
html[data-theme="dark_ink"] .kpi,
html[data-theme="dark_ink"] .topbar{
  background:linear-gradient(180deg,#28282D 0%,#222226 100%);
}
html[data-theme="dark_ink"] .week .wh{
  background:linear-gradient(180deg,#E4E4E7,#A1A1AA);color:var(--on-gold);
}

/* ---------- DARK GREEN ---------- */
html[data-theme="dark_green"]{
  --navy:#0F2A1E;--navy-2:#0A1F16;--navy-3:#123B2A;
  --gold:#34D399;--gold-2:#6EE7B7;--gold-soft:#0E3B2A;
  --bg:#081A12;--card:#0F261B;--text:#ECFDF5;--muted:#9AD9BC;
  --line:#1A4A34;--red:#FB7185;--red-soft:#3F1D24;
  --green:#34D399;--blue:#5EEAD4;--sel:#10B981;--orange:#FBBF24;
  --side-text:#A7F3D0;
  --on-gold:#022C22;--on-navy:#A7F3D0;--on-surface:#ECFDF5;
  --surface-1:#0F261B;--surface-2:#123020;--surface-3:#0E3B2A;
  --scrim:rgba(0,0,0,.60);--shadow:0 8px 24px rgba(0,0,0,.40);
  --sidebar-hover:rgba(110,231,183,.14);
  --sidebar-line:rgba(110,231,183,.20);
  --selection:rgba(52,211,153,.30);
  --scroll-track:#0E3B2A;--scroll-thumb:#10B981;
  --deep:#0F2A1E;--deep-2:#0A1F16;--gold-ink:#6EE7B7;
}
html[data-theme="dark_green"] .sidebar{
  background:linear-gradient(180deg,#134A34 0%,#0F2A1E 55%,#061710 100%);
}
html[data-theme="dark_green"] .nav-item.is-active{
  background:linear-gradient(90deg,#6EE7B7,#059669);color:var(--on-gold);
}
html[data-theme="dark_green"] .btn-gold{
  background:linear-gradient(180deg,#6EE7B7,#059669);color:var(--on-gold);
}
html[data-theme="dark_green"] .card,
html[data-theme="dark_green"] .kpi,
html[data-theme="dark_green"] .topbar{
  background:linear-gradient(180deg,#123020 0%,#0F261B 100%);
}
html[data-theme="dark_green"] .week .wh{
  background:linear-gradient(180deg,#6EE7B7,#059669);color:var(--on-gold);
}

/* ---------- DARK PURPLE (ametist mbretërore) ---------- */
html[data-theme="dark_purple"]{
  --navy:#2D1B4E;--navy-2:#1F1238;--navy-3:#4A2E7A;
  --gold:#C084FC;--gold-2:#E0AFFF;--gold-soft:#2D1B4E;
  --bg:#140B24;--card:#1F1238;--text:#F3E8FF;--muted:#B9A3D9;
  --line:#3D2A5C;--red:#FB7185;--red-soft:#3F1D24;
  --green:#34D399;--blue:#818CF8;--sel:#A855F7;--orange:#FBBF24;
  --side-text:#E9D8FD;
  --on-gold:#1A0B2E;--on-navy:#F3E8FF;--on-surface:#F3E8FF;
  --surface-1:#1F1238;--surface-2:#251644;--surface-3:#2D1B4E;
  --scrim:rgba(0,0,0,.60);--shadow:0 8px 24px rgba(0,0,0,.40);
  --sidebar-hover:rgba(200,132,252,.14);
  --sidebar-line:rgba(200,132,252,.20);
  --selection:rgba(168,85,247,.35);
  --scroll-track:#2D1B4E;--scroll-thumb:#A855F7;
  --deep:#2D1B4E;--deep-2:#1F1238;--gold-ink:#E0AFFF;
}
html[data-theme="dark_purple"] .sidebar{
  background:linear-gradient(180deg,#3D2560 0%,#2D1B4E 55%,#1A0F2E 100%);
}
html[data-theme="dark_purple"] .nav-item.is-active{
  background:linear-gradient(90deg,#E0AFFF,#A855F7);color:var(--on-gold);
}
html[data-theme="dark_purple"] .btn-gold{
  background:linear-gradient(180deg,#E0AFFF,#9333EA);color:var(--on-gold);
}
html[data-theme="dark_purple"] .card,
html[data-theme="dark_purple"] .kpi,
html[data-theme="dark_purple"] .topbar{
  background:linear-gradient(180deg,#251644 0%,#1F1238 100%);
}
html[data-theme="dark_purple"] .week .wh{
  background:linear-gradient(180deg,#E0AFFF,#A855F7);color:var(--on-gold);
}

/* ---------- DARK CRIMSON (bordo e thellë) ---------- */
html[data-theme="dark_crimson"]{
  --navy:#3A1620;--navy-2:#2A0F17;--navy-3:#5C1E2C;
  --gold:#F43F5E;--gold-2:#FB7185;--gold-soft:#3A1620;
  --bg:#170A0D;--card:#241017;--text:#FCE7EB;--muted:#D3A0AC;
  --line:#4A1D28;--red:#FB7185;--red-soft:#3F1D24;
  --green:#34D399;--blue:#818CF8;--sel:#F43F5E;--orange:#FB923C;
  --side-text:#F4D3DA;
  --on-gold:#2B0810;--on-navy:#FCE7EB;--on-surface:#FCE7EB;
  --surface-1:#241017;--surface-2:#2C141B;--surface-3:#3A1620;
  --scrim:rgba(0,0,0,.60);--shadow:0 8px 24px rgba(0,0,0,.40);
  --sidebar-hover:rgba(244,63,94,.14);
  --sidebar-line:rgba(244,63,94,.20);
  --selection:rgba(244,63,94,.30);
  --scroll-track:#3A1620;--scroll-thumb:#F43F5E;
  --deep:#3A1620;--deep-2:#2A0F17;--gold-ink:#FB7185;
}
html[data-theme="dark_crimson"] .sidebar{
  background:linear-gradient(180deg,#4F1D29 0%,#3A1620 55%,#200A0F 100%);
}
html[data-theme="dark_crimson"] .nav-item.is-active{
  background:linear-gradient(90deg,#FB7185,#E11D48);color:#fff;
}
html[data-theme="dark_crimson"] .btn-gold{
  background:linear-gradient(180deg,#FB7185,#BE123C);color:#fff;
}
html[data-theme="dark_crimson"] .card,
html[data-theme="dark_crimson"] .kpi,
html[data-theme="dark_crimson"] .topbar{
  background:linear-gradient(180deg,#2C141B 0%,#241017 100%);
}
html[data-theme="dark_crimson"] .week .wh{
  background:linear-gradient(180deg,#FB7185,#E11D48);color:#fff;
}

/* ---------- DARK TEAL (blu-detit e thellë) ---------- */
html[data-theme="dark_teal"]{
  --navy:#0B2E38;--navy-2:#072028;--navy-3:#0F4A57;
  --gold:#22D3EE;--gold-2:#67E8F9;--gold-soft:#0B2E38;
  --bg:#061A20;--card:#0D2A32;--text:#E0FBFF;--muted:#8FC3CE;
  --line:#164753;--red:#FB7185;--red-soft:#3F1D24;
  --green:#34D399;--blue:#22D3EE;--sel:#22D3EE;--orange:#FBBF24;
  --side-text:#CFF7FC;
  --on-gold:#062026;--on-navy:#E0FBFF;--on-surface:#E0FBFF;
  --surface-1:#0D2A32;--surface-2:#0F323B;--surface-3:#123B45;
  --scrim:rgba(0,0,0,.60);--shadow:0 8px 24px rgba(0,0,0,.40);
  --sidebar-hover:rgba(34,211,238,.14);
  --sidebar-line:rgba(34,211,238,.20);
  --selection:rgba(34,211,238,.30);
  --scroll-track:#123B45;--scroll-thumb:#22D3EE;
  --deep:#0B2E38;--deep-2:#072028;--gold-ink:#67E8F9;
}
html[data-theme="dark_teal"] .sidebar{
  background:linear-gradient(180deg,#124452 0%,#0B2E38 55%,#051820 100%);
}
html[data-theme="dark_teal"] .nav-item.is-active{
  background:linear-gradient(90deg,#67E8F9,#06B6D4);color:var(--on-gold);
}
html[data-theme="dark_teal"] .btn-gold{
  background:linear-gradient(180deg,#67E8F9,#0891B2);color:var(--on-gold);
}
html[data-theme="dark_teal"] .card,
html[data-theme="dark_teal"] .kpi,
html[data-theme="dark_teal"] .topbar{
  background:linear-gradient(180deg,#0F323B 0%,#0D2A32 100%);
}
html[data-theme="dark_teal"] .week .wh{
  background:linear-gradient(180deg,#67E8F9,#06B6D4);color:var(--on-gold);
}

/* ---------- DARK: depth layers (top highlight) ---------- */
html[data-theme^="dark"] .card{
  position:relative;
}
html[data-theme^="dark"] .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,#fff 10%,transparent),
    transparent
  );
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  pointer-events:none;
}

/* ============================================================
   TEMA "MAT" (MATTE FAMILY)
   E kundërta e familjes "shine": ngjyra të mekura/flat, pa gradiente
   shkëlqimi, me një teksturë të hollë PIKASH (radial-gradient e
   përsëritur) mbi sidebar dhe sfond — jep ndjesinë "matte"/të pa-shndritshme.
   ============================================================ */
html[data-theme="matte_graphite"]{
  --navy:#3F4756;--navy-2:#2E3540;--navy-3:#5B6472;
  --gold:#8B95A6;--gold-2:#A8B0BD;--gold-soft:#EDEFF2;
  --bg:#EEF0F2;--card:#F7F8F9;--text:#2B2F36;--muted:#6B7280;
  --line:#DDE1E6;--red:#B0525C;--red-soft:#F7E3E5;
  --green:#5C8C6E;--blue:#5B7A99;--sel:#6B7280;--orange:#B98A54;
  --side-text:#D8DCE2;
  --on-gold:#FFFFFF;--on-navy:#FFFFFF;--on-surface:#2B2F36;
  --surface-1:#F7F8F9;--surface-2:#F1F2F4;--surface-3:#EEF0F2;
  --scrim:rgba(43,47,54,.40);--shadow:0 6px 16px rgba(43,47,54,.08);
  --sidebar-hover:rgba(255,255,255,.08);--sidebar-line:rgba(255,255,255,.10);
  --selection:rgba(107,114,128,.25);
  --scroll-track:#EEF0F2;--scroll-thumb:#6B7280;
  --deep:#2E3540;--deep-2:#232830;--gold-ink:#4B5563;
}
html[data-theme="matte_sand"]{
  --navy:#8A7A66;--navy-2:#6B5D4D;--navy-3:#A3927C;
  --gold:#C08552;--gold-2:#D4A373;--gold-soft:#F5ECE0;
  --bg:#F3EDE4;--card:#FAF6F0;--text:#3A3129;--muted:#8A7864;
  --line:#E3D8C8;--red:#B5584A;--red-soft:#F5E0DC;
  --green:#7A8C5C;--blue:#6B8299;--sel:#C08552;--orange:#C08552;
  --side-text:#EFE6D8;
  --on-gold:#FFFFFF;--on-navy:#FFFFFF;--on-surface:#3A3129;
  --surface-1:#FAF6F0;--surface-2:#F5EFE6;--surface-3:#F3EDE4;
  --scrim:rgba(58,49,41,.40);--shadow:0 6px 16px rgba(58,49,41,.08);
  --sidebar-hover:rgba(255,255,255,.10);--sidebar-line:rgba(255,255,255,.12);
  --selection:rgba(192,133,82,.25);
  --scroll-track:#F3EDE4;--scroll-thumb:#C08552;
  --deep:#6B5D4D;--deep-2:#544738;--gold-ink:#9C6B3E;
}
html[data-theme="matte_forest"]{
  --navy:#4A5A45;--navy-2:#3A4736;--navy-3:#5E7057;
  --gold:#8FA37E;--gold-2:#A9BC99;--gold-soft:#EEF2EA;
  --bg:#EEF1EA;--card:#F7F9F5;--text:#2E3A2A;--muted:#71806B;
  --line:#DDE4D5;--red:#B15D52;--red-soft:#F5E1DD;
  --green:#6E8A5E;--blue:#5F7B8A;--sel:#6E8A5E;--orange:#B18A52;
  --side-text:#DCE5D3;
  --on-gold:#FFFFFF;--on-navy:#FFFFFF;--on-surface:#2E3A2A;
  --surface-1:#F7F9F5;--surface-2:#F1F4ED;--surface-3:#EEF1EA;
  --scrim:rgba(46,58,42,.40);--shadow:0 6px 16px rgba(46,58,42,.08);
  --sidebar-hover:rgba(255,255,255,.10);--sidebar-line:rgba(255,255,255,.12);
  --selection:rgba(110,138,94,.25);
  --scroll-track:#EEF1EA;--scroll-thumb:#6E8A5E;
  --deep:#3A4736;--deep-2:#2C3629;--gold-ink:#54683F;
}

/* Sidebar "mat": ngjyrë e sheshtë (jo gradient) + teksturë pikash e hollë. */
html[data-theme^="matte_"] .sidebar{
  background-color:var(--navy);
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.4px);
  background-size:9px 9px;
  color:var(--side-text);
  box-shadow:none;
}
/* E njëjta teksturë pikash, shumë e hollë, edhe mbi sfondin e përgjithshëm
   të faqes — "diçka me pika të imëta" siç u kërkua, në vend të shkëlqimit. */
html[data-theme^="matte_"] body{
  background-color:var(--bg);
  background-image:radial-gradient(circle,rgba(0,0,0,.035) 1px,transparent 1.4px);
  background-size:9px 9px;
}
html[data-theme^="matte_"] .nav-item{color:var(--side-text)}
html[data-theme^="matte_"] .nav-item:hover{background:var(--sidebar-hover);color:#fff}
html[data-theme^="matte_"] .nav-item.is-active{
  background:var(--sel);color:var(--on-gold);box-shadow:none; /* E RRAFSHËT, pa gradient — vetë kuptimi i "mat" */
}
html[data-theme^="matte_"] .brand{color:#fff}
html[data-theme^="matte_"] .brand small{color:var(--gold-2)}
html[data-theme^="matte_"] .side-user strong{color:#fff}
html[data-theme^="matte_"] .side-user small{color:var(--gold-2)}
html[data-theme^="matte_"] .nav-item .ico,
html[data-theme^="matte_"] .nav-item .ico-grad{color:var(--side-text);-webkit-text-fill-color:var(--side-text)}
html[data-theme^="matte_"] .nav-item.is-active .ico,
html[data-theme^="matte_"] .nav-item.is-active .ico-grad{color:var(--on-gold);-webkit-text-fill-color:var(--on-gold)}
/* Buton kryesor RRAFSH (jo gradient si te temat "shine"/"dark") — ngjyrë e vetme e sheshtë. */
html[data-theme^="matte_"] .btn-gold{background:var(--sel);color:var(--on-gold);box-shadow:none}
html[data-theme^="matte_"] .btn-gold:hover{background:var(--gold-ink)}
html[data-theme^="matte_"] .avatar{background:var(--sel);color:var(--on-gold)}
html[data-theme^="matte_"] .card,
html[data-theme^="matte_"] .filegrid-item,
html[data-theme^="matte_"] .kpi,
html[data-theme^="matte_"] .topbar{background:var(--card);box-shadow:none}
html[data-theme^="matte_"] .week .wh{background:var(--sel);color:var(--on-gold)}

/* ============================================================
   KORPORATIVE / KONSERVATORE — pa gradiente, pa shkëlqim; ngjyra tokësore
   të matura (antracit + bronz i zbehtë), letër e ngrohtë si sfond.
   ============================================================ */
html[data-theme="corporate"]{
  --navy:#22252A;--navy-2:#15171A;--navy-3:#3A3E45;
  --gold:#6B5D4F;--gold-2:#8A7A68;--gold-soft:#F2EDE7;
  --bg:#F5F4F2;--card:#FFFFFF;--text:#2A2A28;--muted:#6B6963;
  --line:#E2DFD9;--red:#8C3B3B;--red-soft:#F3E3E1;
  --green:#4F6B4F;--blue:#4A5A6B;--sel:#6B5D4F;--orange:#8A6D3F;
  --side-text:#C9C4BB;
  --on-gold:#FFFFFF;--on-navy:#FFFFFF;--on-surface:#2A2A28;
  --surface-1:#FFFFFF;--surface-2:#F7F5F2;--surface-3:#F2EFEA;
  --scrim:rgba(20,20,18,.45);--shadow:0 4px 14px rgba(20,20,18,.06);
  --sidebar-hover:rgba(255,255,255,.06);--sidebar-line:rgba(255,255,255,.08);
  --selection:rgba(107,93,79,.28);
  --scroll-track:#F2EFEA;--scroll-thumb:#6B5D4F;
  --deep:#22252A;--deep-2:#15171A;--gold-ink:#4F4638;
}
/* Sidebar krejt i sheshtë (jo gradient) — pikërisht ndryshe nga "shine"/
   "dark" — kjo ËSHTË identiteti i "konservatores": pa ndriçim, seriozitet. */
html[data-theme="corporate"] .sidebar{background:var(--navy);box-shadow:none}
html[data-theme="corporate"] .nav-item.is-active{background:var(--sel);color:var(--on-gold);box-shadow:none}
html[data-theme="corporate"] .btn-gold{background:var(--sel);color:var(--on-gold)}
html[data-theme="corporate"] .btn-gold:hover{background:var(--gold-ink)}
html[data-theme="corporate"] .avatar{background:var(--sel);color:var(--on-gold)}
html[data-theme="corporate"] .card,
html[data-theme="corporate"] .kpi,
html[data-theme="corporate"] .filegrid-item{box-shadow:var(--shadow)}
html[data-theme="corporate"] .kpi.kpi-gold .k-value,
html[data-theme="corporate"] .link{color:var(--gold-ink)}

/* ============================================================
   GLOBAL — selection, autofill, hr, file, kbd
   ============================================================ */
/* Seleksion i tekstit — RREGULLIM: më parë çdo temë përdorte një ngjyrë
   shumë të zbehtë (--selection, 25-35% opacitet e ngjyrës së temës), e cila
   praktikisht nuk dallohej mbi shumicën e sfondeve. Tani seleksioni është
   GJITHMONË i verdhë i fortë, i njëjtë në të gjitha 22 temat, i lexueshëm
   qartë (tekst i zi mbi të verdhë) pavarësisht se çfarë teme është aktive. */
::selection{background:#FFD400;color:#141414}
::-moz-selection{background:#FFD400;color:#141414}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface-1) inset;
  box-shadow:0 0 0 1000px var(--surface-1) inset;
  transition:background-color 5000s ease-in-out 0s;
  caret-color:var(--text);
}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
input[type="file"]{color:var(--text)}
input[type="file"]::file-selector-button{
  background:var(--surface-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;margin-right:8px;cursor:pointer;
}
input[type="file"]::file-selector-button:hover{background:var(--surface-3)}
select{background-color:var(--surface-1);color:var(--text)}

/* kbd */
.kbd{
  display:inline-block;
  padding:2px 7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  line-height:1.4;
  background:var(--surface-3);
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:5px;
  color:var(--text);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--text) 8%,transparent);
}
/* ============================================================
   MADHËSIA E SHKRONJAVE — preferencë personale (Settings → Temat, në fund).
   Shkallëzon VETËM variablat --fs-* ekzistuese (të njëjtat që përdor tashmë
   çdo pjesë e ndërfaqes) — asnjë rregull tjetër nuk ndryshon, asgjë s'thyhet.
   ============================================================ */
html[data-font-size="large"]{
  --fs-xs:12px; --fs-sm:13px; --fs-base:14.5px; --fs-md:15.5px;
  --fs-lg:18px; --fs-xl:22px; --fs-2xl:27px; --fs-3xl:34px;
}
html[data-font-size="xlarge"]{
  --fs-xs:13px; --fs-sm:14.5px; --fs-base:16px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:24px; --fs-2xl:29px; --fs-3xl:36px;
}

/* ============================================================
   FAMILJA E SHKRONJAVE — preferencë personale, VETËM fonte "web-safe" (të
   instaluara tashmë në çdo pajisje/browser, pa shkarkim nga interneti).
   RËNDËSI: prek VETËM <body> (pra ndërfaqen: menytë, tabelat, butonat).
   Dokumentet AI/PDF/print (.ai-doc, .ai-doc-editor-wrap .trumbowyg-editor,
   #ai-doc-print-box) e kanë Georgia të vendosur DREJTPËRDREJT mbi vetë
   elementet e tyre — një rregull i drejtpërdrejtë mbi një element fiton
   GJITHMONË ndaj trashëgimisë nga body, pavarësisht specificitetit —
   kështu që këto zgjedhje NUK mund t'i prekin dokumentet ligjore.
   ============================================================ */
html[data-font="system"] body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
html[data-font="georgia"] body{
  font-family:Georgia,'Times New Roman',serif;
}
html[data-font="verdana"] body{
  font-family:Verdana,Geneva,Tahoma,sans-serif;
}