/* ============================================================
   Abonime : app.css
   Nxjerre nga prototipi shell.html (NetVala), pershtatur per
   faqe te renderuara ne server (PHP). Te gjitha tokens dhe
   klasat e demos ruhen; ne fund ka ndihmesa per forma PHP.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --bg:#F6F6F4; --surface:#FFFFFF; --surface2:#FBFBFA; --border:#E6E6E2; --border2:#EFEFEC;
  /* --muted i erresuar 3 pika (nga #6E7481): mbi --bg jepte vetem 4.33:1,
     tani 4.58:1 mbi --bg, 4.78:1 mbi --surface2 dhe 4.95:1 mbi --surface (AA).
     Ne temen e erret nuk u prek: aty ishte tashme 6.27:1 mbi --surface. */
  --text:#191B1F; --muted:#6B707D; --hover:#F0F0EE;
  --accent:#5A5BD8; --accent-weak:rgba(90,91,216,.10); --accent-text:#4A4BC6;
  --green:#16A34A; --green-t:#15803D; --green-bg:rgba(22,163,74,.11);
  --red:#DC2626; --red-t:#B91C1C; --red-bg:rgba(220,38,38,.10);
  --amber:#D97706; --amber-t:#B45309; --amber-bg:rgba(217,119,6,.12);
  --blue:#2563EB; --blue-t:#1D4ED8; --blue-bg:rgba(37,99,235,.10);
  --purple:#9333EA; --gray-bg:rgba(110,116,129,.12);
  --shadow:0 1px 2px rgba(20,21,26,.05),0 4px 16px rgba(20,21,26,.05);
  --shadow-lg:0 8px 40px rgba(20,21,26,.18);
  --r:8px; --r-sm:6px;
}
html[data-theme="dark"]{
  --bg:#141519; --surface:#1D1F24; --surface2:#191B20; --border:#2B2E36; --border2:#24262D;
  --text:#E8EAED; --muted:#9AA0AB; --hover:#24262C;
  --accent:#7B7CF0; --accent-weak:rgba(123,124,240,.14); --accent-text:#9B9CF5;
  --green:#22C55E; --green-t:#4ADE80; --green-bg:rgba(34,197,94,.14);
  --red:#EF4444; --red-t:#F87171; --red-bg:rgba(239,68,68,.14);
  --amber:#F59E0B; --amber-t:#FBBF24; --amber-bg:rgba(245,158,11,.15);
  --blue:#3B82F6; --blue-t:#60A5FA; --blue-bg:rgba(59,130,246,.14);
  --purple:#A855F7; --gray-bg:rgba(154,160,171,.14);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg:#141519; --surface:#1D1F24; --surface2:#191B20; --border:#2B2E36; --border2:#24262D;
    --text:#E8EAED; --muted:#9AA0AB; --hover:#24262C;
    --accent:#7B7CF0; --accent-weak:rgba(123,124,240,.14); --accent-text:#9B9CF5;
    --green:#22C55E; --green-t:#4ADE80; --green-bg:rgba(34,197,94,.14);
    --red:#EF4444; --red-t:#F87171; --red-bg:rgba(239,68,68,.14);
    --amber:#F59E0B; --amber-t:#FBBF24; --amber-bg:rgba(245,158,11,.15);
    --blue:#3B82F6; --blue-t:#60A5FA; --blue-bg:rgba(59,130,246,.14);
    --purple:#A855F7; --gray-bg:rgba(154,160,171,.14);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
    --shadow-lg:0 8px 40px rgba(0,0,0,.5);
  }
}
/* ============ BAZA ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* Fokusi i tastieres: nje unaze e vetme per te gjithe elementet interaktive.
   Pa 'border-radius' ketu, sepse ai ndryshonte formen e elementit ne castin e
   fokusit (chips e pills 99px kercenin ne 4px); unaza ndjek vete rrumbullakimin. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Elementet me sfond ose me kufij te vet: e bejme unazen te sigurt edhe kur
   elementi rri brenda nje kontejneri qe pret (karta, shiriti anesor, tabet). */
