/* ===== FinancaPro — tema e Centra 2, «D Klasik» (Inter, indigo + slate) =====
   Ngjyrat dhe korniza janë ato të Pronatyra.Centra 2.0.x: Pronatyra.Core/Ui/UiThemes.cs (Light) dhe
   Pronatyra.Centra/wwwroot/app.css (.pron-side, .pron-top, .pron-card, .pron-kpi). Pa MudBlazor:
   komponentët mbeten tanët dhe etiketat e fushave rrinë SIPËR fushës. Kur ndryshon UiThemes.cs te Centra,
   përditësohet ky :root. */
:root {
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --primary: #4F46E5;            /* Primary */
    --primary-dark: #4338CA;       /* PrimaryDark — edhe teksti i lidhjes aktive të menysë */
    --primary-light: #EEF2FF;      /* PrimarySoft — sfondi i lidhjes aktive */
    --primary-dark-text: #4338CA;
    --bg: #F4F6FB;                 /* Background — edhe shiriti i sipërm */
    --surface: #FFFFFF;            /* Surface — menyja, kartelat */
    --surface-2: #F8FAFC;          /* Surface2 — koka e tabelave, hover */
    --border: #E4E7EE;             /* Border */
    --border-strong: #CBD5E1;      /* korniza e fushave */
    --text: #0F172A;               /* Text */
    --text-2: #475569;
    --text-3: #64748B;             /* TextSecondary */
    /* Statuset dhe tonet e buta (--pron-tint-* / --pron-ink-* te Centra): sfondi (bg) + teksti (fg). */
    --green: #047857;      --green-bg: #DCFCE7;   --green-fg: #047857;    /* Success / ok */
    --red: #B91C1C;        --red-bg: #FEE2E2;     --red-fg: #B91C1C;      /* Error / bad */
    --amber: #B45309;      --amber-bg: #FEF3C7;   --amber-fg: #B45309;    /* Warning / warn */
    --purple-bg: #EDE9FE;  --purple-fg: #6D28D9;                          /* violet */
    --teal-bg: #DBEAFE;    --teal-fg: #1D4ED8;                            /* info */
    --radius: 10px;
    --card-radius: 16px;
    --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .03);
    --shadow-btn: 0 1px 2px rgba(79, 70, 229, .30);
    --sidebar-w: 240px;
    --topbar-h: 64px;
    --acc: transparent;            /* ngjyra e vendit të ndërmarrjes (AL / KS) */
    /* Menyja (UiTokens.Side*), kartelat dhe teksti mbi mbushjet — ndryshojnë sipas temës. */
    --side-bg: #FFFFFF; --side-text: #334155; --side-active-bg: #EEF2FF; --side-active-text: #4338CA;
    --side-border: var(--border); --side-line: var(--border); --side-sub-active: var(--primary); --side-sub-line: var(--primary);
    --side-brand-pro: var(--primary);
    --card-border: 0;
    --heading-font: var(--font);
    --on-primary: #FFFFFF; --on-danger: #FFFFFF;
    --gray-bg: #F1F5F9;
}

/* ===== Temat e Centra 2 (UiThemes.Tokens): D Klasik (më sipër) · B · D Ishull · D Natyra, secila e çelët / e errët =====
   Zgjedhja rri te <html data-tema data-pamja data-menyja>, që App.razor e vendos nga cookie-t fp-* që në HTML-në e
   parë (pa ndezje të pamjes së gabuar); fpUi te app.js e ndërron pa rifreskim. Rendi ka rëndësi: pamja e errët vjen
   pas temave të çelëta, kombinimet «e errët + temë» në fund. */
