/* ============================================================
JurisCRM — app.css v4 (modern, CSS-only enhancements)
============================================================ */
:root{
--radius:14px;
--side:250px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
background-color:var(--bg);color:var(--text);font-size:var(--fs-md);
-webkit-font-smoothing:antialiased;
background-image:
radial-gradient(circle at 12% -8%, color-mix(in srgb,var(--sel) 10%,transparent), transparent 42%),
radial-gradient(circle at 100% 8%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 38%),
radial-gradient(color-mix(in srgb,var(--text) 7%,transparent) 1px, transparent 1px);
background-size:auto, auto, 22px 22px;
background-repeat:no-repeat, no-repeat, repeat;
background-position:0 0, 0 0, 0 0;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:flex;min-height:100vh}
:focus-visible{
outline:2px solid var(--sel);
outline-offset:2px;
border-radius:6px;
}
/* ============================================================
SIDEBAR
============================================================ */
.sidebar{
width:var(--side);
background:var(--navy);color:var(--side-text);
display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;
box-shadow:4px 0 24px rgba(0,0,0,.18);
z-index:40;
transition:width var(--t-base);
}
.brand{
display:flex;gap:var(--sp-3);align-items:center;
padding:var(--sp-5) var(--sp-4) var(--sp-4);
color:var(--on-navy);
}
.brand strong{display:block;font-size:18px;letter-spacing:.2px}
.brand small{display:block;color:var(--gold-2);font-size:var(--fs-xs)}
.ico{display:inline-flex;width:18px;height:18px}
.ico svg{width:18px;height:18px}
.ico-brand,.ico-brand svg{width:26px;height:26px;color:var(--gold-2)}
.sidenav{
padding:var(--sp-2) var(--sp-3);
display:flex;flex-direction:column;gap:4px;
flex:1;overflow:auto;
}
.nav-item{
display:flex;align-items:center;gap:var(--sp-3);
padding:9px var(--sp-3);border-radius:var(--r-md);
color:var(--side-text);font-weight:500;
position:relative;
transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.nav-item:hover{
background:var(--sidebar-hover);color:#fff;
transform:translateX(2px);
}
.nav-item.is-active{
background:var(--sel);color:var(--on-gold);box-shadow:none;
}
.nav-item.is-active::after{
content:"";position:absolute;inset:0;
background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 55%);
border-radius:inherit;pointer-events:none;
}
.nav-item.is-active::before{
content:"";
position:absolute;
left:-12px;
top:50%;
width:3px;
height:60%;
transform:translateY(-50%);
background:var(--gold-2);
border-radius:0 3px 3px 0;
animation:slideIn var(--t-bounce);
}
@keyframes slideIn{
from{height:0;opacity:0}
to{height:60%;opacity:1}
}
.nav-badge{
margin-left:auto;min-width:20px;height:18px;border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;
font-size:var(--fs-xs);font-style:normal;
background:color-mix(in srgb,var(--gold) 30%,transparent);
color:var(--on-navy);
padding:0 6px;
}
.nav-item.is-active .nav-badge{
background:rgba(0,0,0,.18);color:var(--on-gold);
}
.nav-badge-red{background:var(--red);color:#fff}
.side-user{
display:flex;gap:var(--sp-3);align-items:center;
padding:var(--sp-4);border-top:1px solid var(--sidebar-line);
}
.side-user strong,.userchip-txt strong{display:block;font-size:var(--fs-base)}
.side-user small,.userchip-txt small{font-size:var(--fs-xs)}
.avatar{
width:36px;height:36px;border-radius:50%;
background:var(--sel);color:var(--on-gold);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:var(--fs-sm);flex-shrink:0;
position:relative;
}
/* Avatar ring (premium) */
.avatar.is-online::before{
content:"";
position:absolute;
inset:-3px;
border-radius:50%;
background:conic-gradient(from 0deg,var(--green),var(--gold),var(--green));
animation:rotateRing 4s linear infinite;
z-index:-1;
}
.avatar.is-online::after{
content:"";
position:absolute;
inset:-3px;
border-radius:50%;
background:var(--surface-1);
z-index:-1;
margin:2px;
}
@keyframes rotateRing{to{transform:rotate(360deg)}}
/* ============================================================
MAIN / TOPBAR (glassmorphism)
============================================================ */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
padding:var(--sp-4) var(--sp-6);
background:color-mix(in srgb,var(--surface-1) 82%,transparent);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
color:var(--text);
position:sticky;top:0;z-index:20;
transition:box-shadow var(--t-base),background var(--t-base);
}
/* is-scrolled do shtohet nga CSS nëse ke wrapper scroll; pa JS mund të përdoret :has() në browser modern */
body:has(.content:not(:empty)) .topbar{
box-shadow:0 1px 0 var(--line);
}
.search{flex:1;max-width:520px;position:relative}
.search input{
width:100%;
border:1px solid var(--line);
background:var(--surface-2);
color:var(--text);
border-radius:var(--r-md);
padding:10px 12px 10px 38px;
outline:none;
transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.search input:focus{
border-color:var(--sel);
box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 18%,transparent);
}
.search input::placeholder{color:var(--muted)}
.search .ico{position:absolute;left:12px;top:10px;color:var(--muted)}
.topbar-right{display:flex;align-items:center;gap:var(--sp-4)}
.icon-btn{
border:0;background:transparent;position:relative;
cursor:pointer;color:var(--muted);
transition:color var(--t-fast),transform var(--t-fast);
}
.icon-btn:hover{color:var(--text);transform:translateY(-1px)}
.icon-btn .dot{
position:absolute;top:-4px;right:-6px;
background:var(--red);color:#fff;border-radius:8px;
font-size:10px;padding:1px 5px;
}
.top-date{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-base)}
.userchip{display:flex;align-items:center;gap:var(--sp-2)}
.lang-switch{display:flex;gap:4px}
.lang-pill{
min-width:32px;height:26px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:8px;font-size:var(--fs-xs);font-weight:700;
background:var(--surface-2);color:var(--muted);
border:1px solid var(--line);
transition:background var(--t-fast),color var(--t-fast);
}
.lang-pill:hover{background:var(--surface-3);color:var(--text)}
.lang-pill.is-on{
background:linear-gradient(180deg,var(--sel),var(--gold-ink));
color:var(--on-gold);border-color:var(--sel);
}
.logout-link{font-size:var(--fs-sm);color:var(--muted)}
/* ============================================================
CONTENT
============================================================ */
.content{padding:var(--sp-6) var(--sp-6) 40px}
.page-head{
display:flex;align-items:flex-start;justify-content:space-between;
gap:var(--sp-4);margin-bottom:var(--sp-4);
}
.page-head h1{margin:0 0 4px;font-size:var(--fs-2xl);letter-spacing:-.3px;color:var(--text)}
.page-head p{margin:0;color:var(--muted)}
/* Breadcrumbs */
.breadcrumbs{
display:flex;gap:var(--sp-2);align-items:center;
font-size:var(--fs-sm);color:var(--muted);
margin-bottom:6px;
}
.breadcrumbs a{color:var(--muted);transition:color var(--t-fast)}
.breadcrumbs a:hover{color:var(--sel)}
.breadcrumbs .sep{opacity:.5}
.breadcrumbs .current{color:var(--text);font-weight:600}
.alert-strip{
background:color-mix(in srgb,var(--sel) 12%,var(--surface-1));
border:1px solid color-mix(in srgb,var(--sel) 35%,transparent);
color:var(--text);
border-radius:var(--r-md);padding:10px 14px;margin-bottom:var(--sp-4);
display:flex;gap:var(--sp-2);align-items:center;
}
/* ============================================================
KPI
============================================================ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4)}
.kpis-compact{grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:var(--sp-3)}
.kpi{
background:var(--surface-1);
border:1px solid var(--line);color:var(--text);
border-radius:var(--r-lg);
padding:var(--sp-4) var(--sp-5);
box-shadow:var(--shadow);
min-height:104px;position:relative;overflow:hidden;
transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
will-change:transform;
}
.kpi:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb,var(--sel) 35%,var(--line));
box-shadow:
0 12px 28px color-mix(in srgb,var(--text) 8%,transparent),
0 0 0 1px color-mix(in srgb,var(--sel) 12%,transparent);
}
.kpis-compact .kpi{min-height:60px;padding:10px 12px}
.kpi-split{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-2)}
.kpi-left{min-width:0}
.kpi-right{text-align:right;flex-shrink:0}
.kpi .k-label{
color:var(--muted);font-weight:600;
display:flex;align-items:center;gap:var(--sp-2);
margin-bottom:6px;font-size:var(--fs-base);
}
.kpis-compact .k-label{margin-bottom:2px;font-size:var(--fs-sm)}
.kpi .k-value{font-size:var(--fs-3xl);font-weight:700;line-height:1;color:var(--text)}
.kpis-compact .k-value{font-size:22px}
.kpis-compact .k-value-sm{font-size:var(--fs-lg)}
.kpi .k-meta{color:var(--muted);margin-top:6px;font-size:var(--fs-base)}
.kpis-compact .k-meta{margin-top:2px;font-size:var(--fs-xs)}
.k-small{font-size:10px!important;font-weight:500;letter-spacing:.2px}
.kpi::after{
content:"";position:absolute;left:0;top:0;width:4px;height:100%;
transition:width var(--t-base);
}
.kpi:hover::after{width:5px}
.kpi-a::after{background:linear-gradient(180deg,var(--sel),#7dd3fc)}
.kpi-b::after{background:linear-gradient(180deg,#0e7490,#67e8f9)}
.kpi-c::after{background:linear-gradient(180deg,var(--red),var(--orange))}
.kpi-d::after{background:linear-gradient(180deg,#be123c,#fb7185)}
.kpi-e::after{background:linear-gradient(180deg,var(--sel),var(--line))}
.kpis-compact .kpi::before{
content:"";position:absolute;right:-8px;top:-10px;
width:30%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,rgba(177,241,255,.18),transparent 70%);
pointer-events:none;
}
.kpi.kpi-red .k-value,.danger{color:var(--red)}
.kpi.kpi-gold .k-value{color:var(--gold-ink)}
/* ============================================================
GRIDS
============================================================ */
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.grid-2{display:grid;grid-template-columns:1.4fr .9fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.grid-2b{display:grid;grid-template-columns:1.5fr .85fr;gap:var(--sp-4)}
/* ============================================================
CARD
============================================================ */
.card{
background:var(--surface-1);
border:1px solid var(--line);color:var(--text);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
padding:var(--sp-4) var(--sp-5);
position:relative;
}
.card.shine{
background:
linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%),
linear-gradient(var(--surface-1),var(--surface-3));
}
/* ============================================================
GLOBAL SHEEN — soft top highlight + light accent edge on every
card-like container, for a subtle "glass" shine/reflection look
============================================================ */
.card,.kpi,.login-card,.theme-card,.ai-panel,.ai-box,.lookup-list,
.notif-drop,.dash-toast,.cmd-box,.week{
position:relative;
}
.card::before,.kpi::before,.login-card::before,.theme-card::before,
.ai-panel::before,.ai-box::before,.lookup-list::before,.notif-drop::before,
.dash-toast::before,.cmd-box::before,.week::before{
content:"";position:absolute;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg,
transparent,
color-mix(in srgb,#fff 70%,var(--sel)) 15%,
color-mix(in srgb,#fff 88%,transparent) 45%,
transparent 88%);
opacity:.6;
border-radius:var(--r-lg) var(--r-lg) 0 0;
pointer-events:none;
}
.card::after,.login-card::after,.theme-card::after,.ai-panel::after,
.lookup-list::after,.notif-drop::after,.dash-toast::after,.cmd-box::after{
content:"";position:absolute;inset:0 auto 0 0;width:2px;
background:linear-gradient(180deg,
color-mix(in srgb,var(--sel) 55%,transparent),
color-mix(in srgb,var(--gold) 25%,transparent) 60%,
transparent 95%);
opacity:.8;
border-radius:var(--r-lg) 0 0 var(--r-lg);
pointer-events:none;
}
.card-h{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:var(--sp-3);
}
.card-h h2,.card-h h3{
margin:0;font-size:var(--fs-lg);color:var(--text);
display:flex;align-items:center;gap:var(--sp-2);
}
.link{color:var(--gold-ink);font-weight:600;font-size:var(--fs-base)}
.link:hover{text-decoration:underline}
/* ============================================================
TIMELINE / LISTS
============================================================ */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:64px 12px 1fr;gap:var(--sp-3);padding:var(--sp-2) 0}
.dotline{width:10px;height:10px;border-radius:50%;margin-top:6px}
.time{color:var(--muted);font-weight:600}
.t-title{font-weight:650;color:var(--text)}
.t-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
/* Kolonë e bashkuar e klikueshme (p.sh. Klient + Nr. Dosjes në një link të
vetëm te tabela e "Cases") — rreshti i parë theksuar, i dyti si nëntitull. */
.stacked-link{display:block;text-decoration:none;color:inherit}
.stacked-link strong{display:block;color:var(--text)}
.stacked-link:hover strong{color:var(--sel)}
.stacked-link .t-sub{margin-top:1px}
.notice-list{list-style:none;margin:0;padding:0}
.notice-list li{
display:flex;gap:var(--sp-3);padding:10px 0;
border-bottom:1px solid var(--line);align-items:flex-start;
}
.notice-list li:last-child{border-bottom:0}
/* ============================================================
TABLE
============================================================ */
.tbl{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:var(--r-md)}
.tbl th{
text-align:left;font-size:var(--fs-sm);color:var(--muted);font-weight:600;
padding:10px;background:var(--surface-3);
border-bottom:1px solid var(--line);
}
.tbl th:first-child{border-top-left-radius:var(--r-md)}
.tbl th:last-child{border-top-right-radius:var(--r-md)}
.tbl td{
padding:11px 10px;
border-bottom:1px solid var(--line);
vertical-align:middle;
background:var(--surface-1);color:var(--text);
}
.tbl tr:hover td{background:var(--surface-2)}
.tbl tr.is-hot td{background:color-mix(in srgb,var(--orange) 12%,var(--surface-1))}
.tbl.zebra tbody tr:nth-child(even) td{background:var(--surface-2)}
.tbl-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.tbl td .muted{color:var(--muted);font-size:var(--fs-sm)}
.row-acts{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.row-acts .inline{display:inline}
.ico-act{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:8px;
border:1px solid var(--line);background:var(--surface-1);
color:var(--muted);font-size:var(--fs-base);line-height:1;cursor:pointer;
transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.ico-act:hover{background:var(--surface-2);border-color:var(--sel);color:var(--text)}
.ico-del{
background:var(--surface-1);
border-color:color-mix(in srgb,var(--red) 35%,transparent);
padding:0;
}
.name-cell{display:flex;gap:var(--sp-3);align-items:center}
td .name-cell{display:inline-flex}
.name-cell .av,.av{
width:32px;height:32px;border-radius:50%;color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-size:var(--fs-xs);font-weight:700;flex-shrink:0;
box-shadow:0 2px 6px color-mix(in srgb,var(--text) 25%,transparent);
}
.av-g0{background:linear-gradient(135deg,#1e4e8c,var(--deep))}
.av-g1{background:linear-gradient(135deg,#3b82f6,var(--sel))}
.av-g2{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.av-g3{background:linear-gradient(135deg,var(--sel),var(--deep))}
.av-g4{background:linear-gradient(135deg,#059669,#064e3b)}
.av-g5{background:linear-gradient(135deg,#dc2626,#7f1d1d)}
.av-g6{background:linear-gradient(135deg,#0ea5e9,#075985)}
.av-g7{background:linear-gradient(135deg,var(--sel),var(--deep))}
.tbl td a,.tbl td a strong{color:var(--gold-ink);text-decoration:none;font-weight:650}
.tbl td a:hover{text-decoration:underline}
/* ============================================================
BADGES
============================================================ */
.badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:var(--fs-sm);font-weight:650}
.badge-urgent{background:color-mix(in srgb,var(--red) 18%,var(--surface-1));color:var(--red)}
.badge-process{background:color-mix(in srgb,var(--blue) 18%,var(--surface-1));color:var(--blue)}
.badge-wait{background:color-mix(in srgb,var(--orange) 20%,var(--surface-1));color:var(--orange)}
.badge-done{background:var(--gold-soft);color:var(--gold-ink)}
.badge-today{background:color-mix(in srgb,var(--gold) 22%,var(--surface-1));color:var(--gold-ink)}
.badge-overdue{background:color-mix(in srgb,var(--red) 22%,var(--surface-1));color:var(--red)}
/* ============================================================
BUTTONS (with ripple)
============================================================ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
border:0;border-radius:var(--r-md);
padding:10px 14px;font-weight:650;cursor:pointer;
position:relative;overflow:hidden;
transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast),opacity var(--t-fast);
}
.btn::after{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at center,
rgba(255,255,255,.35),transparent 60%);
opacity:0;transition:opacity var(--t-slow);
pointer-events:none;
}
.btn:active::after{opacity:1;transition:opacity 0s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px color-mix(in srgb,var(--text) 12%,transparent)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
.btn-gold{background:var(--sel);color:var(--on-gold);isolation:isolate}
.btn-gold:hover{background:var(--gold-2);color:var(--on-gold)}
.btn-gold::before{
content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;
background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-18deg);
transition:left .55s ease;
pointer-events:none;
}
.btn-gold:hover::before{left:130%}
.btn-outline{background:var(--surface-1);border:1px solid var(--line);color:var(--text)}
.btn-outline:hover{background:var(--surface-2)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:7px 10px;font-size:var(--fs-sm);border-radius:8px}
.btn.is-loading{opacity:.75;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.btn-del{
background:var(--surface-1);color:var(--red);
border:1px solid color-mix(in srgb,var(--red) 40%,transparent);
border-radius:var(--r-md);padding:8px 14px;
display:inline-flex;align-items:center;gap:6px;
font-weight:650;cursor:pointer;
transition:background var(--t-fast);
}
.btn-del:hover{background:color-mix(in srgb,var(--red) 12%,var(--surface-1))}
/* ============================================================
FORMS
============================================================ */
.form{display:grid;gap:var(--sp-3);max-width:720px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.field label{
display:flex;align-items:center;gap:6px;
font-weight:600;margin-bottom:6px;font-size:var(--fs-base);color:var(--text);
}
.field label .ico-grad{font-size:15px}
.field input,.field select,.field textarea{
width:100%;border:1px solid var(--line);border-radius:var(--r-md);
padding:10px 12px;
background:var(--surface-1);color:var(--text);
transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field textarea{min-height:90px;resize:vertical;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;
border-color:var(--sel);
box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 18%,transparent);
}
.field input[readonly]{background:var(--surface-3);color:var(--muted);cursor:default}
.field input:disabled,.field select:disabled,.field textarea:disabled{opacity:.65;cursor:not-allowed}
.help{color:var(--muted);font-size:var(--fs-sm);margin-top:4px}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.filters select,.filters input{
border:1px solid var(--line);border-radius:var(--r-md);
padding:8px 10px;
background:var(--surface-1);color:var(--text);
}
.form-actions{
display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
margin-top:var(--sp-4);padding-top:var(--sp-4);
border-top:1px solid var(--line);
}
.del-form{margin-left:auto}
/* Custom checkbox */
.check{display:flex;gap:var(--sp-2);align-items:flex-start;margin:6px 0}
.check input[type="checkbox"]{
appearance:none;-webkit-appearance:none;
width:18px;height:18px;
border:2px solid var(--line);
border-radius:5px;
background:var(--surface-1);
cursor:pointer;
position:relative;flex-shrink:0;margin-top:2px;
transition:background var(--t-fast),border-color var(--t-fast);
}
.check input[type="checkbox"]:hover{border-color:var(--sel)}
.check input[type="checkbox"]:checked{background:var(--sel);border-color:var(--sel)}
.check input[type="checkbox"]:checked::after{
content:"";
position:absolute;
left:4px;top:1px;
width:6px;height:10px;
border:solid #fff;
border-width:0 2px 2px 0;
transform:rotate(45deg);
animation:checkIn var(--t-fast) ease;
}
@keyframes checkIn{
from{opacity:0;transform:rotate(45deg) scale(.5)}
to{opacity:1;transform:rotate(45deg) scale(1)}
}
/* Custom switch */
.toggle{
display:flex;align-items:center;justify-content:space-between;
padding:10px 0;border-bottom:1px solid var(--line);
}
.toggle input[type="checkbox"]{
appearance:none;-webkit-appearance:none;
width:40px;height:22px;
border-radius:999px;
background:var(--surface-3);
position:relative;cursor:pointer;
transition:background var(--t-base);flex-shrink:0;
}
.toggle input[type="checkbox"]:checked{background:var(--sel)}
.toggle input[type="checkbox"]::after{
content:"";
position:absolute;top:2px;left:2px;
width:18px;height:18px;
background:#fff;border-radius:50%;
box-shadow:0 2px 4px rgba(0,0,0,.15);
transition:transform var(--t-base) cubic-bezier(.4,0,.2,1);
}
.toggle input[type="checkbox"]:checked::after{transform:translateX(18px)}
/* ============================================================
FLASH / ALERTS
============================================================ */
.flash{padding:10px 12px;border-radius:var(--r-md);margin-bottom:var(--sp-4)}
.flash-success{
background:color-mix(in srgb,var(--green) 15%,var(--surface-1));
color:var(--green);
border:1px solid color-mix(in srgb,var(--green) 35%,transparent);
}
.flash-error{
background:color-mix(in srgb,var(--red) 15%,var(--surface-1));
color:var(--red);
border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
}
.flash-info{
background:color-mix(in srgb,var(--blue) 15%,var(--surface-1));
color:var(--blue);
border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);
}
/* ============================================================
LOGIN
============================================================ */
.login-wrap{
min-height:100vh;display:flex;align-items:center;justify-content:center;
padding:24px;
background:
radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--sel) 35%,transparent),transparent 55%),
radial-gradient(circle at 80% 80%,color-mix(in srgb,var(--gold) 30%,transparent),transparent 55%),
linear-gradient(160deg,var(--navy-2),var(--navy),var(--navy-3));
}
.login-card{
width:420px;
background:var(--surface-1);color:var(--text);
border:1px solid var(--line);
border-radius:var(--r-xl);padding:var(--sp-8);
box-shadow:0 20px 50px var(--scrim);
}
.login-card h1{margin:8px 0 4px;color:var(--text)}
.login-card .hint{color:var(--muted);margin-bottom:18px}
/* ---------- 3 TEMA TË DEDIKUARA TË LOGIN-IT ----------
Të ndryshme nga 22 temat e vetë CRM-it: zgjidhen nga admin te
Settings → Login (jo nga çdo user për vete), sepse faqja e login-it
shihet PARA se të ekzistojë fare një sesion. Ndryshe nga .login-wrap
bazë më sipër (që përdor ngjyrat e temës CRM të fundit të përdorur në
këtë browser), këto 3 klasa vendosin gjithnjë TË NJËJTIN sfond/theks,
pavarësisht temës personale të kujtdo. */
html.login-theme-classic{--login-accent:#C9A227;--login-accent-2:#F1D27A;--login-ink:#1B1403}
html.login-theme-ocean{--login-accent:#2DD4BF;--login-accent-2:#5EEAD4;--login-ink:#042F2E}
html.login-theme-sunset{--login-accent:#E8A0B4;--login-accent-2:#F9C5D5;--login-ink:#3F1D2B}
/* ---------- GLASS (3D — kërkesë e re) ----------
Xham i vërtetë (glassmorphism): karta gjysmë-transparente me blur pas saj,
e "tërhequr" pak në thellësi (perspective + rotateX), mbi flluska ngjyrash
të mëdha e të turbullta që japin ndjesi thellësie/3D. */
html.login-theme-glass{--login-accent:#8B5CF6;--login-accent-2:#C4B5FD;--login-ink:#1E1147}
html.login-theme-glass .login-wrap{
background:
radial-gradient(circle at 18% 22%, rgba(139,92,246,.55), transparent 45%),
radial-gradient(circle at 82% 18%, rgba(56,189,248,.42), transparent 45%),
radial-gradient(circle at 50% 92%, rgba(236,72,153,.38), transparent 50%),
linear-gradient(160deg,#0B0F2A 0%,#151233 55%,#1E1147 100%);
perspective:1400px;
}
html.login-theme-glass .login-wrap .login-card{
background:rgba(255,255,255,.14);
backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.35);
box-shadow:0 34px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
transform:rotateX(3deg);
transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
html.login-theme-glass .login-wrap .login-card:hover{transform:rotateX(0deg) translateY(-2px)}
html.login-theme-glass .login-wrap .login-card::before{background:linear-gradient(90deg,var(--login-accent-2),var(--login-accent))}
html.login-theme-glass .login-wrap .login-card h1,
html.login-theme-glass .login-wrap .login-card .hint,
html.login-theme-glass .login-brand{color:#fff}
html.login-theme-glass .login-wrap .login-card .field label{color:rgba(255,255,255,.85)}
html.login-theme-glass .login-wrap .login-card input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff}
html.login-theme-glass .login-wrap .login-card input::placeholder{color:rgba(255,255,255,.55)}
html.login-theme-glass .login-links a{color:rgba(255,255,255,.7)}
/* ---------- AURORA (3D — kërkesë e re) ----------
Sfond "hapësinor" me shtresa drite lëvizëse (aurora), karta mbetet e
bardhë por "ngrihet" me hije të shtresuara (disa box-shadow njëra pas
tjetrës), duke dhënë ndjesi "kartë që noton" mbi sfondin. */
html.login-theme-aurora{--login-accent:#22D3AA;--login-accent-2:#7CF5D3;--login-ink:#063B31}
html.login-theme-aurora .login-wrap{
background:
radial-gradient(ellipse 60% 40% at 20% 15%, rgba(34,211,170,.45), transparent 60%),
radial-gradient(ellipse 55% 45% at 85% 25%, rgba(99,102,241,.42), transparent 60%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(236,72,153,.30), transparent 60%),
linear-gradient(180deg,#05070F 0%,#0A1020 45%,#0D1B2A 100%);
}
html.login-theme-aurora .login-wrap .login-card{
box-shadow:
0 2px 0 rgba(255,255,255,.6) inset,
0 20px 40px rgba(0,0,0,.25),
0 45px 90px rgba(0,0,0,.35),
0 80px 140px rgba(34,211,170,.18);
transform:translateZ(0);
}
html.login-theme-aurora .login-wrap .login-card::before{background:linear-gradient(90deg,var(--login-accent-2),var(--login-accent))}
html.login-theme-aurora .login-brand{color:#fff}
html.login-theme-classic .login-wrap{
background:
radial-gradient(circle at 18% 20%,rgba(201,162,39,.20),transparent 42%),
radial-gradient(circle at 85% 80%,rgba(68,123,150,.28),transparent 48%),
linear-gradient(150deg,#0B1F3A 0%,#13233A 45%,#2D3D51 100%);
}
html.login-theme-ocean .login-wrap{
background:
radial-gradient(circle at 18% 20%,rgba(94,234,212,.20),transparent 42%),
radial-gradient(circle at 85% 80%,rgba(11,58,74,.35),transparent 48%),
linear-gradient(150deg,#062833 0%,#0B3A4A 45%,#0E5A68 100%);
}
html.login-theme-sunset .login-wrap{
background:
radial-gradient(circle at 18% 20%,rgba(249,197,213,.28),transparent 42%),
radial-gradient(circle at 85% 80%,rgba(124,58,237,.30),transparent 48%),
linear-gradient(150deg,#4A2A38 0%,#7C3AED 55%,#E8A0B4 100%);
}
/* Karta mbetet gjithmonë e bardhë/lehtë e lexueshme, pavarësisht temës —
vetëm SFONDI pas saj ndryshon sipas temës së zgjedhur (kjo ËSHTË
"zgjedhja e background-it" e kërkuar: 1 temë = 1 sfond i koordinuar). */
html[class*="login-theme-"] .login-card{
background:#fff;color:#0F172A;border:1px solid rgba(15,23,42,.06);
border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);
position:relative;overflow:hidden;
}
html[class*="login-theme-"] .login-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--login-accent-2),var(--login-accent));
}
html[class*="login-theme-"] .login-card h1{color:#0F172A}
html[class*="login-theme-"] .login-card .hint{color:#64748B}
.login-brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--login-ink,#0B1F3A)}
.login-brand .ico,.login-brand .ico-grad,.login-brand .las.ico-grad{color:var(--login-accent,#C9A227);-webkit-text-fill-color:var(--login-accent,#C9A227);font-size:22px}
.login-welcome{
font-size:13.5px;color:#475569;background:#F8FAFC;border:1px solid #E2E8F0;
border-radius:10px;padding:12px 14px;margin-bottom:18px;line-height:1.5;
}
.login-btn{
width:100%;padding:12px;border:0;border-radius:10px;cursor:pointer;
background:linear-gradient(180deg,var(--login-accent-2,#F1D27A),var(--login-accent,#C9A227));
color:var(--login-ink,#1B1403);font-weight:700;font-size:15px;
transition:transform .15s ease,box-shadow .15s ease;
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.login-links{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px}
.login-links a{color:#64748B;text-decoration:none}
.login-links a:hover{color:var(--login-accent,#C9A227);text-decoration:underline}
.login-back{display:inline-flex;align-items:center;gap:6px;color:#64748B;font-size:13px;text-decoration:none;margin-bottom:18px}
.login-back:hover{color:var(--login-accent,#C9A227)}
.login-note{font-size:13px;color:#475569;line-height:1.6;margin-bottom:18px}
/* ---------- Kartat e zgjedhjes së temës së login-it (Settings → Login) ---------- */
.login-theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.login-theme-opt{
border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
cursor:pointer;background:var(--surface-1);text-align:left;padding:0;width:100%;
transition:border-color var(--t-base),transform var(--t-base);
}
.login-theme-opt:hover{transform:translateY(-2px)}
.login-theme-opt.is-on{border-color:var(--sel);box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 22%,transparent)}
.login-theme-opt-preview{height:72px}
.login-theme-opt-preview.lt-classic{background:linear-gradient(150deg,#0B1F3A,#2D3D51)}
.login-theme-opt-preview.lt-ocean{background:linear-gradient(150deg,#062833,#0E5A68)}
.login-theme-opt-preview.lt-sunset{background:linear-gradient(150deg,#4A2A38,#7C3AED,#E8A0B4)}
.login-theme-opt-meta{padding:10px 12px}
.login-theme-opt-meta strong{display:block;color:var(--text)}
.login-theme-opt-meta span{color:var(--muted);font-size:var(--fs-sm)}
@media (max-width:640px){.login-theme-picker{grid-template-columns:1fr}}
/* ============================================================
MISC PAGES
============================================================ */
/* ============================================================
ROLES — kartat e lejeve (modules/roles/edit_role.php, new_roles.php)
============================================================ */
.perm-cards{display:flex;flex-direction:column;gap:14px}
.perm-card{
border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--surface-1);overflow:hidden;
}
.perm-card-head{
display:flex;align-items:flex-start;gap:12px;
padding:14px 16px;background:var(--surface-3);
border-bottom:1px solid var(--line);
}
.perm-card-ico{
flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--sel) 14%,var(--surface-1));
}
.perm-card-ico .ico{color:var(--sel);-webkit-text-fill-color:var(--sel);font-size:18px}
.perm-card-head strong{display:block;color:var(--text);font-size:var(--fs-base)}
.perm-card-head .t-sub{margin:2px 0 0}
.perm-all-toggle{
margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;
font-size:var(--fs-sm);font-weight:600;color:var(--muted);white-space:nowrap;
cursor:pointer;
}
.perm-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:8px;padding:14px 16px;
}
.perm-chip{
display:flex;align-items:center;gap:8px;
padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);
background:var(--surface-1);font-size:var(--fs-sm);color:var(--text);
cursor:pointer;transition:border-color var(--t-base),background var(--t-base);
}
.perm-chip:hover{border-color:var(--sel)}
.perm-chip:has(input:checked){
border-color:var(--sel);
background:color-mix(in srgb,var(--sel) 10%,var(--surface-1));
}
.perm-chip input{flex:0 0 auto}
.ai-box{background:var(--surface-3);border:1px dashed var(--line);border-radius:var(--r-md);padding:12px;color:var(--text)}
.ai-panel{
display:none;padding:14px;border-radius:var(--r-lg);margin:12px 0;
background:var(--surface-1);border:1px solid var(--line);
color:var(--text);box-shadow:var(--shadow);
}
.ai-panel.is-on{display:block}
.ai-panel h4{margin:0 0 10px}
/* ============================================================
AI — dokumenti i formatuar (item 2 & 4 Dua Update): shkrimi i AI
në div më vete, si një akt juridik normal — pa **, ##, simbole.
============================================================ */
.ai-doc-wrap{
background:var(--surface-1);border:1px solid var(--line);
border-radius:var(--r-lg);box-shadow:var(--shadow);
padding:0;overflow:hidden;margin-top:10px;
}
.ai-doc-head{
display:flex;align-items:center;gap:10px;
padding:12px 16px;background:var(--surface-3);
border-bottom:1px solid var(--line);
}
.ai-doc-head strong{color:var(--text);font-size:var(--fs-base)}
.ai-doc{
font-family:'Georgia','Times New Roman',serif;
font-size:15px;line-height:1.75;color:var(--text);
padding:20px 24px 24px;max-height:70vh;overflow:auto;
text-align:justify;
}
.ai-doc p{margin:0 0 14px}
.ai-doc h4.ai-h{
font-family:Inter,system-ui,sans-serif;
margin:20px 0 10px;font-size:var(--fs-base);font-weight:700;
letter-spacing:.03em;text-transform:uppercase;color:var(--gold-ink);
border-bottom:1px solid var(--line);padding-bottom:6px;
}
.ai-doc h4.ai-h:first-child{margin-top:0}
.ai-doc ul.ai-list{margin:0 0 14px;padding-left:22px}
.ai-doc ul.ai-list li{margin-bottom:6px}
.ai-doc strong{color:var(--text);font-weight:700}
.ai-doc em{color:var(--muted)}
/* ---------- AI question card (colored header) + action buttons ---------- */
.ai-question-card{padding-top:0;overflow:hidden}
.ai-question-card .card-h{
margin:0 calc(-1 * var(--sp-5)) var(--sp-4);
padding:16px var(--sp-5);
background:linear-gradient(120deg,var(--deep),var(--sel));
border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.ai-question-card .card-h h3{color:#fff}
.ai-question-card .card-h .ico-grad{color:#fff;-webkit-text-fill-color:#fff}
.ai-doc-actions{
display:flex;flex-wrap:wrap;gap:10px;
padding:14px 24px 20px;border-top:1px solid var(--line);
}
/* ---------- Print ---------- */
@media print{
.sidebar,.topbar,.page-head,.ai-case-picker,.ai-run,.alert-strip,
.no-print,.list-toolbar,.chips,.filters,.ai-doc-actions,.nav-toggle,
.split,.ai-editor{
display:none!important;
}
.content{padding:0!important}
.ai-doc-wrap{box-shadow:none;border:0}
.ai-doc{max-height:none;overflow:visible}
/* RREGULLIM: përmbajtja e #ai-doc-print-box tani është HTML e vërtetë
(jo tekst i sheshtë), kështu "white-space:pre-wrap" u hoq (do të
dyfishonte hapësirat, pasi /
tashmë krijojnë vetë rreshtat) dhe
në vend të tij stilizohen drejtpërdrejt elementet e brendshme, në të
njëjtën frymë si .ai-doc. */
#ai-doc-print-box{
display:block!important;
font-family:'Georgia','Times New Roman',serif;
font-size:14px;line-height:1.7;color:#000;
}
#ai-doc-print-box h1,#ai-doc-print-box h2,#ai-doc-print-box h3,#ai-doc-print-box h4{
margin:16px 0 8px;font-family:Inter,system-ui,sans-serif;
font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:13px;
}
#ai-doc-print-box p{margin:0 0 10px}
#ai-doc-print-box ul,#ai-doc-print-box ol{margin:0 0 10px;padding-left:20px}
}
/* ---------- Redaktori i pasur (Trumbowyg) me pamje "dokument Word" ----------
E njëjta tipografi (Georgia serif, tituj me ngjyrë ari, paragrafë të
drejtuar) si .ai-doc (lexim-vetëm te module=ai), por këtu mbi zonën
REDAKTUESHME të Trumbowyg — kështu dokumenti AI dhe dokumentet e ruajtura
te "Dokumentet" duken njësoj "të bukura", qofshin të redaktueshme apo jo. */
.ai-doc-editor-wrap .trumbowyg-box{
border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--surface-1);box-shadow:var(--shadow);
}
.ai-doc-editor-wrap .trumbowyg-editor{
font-family:'Georgia','Times New Roman',serif;
font-size:15px;line-height:1.75;color:var(--text);
padding:20px 24px 24px;min-height:50vh;text-align:justify;
}
.ai-doc-editor-wrap .trumbowyg-editor p{margin:0 0 14px}
.ai-doc-editor-wrap .trumbowyg-editor h1,
.ai-doc-editor-wrap .trumbowyg-editor h2,
.ai-doc-editor-wrap .trumbowyg-editor h3,
.ai-doc-editor-wrap .trumbowyg-editor h4{
font-family:Inter,system-ui,sans-serif;
margin:20px 0 10px;font-size:var(--fs-base);font-weight:700;
letter-spacing:.03em;text-transform:uppercase;color:var(--gold-ink);
border-bottom:1px solid var(--line);padding-bottom:6px;
}
.ai-doc-editor-wrap .trumbowyg-editor h1:first-child,
.ai-doc-editor-wrap .trumbowyg-editor h2:first-child,
.ai-doc-editor-wrap .trumbowyg-editor h3:first-child,
.ai-doc-editor-wrap .trumbowyg-editor h4:first-child{margin-top:0}
.ai-doc-editor-wrap .trumbowyg-editor ul,
.ai-doc-editor-wrap .trumbowyg-editor ol{margin:0 0 14px;padding-left:22px}
.ai-doc-editor-wrap .trumbowyg-editor ul li,
.ai-doc-editor-wrap .trumbowyg-editor ol li{margin-bottom:6px}
.ai-doc-editor-wrap .trumbowyg-editor strong{color:var(--text);font-weight:700}
.ai-doc-editor-wrap .trumbowyg-button-pane{
background:var(--surface-3);border-bottom:1px solid var(--line);
}
/* ---------- AI Document Assistant editor ---------- */
.ai-editor{
width:100%;min-height:60vh;
font-family:'Georgia','Times New Roman',serif;
font-size:15px;line-height:1.75;
padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--surface-1);color:var(--text);resize:vertical;
}
.ai-editor:focus{outline:none;border-color:var(--sel);box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 18%,transparent)}
#ai-doc-print-box{display:none}
.doc-type-table{width:100%;border-collapse:separate;border-spacing:0 6px}
.doc-type-table td{padding:4px 0;vertical-align:top}
.doc-type-cat{font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.hours-bar{
height:8px;
background:color-mix(in srgb,var(--gold) 25%,var(--surface-3));
border-radius:99px;overflow:hidden;margin:10px 0;
}
.hours-bar > span{display:block;height:100%;background:var(--gold);width:0%}
.coming{padding:var(--sp-8);text-align:center;color:var(--muted)}
/* Empty state */
.empty-state{
padding:60px 24px;
text-align:center;
display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
color:var(--muted);
}
.empty-state .ico-grad{font-size:36px;color:var(--muted)}
.empty-state h3{margin:0;font-size:var(--fs-lg);color:var(--text);font-weight:650}
.empty-state p{margin:0;max-width:320px;font-size:var(--fs-base);line-height:1.5}
/* Skeleton shimmer */
.skeleton{
position:relative;overflow:hidden;
background:var(--surface-2);border-radius:var(--r-sm);
}
.skeleton::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(90deg,
transparent,
color-mix(in srgb,var(--text) 6%,transparent),
transparent);
transform:translateX(-100%);
animation:shimmer 1.6s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{height:12px;margin-bottom:8px}
.skeleton-line.w-60{width:60%}
.skeleton-line.w-40{width:40%}
.skeleton-avatar{width:36px;height:36px;border-radius:50%}
.divider{height:1px;background:var(--line);margin:14px 0;border:0}
/* ============================================================
SPLIT / PANES
============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-4);align-items:start}
.split-wide{grid-template-columns:minmax(0,1fr) 380px}
.split.split-3070,.split-3070{grid-template-columns:minmax(220px,30%) minmax(0,70%)}
.split-3070 > .list-pane{min-width:0}
.split-3070 > aside,.split-3070 > .detail-pane{min-width:0}
/* ============================================================
CHIPS / TABS / STATS
============================================================ */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:10px 0 14px}
.chip{
display:inline-flex;align-items:center;gap:6px;
padding:7px 12px;border-radius:var(--r-md);
background:var(--surface-1);border:1px solid var(--line);
color:var(--text);font-weight:600;font-size:var(--fs-base);
transition:background var(--t-fast),border-color var(--t-fast);
}
.chip:hover{background:var(--surface-2)}
.chip.is-on{background:var(--gold-soft);border-color:var(--sel);color:var(--text)}
.chip .n{color:var(--muted);font-weight:700}
/* ============================================================
LIST TOOLBAR — kërkimi majtas, chips djathtas, në një rresht
(item 3, Dua Update)
============================================================ */
.list-toolbar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:var(--sp-3);margin:0 0 14px;
}
.list-toolbar .filters{order:1;margin-bottom:0;flex:1;min-width:220px}
.list-toolbar .chips{order:2;margin:0;justify-content:flex-end}
@media (max-width:768px){
.list-toolbar .chips{justify-content:flex-start}
}
.substats{color:var(--muted);margin:-8px 0 12px}
.row-sel td{background:var(--gold-soft)}
.side-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.side-stat{
background:var(--surface-2);border-radius:var(--r-md);padding:10px;
text-align:center;color:var(--text);
}
.side-stat b{display:block;font-size:var(--fs-lg);color:var(--text)}
.side-stat span{color:var(--muted);font-size:var(--fs-xs)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.tabs a,.tabs button{
padding:8px 12px;border-radius:var(--r-md);
border:1px solid var(--line);
background:var(--surface-1);color:var(--text);cursor:pointer;
transition:background var(--t-fast),border-color var(--t-fast);
}
.tabs a:hover,.tabs button:hover{background:var(--surface-2)}
.tabs a.is-on{
background:var(--navy);color:var(--on-navy);border-color:var(--navy);
}
/* ============================================================
PANEL HEAD
============================================================ */
.panel-head{
display:flex;gap:var(--sp-3);align-items:center;
margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) var(--sp-4);
padding:var(--sp-4) var(--sp-5);
background:var(--surface-3);color:var(--text);
border-radius:var(--r-lg) var(--r-lg) 0 0;
border-bottom:1px solid var(--line);
}
.panel-head h2,.panel-head h3{color:var(--text)}
.panel-head .t-sub{color:var(--muted)}
.avatar-lg{
width:56px;height:56px;border-radius:50%;
background:var(--navy);color:var(--on-navy);
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:var(--fs-lg);
}
.meta-list{display:grid;gap:var(--sp-2);margin:10px 0}
.meta-list div{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-base);color:var(--text)}
.meta-list span{color:var(--muted)}
.dark-card{background:linear-gradient(160deg,var(--deep),var(--deep-2));color:#fff;border-radius:var(--r-md);padding:12px 14px;margin:10px 0}
.dark-card small{color:rgba(255,255,255,.72)}
.sec-head{font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px;color:var(--muted);margin:14px 0 8px}
/* ============================================================
CALENDAR
============================================================ */
.cal-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 320px;gap:var(--sp-4)}
.cal-pro{grid-template-columns:minmax(240px,30%) minmax(0,70%)}
.cal-left{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.cal-week-wrap{min-width:0;overflow:auto}
.mini-cal{
display:grid;grid-template-columns:repeat(7,1fr);
gap:4px;font-size:var(--fs-sm);text-align:center;
}
.mini-cal b{color:var(--muted);font-weight:600}
.mini-cal span{display:block;padding:6px 0;border-radius:8px;color:var(--text)}
.mini-cal .today{background:var(--sel);color:var(--on-gold);font-weight:700}
.mini-cal-lg{gap:6px;font-size:var(--fs-base)}
.mini-cal-lg a,.mini-cal-lg span{
display:flex;align-items:center;justify-content:center;
min-height:34px;border-radius:8px;
border:1px solid transparent;
background:var(--surface-2);color:var(--text);
transition:background var(--t-fast),border-color var(--t-fast);
}
.mini-cal-lg a{position:relative}
.mini-cal-lg a:hover{border-color:var(--sel);background:var(--gold-soft)}
.mini-cal-lg .today{background:var(--sel);color:var(--on-gold);font-weight:700}
.mini-cal-lg .is-sel{outline:2px solid var(--deep)}
.mini-cal-lg .has-ev::after{
content:"";width:5px;height:5px;border-radius:50%;
background:var(--red);
position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
}
.week{
display:grid;grid-template-columns:56px repeat(7,1fr);
border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;background:var(--surface-1);
}
.week-head,.week-row{display:contents}
.week .cell,.week .hour,.week .wh{
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
min-height:50px;padding:5px;position:relative;font-size:var(--fs-xs);
color:var(--text);
}
.week .cell{display:flex;flex-direction:column;justify-content:center;gap:4px}
.week .wh{
background:linear-gradient(180deg,var(--sel),var(--deep-2));
color:#fff;font-weight:700;text-align:center;
text-shadow:0 1px 3px rgba(0,0,0,.45);
min-height:48px;
display:flex;flex-direction:column;justify-content:center;
}
.week .wh.today{
background:linear-gradient(180deg,var(--sel),color-mix(in srgb,var(--sel) 55%,#000));
color:var(--on-gold);
}
.week .hour{
color:var(--muted);background:var(--surface-3);
display:flex;align-items:center;justify-content:center;font-weight:600;
}
.ev{
border-radius:8px;padding:8px;
color:#fff;font-weight:650;font-size:var(--fs-sm);line-height:1.25;
min-height:34px;
display:flex;align-items:center;justify-content:center;text-align:center;
transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.ev:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
.ev-hearing{background:linear-gradient(180deg,var(--sel),var(--navy-3))}
.ev-deadline{background:linear-gradient(180deg,var(--red),#7f1d1d)}
.ev-meeting{background:linear-gradient(180deg,#8b6cf0,#6b46c1)}
.ev-task{background:linear-gradient(180deg,#8a96a8,#718096)}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted);margin:8px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}
.ev-detail-top{
background:linear-gradient(135deg,var(--deep),var(--sel));
color:#fff;border-radius:var(--r-md);padding:14px;
}
.ev-type{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,.75);margin-bottom:4px}
.ev-when{margin-top:6px;color:rgba(255,255,255,.85);font-size:var(--fs-base)}
.month-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.month-chip{
border:1px solid var(--line);border-radius:999px;
padding:6px 12px;
background:var(--surface-1);color:var(--text);font-size:var(--fs-base);
transition:background var(--t-fast);
}
.month-chip:hover{background:var(--surface-2)}
.month-chip b{color:var(--gold-ink)}
.month-chip.is-on{
background:linear-gradient(180deg,var(--sel),var(--deep));
color:#fff;border-color:var(--deep);
}
.month-chip.is-on b{color:#fff}
/* ============================================================
BANDS / AGING
============================================================ */
.band{border-radius:var(--r-md);padding:8px 10px;margin:10px 0 6px;font-weight:700;font-size:var(--fs-base)}
.band-red{background:var(--red);color:#fff}
.band-gold{background:color-mix(in srgb,var(--gold) 22%,var(--surface-1));color:var(--gold-ink)}
.band-soft{background:var(--surface-3);color:var(--text)}
.aging{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin:10px 0 14px}
.aging div{border-radius:var(--r-md);padding:10px;background:var(--surface-2);color:var(--text)}
.aging .g{background:color-mix(in srgb,var(--green) 18%,var(--surface-1))}
.aging .y{background:color-mix(in srgb,var(--orange) 20%,var(--surface-1))}
.aging .o{background:color-mix(in srgb,var(--orange) 32%,var(--surface-1))}
.aging .r{background:color-mix(in srgb,var(--red) 22%,var(--surface-1))}
.aging-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.aging-row span{color:var(--muted);font-size:var(--fs-base)}
.aging-row strong{font-size:var(--fs-lg);color:var(--text)}
/* ============================================================
SETTINGS
============================================================ */
.settings-wrap{display:grid;grid-template-columns:220px 1fr;gap:var(--sp-4)}
.set-nav a{
display:block;padding:9px 12px;border-radius:var(--r-md);margin-bottom:4px;
color:var(--text);transition:background var(--t-fast);
}
.set-nav a:hover{background:var(--surface-2)}
.set-nav a.is-on{background:var(--gold-soft);font-weight:650;color:var(--text)}
.conflict-alert{
background:color-mix(in srgb,var(--red) 14%,var(--surface-1));
border:1px solid color-mix(in srgb,var(--red) 40%,transparent);
border-radius:var(--r-md);padding:14px;color:var(--red);
}
.conflict-item{
background:var(--surface-1);border-radius:var(--r-md);
padding:10px 12px;margin:8px 0;
border:1px solid color-mix(in srgb,var(--red) 30%,transparent);
color:var(--text);
}
/* ============================================================
PREVIEW / BARS
============================================================ */
.preview{
background:var(--surface-3);border:1px solid var(--line);
border-radius:var(--r-md);padding:12px;font-size:var(--fs-sm);line-height:1.45;
color:var(--text);
}
.txt-preview{
white-space:pre-wrap;word-break:break-word;
max-height:72vh;overflow:auto;
padding:var(--sp-4);margin:0;font-size:var(--fs-md);line-height:1.55;
background:var(--surface-3);color:var(--text);
border-radius:var(--r-md);
}
.preview-frame{min-height:60vh}
.preview-frame iframe{width:100%;min-height:72vh;border:0;border-radius:var(--r-md);background:var(--surface-3)}
.kpi-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-bottom:var(--sp-4)}
.bar-h{display:flex;align-items:center;gap:var(--sp-2);margin:6px 0}
.bar-h .track{flex:1;height:10px;background:var(--surface-3);border-radius:8px;overflow:hidden}
.bar-h .track > span{display:block;height:100%;background:var(--gold)}
/* ============================================================
LOOKUP
============================================================ */
.lookup{position:relative}
.lookup-q{
width:100%;border:1px solid var(--line);border-radius:var(--r-md);
padding:9px 11px;background:var(--surface-1);color:var(--text);
}
.lookup-list{
position:absolute;left:0;right:0;top:100%;z-index:40;
background:var(--surface-1);border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:var(--elev-3);
max-height:240px;overflow:auto;margin-top:4px;
}
.lookup-item{
display:block;width:100%;text-align:left;
border:0;background:var(--surface-1);color:var(--text);
padding:8px 10px;cursor:pointer;
transition:background var(--t-fast);
}
.lookup-item:hover{background:var(--surface-2)}
.lookup-item span{display:block;color:var(--muted);font-size:var(--fs-sm)}
.lookup-empty{padding:10px;color:var(--muted)}
/* ============================================================
SPINNER
============================================================ */
.spin{
display:inline-block;width:12px;height:12px;
border:2px solid currentColor;
border-right-color:transparent;border-radius:50%;
animation:spin .7s linear infinite;vertical-align:-1px;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ============================================================
NOTIFICATIONS
============================================================ */
.notif-wrap{position:relative}
.notif-drop{
display:none;position:absolute;right:0;top:28px;
width:300px;padding:14px;
background:var(--surface-1);border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:var(--elev-3);
color:var(--text);z-index:30;
}
.notif-wrap:hover .notif-drop{display:block;animation:fadeInUp var(--t-base)}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
.notif-drop > div{padding:8px 4px;border-bottom:1px solid var(--line)}
/* ============================================================
TOAST STACK (modern) — auto-hide via CSS animation
============================================================ */
.toast-stack{
position:fixed;right:20px;bottom:20px;z-index:60;
display:flex;flex-direction:column;gap:10px;
pointer-events:none;
}
.toast{
pointer-events:auto;
min-width:300px;max-width:400px;
padding:14px 16px;
background:var(--surface-1);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--elev-3);
color:var(--text);
display:flex;gap:12px;align-items:flex-start;
position:relative;
overflow:hidden;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
animation:toastIn .35s var(--t-bounce) both;
/* auto-hide pas 5s */
animation:
toastIn .35s var(--t-bounce) both,
toastOut .3s ease 5s both;
}
.toast::before{
content:"";position:absolute;
left:0;top:0;bottom:0;width:3px;
border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.toast-success::before{background:var(--green)}
.toast-error::before{background:var(--red)}
.toast-info::before{background:var(--sel)}
.toast-warn::before{background:var(--orange)}
.toast-title{font-weight:650;font-size:var(--fs-md);margin:0 0 2px}
.toast-msg{font-size:var(--fs-base);color:var(--muted);margin:0}
.toast-close{
margin-left:auto;border:0;background:transparent;
color:var(--muted);cursor:pointer;font-size:16px;line-height:1;
padding:0 4px;
}
.toast-close:hover{color:var(--text)}
@keyframes toastIn{
from{opacity:0;transform:translateX(120%) scale(.95)}
to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes toastOut{
to{opacity:0;transform:translateX(120%) scale(.9);max-height:0;padding:0;margin:0;border-width:0}
}
/* Static variant without auto-hide */
.toast.is-sticky{
animation:toastIn .35s var(--t-bounce) both;
}
/* Dash toast (existing) */
.dash-toast{
position:fixed;right:24px;top:92px;width:280px;z-index:50;
background:var(--surface-1);border:1px solid var(--line);
color:var(--text);border-radius:var(--r-lg);
box-shadow:0 16px 40px var(--scrim);
padding:20px;
}
.dash-toast p,.dash-toast .t-sub{margin:8px 0}
.toast-bell{font-size:22px;animation:bell 1s ease-in-out 3}
@keyframes bell{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-12deg)}}
.toast-x{position:absolute;right:8px;top:6px;border:0;background:transparent;font-size:18px;cursor:pointer;color:var(--muted)}
/* ============================================================
COMMAND PALETTE (CSS-only via :target)
============================================================ */
.cmd-overlay{
position:fixed;inset:0;z-index:100;
background:color-mix(in srgb,var(--navy) 55%,transparent);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:none;
align-items:flex-start;justify-content:center;
padding-top:15vh;
}
.cmd-overlay:target{
display:flex;
animation:fadeIn .15s ease;
}
.cmd-box{
width:min(640px,92vw);
background:var(--surface-1);
border:1px solid var(--line);
border-radius:var(--r-xl);
box-shadow:var(--elev-4);
overflow:hidden;
animation:cmdIn .25s var(--t-bounce);
}
.cmd-backdrop{
position:absolute;inset:0;
cursor:default;
}
.cmd-input-wrap{
position:relative;display:flex;align-items:center;
padding:0 20px;
border-bottom:1px solid var(--line);
}
.cmd-input-wrap .ico-grad{color:var(--muted);font-size:18px}
.cmd-input{
width:100%;border:0;background:transparent;
padding:18px 12px;
font-size:15px;color:var(--text);outline:none;
}
.cmd-input::placeholder{color:var(--muted)}
.cmd-kbd{
display:flex;gap:4px;align-items:center;
}
.cmd-list{max-height:400px;overflow:auto;padding:6px}
.cmd-item{
padding:10px 14px;border-radius:var(--r-md);
display:flex;gap:12px;align-items:center;
cursor:pointer;color:var(--text);
transition:background var(--t-fast);
}
.cmd-item:hover,.cmd-item.is-active{
background:color-mix(in srgb,var(--sel) 12%,var(--surface-1));
}
.cmd-item .ico-grad{font-size:16px;color:var(--muted)}
.cmd-item span{flex:1}
.cmd-item .cmd-key{
margin-left:auto;
padding:2px 8px;border-radius:6px;
background:var(--surface-3);
font-size:var(--fs-xs);
color:var(--muted);
font-family:ui-monospace,monospace;
}
.cmd-sec{
padding:8px 14px 4px;
font-size:var(--fs-xs);
letter-spacing:.05em;
text-transform:uppercase;
color:var(--muted);
}
@keyframes cmdIn{
from{opacity:0;transform:translateY(-12px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ============================================================
TOOLTIPS (data-tip)
============================================================ */
[data-tip]{position:relative}
[data-tip]::after{
content:attr(data-tip);
position:absolute;
bottom:calc(100% + 8px);
left:50%;
transform:translateX(-50%) translateY(4px);
padding:6px 10px;
background:var(--navy);color:var(--on-navy);
font-size:var(--fs-xs);font-weight:500;
border-radius:6px;
white-space:nowrap;
opacity:0;pointer-events:none;
transition:opacity var(--t-fast),transform var(--t-fast);
box-shadow:var(--elev-2);
z-index:50;
}
[data-tip]:hover::after{
opacity:1;
transform:translateX(-50%) translateY(0);
}
[data-tip][data-tip-pos="bottom"]::after{
bottom:auto;top:calc(100% + 8px);
transform:translateX(-50%) translateY(-4px);
}
[data-tip][data-tip-pos="bottom"]:hover::after{
transform:translateX(-50%) translateY(0);
}
/* ============================================================
CHARTS
============================================================ */
.chart-svg{width:100%;height:180px;display:block}
.chart-svg.donut{width:140px;height:140px}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:var(--fs-sm)}
.chart-legend.col{flex-direction:column;gap:6px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.donut-row{display:flex;gap:16px;align-items:center}
.file-ico{margin-right:6px;font-size:16px}
/* ============================================================
CLIENTS TABLE
============================================================ */
.tbl-clients tbody td{background:var(--surface-1);color:var(--text);border-bottom:1px solid var(--line)}
.tbl-clients tbody tr:hover td{background:var(--surface-2)}
.tbl-clients .av,
.tbl-clients .av-g0,.tbl-clients .av-g1,.tbl-clients .av-g2,
.tbl-clients .av-g3,.tbl-clients .av-g4,.tbl-clients .av-g5,
.tbl-clients .av-g6,.tbl-clients .av-g7{
background:var(--sel)!important;
color:var(--on-gold)!important;
box-shadow:none;
}
/* ============================================================
CASE FILE
============================================================ */
.case-file{padding:0;overflow:hidden}
.case-file-head{
display:flex;align-items:flex-start;gap:12px;
background:linear-gradient(135deg,var(--deep) 0%,var(--deep-2) 55%,var(--sel) 140%);
color:#fff;padding:16px;
}
.case-file-head h3{margin:2px 0 4px;font-size:var(--fs-lg);line-height:1.25;color:#fff;font-weight:700}
.case-file-kicker{font-size:var(--fs-xs);letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.75)}
.case-file-sub{font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.case-file-head-ico{
width:36px;height:36px;border-radius:var(--r-md);
background:rgba(255,255,255,.14);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.case-file-head-ico .ico-grad{color:#fff;background:none;-webkit-text-fill-color:#fff}
.case-file-st{margin-left:auto}
.case-kv{padding:10px 12px 4px;display:grid;gap:0}
.case-kv-row{
display:grid;grid-template-columns:28px 88px 1fr;
align-items:center;gap:8px;
padding:8px 4px;border-bottom:1px solid var(--line);
font-size:var(--fs-base);color:var(--text);
}
.case-kv-row:last-child{border-bottom:0}
.case-kv-row span{color:var(--muted);font-size:var(--fs-sm)}
.case-kv-row strong{font-weight:650;color:var(--text)}
.case-kv-row .ico-grad{font-size:16px}
.case-block{padding:4px 14px 8px}
.case-doc{
display:flex;align-items:center;gap:8px;
padding:7px 8px;margin-bottom:6px;
border:1px solid var(--line);border-radius:8px;
background:var(--surface-1);color:var(--gold-ink);
text-decoration:none;font-size:var(--fs-base);
transition:border-color var(--t-fast),background var(--t-fast);
}
.case-doc:hover{border-color:var(--sel);background:var(--surface-2)}
.case-file-actions{padding:4px 14px 14px;flex-wrap:wrap}
.case-file-actions .btn{display:inline-flex;align-items:center;gap:6px}
.case-upload{
display:grid;gap:8px;margin-top:10px;padding-top:8px;
border-top:1px dashed var(--line);
}
.case-upload input[type=text],.case-upload input[name=title]{
width:100%;border:1px solid var(--line);border-radius:8px;
padding:8px 10px;font:inherit;
background:var(--surface-1);color:var(--text);
}
.case-upload input[type=file]{font-size:var(--fs-sm);color:var(--text)}
.client-file .case-file-head-ico.avatar-lg{
width:42px;height:42px;border-radius:var(--r-md);
background:rgba(255,255,255,.16);
color:#fff;font-weight:700;
display:flex;align-items:center;justify-content:center;
font-size:var(--fs-md);
}
.client-file .side-stat b.danger,
.client-file .case-kv-row strong.danger{color:var(--red)}
/* ============================================================
EDIT HEAD
============================================================ */
.edit-head{align-items:flex-start}
.edit-kicker{font-size:var(--fs-xs);letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.edit-head h1{margin:0;font-size:22px;line-height:1.25;color:var(--text)}
.edit-sub{margin:4px 0 0;color:var(--muted);font-size:var(--fs-base)}
/* ============================================================
PAGER
============================================================ */
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pager a{
min-width:28px;height:28px;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:8px;padding:0 8px;
background:var(--surface-1);color:var(--text);
transition:background var(--t-fast);
}
.pager a:hover{background:var(--surface-2)}
.pager a.is-on{background:linear-gradient(180deg,var(--sel),var(--deep));color:#fff;border-color:var(--deep)}
.notif-now{margin-bottom:var(--sp-4)}
.notice-inline{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}
/* ============================================================
ICONS
============================================================ */
.ico,.ico-grad,.las.ico-grad{
font-size:18px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;
background:none;
-webkit-background-clip:border-box;background-clip:border-box;
-webkit-text-fill-color:currentColor;
color:var(--muted);
}
/* RREGULLIM: rregulli i mësipërm (.las.ico-grad, 2 klasa) ka specificitet
CSS më të lartë se .btn-gold (1 klasë), kështu çdo ikonë brenda një
butoni "gold" (p.sh. butoni i kërkimit te aidocs/casesall) dilte
gjithmonë gri e zbehtë (--muted), në vend që të përshtatej me ngjyrën e
lexueshme të butonit (--on-gold) — dukej "e fikur"/pa kontrast të mirë
mbi sfondin e artë. Këto rregulla shtesë (specificitet edhe më i lartë,
.btn-gold .las.ico-grad = 3 klasa) sigurojnë që çdo ikonë brenda një
butoni me sfond të ngjyrosur të marrë saktë ngjyrën e tekstit të butonit.
*/
.btn-gold .ico,.btn-gold .ico-grad,.btn-gold .las.ico-grad{
color:var(--on-gold);-webkit-text-fill-color:var(--on-gold);
}
.ico-brand{font-size:26px}
.nav-item .ico,.nav-item .ico-grad,.nav-item .las{
background:none;-webkit-text-fill-color:var(--side-text);color:var(--side-text);
}
.nav-item.is-active .ico-grad,
.nav-item.is-active .ico{
background:none;-webkit-text-fill-color:var(--on-gold);color:var(--on-gold);
}
.ico-act .ico-grad,.row-acts .ico-grad{font-size:16px}
.ico-del .ico-grad{background:none;-webkit-text-fill-color:var(--red);color:var(--red)}
.toast-bell .ico-grad{font-size:28px}
/* ============================================================
DIGI CLOCK
============================================================ */
.digi-clock{
font-variant-numeric:tabular-nums;
font-weight:700;letter-spacing:.08em;font-size:18px;min-width:96px;
text-align:center;
background:linear-gradient(180deg,var(--sel),var(--gold-ink));
-webkit-background-clip:text;background-clip:text;
color:transparent;text-shadow:none;filter:none;
}
/* ============================================================
NAV TOGGLE (CSS-only)
============================================================ */
.nav-toggle{
display:none;border:0;background:transparent;
font-size:22px;color:var(--text);cursor:pointer;
}
.side-overlay{display:none}
/* ============================================================
PULSE
============================================================ */
@keyframes pulse2{
0%,100%{box-shadow:var(--shadow);transform:scale(1)}
40%{box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 38%,transparent);transform:scale(1.015)}
}
.detail-pane.is-pulse,.ev-detail.is-pulse{animation:pulse2 .4s ease 2}
/* ============================================================
SCROLLBARS
============================================================ */
html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:8px}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--scroll-thumb) 85%,#000)}
/* ============================================================
AI ANALYZING MODAL (item 2 Dua Update) — qendër, animacion
============================================================ */
/* ============================================================
MODAL GJENERIK (popup) — ndryshe nga .ai-modal-* (i dedikuar vetëm për
ngarkimin AI, tekst i qendërzuar), ky mbështet përmbajtje të lirë
(formularë, tabela) dhe përdoret nga "Email Njoftimet" (Shto Kontakt,
Importo Excel) — dhe mund të ripërdoret nga çdo modul tjetër më vonë.
============================================================ */
.modal-overlay{
position:fixed;inset:0;z-index:250;
display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--deep-2) 65%,transparent);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
opacity:0;pointer-events:none;
transition:opacity .2s ease;
padding:20px;
}
.modal-overlay.is-on{opacity:1;pointer-events:auto}
.modal-box{
width:min(560px,92vw);max-height:88vh;overflow-y:auto;
background:var(--surface-1);color:var(--text);
border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--elev-4);
padding:26px 26px 22px;
transform:translateY(14px) scale(.97);
transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.modal-overlay.is-on .modal-box{transform:translateY(0) scale(1)}
.modal-box.modal-wide{width:min(960px,94vw)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h3{margin:0;font-size:var(--fs-lg)}
.modal-close{
border:0;background:var(--surface-3);color:var(--muted);
width:32px;height:32px;border-radius:50%;cursor:pointer;
font-size:16px;display:flex;align-items:center;justify-content:center;
transition:background var(--t-fast),color var(--t-fast);
}
.modal-close:hover{background:var(--red-soft);color:var(--red)}
/* ============================================================
EMAIL NJOFTIMET — faqja e kompozimit/dërgimit
============================================================ */
.email-contact-scroll{
max-height:52vh;overflow-y:auto;
border:1px solid var(--line);border-radius:var(--r-md);
padding:6px;background:var(--surface-1);
}
.email-contact-row{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:var(--r-md);
cursor:pointer;transition:background var(--t-fast);
}
.email-contact-row:hover{background:var(--surface-3)}
.email-contact-row strong{display:block;font-size:var(--fs-sm);color:var(--text)}
.email-contact-row .t-sub{font-size:var(--fs-xs);margin-top:0}
.email-progress-bar-wrap{
height:10px;border-radius:6px;background:var(--surface-3);
overflow:hidden;margin:14px 0 8px;
}
.email-progress-bar{
height:100%;background:linear-gradient(90deg,var(--gold-2,var(--sel)),var(--sel));
width:0%;transition:width .25s ease;
}
.email-send-log{
max-height:220px;overflow-y:auto;margin-top:10px;
border:1px solid var(--line);border-radius:var(--r-md);
padding:8px 10px;background:var(--surface-2);
font-size:var(--fs-sm);
}
.email-log-row{padding:3px 0}
.email-log-row.ok{color:#1E8E5A}
.email-log-row.fail{color:#E11D48}
/* I RI: filtri i qyteteve (compose_emailnotify.php) — listë kompakte
checkbox-esh, secili me numrin e kontakteve në kllapa: "Prishtinë (22)". */
.email-city-list{
max-height:180px;overflow-y:auto;
border:1px solid var(--line);border-radius:var(--r-md);
padding:6px 10px;background:var(--surface-1);
}
.email-city-row{padding:5px 2px;font-size:var(--fs-sm)}
.ai-modal-overlay{
position:fixed;inset:0;z-index:200;
display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--deep-2) 70%,transparent);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;pointer-events:none;
transition:opacity .25s ease;
}
.ai-modal-overlay.is-on{opacity:1;pointer-events:auto}
.ai-modal-box{
width:min(420px,88vw);
background:var(--surface-1);color:var(--text);
border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--elev-4);
padding:32px 28px;text-align:center;
transform:translateY(14px) scale(.96);
transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.ai-modal-overlay.is-on .ai-modal-box{transform:translateY(0) scale(1)}
.ai-modal-spinner{
width:64px;height:64px;margin:0 auto 18px;
border-radius:50%;
border:4px solid color-mix(in srgb,var(--sel) 18%,transparent);
border-top-color:var(--sel);
animation:aiSpin .9s linear infinite;
position:relative;
}
.ai-modal-spinner::after{
content:"✦";position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:22px;color:var(--sel);
animation:aiPulseIcon 1.4s ease-in-out infinite;
}
@keyframes aiSpin{to{transform:rotate(360deg)}}
@keyframes aiPulseIcon{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.ai-modal-title{margin:0 0 6px;font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.ai-modal-sub{margin:0;color:var(--muted);font-size:var(--fs-base)}
/* ---------- Lista e hapave gjatë analizës AI (module=ai) ----------
5 hapa, secili me 3 gjendje: pritje (pikë gri), aktiv (spirale e vogël +
tekst i theksuar), i kryer (✓ jeshile). JS te app.js i kalon nga njëra
gjendje te tjetra sipas një sekuence të kohëzuar (shih dokumentimin te
modules/ai/ai_list.php, seksioni i modalit). */
.ai-modal-steps{list-style:none;margin:16px 0 0;padding:0;text-align:left}
.ai-modal-steps li{
display:flex;align-items:center;gap:10px;
padding:6px 4px;font-size:var(--fs-sm);color:var(--muted);
opacity:.55;transition:opacity var(--t-base),color var(--t-base);
}
.ai-step-ico{
flex:0 0 auto;width:18px;height:18px;border-radius:50%;
border:2px solid var(--line);position:relative;
}
.ai-modal-steps li.is-active{opacity:1;color:var(--text);font-weight:600}
.ai-modal-steps li.is-active .ai-step-ico{
border-color:var(--sel);border-top-color:transparent;
animation:aiSpin .7s linear infinite;
}
.ai-modal-steps li.is-done{opacity:.85;color:var(--text)}
.ai-modal-steps li.is-done .ai-step-ico{
border-color:#1E8E5A;background:#1E8E5A;
}
.ai-modal-steps li.is-done .ai-step-ico::after{
content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:11px;color:#fff;font-weight:700;
}
.ai-modal-dots span{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--sel);margin:14px 3px 0;
animation:aiDots 1.2s ease-in-out infinite;
}
.ai-modal-dots span:nth-child(2){animation-delay:.15s}
.ai-modal-dots span:nth-child(3){animation-delay:.3s}
@keyframes aiDots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1200px){
.split:not(.split-3070),
.split-wide:not(.split-3070),
.cal-layout:not(.cal-pro),
.settings-wrap,
.grid-3{grid-template-columns:1fr}
.kpi-mini,.aging,.side-stats,.kpis-compact{grid-template-columns:1fr 1fr}
.notice-inline{grid-template-columns:1fr}
}
@media (max-width:1024px){
.week{grid-template-columns:48px repeat(7,minmax(72px,1fr));overflow:auto}
.cal-layout{grid-template-columns:1fr}
.userchip-txt,.top-date{display:none}
}
@media (max-width:768px){
.nav-toggle{display:inline-flex}
.sidebar{
position:fixed;left:0;top:0;
transform:translateX(-105%);
transition:transform var(--t-base);
z-index:45;
}
.app.nav-open .sidebar{transform:none}
.side-overlay{
display:block;position:fixed;inset:0;
background:var(--scrim);
z-index:44;
opacity:0;pointer-events:none;transition:opacity var(--t-base);
}
.app.nav-open .side-overlay{opacity:1;pointer-events:auto}
.topbar{padding:10px 12px;flex-wrap:wrap}
.search{max-width:none;order:3;flex:1 1 100%}
.content{padding:14px 12px 28px}
.page-head{flex-direction:column;align-items:flex-start}
.page-head h1{font-size:var(--fs-xl)}
.form-row,.split,.split-wide,.settings-wrap,
.grid-2,.grid-2b,.grid-3{grid-template-columns:1fr}
.kpi-mini,.aging,.kpis-compact,.side-stats{grid-template-columns:1fr 1fr}
.tbl{font-size:var(--fs-sm)}
.lang-switch{display:none}
.tbl thead{display:none}
.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
.tbl tr{
display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
margin:0 0 10px;padding:10px;
border:1px solid var(--line);border-radius:var(--r-md);
background:var(--surface-1);
}
.tbl td{border:0;padding:4px 0;background:transparent;box-shadow:none!important}
.tbl td:first-child{grid-column:1/-1;font-weight:700}
.kpis-compact{grid-template-columns:1fr 1fr!important}
.kpis-compact .k-label{font-size:var(--fs-xs)}
.kpis-compact .k-value{font-size:18px}
.kpis-compact .ico-grad{font-size:14px}
.cal-layout.cal-pro{grid-template-columns:1fr}
.week{overflow-x:auto;min-width:100%}
.digi-clock{font-size:15px;min-width:78px}
.case-kv-row{grid-template-columns:24px 1fr;grid-template-rows:auto auto}
.case-kv-row span{grid-column:2}
.case-kv-row strong{grid-column:2}
}
@media (max-width:768px){
.split.split-3070,.split-3070,.split,.split-wide,
.cal-layout,.cal-layout.cal-pro,.settings-wrap,
.grid-2,.grid-2b{
display:grid!important;
grid-template-columns:1fr!important;
}
.split-3070 > *,.cal-layout > *{width:100%;max-width:100%}
.cal-week-wrap{order:1}
.cal-left{order:2}
}
@media (max-width:480px){
.kpi-mini,.aging,.kpis-compact{grid-template-columns:1fr}
.logout-link{display:none}
}
/* ============================================================
FILEGRID — "Të gjitha dosjet" (module=casesall): rrjetë kartash për
dokumentet e një klienti, me ikonë sipas llojit të skedarit.
============================================================ */
.filegrid-heading{
margin:4px 0 var(--sp-4);font-size:var(--fs-lg);font-weight:700;
display:flex;align-items:center;gap:8px;color:var(--text);
}
.filegrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:var(--sp-4);
}
/* Karta e dokumentit: 65px lartësi, "bexh" i vogël me ngjyrë majtas (jo më
thjesht një vijë kufiri), emri + lloji i skedarit djathtas në dy rreshta —
hapet në tab të ri (target="_blank" te PHP-ja), jo brenda së njëjtës faqe. */
.filegrid-item{
display:flex;align-items:center;gap:12px;
height:65px;padding:0 14px;
border:1px solid var(--line);border-radius:var(--r-lg);
background:var(--card);color:var(--text);
text-decoration:none;overflow:hidden;
box-shadow:0 1px 2px rgba(15,23,42,.04);
transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.filegrid-item:hover{
transform:translateY(-3px);
box-shadow:var(--elev-2);
border-color:color-mix(in srgb,var(--sel) 45%,var(--line));
}
/* "Bexhi" i vogël i ngjyrosur majtas — sfond i butë në ngjyrën e llojit të
skedarit, me ikonën vetë të njëjtën ngjyrë (jo më gri e zbehtë si më parë). */
.filegrid-ico{
flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:var(--r-md);
background:var(--surface-2);
}
.filegrid-ico .ico{font-size:19px}
.filegrid-body{
flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center;
}
.filegrid-name{
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--text);
line-height:1.25;
}
.filegrid-type{
font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);line-height:1;
}
/* Ngjyrat sipas llojit të skedarit — sfond i butë + ikonë e ngopur me të
njëjtën ngjyrë (specificitet i qëllimshëm i lartë ".ico" që të fitojë
ndaj rregullit global gri të ikonave). */
.filegrid-item.fk-pdf .filegrid-ico{background:color-mix(in srgb,#E11D48 14%,var(--surface-1))}
.filegrid-item.fk-pdf .filegrid-ico .ico{color:#E11D48;-webkit-text-fill-color:#E11D48}
.filegrid-item.fk-word .filegrid-ico{background:color-mix(in srgb,#2563EB 14%,var(--surface-1))}
.filegrid-item.fk-word .filegrid-ico .ico{color:#2563EB;-webkit-text-fill-color:#2563EB}
.filegrid-item.fk-excel .filegrid-ico{background:color-mix(in srgb,#059669 14%,var(--surface-1))}
.filegrid-item.fk-excel .filegrid-ico .ico{color:#059669;-webkit-text-fill-color:#059669}
.filegrid-item.fk-text .filegrid-ico{background:color-mix(in srgb,#64748B 14%,var(--surface-1))}
.filegrid-item.fk-text .filegrid-ico .ico{color:#64748B;-webkit-text-fill-color:#64748B}
.filegrid-item.fk-image .filegrid-ico{background:color-mix(in srgb,#D97706 14%,var(--surface-1))}
.filegrid-item.fk-image .filegrid-ico .ico{color:#D97706;-webkit-text-fill-color:#D97706}
.filegrid-item.fk-attach .filegrid-ico{background:var(--surface-2)}
.filegrid-item.fk-attach .filegrid-ico .ico{color:var(--muted);-webkit-text-fill-color:var(--muted)}
@media (max-width:980px){.filegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.filegrid{grid-template-columns:1fr}}
/* ---------- Kronometri i dosjes (modules/cases/cases_list.php) ---------- */
.timer-face{
font-size:28px;font-weight:700;letter-spacing:2px;color:var(--text);
font-variant-numeric:tabular-nums;margin:4px 0;
}
/* ============================================================
KALENDARI PROFESIONAL (modules/calendar/calendar_list.php)
FullCalendar ngjyroset me variablat e temës aktive → punon në të 23 temat.
============================================================ */
.cal-shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.cal-side{display:flex;flex-direction:column;gap:var(--sp-4)}
.cal-panel{padding:14px 16px}
.cal-panel-h{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);margin-bottom:8px}
.cal-filter{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:var(--fs-sm);color:var(--text);cursor:pointer}
.cal-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.cal-dot-dashed{background:transparent;border:2px dashed;width:12px;height:12px;box-sizing:border-box}
.cal-main{padding:14px;position:relative;min-height:520px}
.cal-loading{position:absolute;top:18px;right:20px;z-index:5}
.cal-loading .spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--sel);border-radius:50%;animation:aiSpin .7s linear infinite}
.cal-head-actions{align-items:center;flex-wrap:wrap}
.cal-up{display:flex;gap:10px;align-items:center;padding:8px 6px;border-radius:var(--r-md);text-decoration:none;transition:background var(--t-fast)}
.cal-up:hover{background:var(--surface-3)}
.cal-up-date{flex:0 0 42px;text-align:center;border-radius:var(--r-md);padding:4px 0;background:color-mix(in srgb,var(--c) 14%,var(--surface-1));border-left:3px solid var(--c)}
.cal-up-date b{display:block;font-size:16px;line-height:1.1;color:var(--text)}
.cal-up-date small{font-size:10px;text-transform:uppercase;color:var(--muted)}
.cal-up-body{min-width:0}
.cal-up-body strong{display:block;font-size:var(--fs-sm);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-up-body small{color:var(--muted);font-size:var(--fs-xs)}
/* --- FullCalendar: variablat e temës --- */
.fc{
--fc-border-color:var(--line);--fc-page-bg-color:transparent;
--fc-neutral-bg-color:var(--surface-3);--fc-neutral-text-color:var(--muted);
--fc-today-bg-color:color-mix(in srgb,var(--sel) 9%,transparent);
--fc-now-indicator-color:#DC2626;
--fc-list-event-hover-bg-color:var(--surface-3);
--fc-non-business-color:color-mix(in srgb,var(--surface-3) 55%,transparent);
--fc-highlight-color:color-mix(in srgb,var(--sel) 18%,transparent);
--fc-button-bg-color:var(--surface-1);--fc-button-border-color:var(--line);--fc-button-text-color:var(--text);
--fc-button-hover-bg-color:var(--surface-3);--fc-button-hover-border-color:var(--line);
--fc-button-active-bg-color:var(--sel);--fc-button-active-border-color:var(--sel);
--fc-event-text-color:#fff;
color:var(--text);font-family:inherit;
}
.fc .fc-toolbar{gap:8px;flex-wrap:wrap;margin-bottom:14px!important}
.fc .fc-toolbar-title{font-size:var(--fs-xl);font-weight:700;text-transform:capitalize;color:var(--text)}
.fc .fc-button{border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;padding:.4em .8em;box-shadow:none!important;text-transform:capitalize}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active{color:var(--on-gold);background:var(--sel);border-color:var(--sel)}
.fc .fc-button-primary:disabled{opacity:.5}
.fc .fc-col-header-cell-cushion,.fc .fc-daygrid-day-number,.fc .fc-list-day-text,.fc .fc-list-day-side-text{color:var(--text);text-decoration:none}
.fc .fc-col-header-cell{background:var(--surface-3);padding:6px 0;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.fc .fc-daygrid-day-number{font-size:var(--fs-sm);padding:6px 8px}
.fc .fc-day-today .fc-daygrid-day-number{background:var(--sel);color:var(--on-gold);border-radius:999px;margin:4px;padding:2px 8px}
.fc .fc-day-other .fc-daygrid-day-top{opacity:.45}
.fc .fc-timegrid-slot-label,.fc .fc-timegrid-axis-cushion{font-size:var(--fs-xs);color:var(--muted)}
.fc .fc-event{border-radius:6px;font-size:12px;cursor:pointer;padding:1px 3px;border-width:0;border-left:3px solid rgba(0,0,0,.25)}
.fc .fc-daygrid-event{margin:1px 3px}
.fc .fc-event:hover{filter:brightness(1.08);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fc .fc-event.fc-layer{border-left-style:dashed;opacity:.92}
.fc .fc-event.is-done{opacity:.4;text-decoration:line-through}
.fc .fc-event.has-gcal .fc-event-title::after{content:" ⇄";opacity:.75;font-size:11px}
.fc .fc-daygrid-dot-event .fc-event-title{color:var(--text)}
.fc .fc-list-event td{padding:8px 12px}
.fc .fc-list-day-cushion{background:var(--surface-3)}
.fc .fc-more-link{color:var(--sel);font-weight:600;font-size:11px}
.fc .fc-popover{background:var(--surface-1);border-color:var(--line);box-shadow:var(--elev-3)}
.fc .fc-popover-header{background:var(--surface-3);color:var(--text)}
.fc .fc-multimonth{border-color:var(--line)}
.fc .fc-multimonth-title{color:var(--text)}
.fc .fc-scrollgrid{border-color:var(--line)}
/* --- popup shikimi --- */
.cal-view-box{padding:0;overflow:hidden;width:min(520px,94vw)}
.cal-view-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--sel);color:#fff}
.cal-view-type{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#fff}
.cal-view-head .modal-close{background:rgba(255,255,255,.2);color:#fff}
.cal-view-title{margin:16px 20px 6px;font-size:var(--fs-xl);color:var(--text)}
.cal-view-rows{padding:4px 20px 0}
.cal-view-box>.btn-row{padding:0 20px 20px}
.cal-vrow{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-base);color:var(--text)}
.cal-vrow:last-child{border-bottom:0}
.cal-vico{flex:0 0 22px;text-align:center}
.cal-vrow small{display:block;color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px}
.cal-vbadge{margin:12px 0 4px;display:inline-block;padding:4px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;background:color-mix(in srgb,#4285F4 14%,var(--surface-1));color:#2B62C9}
.cal-danger{color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 40%,var(--line))!important}
/* --- toast --- */
.cal-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:400;max-width:min(560px,92vw);
background:var(--deep-2);color:#fff;padding:11px 18px;border-radius:999px;font-size:var(--fs-sm);
box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .25s,transform .25s}
.cal-toast.is-in{opacity:1;transform:translate(-50%,0)}
.cal-toast.is-bad{background:#B91C1C}
/* --- Google Calendar: pill, panel --- */
.gcal-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
background:var(--surface-1);color:var(--text);font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.gcal-pill small{font-weight:500;color:var(--muted)}
.gcal-dot{width:8px;height:8px;border-radius:50%;background:#9CA3AF;display:inline-block}
.gcal-pill.is-ok .gcal-dot{background:#16A34A;box-shadow:0 0 0 3px color-mix(in srgb,#16A34A 25%,transparent)}
.gcal-pill.is-bad{border-color:#FCA5A5;color:#B91C1C}.gcal-pill.is-bad .gcal-dot{background:#DC2626}
.btn.is-loading{opacity:.6;pointer-events:none}
.gcal-status{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
border:1px solid var(--line);border-left:4px solid #16A34A;border-radius:var(--r-lg);padding:14px 18px;background:var(--surface-1)}
.gcal-status.is-bad{border-left-color:#DC2626}
.gcal-stats{display:flex;gap:22px}
.gcal-stats span{text-align:center}.gcal-stats b{display:block;font-size:22px;color:var(--text)}
.gcal-stats small{color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.gcal-warn{color:#B45309}
.gcal-box{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 18px;margin:16px 0;background:var(--surface-2)}
.gcal-steps{margin:10px 0 0 18px;padding:0;line-height:1.65;color:var(--text);font-size:var(--fs-sm)}
.gcal-steps li{margin-bottom:6px}
.gcal-copy{display:flex;gap:8px;margin-top:6px}.gcal-copy input{flex:1;font-family:ui-monospace,monospace;font-size:12px}
.gcal-code{display:block;margin-top:8px;padding:8px 10px;border-radius:var(--r-md);background:var(--surface-3);border:1px solid var(--line);
font-family:ui-monospace,monospace;font-size:12px;word-break:break-all;color:var(--text)}
.gcal-types{display:flex;flex-wrap:wrap;gap:6px 18px}
.gcal-options{margin-top:6px}
@media (max-width:960px){.cal-shell{grid-template-columns:1fr}.cal-side{order:2}.gcal-stats{gap:14px}}
@media print{
.cal-side,.cal-head-actions,.page-head .btn-row,.fc .fc-toolbar .fc-button-group,.cal-toast{display:none!important}
.cal-shell{display:block}.cal-main{border:0;box-shadow:none;padding:0}
.fc .fc-event{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Atributi [hidden] duhet të fshehë gjithmonë — pa këtë .btn/.flash (display:inline-flex/block) e mbivendosin. */
[hidden]{display:none!important}
/* ---------- Kapça e login-it (login.php) ---------- */
.captcha-row{display:flex;align-items:center;gap:8px}
.captcha-img{height:42px;width:132px;border-radius:5px;border:1px solid rgba(15,23,42,.08);flex:0 0 auto}
.captcha-refresh{
flex:0 0 auto;width:36px;height:36px;border-radius:8px;border:1px solid #E2E8F0;
background:#F8FAFC;color:#475569;font-size:17px;cursor:pointer;line-height:1;
transition:transform .2s ease,background .15s ease;
}
.captcha-refresh:hover{background:#F1F5F9;transform:rotate(75deg)}
.captcha-input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:2px;text-align:center;font-weight:700}
/* ---------- Paraparjet e reja te Settings → Login (kartat e temave 3D) ---------- */
.login-theme-opt-preview.lt-glass{background:linear-gradient(150deg,#0B0F2A,#8B5CF6 60%,#38BDF8)}
.login-theme-opt-preview.lt-aurora{background:linear-gradient(150deg,#05070F,#22D3AA 55%,#0D1B2A)}
.login-bg-preview{
width:100%;max-width:340px;height:120px;border-radius:var(--r-lg);
background-size:cover;background-position:center;border:1px solid var(--line);
margin:8px 0;
}