.btn:focus-visible,.chip:focus-visible,.iconbtn:focus-visible,.kpi:focus-visible,
.badge:focus-visible,.pill:focus-visible,.check-item:focus-visible,.toast-x:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.nitem:focus-visible,.tab:focus-visible,.row-click:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Mbi sfondin e plote te theksit unaza e njejte do te humbiste: e nxjerrim me e forte. */
.btn.primary:focus-visible{outline-color:var(--accent-text)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
h1{font-size:20px;font-weight:650;letter-spacing:-.01em}
h3{font-size:13.5px;font-weight:600}
h4{font-size:13.5px;font-weight:600}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.right{text-align:right}
.money{font-variant-numeric:tabular-nums}
/* Linqet: ne server-side navigimi behet me <a>, jo me <button> si ne demo */
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
a.nitem,a.btn,a.chip,a.tab,a.badge,a.kpi{text-decoration:none}
a.nitem:hover,a.btn:hover,a.chip:hover,a.tab:hover,a.badge:hover,a.kpi:hover{text-decoration:none}
a.nitem,a.chip,a.tab{color:var(--muted)}
a.btn{color:var(--text)}
a.kpi{color:var(--text);display:block}
/* ============ SKELETI ============ */
.app{display:grid;grid-template-columns:228px 1fr;min-height:100vh}
.sidebar{
  background:var(--surface2);border-right:1px solid var(--border);
  padding:14px 10px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
}
.logo{display:flex;align-items:center;gap:9px;padding:6px 8px 14px}
.logo-dot{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),#8B5CF6);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px}
.logo b{font-size:14.5px;display:block;line-height:1.1}
.logo small{color:var(--muted);font-size:10.5px}
.ngroup{margin:10px 8px 4px;font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.nitem{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:6px 9px;border-radius:var(--r-sm);font-size:13px;color:var(--text);
  transition:background .1s;
}
.nitem:hover{background:var(--hover)}
.nitem.active{background:var(--accent-weak);color:var(--accent-text);font-weight:550}
.nitem .nic{width:16px;text-align:center;opacity:.75;font-size:12px}
.nitem .soon{margin-left:auto;font-size:9.5px;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:0 6px}
.nitem[disabled]{opacity:.5;cursor:default}
.nitem[disabled]:hover{background:none}
.side-foot{margin-top:auto;padding:10px 8px;border-top:1px solid var(--border2);font-size:11px;color:var(--muted)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 22px;
  border-bottom:1px solid var(--border);background:var(--surface2);
  position:sticky;top:0;z-index:40;
}
.searchbtn{
  display:flex;align-items:center;gap:8px;flex:0 1 340px;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);
  padding:6px 10px;color:var(--muted);font-size:12.5px;
}
.searchbtn kbd{margin-left:auto;font-family:inherit;font-size:10.5px;border:1px solid var(--border);border-radius:4px;padding:1px 5px;background:var(--surface2)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px}
.iconbtn:hover{background:var(--hover)}
/* Blloku i perdoruesit lart djathtas: emri eshte informacioni kryesor, roli
   eshte etikete dytesore (me e vogel, e zbehte, e ndare me nje vije). */
.tb-user{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.tb-user .tb-name{font-weight:550;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-user .td-sub{margin:0}
.tb-user .tb-role{
  font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap;
  padding-left:8px;border-left:1px solid var(--border);
}
.content{padding:20px 22px 48px;max-width:1340px;width:100%;margin:0 auto}
/* Ne server-side cdo faqe renderohet e plote: .view shfaqet gjithmone.
   Mbahet vetem animacioni i lehte i hyrjes nga demoja. */
.view,.view.active{display:block;animation:fadein .18s ease}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* ============ KOKA E PAMJES ============ */
.view-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.view-sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.view-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ============ TOOLBAR / CHIPS ============ */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .inp{max-width:340px}
.sp{flex:1}
.chip{
  border:1px solid var(--border);background:var(--surface);border-radius:99px;
  padding:4px 12px;font-size:12px;color:var(--muted);transition:all .1s;
}
.chip:hover{background:var(--hover);color:var(--text)}
.chip.active{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:550}
/* ============ KARTAT / GRIDAT ============ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border2)}
.card-pad{padding:14px 16px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.grid-main-side{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
/* ============ KPI ============ */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .12s}
.kpi:hover{border-color:var(--accent)}
.kpi-label{font-size:11.5px;color:var(--muted);font-weight:550}
.kpi-value{font-size:22px;font-weight:650;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi-delta{font-size:11.5px;margin-top:3px;font-weight:550}
.kpi-delta.up{color:var(--green-t)}
.kpi-delta.down{color:var(--red-t)}
.kpi-sub{font-size:11.5px;color:var(--muted);margin-top:3px}
/* ============ TABELAT ============ */
.table{width:100%;border-collapse:collapse;font-size:12.8px}
.table th{
  text-align:left;font-size:10.8px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface2);white-space:nowrap;
}
.table td{padding:9px 14px;border-bottom:1px solid var(--border2);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table .t-right,.table th.t-right{text-align:right}
.row-click{cursor:pointer;transition:background .08s}
.row-click:hover{background:var(--hover)}
.td-sub{font-size:11px;color:var(--muted);margin-top:1px}
.table-foot{padding:9px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--border2);background:var(--surface2)}
/* ============ BADGES ============ */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:99px;padding:2px 9px;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.b-green{background:var(--green-bg);color:var(--green-t)}
.b-red{background:var(--red-bg);color:var(--red-t)}
.b-amber{background:var(--amber-bg);color:var(--amber-t)}
.b-blue{background:var(--blue-bg);color:var(--blue-t)}
.b-gray{background:var(--gray-bg);color:var(--muted)}
.b-violet{background:var(--accent-weak);color:var(--accent-text)}
/* ============ BUTONAT ============ */
.btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r-sm);padding:6px 13px;
  font-size:12.8px;font-weight:550;transition:all .1s;white-space:nowrap;
}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
.btn.danger{color:var(--red-t);border-color:var(--red-bg)}
.btn.danger:hover{background:var(--red-bg)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:default}
/* ============ AVATAR ============ */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:50%;background:var(--accent-weak);color:var(--accent-text);
  font-size:9.5px;font-weight:650;letter-spacing:.02em;vertical-align:middle;
}
.avatar.lg{width:46px;height:46px;font-size:15px;border-radius:12px}
/* ============ ALERTET ============ */
.alert{border:1px solid;border-radius:var(--r-sm);padding:10px 13px;font-size:12.3px;margin:10px 0}
.alert-t{font-weight:650;margin-bottom:2px}
.a-red{background:var(--red-bg);border-color:transparent;color:var(--red-t)}
.a-amber{background:var(--amber-bg);border-color:transparent;color:var(--amber-t)}
/* ============ TIMELINE ============ */
.timeline{padding:6px 16px 14px;position:relative}
.tl-item{display:flex;gap:11px;position:relative;padding:8px 0}
.tl-item::before{content:"";position:absolute;left:5px;top:26px;bottom:-8px;width:1.5px;background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:4px;box-shadow:0 0 0 3px var(--surface)}
.c-blue{background:var(--blue)} .c-green{background:var(--green)} .c-red{background:var(--red)}
.c-orange{background:var(--amber)} .c-purple{background:var(--purple)} .c-gray{background:var(--muted)}
.tl-title{font-size:12.6px;font-weight:550}
.tl-meta{font-size:11px;color:var(--muted);margin-top:1px}
/* ============ TABS ============ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 8px;background:var(--surface2)}
.tab{padding:9px 13px;font-size:12.8px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:550}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent-text);border-bottom-color:var(--accent)}
/* ============ KANBAN (mbajtur nga demoja, e padeshme s'prish gje) ============ */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.kcol{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:10px}
.kcol-h{font-size:12px;font-weight:650;padding:2px 4px 10px;display:flex;align-items:center;gap:7px}
.kcount{font-size:10.5px;background:var(--gray-bg);color:var(--muted);border-radius:99px;padding:0 7px;font-weight:600}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 11px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;gap:6px}
.kcard:hover{border-color:var(--accent)}
.kcard-t{font-size:12.6px;font-weight:550;line-height:1.3}
.kcard-m{font-size:11px;color:var(--muted)}
.kcard .badge{align-self:flex-start}
.kcard > div:last-child{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ============ AGING ============ */
.aging{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:12px 0 10px;background:var(--border2)}
.ag{display:block;height:100%}
.a1{background:var(--green)} .a2{background:var(--amber)} .a3{background:#EA580C} .a4{background:var(--red)}
.aging-legend{display:flex;flex-direction:column;gap:6px;font-size:11.8px;color:var(--muted)}
.aging-legend span{display:flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.d1{background:var(--green)} .d2{background:var(--amber)} .d3{background:#EA580C} .d4{background:var(--red)}
/* ============ GRAFIKET ============ */
.chart{width:100%;height:auto;display:block}
.chart-legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted);padding:8px 2px 0}
.chart-legend span{display:flex;align-items:center;gap:6px}
/* ============ TE TJERAT ============ */
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pill{font-size:10.8px;border:1px solid var(--border);border-radius:99px;padding:2px 9px;color:var(--muted);background:var(--surface);font-variant-numeric:tabular-nums}
.diff-old{color:var(--red-t);text-decoration:line-through;text-decoration-thickness:1px;font-size:12.3px}
.diff-new{color:var(--green-t);font-weight:600;font-size:12.3px}
.empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:12.5px;display:flex;flex-direction:column;gap:8px;align-items:center}
.empty-t{font-weight:650;color:var(--text);font-size:13.5px}
.field{margin-bottom:12px}
.lbl{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:4px}
.inp{
  width:100%;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  color:var(--text);padding:7px 10px;font:inherit;font-size:12.8px;
}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
/* Me tastiere unaza e bute nuk mjafton: shtohet nje kufi i qarte fokusi. */
.inp:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
select.inp{width:auto}
.stat-list{display:flex;flex-direction:column}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--border2);font-size:12.6px}
.stat:last-child{border-bottom:none}
.stat b{font-variant-numeric:tabular-nums;font-weight:650}
.card-pad .stat-list.hstat{flex-direction:row;gap:0}
.progress{height:6px;border-radius:99px;background:var(--border2);overflow:hidden;margin:10px 0}
.progress span{display:block;height:100%;background:var(--accent);border-radius:99px}
.company-h{display:flex;align-items:center;gap:10px;padding:13px 15px 4px}
.company-h .badge{margin-left:auto}
.company-h b{font-size:13.5px}
.co-dot{width:12px;height:12px;border-radius:4px;flex:none}
.company-h + .stat-list{padding:6px 15px}
.card > .progress{margin:4px 15px 10px}
.card > .btn{margin:2px 15px 13px}
/* ============ DRAWER ============ */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);z-index:70;
  background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);
  padding:18px;overflow-y:auto;transform:translateX(102%);transition:transform .22s ease;
}
.drawer.open{transform:none}
.drawer h3{font-size:15px}
.drawer .table{font-size:12.3px}
.drawer .btn{margin:3px 4px 3px 0}
/* ============ MODAL ============ */
.overlay{position:fixed;inset:0;background:rgba(10,10,14,.45);z-index:80;display:none;align-items:flex-start;justify-content:center;padding:9vh 16px}
.overlay.open{display:flex}
/* Pa JavaScript (CSP lejon vetem app.js): modali hapet edhe me anchor,
   p.sh. <a class="btn primary" href="#modal-klient">, mbyllet me <a href="#">. */