html[data-tema="b"] {
    --bg: #F6F7FB;
    --side-bg: #17153B; --side-text: #C7D2FE; --side-active-bg: #4F46E5; --side-active-text: #FFFFFF;
    --side-border: #17153B; --side-line: rgba(199, 210, 254, .2); --side-sub-active: #FFFFFF; --side-sub-line: #D0A93B;
    --side-brand-pro: #A5B4FC; --card-radius: 12px; --card-border: 1px solid var(--border);
}
html[data-tema="ishull"] {
    --bg: #ECEDF1; --surface-2: #F6F7F9; --border: #E3E5EA;
    --side-bg: #ECEDF1; --side-active-bg: #FFFFFF; --side-active-text: #0F172A; --side-border: transparent;
    --card-radius: 12px; --shadow: none; --card-border: 1px solid var(--border);
}
html[data-tema="natyra"] {
    --primary: #0F766E; --primary-dark: #115E59; --primary-light: #E3F4F1; --primary-dark-text: #115E59;
    --bg: #F4F6F2; --surface-2: #F8FAF7; --border: #E2E7E0;
    --side-active-bg: #0F766E; --side-active-text: #FFFFFF; --side-brand-pro: #0F766E;
    --heading-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
/* Pamja e errët — e përbashkët për të katër temat (spec §5.1). Teksti mbi mbushjet e çelëta = boja e errët (UiThemes.OnFill). */
html[data-pamja="erret"] {
    color-scheme: dark;
    --primary: #8B87FF; --primary-dark: #A5A1FF; --primary-light: #26245A; --primary-dark-text: #C9C7FF;
    --bg: #0D0C21; --surface: #16153A; --surface-2: #1B1A44; --border: #2B2955; --border-strong: #3B3970;
    --text: #E8EAF6; --text-2: #C9CDE6; --text-3: #9AA0C6;
    --green: #4ADE80;      --green-bg: #12301F;   --green-fg: #4ADE80;
    --red: #F87171;        --red-bg: #3A1418;     --red-fg: #F87171;
    --amber: #FBBF24;      --amber-bg: #33270C;   --amber-fg: #FBBF24;
    --purple-bg: #2E1065;  --purple-fg: #C4B5FD;
    --teal-bg: #172554;    --teal-fg: #93C5FD;
    --gray-bg: #24234A;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .05);
    --side-bg: #16153A; --side-text: #C9CDE6; --side-active-bg: #26245A; --side-active-text: #E8EAF6;
    --side-border: #2B2955; --side-line: #2B2955; --side-brand-pro: #A5A1FF;
    --on-primary: #0D0C21; --on-danger: #0D0C21;
}
html[data-pamja="erret"][data-tema="b"] {
    --side-bg: #0A0920; --side-text: #C7D2FE; --side-active-bg: #4F46E5; --side-active-text: #FFFFFF; --side-border: #0A0920;
}
html[data-pamja="erret"][data-tema="ishull"] { --side-bg: #0D0C21; --side-active-bg: #16153A; --side-border: transparent; --shadow: none; }
html[data-pamja="erret"][data-tema="natyra"] {
    --primary: #2DD4BF; --primary-dark: #5EEAD4; --primary-light: #113A37; --primary-dark-text: #5EEAD4;
    --side-active-bg: #0F766E; --side-active-text: #FFFFFF; --side-brand-pro: #5EEAD4;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px;
    /* Shifra tabulare (numrat rreshtohen në kolona) + cv05 (l e dallueshme nga 1/I) — si te Centra. */
    font-feature-settings: "tnum" 1, "cv05" 1; font-variant-numeric: tabular-nums;
}
/* Titulli i faqes 20px/600 — Centra 2.0.2 («më pak bold»). */
h1 { font-family: var(--heading-font); font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
h1:focus, h2:focus { outline: none; }
a { color: var(--primary); text-decoration: none; }

.validation-message { color: var(--red); font-size: 12.5px; margin-top: 3px; }

/* ---- korniza (Centra 2 §4): menyja e bardhë majtas në gjithë lartësinë, shiriti i çelët sipër ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; z-index: 60;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-border);
}
.side-head {
    display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; white-space: nowrap;
    color: inherit; font-weight: 700; font-size: 15px;
}
.side-head .logo {
    width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--primary); color: var(--on-primary);
    display: grid; place-items: center; font-size: 14px; font-weight: 800;
}
/* "Pro" — hapësirë e qëllimshme 3px nga "Financa" (jo gap-i i flex-it, që i ndan 10-12px).
   Prandaj "Financa" + "Pro" rrinë brenda NJË flex-item-i të vetëm në të dyja vendet. */
.brand-pro { margin-left: 3px; font-weight: 800; color: var(--primary); }
.side-head .brand-pro { color: var(--side-brand-pro); }
.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px; scrollbar-width: thin; }
/* Lidhjet e nivelit të parë dhe titujt e grupeve (.pron-side-gh). */
.side-gh {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; margin: 2px 0;
    border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit;
    font-size: 13.5px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.side-gh svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-gh:hover { background: color-mix(in srgb, var(--side-text) 10%, transparent); color: inherit; }
.side-gh.active, .side-grp.has-on > .side-gh { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 600; }
.side-gh:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.side-lbl { flex: 1; min-width: 0; }
.side-chev { margin-left: auto; opacity: .6; transition: transform .15s; }
.side-grp.open > .side-gh .side-chev { transform: rotate(180deg); }
/* Nënfaqet: pa ikona, me vijë majtas; aktivja me ngjyrën kryesore dhe vijë 2px. */
.side-items { padding: 2px 0 6px 21px; }
.side-items .nav-item {
    display: block; padding: 7px 10px 7px 16px; border-left: 1px solid var(--side-line);
    color: inherit; opacity: .82; font-size: 13px; line-height: 1.35; text-decoration: none;
}
.side-items .nav-item svg { display: none; }
.side-items .nav-item:hover { opacity: 1; }
.side-items .nav-item.active { opacity: 1; font-weight: 600; color: var(--side-sub-active); border-left: 2px solid var(--side-sub-line); padding-left: 15px; }
.side-items .nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.side-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 12px; border-top: 1px solid var(--side-line); }
/* Grupi i mbyllur fshihet; lista mbetet në DOM që menyja e mbledhur ta hapë anash pa klikim. */
.side-grp:not(.open) > .side-items { display: none; }
.side-ver { display: block; padding: 0 10px; font-size: 11px; opacity: .55; white-space: nowrap; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: var(--topbar-h); flex: none; position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 6px; padding: 0 20px;
    background: var(--bg); color: var(--text);
}
.top-search { flex: 1; max-width: 520px; min-width: 0; }
.top-sp { flex: 1; }
/* Ndërmarrja aktive — informacion, jo kontroll; vija poshtë me ngjyrën e vendit, si zgjedhja e vendit te Centra. */
.vendi-al { --acc: #E41E20; }
.vendi-ks { --acc: #D0A650; }
.topbar .company-badge {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin-right: 4px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    color: var(--text); font-size: 12.5px; font-weight: 500; box-shadow: inset 0 -2px 0 var(--acc);
    text-decoration: none; cursor: pointer;
}
.topbar .company-badge:hover { border-color: var(--primary); }
.topbar .company-badge .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .company-badge svg { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }
.topbar .company-badge .juris {
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 1px 6px;
    border-radius: 99px; background: var(--primary-light); color: var(--primary-dark);
}
/* Menyja e profilit (Centra 2 §4.4). */
.me-wrap { position: relative; }
.me {
    display: flex; align-items: center; gap: 9px; margin-left: 4px; padding: 4px 6px 4px 4px;
    border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.me:hover { background: var(--surface-2); }
.me:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.avatar {
    width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%;
    background: #D0A93B; color: #17153B; font-weight: 700; font-size: 12px;
}
.me-t { font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
.me-t small, .me-head small { display: block; color: var(--text-3); font-size: 11.5px; }
.me-chev { width: 16px; height: 16px; opacity: .6; }
.me-scrim { position: fixed; inset: 0; z-index: 70; }
.me-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 71; min-width: 260px; padding: 6px 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
}
.me-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; font-size: 13.5px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.me-form { margin: 0; }
.me-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: 0; background: transparent;
    color: var(--text); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer;
}
.me-item svg { width: 17px; height: 17px; color: var(--text-3); }
.me-item:hover { background: var(--surface-2); color: var(--text); }

.content { flex: 1; padding: 8px 24px 28px; width: 100%; min-width: 0; }   /* gjithë gjerësia e ekranit (owner 07/10), si te Centra */
.page-sub { color: var(--text-3); font-size: 13px; margin-bottom: 20px; }

/* ---- cards & tables ---- */
.card { background: var(--surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--shadow); overflow: hidden; }
.card + .card { margin-top: 16px; }
.card-pad { padding: 20px; }
.card-title { font-family: var(--heading-font); font-size: 14px; font-weight: 600; padding: 16px 20px; border-bottom: 1px solid var(--border); }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
    text-align: left; padding: 10px 14px; background: var(--surface-2); color: var(--text-3);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:hover td { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl .heading-row td { font-weight: 700; background: var(--surface-2); }
.tbl .indent-1 { padding-left: 26px; } .tbl .indent-2 { padding-left: 40px; }
.tbl .indent-3 { padding-left: 54px; } .tbl .indent-4 { padding-left: 68px; }
.tbl tfoot td { font-weight: 600; border-top: 2px solid var(--border); background: var(--surface-2); }
.tbl a { font-weight: 500; }

/* ---- kërkimi global (Ctrl+K) ---- */
.gs-box {
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; width: 100%; min-width: 0; color: var(--text-3); font-size: 13px; white-space: nowrap; overflow: hidden;
    transition: border-color .12s, color .12s;
}
.gs-box:hover { border-color: var(--primary); color: var(--text-2); }
.gs-box svg { width: 15px; height: 15px; flex-shrink: 0; }
.gs-box span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.gs-box kbd {
    font-family: var(--font); font-size: 10.5px; font-weight: 600; color: var(--text-3);
    background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
/* Paneli rri lart, jo në qendër: sytë e kërkojnë aty dhe lista rritet poshtë. */
.gs-backdrop { align-items: flex-start; padding-top: 12vh; }
.gs-panel {
    width: min(640px, 92vw); background: var(--surface); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22); overflow: hidden;
}
.gs-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.gs-input-row svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.gs-input-row input { border: none; font-size: 15px; padding: 0; flex: 1; }
.gs-input-row input:focus { box-shadow: none; }
.gs-results { max-height: 56vh; overflow-y: auto; padding: 6px 0 10px; }
.gs-empty { color: var(--text-3); font-size: 13.5px; padding: 18px 18px 14px; margin: 0; }
.gs-kind {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3); padding: 12px 18px 5px;
}
.gs-hit { display: flex; flex-direction: column; gap: 1px; padding: 8px 18px; cursor: pointer; }
.gs-hit:hover, .gs-hit.sel { background: var(--primary-light); }
.gs-title { font-size: 14px; font-weight: 600; color: var(--text); }
.gs-sub { font-size: 12px; color: var(--text-3); }

/* ---- kokë kolone që renditet ---- */
.tbl th.sort-th { cursor: pointer; user-select: none; transition: background .12s, color .12s; }
.tbl th.sort-th:hover { background: var(--border); color: var(--text); }
.tbl th.sort-th:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tbl th.sort-th.sorted { color: var(--primary); background: var(--primary-light); }
.sort-lbl { display: inline-flex; align-items: center; gap: 4px; }
.tbl th.num .sort-lbl { flex-direction: row-reverse; }
/* Gjerësi fikse: shigjeta të mos i lëvizë kolonat kur ndryshon renditja. */
.sort-arr { width: 9px; display: inline-block; font-size: 10px; line-height: 1; }

/* ---- ikonat e veprimeve në fund të rreshtit ---- */
.tbl td.acts { text-align: right; white-space: nowrap; width: 1%; padding-right: 10px; }
.act {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: none; background: transparent; border-radius: 7px; cursor: pointer;
    color: var(--text-3); transition: background .12s, color .12s; padding: 0; margin-left: 2px;
}
.act svg { width: 16px; height: 16px; }
.act:hover { background: var(--primary-light); color: var(--primary); }
.act.act-danger:hover { background: var(--red-bg); color: var(--red); }
/* Fshirja e pamundur nuk fshihet — shfaqet e shuar me arsyen te title, që përdoruesi
   ta kuptojë PSE (rregulli i BC-së: entitet me lëvizje çaktivizohet, nuk fshihet). */
.act:disabled { color: var(--border-strong); cursor: not-allowed; }
.act:disabled:hover { background: transparent; color: var(--border-strong); }

/* ---- forms & buttons ---- */
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
/* Fushë e detyrueshme: <label>Emri <b class="req">*</b></label> — përdoruesi e di PARA se ta plotësojë
   formularin, jo pasi merr gabimin te "Ruaj". */
.req { color: var(--red); font-weight: 700; margin-left: 1px; }
.form-hint { font-size: 12px; color: var(--text-3); margin: 5px 0 0; line-height: 1.45; }
/* Ndihma nën fushë kur vlera s'ka formën e ligjit: gabim (s'ruhet) ose paralajmërim (ruhet). */
.form-hint-err { color: var(--red-fg); }
.form-hint-warn { color: var(--amber-fg); }
.form-legend { font-size: 12px; color: var(--text-3); margin: 0 0 14px; }
/* Tekst dytësor brenda qelizave të tabelave (kodi, lloji, email-i pranë emrit). */
.inv-muted { color: var(--text-3); font-size: 12px; }
/* Fushat: etiketa SIPËR (mbetet e dukshme kur shkruan — forma tona janë të dendura),
   por korniza e plotë "outlined" si te Centra. Korniza e zbehtë --border i bënte fushat
   të dukeshin bosh; --border-strong u jep trup pa u bërë e rëndë. */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], select, textarea {
    font-family: var(--font); font-size: 14px; width: 100%; padding: 9px 12px;
    border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) { border-color: var(--text-3); }
input:focus, select:focus, textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--text-3); }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; } .row > * { flex: 1 1 120px; min-width: 0; }   /* kalon në rresht të ri kur s'ka vend */
.row > [style*="flex:0"] { flex: 0 0 auto !important; min-width: auto; }   /* fusha e butonit: sa përmbajtja */

.btn {
    display: inline-flex; align-items: center; gap: 7px; font-family: var(--font);
    font-size: 13.5px; font-weight: 500; padding: 8px 16px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer; transition: all .12s; text-decoration: none;
}
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-primary:hover { background: var(--primary-dark); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-btn); }
.btn-outline { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-danger { background: var(--red); color: var(--on-danger); box-shadow: 0 1px 2px rgba(185,28,28,.3); }
.btn-danger:hover { background: #991B1B; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(185,28,28,.35); }
/* Rreshta që duhen VETËM te printimi (dritarja e printimit s'e ngarkon këtë skedar, ndaj atje shfaqen). */
.print-only { display: none; }
/* Eksportet — të njëjtët kudo. Stil «soft»: sfond i lehtë me ngjyrë + tekst i errët i së njëjtës ngjyrë,
   ikona brenda një çipi të vogël me ngjyrë të plotë. Excel jeshil, PDF i kuq. (Gri dukeshin si çaktivizuar.) */
.btn-export { gap: 8px; padding: 5px 12px 5px 6px; border-radius: 10px; font-weight: 600; }
.btn-export .ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 7px; color: #fff; flex: none;
}
.btn-excel { background: #ECFDF5; color: #15803D; border-color: #A7F3D0; }
.btn-excel .ico { background: #16A34A; }
.btn-excel:hover { background: #D1FAE5; border-color: #6EE7B7; color: #166534; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,.18); }
.btn-pdf { background: #FFF1F2; color: #BE123C; border-color: #FECDD3; }
.btn-pdf .ico { background: #E11D48; }
.btn-pdf:hover { background: #FFE4E6; border-color: #FDA4AF; color: #9F1239; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(225,29,72,.18); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- badges & alerts ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 500; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-gray { background: var(--gray-bg); color: var(--text-2); }
.badge-indigo { background: var(--primary-light); color: var(--primary-dark-text); }

.alert { padding: 11px 15px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.alert-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.alert-success { background: #F0FDF4; color: var(--green); border: 1px solid #BBF7D0; }
.alert-amber { background: #FFF7ED; color: var(--amber); border: 1px solid #FED7AA; }
.alert-amber a { color: var(--amber); text-decoration: underline; font-weight: 600; }

/* ---- stat tiles (Material i përmbajtur — tone kuptimplote) ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
/* Kur KPI-të vijnë menjëherë pas një karte (p.sh. filtri i datave), duhet i njëjti
   ndarës si mes dy kartave — përndryshe ngjiten pas njëra-tjetrës. */
.card + .stats { margin-top: 16px; }
.stat { background: var(--surface); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--shadow); padding: 16px; }
/* KPI-të e panelit janë lidhje: duhet të duken të klikueshme pa u bërë "butona". */
a.stat { display: block; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
a.stat:hover { box-shadow: 0 0 0 1px var(--primary); }
.stat.has-ico { display: flex; align-items: flex-start; gap: 14px; }
.stat .stat-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--purple-bg); color: var(--purple-fg); }
.stat .stat-ico svg { width: 19px; height: 19px; }
.stat .stat-body { min-width: 0; }
.stat .stat-label { font-size: 12.5px; color: var(--text-3); font-weight: 400; margin-bottom: 2px; }
.stat .stat-value { font-family: var(--heading-font); font-size: 22px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--text); }
/* variantet sipas kuptimit */
.stat-green .stat-ico { background: var(--green-bg); color: var(--green-fg); }
.stat-amber .stat-ico { background: var(--amber-bg); color: var(--amber-fg); }
.stat-red .stat-ico { background: var(--red-bg); color: var(--red-fg); }
.stat-teal .stat-ico { background: var(--teal-bg); color: var(--teal-fg); }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.login-card { width: 380px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: var(--card-radius); padding: 36px; box-shadow: 0 12px 40px rgba(16,24,40,.10); }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 20px; font-weight: 700; }
.login-logo .logo { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); display: grid; place-items: center; color: var(--on-primary); font-size: 19px; }
/* Zgjedhja e ndërmarrjes pas hyrjes: etiketa sipër listës, çdo ndërmarrje një rresht me vijën e vendit (AL e kuqe, KS ari). */
.company-pick { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.company-pick legend { padding: 0; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.company-opt {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
    font-size: 13.5px; font-weight: 500; box-shadow: inset 0 -2px 0 var(--acc);
}
.company-opt:hover, .company-opt:has(input:checked) { border-color: var(--primary); }
.company-opt input { accent-color: var(--primary); margin: 0; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.toolbar .filters .field { margin-bottom: 0; min-width: 130px; }

/* ---- modal standard (entitetet e thjeshta krijohen këtu, jo në faqe më vete) ---- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 100; background: rgba(15, 23, 42, .45);
    display: grid; place-items: center; padding: 24px; overflow-y: auto;
    animation: modal-fade .12s ease-out;
}
.modal-box {
    background: var(--surface); border-radius: 14px; width: 100%; max-width: 560px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .3); display: flex; flex-direction: column;
    max-height: calc(100vh - 48px); animation: modal-rise .14s ease-out;
}
.modal-box.modal-wide { max-width: 900px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.modal-x {
    background: none; border: none; cursor: pointer; color: var(--text-3); padding: 4px;
    border-radius: 6px; display: grid; place-items: center; line-height: 0;
}
.modal-x:hover { background: var(--surface-2); color: var(--text); }
.modal-x svg { width: 18px; height: 18px; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-body .field:last-child { margin-bottom: 0; }
.modal-sec {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3); margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--border);
}
.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg);
    border-radius: 0 0 14px 14px;
}
@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---- bashkëngjitjet me parapamje anash (si te Yuki) ---- */
.attach-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); gap: 16px; }
@media (max-width: 900px) { .attach-grid { grid-template-columns: 1fr; } }
.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface); transition: all .12s;
}
.attach-item:hover { border-color: var(--border-strong); background: var(--bg); }
.attach-item.on { border-color: var(--primary); background: var(--primary-light); }
.attach-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
              border-radius: 7px; background: var(--primary-light); color: var(--primary); }
.attach-item.on .attach-ico { background: var(--primary); color: #fff; }
.attach-ico svg { width: 16px; height: 16px; }
.attach-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-meta { font-size: 11.5px; color: var(--text-3); }
.attach-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.attach-preview iframe { width: 100%; height: 560px; border: 0; display: block; }
.attach-preview img { width: 100%; height: auto; display: block; }

/* ---- listë të dhënash (kartela e partnerit) ---- */
.deflist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 24px; margin-bottom: 6px; }
.def { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.def-l { color: var(--text-3); min-width: 130px; flex-shrink: 0; }
.def-v { color: var(--text); font-weight: 500; word-break: break-word; }
.def-v.def-empty { color: var(--text-3); font-weight: 400; }
.def-group { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
             color: var(--text-3); margin: 16px 0 6px; }
.def-group:first-of-type { margin-top: 0; }

/* ---- autocomplete (kërkim partneri me emër/NIPT) ---- */
.ac-list {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 3px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px;
    box-shadow: 0 8px 24px rgba(15,23,42,.14); max-height: 280px; overflow-y: auto;
}
.ac-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover { background: var(--primary-light); }
.ac-main { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.ac-sub { display: block; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---- shigjeta e kthimit te faqet-dokument ---- */
.back-link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--text-2);
    font-size: 13px; font-weight: 600; margin-bottom: 10px;
}
.back-link:hover { color: var(--primary); }
.back-link svg { width: 16px; height: 16px; }

.blazor-error-boundary { background: var(--red-bg); color: var(--red); padding: 1rem; border-radius: 8px; }
.blazor-error-boundary::after { content: "Ndodhi një gabim i papritur." }

#blazor-error-ui { position: fixed; bottom: 0; left: 0; right: 0; background: var(--amber-bg); color: var(--amber); padding: 10px 20px; display: none; z-index: 999; }

/* Lookup — zgjedhësi me kërkim sipas emrit (Components/Lookup.razor) */
.lookup { position: relative; }
.ac-item.ac-active { background: var(--primary-light); }

/* Ndihmë e shkurtër nën fushat kriptike (G3) */
.field-hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.4; }

/* ===== Formular me rrjet: kolonat rreshtohen nga një rresht në tjetrin (fatura, kartela) ===== */
.form-grid { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 16px; }
.form-grid > * { min-width: 0; }
.form-grid > .s2 { grid-column: span 2; }
.form-grid > .s3 { grid-column: span 3; }
.form-grid > .s-all { grid-column: 1 / -1; }
/* Dy data «nga – deri» brenda një fushe: ngushtohen bashkë, s'dalin jashtë kartës. */
.date-range { display: flex; align-items: center; gap: 8px; }
.date-range input { flex: 1 1 0; min-width: 0; }
.date-range .sep { color: var(--text-3); flex-shrink: 0; }
/* Kutia e zgjedhjes në rreshtin e fushave: në të njëjtën lartësi me fushat fqinje. */
.field-check { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 24px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.field-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.field-check-inline { min-height: 0; margin-top: 6px; }
/* Seksion i palosshëm brenda formularit. */
.form-details { margin: 0 0 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.form-details > summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 13.5px; color: var(--text); padding: 4px 0 10px; user-select: none;
}
.form-details > summary::-webkit-details-marker { display: none; }
.form-details > summary::before {
    content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: rotate(-45deg); transition: transform .15s;
}
.form-details[open] > summary::before { transform: rotate(45deg); }
.form-details > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.form-meta { color: var(--text-3); font-size: 12px; margin-top: 2px; }

/* Shembujt e formateve (p.sh. kolonat e CSV-së) thyhen në ekran të ngushtë në vend që të priten. */
.content code { overflow-wrap: anywhere; }

/* Tabelë me fusha të redaktueshme (rreshtat e faturës/ditarit): qeliza më të ngjeshura. */
.tbl-edit th, .tbl-edit td { padding: 8px 6px; }
.tbl-edit th:first-child, .tbl-edit td:first-child { padding-left: 16px; }
.tbl-edit th:last-child, .tbl-edit td:last-child { padding-right: 16px; }
.tbl-edit input[type=text], .tbl-edit input[type=number], .tbl-edit select { padding: 7px 9px; }
.tbl-edit td .badge { margin-top: 4px; }
/* Shënimi nën llogarinë e rreshtit: nga ku erdhi sugjerimi, ose te cila llogari e përgjithshme bie rreshti pa llogari. */
.line-hint { margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--text-3); }
.line-hint.warn { color: var(--amber); }
.line-hint.bad { color: var(--red); font-weight: 500; }

/* ===== Përshtatja me ekranin (owner 07/10): ekrane të mëdha, laptop/tablet, telefon ===== */
.nav-toggle {
    display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
    border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-2); color: var(--text); }
.nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-backdrop { display: none; }

/* Ekrane të mëdha: menyja dhe teksti pak më të mëdhenj, që faqja e gjerë të lexohet pa u afruar. */
@media (min-width: 1800px) {
    :root { --sidebar-w: 264px; }
    body { font-size: 15px; }
    .tbl { font-size: 14px; }
    .side-gh { font-size: 14.5px; }
    .side-items .nav-item { font-size: 14px; }
    .content { padding: 8px 40px 32px; }
    .topbar { padding: 0 40px; }
}

/* Laptop i vogël / tablet: menyja del nga ana me butonin ☰ dhe mbyllet pas zgjedhjes. */
@media (max-width: 1100px) {
    .form-grid { --cols: 4; }
    .nav-toggle { display: inline-flex; }
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
        transition: transform .18s ease-out; box-shadow: none;
    }
    .shell.nav-open .sidebar { transform: none; box-shadow: 10px 0 40px rgba(0, 0, 0, .25); }
    .shell.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(10, 9, 30, .45); }
    .content { padding: 8px 20px 24px; }
    .topbar { padding: 0 16px; }
    .me-t { display: none; }
    .gs-box kbd { display: none; }
}