.overlay:target{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);width:min(480px,100%);padding:20px;animation:fadein .15s ease;max-height:88vh;overflow-y:auto}
.modal h3{font-size:15px;margin-bottom:2px}
.modal .m-sub{font-size:12px;color:var(--muted);margin-bottom:14px}
.m-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
/* ============ TOAST ============ */
.toasts{position:fixed;bottom:18px;right:18px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--text);color:var(--bg);border-radius:var(--r);padding:11px 16px;font-size:12.8px;
  box-shadow:var(--shadow-lg);max-width:360px;animation:toastin .2s ease;cursor:pointer;
}
.toast b{display:block;margin-bottom:1px}
/* Variantet sipas tipit te flash() ne server: ok (default), err/gabim, warn/kujdes */
.toast.err,.toast.gabim{background:var(--red-t);color:#fff}
.toast.warn,.toast.kujdes{background:var(--amber-t);color:#fff}
/* Toast ngjites (flash me tip '_ngjit'): s'vetefshihet, mbyllet vetem me X */
.toast.toast-ngjit{cursor:default;position:relative;padding-right:40px}
.toast-x{
  position:absolute;top:6px;right:6px;border:0;background:transparent;color:inherit;
  font:inherit;font-size:13px;line-height:1;padding:5px 7px;border-radius:6px;
  cursor:pointer;opacity:.75;
}
.toast-x:hover{opacity:1;background:rgba(255,255,255,.15)}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ============ MENYJA MOBILE ============ */
.menubtn{display:none}
.mmenu{position:fixed;inset:0;background:var(--bg);z-index:90;display:none;flex-direction:column;padding:14px;overflow-y:auto}
.mmenu.open{display:flex}
.mmenu-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mmenu-h b{font-size:16px}
.mmenu .nitem{font-size:15px;padding:12px 10px}
.mmenu .ngroup{display:block;margin:14px 8px 4px}
/* ============ NDIHMESA PER FORMA PHP (shtesa server-side) ============ */
form{margin:0}
/* Forma veprimi brenda tabelave, kokave e toolbar-eve: te qendrojne inline */
td form,.view-actions form,.card-h form,.m-foot form,.table-foot form{display:inline-block;vertical-align:middle}
.toolbar form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;min-width:0}
textarea.inp{resize:vertical;min-height:56px}
.field select.inp,.modal select.inp{width:100%}
.field input[type="date"].inp{width:auto;min-width:160px}
/* ---- Hapesirat e teksteve shpjeguese ne forma ----
   Reset-i i pergjithshem `*{margin:0}` i le paragrafet pa hapesire, prandaj
   nje shpjegim ngjitej pas etiketes ose butonit qe vinte mbas tij. Hapesira
   jepet nje here te vetme, poshte tekstit, dhe vetem brenda permbajtjes se
   kartave, modaleve dhe drawer-it: tabelat, kartat e statistikave dhe rreshtat
   me nen-tekst (.td-sub brenda <td>) nuk preken. Stilet inline ekzistuese e
   mbizoterojne kete rregull, keshtu qe asgje nuk zhvendoset atje ku hapesira
   ishte caktuar tashme. Ketu ka vetem hapesire: asnje ngjyre, asnje madhesi,
   prandaj vlen njesoj ne temen e cele dhe ne ate te erret. */
.card-pad p,
.modal p,
.drawer p{margin-bottom:12px}
.card-pad p:last-child,
.modal p:last-child,
.drawer p:last-child{margin-bottom:0}
/* Blloqet pa margjine poshte qe vijne para nje paragrafi shpjegues */
.card-pad .stat-list + p,
.card-pad .checklist + p,
.card-pad .progress + p,
.modal .stat-list + p,
.modal .checklist + p{margin-top:12px}
/* Listat brenda kartave (kodet rezerve): hapesire poshte dhe vend per shenjat */
.card-pad ul{margin-bottom:12px;padding-left:18px}
.card-pad ul:last-child{margin-bottom:0}
/* Teksti ndihmes menjehere pas nje fushe hyrjeje: e njejta distance kudo */
.field .td-sub,
.card-pad .inp + .td-sub,
.modal .inp + .td-sub{margin-top:4px}
/* Shenimi i vetem qe vjen pas nje fushe (jo brenda saj) dhe para veprimit */
.card-pad .field + .td-sub,
.card-pad .checklist + .td-sub,
.modal .field + .td-sub,
.modal .checklist + .td-sub{margin-top:0;margin-bottom:12px}
/* Teksti ndihmes qe paraprin nje buton, kur nuk eshte paragraf */
.card-pad .td-sub:not(p) + .btn,
.modal .td-sub:not(p) + .btn{margin-top:12px}
/* Rrjete e thjeshte per forma me dy kolona */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
/* Rreshti i checkbox/radio, i njejte me demon */
.checklist{display:flex;flex-direction:column;gap:2px;margin:8px 0}
.check-item{display:flex;align-items:center;gap:9px;font-size:12.6px;padding:7px 9px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.check-item input{accent-color:var(--accent);width:15px;height:15px}
/* Faqezim i thjeshte (auditi.php etj.) */
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 14px}
/* Shenja e fushes se detyrueshme */
.req{color:var(--red-t)}
/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .kanban{grid-template-columns:repeat(2,1fr)}
  .grid-main-side{grid-template-columns:1fr}
  /* Tabelat me shume kolona: karta i pret kolonat sepse ka overflow:hidden.
     Ne ekrane te mesem lejohet rreshqitja horizontale brenda kartes, keshtu
     tabela mbetet tabele (nuk humb gjeresine 100%) dhe asgje nuk fshihet. */
  .card{overflow-x:auto}
}
@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .menubtn{display:flex}
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .content{padding:14px 12px 40px}
  .topbar{padding:8px 12px;gap:8px}
  .searchbtn{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
  .searchbtn kbd{display:none}
  /* Ne ekrane te ngushta roli hiqet fare; emri mbetet sepse eshte kryesori.
     (Me perpara fshihej gabimisht emri, sepse ai eshte femija i dyte.) */
  .tb-user .tb-role{display:none}
  .kanban{grid-template-columns:1fr}
  .table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .kpi-value{font-size:19px}
  .view-h h1{font-size:18px}
  .overlay{padding:12px;align-items:flex-start}
  .drawer{width:100vw}
}
@media (max-width:560px){
  /* Telefona te vegjel: ne shiritin e siperm mbetet vetem avatari. */
  .tb-user .tb-name{display:none}
}