/* Telefon: fushat njëra nën tjetrën, shiriti i sipërm i ngjeshur, butonat në rresht të ri. */
@media (max-width: 700px) {
    body { font-size: 14px; }
    h1 { font-size: 19px; }
    .content { padding: 8px 12px 16px; }
    .topbar { padding: 0 8px; gap: 4px; }
    .top-search { flex: 0 0 auto; }
    .topbar .company-badge { padding: 6px 8px; }
    .topbar .company-badge .name { display: none; }
    .gs-box span { display: none; }
    .row > * { flex-basis: 100% !important; max-width: none !important; }
    .form-grid { --cols: 2; column-gap: 12px; }
    .form-grid > .s3 { grid-column: span 2; }
    .toolbar { align-items: stretch; }
    .toolbar > div[style*="display:flex"] { flex-wrap: wrap; }
    .toolbar .filters { width: 100%; }
    .toolbar .filters .field { flex: 1 1 100%; }
    .card-pad { padding: 14px; }
    .stats { grid-template-columns: 1fr 1fr; }
    .modal-backdrop { padding: 8px; }
    .modal-box { max-height: calc(100vh - 16px); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
@media (max-width: 420px) {
    .form-grid { --cols: 1; }
    .form-grid > .s2, .form-grid > .s3 { grid-column: auto; }
}

/* ===== Temat — pjesët e kornizës që s'mjaftojnë me tokenat ===== */
html[data-tema="b"] .topbar, html[data-tema="ishull"] .topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
html[data-tema="ishull"]:not([data-pamja="erret"]) .btn-primary { background: #18181B; box-shadow: none; }
html[data-tema="ishull"]:not([data-pamja="erret"]) .btn-primary:hover { background: #27272A; }
html[data-tema="ishull"] .side-gh.active,
html[data-tema="ishull"] .side-grp.has-on > .side-gh { box-shadow: 0 1px 3px rgba(16, 24, 40, .10); }
html[data-tema="ishull"] .stat .stat-ico { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
/* D Ishull: përmbajtja si panel i ngritur mbi sfondin gri (clip, jo hidden: shiriti sipër mbetet sticky). */
@media (min-width: 1101px) {
    html[data-tema="ishull"] .main {
        margin: 10px 10px 10px 0; border-radius: 16px; overflow: clip;
        background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    }
    html[data-tema="ishull"][data-pamja="erret"] .main { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
}
/* Pamja e errët: komponentët me ngjyra të veta. */
html[data-pamja="erret"] .alert-error { background: #3A1418; color: #F87171; border-color: #5B1F25; }
html[data-pamja="erret"] .alert-success { background: #12301F; color: #4ADE80; border-color: #1E4D33; }
html[data-pamja="erret"] .alert-amber { background: #33270C; color: #FBBF24; border-color: #5A4513; }
html[data-pamja="erret"] .btn-excel { background: #12301F; color: #4ADE80; border-color: #1E4D33; }
html[data-pamja="erret"] .btn-excel:hover { background: #173D28; border-color: #2B6B47; color: #86EFAC; }
html[data-pamja="erret"] .btn-pdf { background: #3A1418; color: #FDA4AF; border-color: #5B1F25; }
html[data-pamja="erret"] .btn-pdf:hover { background: #4A1A20; border-color: #7F2A33; color: #FECDD3; }
html[data-pamja="erret"] .btn-danger:hover { background: #FCA5A5; }

/* ===== Butonat e temës: pamja (diell/hënë) te shiriti dhe zgjedhja te menyja e profilit ===== */
.top-icon {
    display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-2); cursor: pointer;
}
.top-icon:hover { background: var(--surface-2); color: var(--text); }
.top-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.top-icon svg { width: 19px; height: 19px; }
.ico-sun { display: none; }
html[data-pamja="erret"] .ico-sun { display: block; }
html[data-pamja="erret"] .ico-moon { display: none; }
.me-sec { padding: 8px 16px 2px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.me-item .swatch { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--c); }
.swatch-klasik { --c: #4F46E5; } .swatch-b { --c: #17153B; } .swatch-ishull { --c: #ECEDF1; } .swatch-natyra { --c: #0F766E; }
.swatch-celet { --c: #FFFFFF; } .swatch-erret { --c: #0D0C21; }
.opt-name { flex: 1; }
.me-item .opt-check { visibility: hidden; color: var(--primary); }
html[data-tema="klasik"] .opt[data-k="tema"][data-v="klasik"] .opt-check,
html[data-tema="b"] .opt[data-k="tema"][data-v="b"] .opt-check,
html[data-tema="ishull"] .opt[data-k="tema"][data-v="ishull"] .opt-check,
html[data-tema="natyra"] .opt[data-k="tema"][data-v="natyra"] .opt-check,
html[data-pamja="celet"] .opt[data-k="pamja"][data-v="celet"] .opt-check,
html[data-pamja="erret"] .opt[data-k="pamja"][data-v="erret"] .opt-check { visibility: visible; }
.me-sep { height: 1px; margin: 6px 0; background: var(--border); }

/* ===== Menyja e mbledhur (spec §4.2): kolonë 68 px me ikonat; grupi hap listën anash kur kalon miu ose fokusi ===== */
.side-fly-title { display: none; }
.side-col {
    display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; margin-left: auto; border: 0;
    border-radius: 8px; background: transparent; color: inherit; opacity: .7; cursor: pointer;
}
.side-col:hover { opacity: 1; background: color-mix(in srgb, var(--side-text) 10%, transparent); }
.side-col:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.side-col svg { width: 16px; height: 16px; transition: transform .15s; }
@media (min-width: 1101px) {
    html[data-menyja="mbledhur"] .sidebar { width: 68px; overflow: visible; }
    html[data-menyja="mbledhur"] .side-nav { overflow: visible; padding: 4px 10px; }
    html[data-menyja="mbledhur"] .side-head { justify-content: center; padding-left: 0; padding-right: 0; }
    html[data-menyja="mbledhur"] .side-name,
    html[data-menyja="mbledhur"] .side-lbl,
    html[data-menyja="mbledhur"] .side-chev,
    html[data-menyja="mbledhur"] .side-ver { display: none; }
    html[data-menyja="mbledhur"] .side-gh { justify-content: center; gap: 0; padding: 11px 0; font-size: 0; }
    html[data-menyja="mbledhur"] .side-foot { display: flex; justify-content: center; padding-left: 0; padding-right: 0; }
    html[data-menyja="mbledhur"] .side-col { margin-left: 0; }
    html[data-menyja="mbledhur"] .side-col svg { transform: rotate(180deg); }
    html[data-menyja="mbledhur"] .side-grp { position: relative; }
    html[data-menyja="mbledhur"] .side-grp > .side-items {
        display: none; position: absolute; left: calc(100% + 10px); top: 0; z-index: 80; min-width: 230px; padding: 6px;
        background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
    }
    /* Ura e padukshme mes kolonës dhe listës, që miu të mos e mbyllë listën kur kalon hapësirën. */
    html[data-menyja="mbledhur"] .side-grp > .side-items::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }
    html[data-menyja="mbledhur"] .side-grp:hover > .side-items,
    html[data-menyja="mbledhur"] .side-grp:focus-within > .side-items { display: block; }
    html[data-menyja="mbledhur"] .side-fly-title {
        display: block; padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
        text-transform: uppercase; color: var(--text-3);
    }
    html[data-menyja="mbledhur"] .side-items .nav-item { border-left: 0; padding: 8px 10px; border-radius: 8px; opacity: 1; color: var(--text); }
    html[data-menyja="mbledhur"] .side-items .nav-item:hover { background: var(--surface-2); }
    html[data-menyja="mbledhur"] .side-items .nav-item.active { border-left: 0; padding-left: 10px; color: var(--primary); background: var(--primary-light); }
}
@media (prefers-reduced-motion: reduce) { .side-col svg, .side-chev { transition: none; } }

/* ===== Historiku i ndryshimeve (AuditHistory, AuditRows, /historiku): vetëm tokenat e :root, pamja e errët vjen vetë ===== */
.card.hist-card { margin-top: 16px; }
.hist-head {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 20px; border: 0; background: transparent;
    color: var(--text); font: inherit; font-family: var(--heading-font); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.hist-top { display: flex; align-items: center; }
.hist-top .hist-head { flex: 1 1 auto; width: auto; min-width: 0; }
.hist-top .act { flex: none; margin-right: 14px; }
.hist-bar { display: flex; justify-content: flex-end; padding: 6px 14px 0; }
.hist-head:hover { background: var(--surface-2); }
.hist-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.hist-chev { width: 16px; height: 16px; flex: none; color: var(--text-3); transition: transform .15s; }
.hist-open > .hist-top .hist-chev { transform: rotate(90deg); }
.hist-sub { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--text-3); }
.hist-body { border-top: 1px solid var(--border); }
/* Brenda një dritareje redaktimi: pa kartelë, vetëm një seksion i palosur poshtë fushave. */
.hist-inline { margin-top: 18px; border-top: 1px solid var(--border); }
.hist-inline > .hist-top > .hist-head { padding: 12px 0; }
.hist-inline > .hist-top .act { margin-right: 0; }
.hist-inline > .hist-top > .hist-head:hover { background: transparent; }
.hist-inline .hist-body { border-top: 0; }
.hist-ico { width: 16px; height: 16px; flex: none; }
.hist-note { padding: 18px 20px; font-size: 13px; color: var(--text-3); }
.hist-modal { margin: -20px; }                      /* tabela rri te skajet e dritares, si te kartela */
.hist-modal .hist-note { padding: 20px; }
.hist-tbl td { vertical-align: top; }
.hist-when { white-space: nowrap; color: var(--text-2); }
.hist-act { white-space: nowrap; }
.hist-act .badge + .badge { margin-left: 4px; }
.hist-ref { min-width: 160px; }
.hist-chgs { min-width: 240px; }
.hist-chg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; line-height: 1.5; }
.hist-chg + .hist-chg { margin-top: 2px; }
.hist-f { color: var(--text-3); }
.hist-v { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-o { color: var(--text-3); }
.hist-n { color: var(--text); font-weight: 500; }
.hist-arrow { color: var(--text-3); }
.hist-secret { color: var(--text-2); font-style: italic; }
.hist-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--border); }
.hist-pager { display: flex; gap: 8px; }
.hist-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hist-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.hist-filters .field { margin-bottom: 0; min-width: 140px; }
.hist-search { flex: 1 1 260px; }
.hist-verify-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hist-verify-head h2 { font-size: 15px; font-weight: 600; margin: 0; }
.hist-chains { display: flex; flex-direction: column; gap: 10px; }
.hist-chain { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.hist-chain-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-finding { margin-top: 6px; font-size: 13px; line-height: 1.45; }
.hist-finding.bad { color: var(--red); }
.hist-finding.warn { color: var(--amber); }
@media (max-width: 700px) {
    .hist-actions { width: 100%; }
    .hist-search { flex-basis: 100%; }
}