/* ============================================================
HR World — Design System · DARK
Modern SaaS admin. Shared across all 6 screens.
Every page links to ../styles.css and copies the shell
from pages/_shell.html verbatim so the frame is identical.
============================================================ */
/* ---------- Design tokens · DARK ---------- */
:root {
/* BRAND / PRIMARY — indigo lifts on dark; hover LIGHTENS (raised) */
--primary: #818cf8; /* indigo-400 — buttons, links, active */
--primary-hover:#a5b4fc; /* indigo-300 — hover goes lighter */
--primary-soft: #1e2140; /* deep indigo wash — active nav/chips */
--primary-glow: rgba(129,140,248,.30); /* focus ring / halo */
/* SURFACE HIERARCHY (4 levels by luminance; sidebar recedes below page) */
--sidebar-bg:#080b14; /* L-1 sidebar — darkest */
--bg: #0a0e1a; /* L0 page — deep navy, never black */
--card: #121829; /* L1 raised panel */
--surface: #1a2138; /* L2 inputs/insets/legends (fixes undefined) */
--elevated:#212a45; /* L3 popovers / hovered rows / menus */
--card-hover:#1a2138; /* card & row hover = one step up */
/* TEXT HIERARCHY */
--ink: #eef2fb; /* primary — headings, values */
--ink-2: #b7c0d8; /* secondary — body / table cells */
--muted: #7c88a5; /* captions, placeholders, meta */
--ink-faint:#55607a; /* disabled / ghost */
/* BORDERS — translucent white, self-adjust to any surface behind */
--border: rgba(255,255,255,.08);
--border-soft: rgba(255,255,255,.05);
--border-strong:rgba(255,255,255,.14);
/* SEMANTIC BASE — jumped one step brighter (-400) to read on navy */
--success: #34d399;
--warning: #fbbf24;
--danger: #f87171;
--info: #38bdf8;
/* AA TEXT VARIANTS — on dark these go LIGHTER (were dark-for-light) */
--success-ink: #6ee7b7;
--danger-ink: #fca5a5;
--warning-ink: #fcd34d;
--info-ink: #7dd3fc;
/* SOFT FILLS — alpha tints (pastels look chalky on dark) */
--success-soft: rgba(52,211,153,.14);
--warning-soft: rgba(251,191,36,.14);
--danger-soft: rgba(248,113,113,.14);
--info-soft: rgba(56,189,248,.14);
--neutral-soft: rgba(255,255,255,.06);
/* AVATAR PALETTE as tokens — so inline `background:var(--cN)` (roster chips)
resolves to a solid colour (mirrors the .avatar.cN gradients' lead hue). */
--c1: #6366f1; --c2: #0ea5e9; --c3: #16a34a; --c4: #f59e0b;
--c5: #ec4899; --c6: #8b5cf6; --c7: #14b8a6; --c8: #f43f5e;
/* RADII (unchanged) */
--radius: 16px;
/* --radius-lg përdorej te #lgKpis pa ekzistuar, pra rrezja binte në 0 dhe ai bllok
kishte qoshe katrore mes kartash të rrumbullakosura. E njëjta vlerë si fleta e
navigimit, që sipërfaqet e mëdha të kenë një rreze të vetme. */
--radius-lg: 20px;
--radius-sm: 10px;
/* 8px përdorej 62 herë nga .btn-icon si numër magjik. Nuk e zhvendos në 10px —
ai buton është i vogël dhe 10px e bën të duket i fryrë — por i jap emër. */
--radius-xs: 8px;
--radius-pill: 999px;
/* SHADOWS — real black alpha for depth + indigo glow accent */
--shadow: 0 1px 3px rgba(0,0,0,.45);
--shadow-md: 0 6px 20px rgba(0,0,0,.50);
--shadow-lg: 0 18px 44px rgba(0,0,0,.60);
--shadow-glow: 0 4px 18px rgba(129,140,248,.35);
--shadow-inset: inset 0 1px 0 rgba(255,255,255,.04); /* top light edge */
/* 8px spacing scale (unchanged) */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
/* Hapësira e imët për brendinë e komponentëve — rrjeti 8px është shumë i trashë
brenda një karte, dhe pa këto çdo rregull shkruante 4/6/12px me dorë. */
--s0: 4px; --s1h: 12px; --s2h: 20px;
/* ===== SHKALLA E TIPOGRAFISË =====================================
Auditimi numëroi 17 madhësi të ndryshme teksti në dhjetë faqe —
12, 15, 11, 14, 14.5, 10.5, 13, 11.5, 19, 24, 22, 20, 30, 26, 18, 10
dhe një 13.3333px që ishte thjesht parazgjedhja e shfletuesit që kalonte
pa u prekur. Kjo nuk është shkallë, është grumbullim: asnjë prej tyre
s'e dinte për tjetrën.
Tokenët janë vendosur te vlerat që aplikacioni PËRDOR TASHMË më shumë —
12px×38, 13px×25, 14px×19 — jo te një shkallë e bukur teorike. Një shkallë
"e pastër" do të zhvendoste qindra rregulla me 1–2px dhe do të prishte gjëra
që sapo u rregulluan; qëllimi këtu është t'i japë emër asaj që ekziston dhe
të heqë dyfishimet, jo të rilyejë faqet. */
--t-micro: 11px; /* meta, nën-rreshta — thith 10, 10.5, 11.5 */
--t-label: 12px; /* etiketa fushash dhe kartash */
--t-small: 13px; /* tekst dytësor */
--t-body: 14px; /* teksti kryesor — thith 14.5 */
--t-lead: 15px; /* butonat, tekst i theksuar */
/* 16px, jo 15: nën 16px iOS-i e zmadhon faqen sapo fokusohet një fushë. Ky
token ekziston veç pikërisht që një "pastrim" i ardhshëm i tipografisë të
mos e ulë dhe ta rikthejë atë sjellje. */
--t-input: 16px;
--t-title: 17px; /* titulli i kartës — thith 18 */
--t-section: 20px; /* titulli i seksionit — thith 19 */
--t-display: 22px; /* shifra KPI */
--t-display-lg: 26px; /* hero i madh */
/* ===== PREKJA =====================================================
44px është minimumi i rekomanduar; auditimi gjeti 36 inpute bonusi
38px, çipa 36px dhe një çelës 30px. Dy hapa: veprim dhe dytësor. */
--tap: 44px;
--tap-sm: 40px;
/* Layout (unchanged) */
--sidebar-w: 240px;
--topbar-h: 64px;
--content-max: 1200px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
}
/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--ink);
font-size: var(--t-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
::selection { background: #3730a3; color: var(--ink); }
/* Numbers align nicely in tables / KPIs */
.tnum { font-variant-numeric: tabular-nums; }
/* ============================================================
APP SHELL
============================================================ */
.app { min-height: 100%; }
/* ---------- Sidebar (desktop) ---------- */
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-w);
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: var(--s3) var(--s2);
z-index: 60;
/* Lista kishte `overflow: visible`: kur 11 zërat nuk nxinin, "Cilësimet" thjesht pritej
jashtë ekranit pa asnjë mënyrë për ta arritur. Matur: pragu ishte ~591px lartësi dritareje
me zërat 41px, dhe ngritja në 44px e çon në 624px — pra unë e afrova. Rrëshqitja e heq
pragun fare: në 1280x560 "Cilësimet" arrihet, ndërsa më parë as nuk kapej me elementFromPoint. */
overflow-y: auto;
overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); }
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 0 var(--s1) var(--s2);
margin-bottom: var(--s2);
}
/* Shenja e vërtetë, pa pllakë. Gradienti me shkronjat "HR" ishte vendmbajtëse;
një shenjë e mbyllur në katror me ngjyrë duket si ngjitëse, ndërsa e zhveshur
mbi sfondin e shiritit duket markë. Edhe më e vogël se më parë — vetë figura
ka 12% hapësirë brenda saj, pra lexohet më e qetë se 34px-shi i mëparshëm. */
.brand-logo {
width: 30px; height: 30px;
display: grid; place-items: center;
flex: none;
}
.brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name {
font-weight: 800; font-size: var(--t-title); letter-spacing: -.2px;
color: var(--ink);
}
.brand-name span { color: var(--primary); }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label {
font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
padding: var(--s2) var(--s1) 6px;
}
.nav-item {
display: flex; align-items: center; gap: 12px;
/* Matur 227x41 në telefon dhe 207x41 në desktop: nën masë te i vetmi komponent që
preket në ÇDO faqe. 44px i shton listës me 10 zëra ~30px — e rimata te 1280x900
se .nav-bottom ("Cilësimet") mbetet brenda ekranit pa rrëshqitje. */
min-height: var(--tap);
padding: 10px var(--s1) 10px 12px;
border-radius: var(--radius-sm);
color: var(--muted);
font-weight: 600; font-size: var(--t-body);
transition: background .15s, color .15s;
position: relative;
}
.nav-item svg { width: 20px; height: 20px; flex: none; }
.nav-item:hover { background: var(--neutral-soft); color: var(--ink); }
.nav-item.active {
background: var(--primary-soft);
color: var(--primary);
}
.nav-item.active::before {
content: ""; position: absolute; left: -16px;
top: 8px; bottom: 8px; width: 3px;
border-radius: 0 3px 3px 0; background: var(--primary);
}
.nav-item .nav-count {
margin-left: auto;
font-size: var(--t-micro); font-weight: 700;
background: var(--neutral-soft); color: var(--muted);
padding: 2px 8px; border-radius: var(--radius-pill);
}
.nav-item.active .nav-count { background: var(--primary-soft); color: var(--primary); }
.nav-bottom { margin-top: auto; padding-top: var(--s2); }
/* ---------- Top bar ---------- */
.main {
margin-left: var(--sidebar-w);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.topbar {
position: sticky; top: 0;
height: var(--topbar-h);
background: rgba(10, 14, 26, .82);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: var(--s2);
padding: 0 var(--s4);
z-index: 50;
}
.topbar .page-title { margin-right: auto; }
.hamburger {
display: none;
/* 40x40 — dhe ky është butoni që hap gjithë navigimin në telefon.
`flex: none` sepse .topbar është flex: pa të, butoni tkurrej nga titulli i faqes
dhe matej 34px i gjerë te Transaksionet në 320px, edhe pasi u caktua 44px. */
flex: none; width: var(--tap); height: var(--tap);
border: 1px solid var(--border); background: var(--elevated);
border-radius: var(--radius-sm);
place-items: center;
}
.hamburger svg { width: 20px; height: 20px; color: var(--ink); }
/* .searchbox dhe .field-search janë i njëjti komponent me dy emra. Trupi mbetet i
ndarë sepse njëri rri në shiritin lart me gjerësi fikse, tjetri brenda përmbajtjes —
por prekja tani matet njësoj: inputi e mbush fushën, jo 19px në mes të saj.
Padding-u vertikal bie në 0 pikërisht që kjo të mos e nxjerrë 46px-shin mbi
shiritin 64px të lartë: 44px input + 2px kornizë = 46px. */
.searchbox {
display: flex; align-items: center; gap: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 0 14px;
width: 260px;
color: var(--muted);
transition: border-color .15s, box-shadow .15s;
}
.searchbox:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-glow);
}
.searchbox svg { width: 16px; height: 16px; flex: none; }
.searchbox input {
border: 0; outline: 0; background: transparent;
font-size: var(--t-body); color: var(--ink); width: 100%;
/* Matur 206x19: prekja pranë buzëve binte mbi mbështjellësin, jo mbi inputin —
e njëjta ndreqje që .field-search input e ka tashmë. */
align-self: stretch; min-height: var(--tap);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.icon-btn {
position: relative;
/* "Dil" ishte 40x40 në të 13 faqet. `flex: none` për të njëjtën arsye si te .hamburger. */
flex: none; width: var(--tap); height: var(--tap);
display: grid; place-items: center;
border: 1px solid var(--border); background: var(--elevated);
border-radius: var(--radius-sm);
color: var(--ink);
transition: background .15s;
}
.icon-btn:hover { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
/* .icon-btn .dot removed with the notification bell — nothing renders it now. */
.user {
display: flex; align-items: center; gap: 10px;
padding-left: var(--s1);
}
.user-meta { line-height: 1.2; }
.user-name { font-weight: 700; font-size: var(--t-small); }
.user-role { font-size: var(--t-label); color: var(--muted); }
/* ---------- Content area ---------- */
.content {
flex: 1;
padding: var(--s4);
max-width: var(--content-max);
width: 100%;
margin: 0 auto;
}
/* ---------- Bottom nav (mobile only) ---------- */
.bottomnav { display: none; }
/* ============================================================
TYPOGRAPHY / HEADERS
============================================================ */
/* min-width:0 sepse .topbar është flex dhe titulli ka `margin-right:auto`: pa këtë ai
nuk lëshon dot hapësirë dhe i tkurr butonat 44px përreth në 320px. Tani pritet vetë. */
.page-title {
font-size: var(--t-section); font-weight: 800; letter-spacing: -.3px;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--s2); flex-wrap: wrap;
margin-bottom: var(--s3);
}
.welcome h1 {
font-size: var(--t-display-lg); font-weight: 800; letter-spacing: -.5px;
margin-bottom: 4px;
}
.welcome h1 .wave { display: inline-block; }
.welcome p { color: var(--muted); font-size: var(--t-body); }
.section-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s2);
}
.section-title { font-size: var(--t-input); font-weight: 700; }
.section-link { color: var(--primary); font-weight: 600; font-size: var(--t-small); }
.section-link:hover { color: var(--primary-hover); }
.eyebrow {
font-size: var(--t-label); font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted);
}
/* ============================================================
LAYOUT HELPERS
============================================================ */
.grid { display: grid; gap: var(--s3); }
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s2);
margin-bottom: var(--s3);
}
.cols-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s3); }
.cols-2e { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.cols-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s3); }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
/* ============================================================
CARD
============================================================ */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: var(--s3);
}
.card.tight { padding: var(--s2); }
.card-head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s2); margin-bottom: var(--s3);
}
.card-title { font-size: var(--t-lead); font-weight: 700; }
.card-sub { font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
/* ============================================================
KPI TILE
============================================================ */
.kpi { position: relative; }
.kpi-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.kpi-ico {
width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center;
background: var(--primary-soft); color: var(--primary);
}
.kpi-ico svg { width: 20px; height: 20px; }
.kpi-ico.green { background: var(--success-soft); color: var(--success-ink); }
.kpi-ico.amber { background: var(--warning-soft); color: var(--warning-ink); }
.kpi-ico.red { background: var(--danger-soft); color: var(--danger-ink); }
.kpi-ico.blue { background: var(--info-soft); color: var(--info-ink); }
.kpi-value {
font-size: 28px; font-weight: 800; letter-spacing: -.6px;
line-height: 1.1;
}
.kpi-value small { font-size: var(--t-input); font-weight: 700; color: var(--muted); }
.kpi-label { color: var(--muted); font-size: var(--t-small); margin-top: 4px; font-weight: 500; }
/* trend chip up/down */
.trend {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--t-label); font-weight: 700;
padding: 3px 8px; border-radius: var(--radius-pill);
}
.trend svg { width: 13px; height: 13px; }
.trend.up { color: var(--success-ink); background: var(--success-soft); }
.trend.down { color: var(--danger-ink); background: var(--danger-soft); }
.trend.flat { color: var(--muted); background: var(--neutral-soft); }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
/* `height` e jo `min-height`: kjo ishte 40px e fiksuar, pra çdo rregull tjetër me
min-height (edhe ai i faqes) e humbte pa dukur — matur 164x40 te "Shto përdorues"
dhe 121x40 te "Eksporto". Kush do një buton më të vogël e thotë me .btn-sm. */
height: var(--tap); padding: 0 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--elevated); color: var(--ink);
font-weight: 600; font-size: var(--t-body);
transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--surface); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: linear-gradient(135deg, #6366f1, #4f46e5);
border: 1px solid #6366f1; color: #fff;
box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover {
background: linear-gradient(135deg, #7c83ff, #5b52f0);
border-color: var(--primary-hover);
box-shadow: 0 6px 24px var(--primary-glow), 0 0 0 3px rgba(99,102,241,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { background: var(--neutral-soft); border-color: var(--border-strong); color: var(--ink); }
.btn-danger { background: var(--danger-soft); border: 1px solid rgba(248,113,113,.35); color: var(--danger-ink); }
.btn-danger:hover { background: linear-gradient(135deg,#ef4444,#dc2626); border-color:#ef4444; color:#fff; }
.btn-success { background: var(--success-soft); border: 1px solid rgba(52,211,153,.35); color: var(--success-ink); }
.btn-success:hover { background: linear-gradient(135deg,#22c55e,#16a34a); border-color:#22c55e; color:#fff; }
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--t-small); border-radius: 8px; }
.btn-block { width: 100%; }
/* ============================================================
TABLE
============================================================ */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.table thead th {
text-align: left;
font-size: var(--t-label); font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--muted);
padding: 0 var(--s2) 12px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.table tbody td {
padding: 14px var(--s2);
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--ink-2);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s, box-shadow .12s; }
.table tbody tr:hover { background: rgba(129,140,248,.07); box-shadow: inset 3px 0 0 var(--primary); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .strong { font-weight: 700; color: var(--ink); }
.person { display: flex; align-items: center; gap: 12px; }
.person-name { font-weight: 600; color: var(--ink); }
.person-sub { font-size: var(--t-label); color: var(--muted); }
/* ============================================================
BADGES
============================================================ */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--t-label); font-weight: 600;
padding: 4px 10px; border-radius: var(--radius-pill);
background: var(--neutral-soft); color: var(--muted);
white-space: nowrap;
}
.badge::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; opacity: .9;
}
.badge.success { background: var(--success-soft); color: var(--success-ink); }
.badge.warning { background: var(--warning-soft); color: var(--warning-ink); }
.badge.danger { background: var(--danger-soft); color: var(--danger-ink); }
.badge.info { background: var(--info-soft); color: var(--info-ink); }
.badge.neutral { background: var(--neutral-soft); color: var(--muted); }
.badge.plain::before { display: none; }
/* ============================================================
AVATAR
============================================================ */
.avatar {
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
font-weight: 700; font-size: var(--t-small); color: #fff;
background: var(--primary);
flex: none; user-select: none;
}
.avatar.sm { width: 30px; height: 30px; font-size: var(--t-micro); }
.avatar.lg { width: 48px; height: 48px; font-size: var(--t-input); }
/* deterministic palette variants (assign per person) */
.avatar.c1 { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.avatar.c2 { background: linear-gradient(135deg,#0ea5e9,#0369a1); }
.avatar.c3 { background: linear-gradient(135deg,#16a34a,#15803d); }
.avatar.c4 { background: linear-gradient(135deg,#f59e0b,#d97706); }
.avatar.c5 { background: linear-gradient(135deg,#ec4899,#be185d); }
.avatar.c6 { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.avatar.c7 { background: linear-gradient(135deg,#14b8a6,#0f766e); }
.avatar.c8 { background: linear-gradient(135deg,#f43f5e,#be123c); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 2px solid var(--card); margin-left: -10px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .more {
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: var(--neutral-soft); color: var(--muted);
font-weight: 700; font-size: var(--t-label);
border: 2px solid var(--card); margin-left: -10px;
}
/* ============================================================
PROGRESS BAR
============================================================ */
.progress {
height: 8px; border-radius: var(--radius-pill);
background: rgba(255,255,255,.06); overflow: hidden; width: 100%;
box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.progress > span {
display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg,#818cf8,#6366f1);
transition: width .4s ease;
}
.progress.green > span { background: linear-gradient(90deg,#4ade80,#22c55e); }
.progress.amber > span { background: linear-gradient(90deg,#fbbf24,#f59e0b); }
.progress.red > span { background: linear-gradient(90deg,#f87171,#ef4444); }
.progress.thin { height: 6px; }
/* ============================================================
CHART — pure CSS vertical bars
============================================================ */
.chart-bars {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--s2); height: 200px;
padding-top: var(--s2);
}
.chart-bars .bar-col {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 10px;
height: 100%;
justify-content: flex-end;
}
.chart-bars .bar-track {
width: 100%;
display: flex; align-items: flex-end; justify-content: center;
flex: 1;
}
.chart-bars .bar {
width: 60%; max-width: 34px;
border-radius: 8px 8px 4px 4px;
background: linear-gradient(180deg, #818cf8, #4f46e5);
position: relative;
transition: filter .15s;
min-height: 6px;
}
.chart-bars .bar:hover { filter: brightness(1.08); }
.chart-bars .bar.muted { background: linear-gradient(180deg,#334155,#1e293b); }
.chart-bars .bar-val {
position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
font-size: var(--t-micro); font-weight: 700; color: var(--ink); white-space: nowrap;
}
.chart-bars .bar-label { font-size: var(--t-label); color: var(--muted); font-weight: 600; }
.chart-legend {
display: flex; gap: var(--s3); flex-wrap: wrap;
margin-top: var(--s2);
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.legend-dot.muted { background: #475569; }
.legend-dot.green { background: var(--success); }
.legend-dot.red { background: var(--danger); }
/* ============================================================
CHIP (filter / tag pills)
============================================================ */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface); color: var(--muted);
font-size: var(--t-small); font-weight: 600;
transition: all .15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--ink); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip svg { width: 15px; height: 15px; }
/* ============================================================
LISTS — activity / performers / alerts
============================================================ */
.list { display: flex; flex-direction: column; }
.list-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.list-item:first-child { padding-top: 0; }
.list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.list-item .li-body { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.list-item .li-sub { font-size: var(--t-label); color: var(--muted); margin-top: 2px; }
.list-item .li-time { font-size: var(--t-label); color: var(--muted); white-space: nowrap; }
/* small round icon token for activity feed */
.li-ico {
width: 34px; height: 34px; border-radius: 10px; flex: none;
display: grid; place-items: center;
background: var(--primary-soft); color: var(--primary);
}
.li-ico svg { width: 17px; height: 17px; }
.li-ico.green { background: var(--success-soft); color: var(--success-ink); }
.li-ico.amber { background: var(--warning-soft); color: var(--warning-ink); }
.li-ico.red { background: var(--danger-soft); color: var(--danger-ink); }
.li-ico.blue { background: var(--info-soft); color: var(--info-ink); }
/* .rank / .score lived here for the Performance leaderboard — page removed, rules removed with it. */
/* money in/out mini summary */
.money-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0; border-bottom: 1px solid var(--border);
}
.money-row:last-of-type { border-bottom: 0; }
.money-left { display: flex; align-items: center; gap: 12px; }
.money-amount { font-weight: 800; font-size: var(--t-input); font-variant-numeric: tabular-nums; }
.money-amount.pos { color: var(--success-ink); }
.money-amount.neg { color: var(--danger-ink); }
.money-net {
margin-top: var(--s2); padding-top: var(--s2);
border-top: 2px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.money-net .label { font-weight: 700; color: var(--ink); }
.money-net .val { font-size: var(--t-display); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* alert / reminder card */
.alert-item {
display: flex; gap: 12px; align-items: flex-start;
padding: 12px; border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border);
}
.alert-item + .alert-item { margin-top: 10px; }
.alert-item .li-ico { width: 32px; height: 32px; }
.alert-item .a-title { font-weight: 600; font-size: var(--t-body); }
.alert-item .a-sub { font-size: var(--t-label); color: var(--muted); margin-top: 2px; }
/* generic helpers */
.muted { color: var(--muted); }
.mt1 { margin-top: var(--s1); } .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); }
.mb0 { margin-bottom: 0; } .mb2 { margin-bottom: var(--s2); } .mb3 { margin-bottom: var(--s3); }
.dot-sep { color: var(--border-strong); padding: 0 6px; }
.right { margin-left: auto; }
.text-success { color: var(--success-ink); } .text-danger { color: var(--danger-ink); } .text-warn { color: var(--warning-ink); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--s2) 0; }
/* ============================================================
PAYROLL — month selector, payslip preview, table footer
(added by Payroll screen; reuses existing tokens only)
============================================================ */
/* month stepper (‹ July 2026 ›) */
.month-select {
display: inline-flex; align-items: center;
border: 1px solid var(--border);
background: var(--elevated);
border-radius: var(--radius-sm);
overflow: hidden;
height: 40px;
}
/* 38px në desktop kundrejt 44px te shiriti i Prezencës: i njëjti kontroll, dy përmasa.
Fiton 44 — është shigjeta që ndërron muajin te Pagat, Bonuset, Shpenzimet e Depozitat. */
.month-arrow {
width: var(--tap); height: 100%; min-height: var(--tap);
display: grid; place-items: center;
border: 0; background: transparent; color: var(--muted);
transition: background .15s, color .15s;
}
.month-arrow:hover { background: var(--primary-soft); color: var(--primary); }
.month-arrow svg { width: 18px; height: 18px; }
.month-label {
display: inline-flex; align-items: center; gap: 8px;
padding: 0 14px; height: 100%;
font-weight: 700; font-size: var(--t-body); color: var(--ink);
white-space: nowrap;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.month-label svg { width: 16px; height: 16px; color: var(--primary); }
/* table footer total row */
.table tfoot td {
padding: 16px var(--s2);
border-top: 2px solid var(--border);
font-variant-numeric: tabular-nums;
background: var(--surface);
}
.table tfoot .strong { font-weight: 800; }
/* payslip card */
.payslip-head { display: flex; align-items: center; gap: 14px; }
.payslip-name { font-size: var(--t-title); font-weight: 800; letter-spacing: -.2px; }
.payslip-role { font-size: var(--t-small); color: var(--ink); }
.payslip-role.muted { color: var(--muted); font-size: var(--t-label); margin-top: 2px; }
.pay-line {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 0; font-size: var(--t-body);
}
.pay-line > span:first-child { color: var(--muted); }
.pay-line > span:last-child { font-weight: 600; color: var(--ink); }
.pay-line.subtotal {
margin-top: 4px; padding-top: 12px;
border-top: 1px dashed var(--border);
}
.pay-line.subtotal > span { color: var(--ink); font-weight: 700; }
.payslip-net {
margin-top: var(--s2);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s2);
padding: 16px 18px;
border-radius: var(--radius-sm);
background: var(--primary-soft);
border: 1px solid rgba(129,140,248,.20);
}
.pn-label { font-size: var(--t-small); font-weight: 700; color: var(--primary); }
.pn-sub { font-size: var(--t-label); color: var(--muted); margin-top: 2px; }
.pn-value {
font-size: var(--t-display-lg); font-weight: 800; letter-spacing: -.5px;
color: var(--primary); font-variant-numeric: tabular-nums;
}
/* ============================================================
RESPONSIVE — tablet
============================================================ */
@media (max-width: 1100px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.cols-2, .cols-2e { grid-template-columns: 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr; }
.searchbox { width: 180px; }
}
/* ============================================================
RESPONSIVE — mobile (≤900px)
sidebar → off-canvas drawer; bottom tab bar appears
============================================================ */
@media (max-width: 900px) {
/* sidebar becomes a slide-in drawer toggled by hamburger */
.sidebar {
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: var(--shadow-lg);
width: 260px;
}
body.nav-open .sidebar { transform: translateX(0); }
.scrim {
position: fixed; inset: 0; background: rgba(0,0,0,.6);
opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 55;
}
body.nav-open .scrim { opacity: 1; pointer-events: auto; }
.main { margin-left: 0; }
.hamburger { display: grid; }
.searchbox { display: none; }
.topbar { padding: 0 var(--s2); height: 60px; }
/* Hapësira 16px midis katër zërave hante 48px nga një shirit 320px. Pasi hamburgeri
dhe "Dil" u ngritën në 44px e nuk tkurren më, ajo hapësirë e paguan titulli: matur,
"Transaksionet" donte 138px dhe kishte 106px, pra pritej. Me 8px hapësirë dhe
titullin te --t-title, i plotë hyn edhe në 320px — u rimat. */
.topbar { gap: var(--s1); }
.topbar .page-title { font-size: var(--t-title); }
.content {
padding: var(--s2);
padding-bottom: calc(72px + var(--s3)); /* clear bottom nav */
}
.kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s1); }
.kpi { padding: var(--s2); }
.kpi-value { font-size: 24px; }
/* every multi-column layout collapses to one column */
.cols-2, .cols-2e, .cols-3 { grid-template-columns: 1fr; gap: var(--s2); }
.welcome h1 { font-size: var(--t-display); }
/* hide the desktop user meta text on small screens, keep avatar */
.user-meta { display: none; }
/* bottom nav */
.bottomnav {
display: flex;
position: fixed; left: 0; right: 0; bottom: 0;
height: 64px;
background: rgba(10,14,26,.92);
backdrop-filter: saturate(180%) blur(12px);
border-top: 1px solid var(--border);
z-index: 60;
padding: 0 4px;
box-shadow: 0 -2px 12px rgba(0,0,0,.5);
}
.bottomnav a, .bottomnav .nav-more {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
color: var(--muted);
font-size: var(--t-micro); font-weight: 600;
padding: 8px 0;
position: relative;
}
.bottomnav a svg, .bottomnav .nav-more svg { width: 22px; height: 22px; }
.bottomnav a.active, .bottomnav .nav-more.active { color: var(--primary); }
.bottomnav a.active::before, .bottomnav .nav-more.active::before {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
}
}
/* very small phones (≤400px): single column KPIs stay 2-up but tighten */
@media (max-width: 380px) {
.content { padding: 12px; padding-bottom: calc(72px + var(--s2)); }
.card { padding: var(--s2); }
.chart-bars { gap: 6px; }
.kpi-value { font-size: var(--t-display); }
/* Filter chips — shrink long labels so toolbar fits in one screen */
.toolbar .chips .chip,
.chips .chip {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
}
/* ---------- Payroll: header controls wrap neatly on mobile ---------- */
@media (max-width: 900px) {
/* the month selector + export/run buttons stack full-width, no overflow */
.page-head > .row { width: 100%; flex-wrap: wrap; gap: var(--s1); }
.page-head .month-select { flex: 1 1 100%; justify-content: space-between; }
.page-head .month-select .month-label { flex: 1; justify-content: center; }
.page-head > .row > .btn { flex: 1; }
/* keep the payslip net value readable when it sits full-width */
.payslip-net { padding: 14px; }
}
/* Grid children must be allowed to shrink below content width so an inner
.table-wrap (overflow-x:auto) scrolls internally instead of widening the
page — prevents any horizontal page scroll at 390px. */
.cols-2 > *, .cols-2e > *, .cols-3 > * { min-width: 0; }
/* ============================================================
TOOLBAR — search + filter chips + actions above a table
(reusable: Employees / Payroll / Attendance list screens)
============================================================ */
.toolbar {
display: flex; align-items: center; gap: var(--s2);
flex-wrap: wrap; margin-bottom: var(--s3);
}
.toolbar .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar .toolbar-right { margin-left: auto; display: flex; gap: 8px; }
/* a search field that lives inside content (not the topbar) */
.field-search {
display: flex; align-items: center; gap: 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 8px 14px; min-width: 220px;
color: var(--muted);
transition: border-color .15s, box-shadow .15s;
}
.field-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.field-search svg { width: 16px; height: 16px; flex: none; }
.field-search input {
border: 0; outline: 0; background: transparent; color: var(--ink); width: 100%;
font-size: var(--t-body);
/* Inputi ishte 20px i lartë brenda një fushe 48px: prekja pranë buzëve binte mbi
mbështjellësin e jo mbi inputin. Tani e mbush fushën, pra çdo pikë e saj fokuson. */
align-self: stretch; min-height: var(--tap);
}
.field-search input::placeholder { color: var(--ink-faint); }
/* ============================================================
FORM — labelled inputs in a responsive grid
(reusable: register worker, settings, edit record)
============================================================ */
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s2) var(--s3);
}
.form-grid .col-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
font-size: var(--t-label); font-weight: 700; color: var(--ink-2);
display: flex; align-items: center; gap: 6px;
}
.field .hint { font-size: var(--t-label); color: var(--muted); font-weight: 500; }
.input, .select {
height: 42px; padding: 0 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: #0e1424; color: var(--ink);
font-family: inherit; font-size: var(--t-body); width: 100%;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus {
outline: 0; border-color: var(--primary); background: var(--card);
box-shadow: 0 0 0 3px var(--primary-glow);
}
.input::placeholder { color: var(--ink-faint); }
.select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
padding-right: 34px; cursor: pointer;
}
.input-prefix { position: relative; }
.input-prefix > span {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
color: var(--muted); font-weight: 600; pointer-events: none;
}
.input-prefix .input { padding-left: 26px; }
.form-actions {
display: flex; align-items: center; gap: 10px;
margin-top: var(--s3); padding-top: var(--s3);
border-top: 1px solid var(--border);
}
.form-actions .spacer { margin-left: auto; }
/* reveal animation for the inline register panel */
.reveal { display: none; }
.reveal.open { display: block; animation: revealIn .22s ease; }
@keyframes revealIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ============================================================
SEGMENTED TABS (Overview / Attendance / Payroll / …)
============================================================ */
.seg {
display: inline-flex; gap: 2px;
background: var(--surface);
border-radius: var(--radius-sm);
padding: 4px;
}
.seg button {
border: 0; background: transparent;
padding: 7px 12px; border-radius: 8px;
font-weight: 600; font-size: var(--t-small); color: var(--muted);
transition: background .15s, color .15s, box-shadow .15s;
white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.active {
background: var(--elevated); color: var(--primary);
box-shadow: var(--shadow);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: revealIn .18s ease; }
/* ============================================================
SLIDE-IN DRAWER (right-hand employee record preview)
============================================================ */
.drawer-scrim {
position: fixed; inset: 0; background: rgba(0,0,0,.6);
opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 70;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: 440px; max-width: 92vw;
background: var(--bg);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
z-index: 71;
display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
display: flex; align-items: center; gap: var(--s2);
padding: var(--s3); border-bottom: 1px solid var(--border);
background: var(--card);
}
.drawer-head .close {
margin-left: auto;
width: 36px; height: 36px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: var(--elevated);
display: grid; place-items: center; color: var(--ink);
}
.drawer-head .close:hover { background: var(--surface); }
.drawer-head .close svg { width: 18px; height: 18px; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s3); }
/* profile block inside the drawer */
.profile { display: flex; align-items: center; gap: var(--s2); }
.profile .avatar { width: 56px; height: 56px; font-size: var(--t-title); }
.profile h3 { font-size: var(--t-title); font-weight: 800; letter-spacing: -.3px; }
.profile .p-sub { color: var(--muted); font-size: var(--t-small); margin-top: 2px; }
/* key/value facts grid */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.fact .k { font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fact .v { font-weight: 600; font-size: var(--t-body); margin-top: 3px; }
.fact.col-2 { grid-column: 1 / -1; }
/* simple stat pills used in record tabs */
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-stat {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 12px; text-align: center;
}
.mini-stat .n { font-size: var(--t-section); font-weight: 800; letter-spacing: -.4px; }
.mini-stat .l { font-size: var(--t-micro); color: var(--muted); margin-top: 2px; font-weight: 600; }
/* document rows */
.doc-row {
display: flex; align-items: center; gap: 12px;
padding: 12px; border: 1px solid var(--border);
border-radius: var(--radius-sm); background: var(--surface);
}
.doc-row + .doc-row { margin-top: 10px; }
.doc-row .li-ico { width: 34px; height: 34px; }
.doc-row .d-name { font-weight: 600; font-size: var(--t-body); }
.doc-row .d-meta { font-size: var(--t-label); color: var(--muted); margin-top: 2px; }
.doc-row .d-dl { margin-left: auto; color: var(--muted); }
.doc-row .d-dl:hover { color: var(--primary); }
.doc-row .d-dl svg { width: 18px; height: 18px; }
/* view-toggle (table vs grid) — icon buttons */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle button {
width: 38px; height: 40px; display: grid; place-items: center;
background: var(--elevated); border: 0; color: var(--muted);
border-left: 1px solid var(--border);
}
.view-toggle button:first-child { border-left: 0; }
.view-toggle button.active { background: var(--primary-soft); color: var(--primary); }
.view-toggle button svg { width: 18px; height: 18px; }
/* clickable table rows */
.table tbody tr.clickable { cursor: pointer; }
/* payroll status cell: badge with hover-revealed per-row actions */
.pay-status-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.pay-status-cell .pay-badge { flex: 0 0 auto; }
.row-actions {
display: inline-flex; align-items: center; gap: 4px;
opacity: 0; transition: opacity .12s; pointer-events: none;
}
.table tbody tr:hover .row-actions,
.table tbody tr:focus-within .row-actions { opacity: 1; pointer-events: auto; }
.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
border-radius: var(--radius-xs); border: 1px solid var(--border);
background: var(--elevated); color: var(--muted);
transition: background .12s, color .12s, border-color .12s;
}
.btn-icon:hover { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-icon:active { transform: translateY(1px); }
.btn-icon svg { width: 15px; height: 15px; }
/* touch devices have no hover: keep actions visible so HR can reach them */
@media (hover: none) { .row-actions { opacity: 1; pointer-events: auto; } }
/* live net readout inside the edit modal */
.pay-net-readout {
display: flex; align-items: center; justify-content: space-between;
background: var(--primary-soft); border-radius: 12px; padding: 12px 16px;
margin: 4px 0 14px;
box-shadow: inset 0 0 0 1px rgba(129,140,248,.20);
}
.pay-net-readout .pnr-label { font-weight: 600; color: var(--ink-2); }
.pay-net-readout .pnr-value { font-size: var(--t-section); font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.pay-net-readout.invalid { background: var(--danger-soft); box-shadow: inset 0 0 0 1px rgba(248,113,113,.3); }
.pay-net-readout.invalid .pnr-value { color: var(--danger-ink); }
/* people grid (card view alternative to the table) */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.person-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
padding: var(--s3); cursor: pointer;
transition: box-shadow .15s, transform .05s, border-color .15s;
}
.person-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.person-card:active { transform: translateY(1px); }
.person-card .pc-top { display: flex; align-items: center; gap: 12px; }
.person-card .pc-name { font-weight: 700; }
.person-card .pc-role { font-size: var(--t-label); color: var(--muted); }
.person-card .pc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); }
.person-card .pc-salary { font-weight: 800; font-variant-numeric: tabular-nums; }
/* responsive tweaks for the new components */
@media (max-width: 1100px) {
.people-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.form-grid { grid-template-columns: 1fr; }
.facts { grid-template-columns: 1fr 1fr; }
.people-grid { grid-template-columns: 1fr; }
.drawer { width: 100%; max-width: 100%; }
.toolbar .toolbar-right { margin-left: 0; width: 100%; }
.field-search { min-width: 0; flex: 1; }
}
@media (max-width: 380px) {
.facts { grid-template-columns: 1fr; }
.mini-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-stat { padding: 10px 6px; }
}
/* The STAR RATING block (.stars / .star-muted) belonged to the Performance screen — removed with it. */
/* Fix: allow grid/flex children (cards) to shrink so inner .table-wrap scrolls instead of overflowing the page on mobile */
.card, .cols-2 > *, .cols-2e > *, .cols-3 > *, .grid > *, .main, .content { min-width: 0; }
/* ============================================================
OFFICE-CONTROL — "Kontrolli i Zyrës" additions
Screens: Depozitat, Shpenzimet, Pagat (team), Dashboard
============================================================ */
/* ---- team badges (FTD / Retention / Zyra) ---- */
.badge.team-ftd { background: var(--info-soft); color: var(--info-ink); }
.badge.team-retention { background: var(--success-soft); color: var(--success-ink); }
.badge.team-zyra { background: var(--neutral-soft); color: var(--muted); }
/* ---- payment-method chip (Kesh / Banka / Kripto) ---- */
.method-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--t-label); font-weight: 600;
padding: 3px 9px; border-radius: var(--radius-pill);
background: var(--neutral-soft); color: var(--muted);
white-space: nowrap;
}
.method-chip.cash { background: var(--success-soft); color: var(--success-ink); }
.method-chip.bank { background: var(--info-soft); color: var(--info-ink); }
.method-chip.crypto { background: var(--warning-soft); color: var(--warning-ink); }
/* ---- cash-flow account running balance (extends .money-row usage) ---- */
.acct-balance { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-balance.neg { color: var(--danger-ink); }
/* ---- group breakdown legend swatch (larger than .legend-dot, square) ---- */
.group-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
/* ---- payroll team section header row (if grouped-by-team rows are used) ---- */
.table tbody tr.team-head td {
background: var(--surface); font-weight: 700; color: var(--ink);
text-transform: uppercase; font-size: var(--t-label); letter-spacing: .03em;
}
/* ============================================================
OFFICE-CONTROL — supporting layout helpers
(net-profit hero, group breakdown rows, cash-flow account tiles)
============================================================ */
/* ---- Expense group breakdown row ("Ku shkoi paraja") ---- */
.grp-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.grp-row:last-child { border-bottom: 0; }
.grp-row .grp-top {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s2); margin-bottom: 8px;
}
.grp-row .grp-name {
display: flex; align-items: center; gap: 10px;
font-weight: 600; font-size: var(--t-body); color: var(--ink);
}
.grp-row .grp-amt { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.grp-row .grp-meta { font-size: var(--t-label); color: var(--muted); font-weight: 500; }
/* the coloured fill of a group's progress bar is set inline (per-group colour) */
/* ---- Cash-flow account tiles (Kesh / Banka / Kripto) ---- */
.acct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.acct-tile {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow);
padding: var(--s2);
}
.acct-tile .at-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.acct-tile .at-name { font-weight: 700; font-size: var(--t-body); }
.acct-tile .at-balance {
font-size: var(--t-display); font-weight: 800; letter-spacing: -.4px;
color: var(--ink); font-variant-numeric: tabular-nums;
}
.acct-tile .at-balance.neg { color: var(--danger-ink); }
.acct-tile .at-flow {
display: flex; align-items: center; gap: var(--s2);
margin-top: 8px; font-size: var(--t-label); color: var(--muted);
}
.acct-tile .at-flow .in { color: var(--success-ink); font-weight: 700; }
.acct-tile .at-flow .out { color: var(--danger-ink); font-weight: 700; }
/* small square method icon inside the tile head (reuses kpi-ico soft palette) */
.acct-tile .at-ico {
width: 34px; height: 34px; border-radius: 10px; flex: none;
display: grid; place-items: center;
background: var(--neutral-soft); color: var(--muted);
}
.acct-tile .at-ico svg { width: 17px; height: 17px; }
.acct-tile .at-ico.cash { background: var(--success-soft); color: var(--success-ink); }
.acct-tile .at-ico.bank { background: var(--info-soft); color: var(--info-ink); }
.acct-tile .at-ico.crypto { background: var(--warning-soft); color: var(--warning-ink); }
@media (max-width: 900px) {
.acct-grid { grid-template-columns: 1fr; }
}
/* ============================================================
SCALE KIT — inline bonus, payroll toolbar/running-total/bulk bar,
responsive management cards.
============================================================ */
/* ---- inline bonus editor (payroll Shpërblim cell + mobile card) ---- */
.bonus-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bonus-inline {
display: inline-flex; align-items: center; gap: 2px;
border: 1px solid var(--border); border-radius: 8px;
background: #0e1424; padding: 0 8px 0 8px; height: 34px;
transition: border-color .12s, box-shadow .12s;
}
.bonus-inline:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.bonus-inline > .cur { color: var(--muted); font-weight: 600; font-size: var(--t-small); }
.bonus-input {
border: 0; outline: 0; background: transparent;
width: 72px; text-align: right;
font: 600 15px var(--font); color: var(--success-ink);
font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.bonus-input::-webkit-outer-spin-button,
.bonus-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bonus-input:disabled { color: var(--muted); }
.bonus-inline.saving { opacity: .55; }
.bonus-inline.saved { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.bonus-inline.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.bonus-allow { font-size: var(--t-micro); color: var(--success-ink); font-weight: 600; }
/* per-row net flash on reconcile */
.pay-net.flash { animation: netflash .5s ease; }
@keyframes netflash { 0% { background: var(--primary-soft); } 100% { background: transparent; } }
/* ---- payroll toolbar (search + team chips + status chips) ---- */
.pay-toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.pay-toolbar .field-search { flex: 1 1 240px; }
.pay-toolbar .chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---- sticky running-total + bulk-pay bar ---- */
.pay-runtotal {
display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
justify-content: space-between;
background: var(--primary-soft); border: 1px solid rgba(129,140,248,.20);
border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: var(--s2);
}
.pay-runtotal .rt-group { display: flex; gap: var(--s3); flex-wrap: wrap; }
.pay-runtotal .rt-item { display: flex; flex-direction: column; line-height: 1.1; }
.pay-runtotal .rt-k { font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pay-runtotal .rt-v { font-size: var(--t-input); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.pay-runtotal .rt-v.pos { color: var(--success-ink); }
.pay-runtotal .rt-count { font-size: var(--t-small); color: var(--muted); font-weight: 600; align-self: center; }
.pay-runtotal .btn { min-height: 40px; }
.pay-runtotal .btn:disabled { opacity: .5; pointer-events: none; }
/* ============================================================
PAYROLL PROCESS STEPPER (3 stages) + COMPLETION BANNER
============================================================ */
.pay-stepper {
display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow), var(--shadow-inset);
padding: 12px 14px; margin-bottom: var(--s3);
}
.pstep { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.pstep-mark {
flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center; font-weight: 800; font-size: var(--t-body);
background: var(--elevated); color: var(--muted);
box-shadow: inset 0 0 0 1px var(--border);
transition: background .18s, color .18s, box-shadow .18s;
}
.pstep-check { width: 17px; height: 17px; display: none; }
.pstep-body { flex: 1; min-width: 0; }
.pstep-title { font-size: var(--t-small); font-weight: 700; color: var(--ink); line-height: 1.15;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstep-sub { font-size: var(--t-label); color: var(--muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstep-cta { flex: none; }
.pstep-sep { flex: 0 0 22px; align-self: center; height: 2px;
background: var(--border-strong); margin: 0 8px; border-radius: 2px; transition: background .25s; }
/* ACTIVE stage */
.pstep.is-active .pstep-mark { background: linear-gradient(135deg,#6366f1,#4f46e5); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft), 0 0 16px var(--primary-glow); }
.pstep.is-active .pstep-title { color: var(--primary); }
/* DONE stage */
.pstep.is-done .pstep-mark { background: linear-gradient(135deg,#4ade80,#22c55e); color: #06210f; }
.pstep.is-done .pstep-num { display: none; }
.pstep.is-done .pstep-check { display: block; }
.pstep.is-done .pstep-title { color: var(--success-ink); }
.pstep.is-done + .pstep-sep { background: var(--success); }
/* ---- Month completion / remaining banner ---- */
.pay-complete {
display: flex; align-items: center; gap: 14px;
border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--s3);
border: 1px solid var(--border); background: var(--card);
}
.pay-complete[hidden] { display: none; }
.pc-ico { flex: none; width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center; background: var(--neutral-soft); color: var(--muted); }
.pc-ico svg { width: 22px; height: 22px; }
.pc-title { font-weight: 800; font-size: var(--t-lead); color: var(--ink); line-height: 1.2; }
.pc-sub { font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
/* states */
.pay-complete.is-done { border-color: var(--success); background: var(--success-soft); }
.pay-complete.is-done .pc-ico { background: var(--success); color: #06210f; }
.pay-complete.is-done .pc-title { color: var(--success-ink); }
.pay-complete.is-warn { border-color: var(--warning); background: var(--warning-soft); }
.pay-complete.is-warn .pc-ico { background: var(--warning); color: #3b2a06; }
.pay-complete.is-warn .pc-title { color: var(--warning-ink); }
.pay-complete.is-pending .pc-ico { background: var(--info-soft); color: var(--info-ink); }
/* ---- Empty-period prompt banner (no slips generated yet) ---- */
.pay-gen-banner {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--warning, #f59e0b); border-radius: var(--radius); padding: 12px 16px;
margin-bottom: var(--s3); background: var(--warning-soft, rgba(245,158,11,.08)); color: var(--ink);
font-size: var(--t-small); font-weight: 500;
}
.pay-gen-banner[hidden] { display: none; }
.pay-gen-banner span { flex: 1; min-width: 0; }
.pay-gen-banner .btn { flex: none; }
/* ---- Add-to-month picker dialog ---- */
.pay-add-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
-webkit-overflow-scrolling: touch; max-height: 52vh; margin: 0 -4px; padding: 0 4px; }
.pay-add-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; min-height: 56px;
transition: background .12s, border-color .12s; }
.pay-add-item:hover { background: var(--elevated); border-color: var(--primary); }
.pay-add-item.loading { opacity: .55; pointer-events: none; }
.pay-add-item .person-name { font-weight: 600; }
.pay-add-base { flex: 0 0 auto; margin-left: auto; font-size: var(--t-label); font-weight: 700;
color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-add-plus { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; font-size: var(--t-title); line-height: 1;
color: var(--primary); background: var(--primary-soft); }
.pay-add-empty, .pay-add-none { text-align: center; color: var(--muted); font-size: var(--t-body); padding: 28px 12px; }
/* ---- responsive management cards (payroll/employees/deposits/finance) ---- */
.card-hero-cell { } /* marker: person cell → card header on mobile */
.card-foot-cell { } /* marker: status/actions cell → card footer on mobile */
@media (max-width: 720px) {
/* ===== tables → stacked cards (opt-in via .table.cards) ===== */
.table.cards { display: block; }
.table.cards thead { display: none; } /* labels come from data-label */
.table.cards tbody { display: block; }
.table.cards tbody tr {
display: block;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow);
padding: 12px 14px; margin-bottom: 10px;
}
.table.cards tbody tr:hover { background: var(--card); box-shadow: var(--shadow); } /* kill desktop row tint */
.table.cards tbody td {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 6px 0; border: 0; text-align: right; min-height: 38px;
}
.table.cards tbody td::before {
content: attr(data-label);
font-size: var(--t-label); font-weight: 700; letter-spacing: .02em; text-transform: none;
color: var(--muted); text-align: left; margin-right: auto;
}
/* the person/description cell = full-width card header, no label */
.table.cards tbody td.card-hero-cell {
justify-content: flex-start; text-align: left;
padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.table.cards tbody td.card-hero-cell::before { content: none; }
.table.cards tbody td.card-hero-cell .person { width: 100%; }
/* sub-lines (FTD/Ret, allowance) align right under the value */
.table.cards tbody td .person-sub { text-align: right; }
/* status/actions cell → card footer, actions always visible + reachable */
.table.cards tbody td.card-foot-cell {
border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 10px;
}
.table.cards .pay-status-cell { width: 100%; }
.table.cards .row-actions { opacity: 1; pointer-events: auto; }
.table.cards .btn-icon { width: 40px; height: 40px; }
.table.cards .btn-icon svg { width: 18px; height: 18px; }
/* the inner wrap must not add a scrollbar when it's cards */
.card .table-wrap:has(.table.cards) { overflow: visible; }
/* ===== table also stacks into a summary strip (payroll) ===== */
.table.cards tfoot { display: block; }
.table.cards tfoot tr {
display: block; background: var(--primary-soft);
border-radius: var(--radius-sm); padding: 10px 14px;
}
.table.cards tfoot td {
display: flex; justify-content: space-between; padding: 5px 0; border: 0; text-align: right;
}
.table.cards tfoot td::before { content: attr(data-label); color: var(--muted); font-weight: 700; margin-right: auto; }
.table.cards tfoot td[colspan]::before { content: none; }
/* ===== inline bonus sized so iOS never zooms + full touch target ===== */
.bonus-inline { height: 44px; }
.bonus-input { width: 96px; font-size: var(--t-input); }
/* ===== payroll toolbar: chips full-width, sticky under topbar ===== */
.pay-toolbar { position: sticky; top: 60px; z-index: 29; background: var(--bg); padding-top: 8px; }
.pay-runtotal { position: sticky; top: 132px; z-index: 28; } /* under the toolbar */
.pay-runtotal .btn { width: 100%; }
/* ===== payslip side-preview hidden on phones (use Detaje→modal) ===== */
.payroll-preview { display: none; }
/* ===== every JS modal overlay → bottom-sheet, scrollable, no clip ===== */
#editModal, #recModal, #depModal, #payEditModal, #revModal, #payAddModal {
place-items: end center !important; padding: 0 !important;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#editModal > .card, #recModal > .card, #depModal > .card,
#payEditModal > .card, #revModal > .card, #payAddModal > .card {
max-width: 100% !important; width: 100% !important;
border-radius: var(--radius) var(--radius) 0 0;
max-height: 92dvh; overflow-y: auto; margin: 0;
}
/* the payslip-edit modal's two-up rows stack */
#payEditModal .row > div[style*="flex:1"] { flex: 1 1 100% !important; }
/* ===== GLOBAL iOS no-zoom: every form control ≥16px on phones =====
Selected by ELEMENT, not by class. The class list (.input/.select/.bonus-input) missed the
topbar search on all seven pages that have one, because #topSearch carries no class — and any
future input that forgets the class would have silently regressed the same way. Checkbox,
radio and range have no text, so leaving them out costs nothing and avoids resizing them. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea { font-size: var(--t-input); }
/* touch targets */
.btn { min-height: 44px; }
.btn-sm { min-height: 38px; }
.seg button { min-height: 40px; }
.chip { min-height: 38px; }
.month-arrow { width: 44px; height: 40px; }
/* ===== PAYROLL PROCESS STEPPER → stacked cards on phones ===== */
.pay-stepper { flex-wrap: wrap; gap: 10px 0; padding: 6px 14px; }
.pstep { flex: 1 1 100%; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.pstep:last-child { border-bottom: 0; }
.pstep-sep { display: none; }
.pstep-title, .pstep-sub { white-space: normal; }
.pstep-cta { width: 100%; margin-top: 8px; }
/* ===== completion banner: top-align icon when text wraps at 390px ===== */
.pay-complete { align-items: flex-start; padding: 14px; }
/* ===== add-to-month dialog joins the bottom-sheet family ===== */
.pay-add-item .person-sub { font-size: var(--t-micro); }
}
/* Grid children already have min-width:0 above — keep. */
/* ============================================================
VISUAL POLISH — consistency, hierarchy, celebration
============================================================ */
/* ---- 1. KPI NET tile — negative state colours the value red ---- */
.kpi-grid .kpi:last-child.net-negative {
border-color: rgba(248,113,113,.4);
box-shadow: 0 0 0 3px var(--danger-soft), var(--shadow);
}
.kpi-grid .kpi:last-child.net-negative .kpi-value { color: var(--danger-ink); }
/* ---- 2. Dashboard NET warning banner (shown by JS when net < 0) ---- */
.net-warn-banner {
display: flex; align-items: center; gap: 12px;
background: var(--danger-soft);
border: 1px solid rgba(248,113,113,.3);
border-radius: var(--radius-sm);
padding: 12px 16px;
margin-bottom: var(--s3);
font-weight: 600; color: var(--danger-ink); font-size: var(--t-body);
}
.net-warn-banner[hidden] { display: none; }
.net-warn-banner svg { width: 20px; height: 20px; flex: none; color: var(--danger); }
/* ---- 3. Payroll completion banner — "Muaji u mbyll" CELEBRATION ---- */
.pay-complete.is-done {
background: linear-gradient(135deg, rgba(52,211,153,.14) 0%, rgba(34,197,94,.20) 100%);
border: 2px solid rgba(52,211,153,.4);
box-shadow: 0 4px 20px rgba(52, 211, 153, .12);
position: relative;
overflow: hidden;
}
/* Subtle confetti shimmer strip */
.pay-complete.is-done::after {
content: "";
position: absolute; inset: 0;
background: repeating-linear-gradient(
105deg,
transparent 0px,
transparent 18px,
rgba(255,255,255,.06) 18px,
rgba(255,255,255,.06) 22px
);
pointer-events: none;
}
.pay-complete.is-done .pc-ico {
background: var(--success);
color: #06210f;
box-shadow: 0 4px 12px rgba(52, 211, 153, .35);
width: 48px; height: 48px; border-radius: 14px;
flex: none;
}
.pay-complete.is-done .pc-ico svg { width: 26px; height: 26px; }
.pay-complete.is-done .pc-title {
font-size: var(--t-title); font-weight: 800;
color: var(--success-ink);
letter-spacing: -.2px;
}
.pay-complete.is-done .pc-sub { color: var(--success-ink); opacity: .85; font-weight: 500; }
/* Pulse animation on the done icon — draws the eye once */
@keyframes pulse-success {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.pay-complete.is-done .pc-ico {
animation: pulse-success 1.4s ease 0.2s 2;
}
/* ---- 4. "Para brenda & jashtë" money-net: danger colour when negative ---- */
.money-net .val.text-danger { color: var(--danger-ink); }
.money-net .val.text-success { color: var(--success-ink); }
/* ---- 5. Card visual hierarchy — section eyebrow + primary card accent ---- */
.card:has(.btn-primary.btn-block) {
border-top: 3px solid var(--primary);
}
/* Payslip card specifically (has the preview + edit button). */
.payslip { border-top: 3px solid var(--primary); }
/* ---- 6. Form fields — bigger tap targets on mobile ---- */
/* .input dhe .select janë i njëjti kontroll me dy elemente, dhe rrinë ngjitur në çdo
formular — por njëri ishte 44px e tjetri 42px. Dy piksel nuk shihen si zgjedhje,
shihen si gabim vizatimi, dhe 42 është nën minimumin e prekjes. Një numër, nga tokeni. */
.select { min-height: var(--tap); }
.input { min-height: var(--tap); }
/* ---- 7. "Shto punonjës" step-1 CTA in process stepper — promote to primary ---- */
#pstep1.is-active .pstep-cta { background: var(--primary); border-color: var(--primary); color: #0a0e1a; }
#pstep1.is-active .pstep-cta:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* ---- 8. page-head primary action — full visual weight ---- */
@media (max-width: 600px) {
.page-head .btn-ghost svg { margin-right: 0; }
.page-head .btn-ghost .btn-label { display: none; }
}
/* ---- 10. Dashboard KPI — negative state helper class ---- */
.kpi.net-negative, .kpi.is-negative { border-color: rgba(248,113,113,.4); }
.kpi.net-negative .kpi-ico { background: var(--danger-soft); color: var(--danger-ink); }
.kpi.net-negative .kpi-value, .kpi.is-negative .kpi-value { color: var(--danger-ink); }
/* ---- 11. Payroll running-total bar: highlight when all paid ---- */
.pay-runtotal.all-paid {
background: var(--success-soft);
border-color: rgba(52,211,153,.35);
}
.pay-runtotal.all-paid .rt-v { color: var(--success-ink); }
/* ---- 12. Empty state block ---- */
.empty-state { text-align:center; padding:40px 20px; color:var(--muted); }
.empty-state-icon { width:48px; height:48px; margin:0 auto 12px; opacity:.5; color: var(--primary); }
.empty-state-title { font-size: var(--t-lead); font-weight:600; margin-bottom:6px; color:var(--ink); }
.empty-state-sub { font-size: var(--t-small); margin-bottom:16px; }
/* Inline dashboard empty messages (activity + alerts panels) */
.dash-empty-state { padding:24px 8px; text-align:center; font-size: var(--t-small); color:var(--muted); font-style:italic; }
.table .dash-empty-state, .table tbody .dash-empty-state { color:var(--muted); font-style:italic; text-align:center; }
/* ---- 13. Help / hint text below form fields ---- */
.help-text { font-size: var(--t-label); color:var(--muted); margin-top:3px; line-height:1.4; }
/* ---- 14. KPI tile negative state (generic is-negative variant) ---- */
.kpi.is-negative .kpi-value { color: var(--danger-ink); }
.kpi.is-negative .kpi-label { color: var(--danger-ink); opacity:.8; }
/* ---- 15. Page subtitle / description line below page heading ---- */
.page-sub { font-size: var(--t-small); color:var(--muted); margin-top:2px; margin-bottom:16px; line-height:1.5; }
/* ---- 16. Help-text variants ---- */
.field-hint { font-size: var(--t-label); color:var(--muted); margin-top:4px; line-height:1.4; }
.inline-legend { font-size: var(--t-label); color:var(--muted); margin-bottom:var(--s2); padding:8px 10px; background:var(--surface); border-radius:6px; border:1px solid var(--border); }
.step-guide { font-size: var(--t-label); color:var(--muted); margin-top:3px; font-style:italic; }
/* ============================================================
DARK THEME FINISHERS v16 — native controls + accents
(later rules win; token-driven surfaces already dark above)
============================================================ */
/* Color-scheme hint → dark native scrollbars, form controls, autofill */
:root { color-scheme: dark; }
html, body { background: var(--bg); }
/* ---- SIDEBAR aurora + brand glow ---- */
.sidebar {
background:
radial-gradient(120% 55% at 50% -10%, rgba(129,140,248,.10), transparent 60%),
linear-gradient(180deg, #0d1424 0%, var(--sidebar-bg) 100%);
box-shadow: 1px 0 0 rgba(255,255,255,.02), var(--shadow-md);
}
.brand { border-bottom: 1px solid var(--border); }
/* Ishte: box-shadow me hije indigo + --shadow-inset. Ato i takonin pllakës me gradient
që mbante shkronjat "HR". Tani elementi s'ka sfond, pra hija e brendshme pikturonte
një drejtkëndësh të dukshëm rreth shenjës — kuti fantazmë pikërisht atë që hoqa.
Shkëlqimi vjen tani nga vetë shenja, jo nga kutia e saj. */
.brand-logo {
filter: drop-shadow(0 4px 14px rgba(129,140,248,.45));
}
.brand-name span { text-shadow: 0 0 16px var(--primary-glow); }
.nav-item svg { opacity: .8; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
background: linear-gradient(90deg, rgba(129,140,248,.16), rgba(129,140,248,.06) 70%, transparent);
color: #c7d0ff;
box-shadow: inset 0 0 0 1px rgba(129,140,248,.16);
}
.nav-item.active svg { opacity: 1; }
.nav-item.active::before {
background: linear-gradient(180deg, #a5b4fc, var(--primary));
box-shadow: 0 0 12px 1px var(--primary-glow);
}
.nav-item.active .nav-count { background: rgba(129,140,248,.22); color: #c7d0ff; }
/* ---- CARD raised sheen ---- */
.card {
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--card);
box-shadow: var(--shadow), var(--shadow-inset);
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--shadow-inset); }
/* ---- KPI / list icon purple variant (net-new) ---- */
.kpi-ico.purple, .li-ico.purple { background: rgba(167,139,250,.15); color: #c4b5fd; }
/* ============================================================
DASHBOARD v16 — hero NET command deck + quick actions
============================================================ */
.qa-bar { display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3); }
.qa-chip {
display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px;
background:var(--card); border:1px solid var(--border); border-radius:var(--radius-pill);
font-weight:600; font-size: var(--t-small); color:var(--ink); box-shadow:var(--shadow);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.qa-chip:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.qa-ico { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.qa-ico svg { width:15px; height:15px; }
.qa-ico.green { background:var(--success-soft); color:var(--success-ink); }
.qa-ico.red { background:var(--danger-soft); color:var(--danger-ink); }
.qa-ico.blue { background:var(--info-soft); color:var(--info-ink); }
/* HERO: Depozita − Shpenzime − Paga = NETO */
.net-hero {
position:relative; overflow:hidden;
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,auto);
align-items:center; gap:var(--s4);
background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 60%,#312e81 100%);
border:1px solid #312e81; border-radius:var(--radius);
padding:var(--s3) var(--s4); margin-bottom:var(--s3);
box-shadow:var(--shadow-lg); transition:box-shadow .4s ease;
}
.net-hero::before {
content:""; position:absolute; right:-120px; top:-140px; width:400px; height:400px;
border-radius:50%; background:radial-gradient(circle,rgba(129,140,248,.55),transparent 65%);
filter:blur(70px); opacity:.55; pointer-events:none; transition:background .4s ease;
}
.net-hero.is-pos::before { background:radial-gradient(circle,rgba(52,211,153,.5),transparent 65%); }
.net-hero.is-neg::before { background:radial-gradient(circle,rgba(248,113,113,.55),transparent 65%); }
.net-hero.is-pos { box-shadow:0 0 0 1px rgba(52,211,153,.28), 0 24px 60px -20px rgba(52,211,153,.4); }
.net-hero.is-neg { box-shadow:0 0 0 1px rgba(248,113,113,.32), 0 24px 60px -20px rgba(248,113,113,.45); }
.nh-flow { display:flex; align-items:center; gap:12px; min-width:0; position:relative; z-index:1; }
.nh-step {
flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
border-radius:var(--radius-sm); padding:12px 14px;
}
.nh-step-ico { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; margin-bottom:2px; }
.nh-step-ico svg { width:15px; height:15px; }
.nh-step-ico.green { background:rgba(52,211,153,.18); color:#6ee7b7; }
.nh-step-ico.red { background:rgba(248,113,113,.18); color:#fca5a5; }
.nh-step-ico.blue { background:rgba(56,189,248,.18); color:#7dd3fc; }
.nh-step-label { font-size: var(--t-micro); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#94a3b8; }
.nh-step-val { font-size: var(--t-section); font-weight:800; letter-spacing:-.4px; color:#f1f5f9; white-space:nowrap; font-variant-numeric:tabular-nums; }
.nh-op { flex:none; font-size: var(--t-display); font-weight:800; color:#64748b; }
.nh-op.nh-eq { font-size: var(--t-display-lg); color:#a5b4fc; }
.nh-result { text-align:right; position:relative; z-index:1; }
.nh-label { font-size: var(--t-label); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; }
.nh-value { font-size:clamp(38px,5vw,56px); font-weight:800; letter-spacing:-2px; line-height:1.05; color:#fff; margin-top:4px; font-variant-numeric:tabular-nums; }
.net-hero.is-pos .nh-value { color:#6ee7b7; text-shadow:0 0 34px rgba(52,211,153,.45); }
.net-hero.is-neg .nh-value { color:#fca5a5; text-shadow:0 0 34px rgba(248,113,113,.5); }
.nh-sub { font-size: var(--t-label); color:#94a3b8; margin-top:6px; }
.net-hero.is-neg .nh-sub { color:#fca5a5; font-weight:600; }
/* The .leaderboard block styled renderTopAgents() on the Performance page — both are gone. */
/* Responsive */
@media (max-width: 1100px) {
.net-hero { grid-template-columns:1fr; gap:var(--s3); padding:var(--s3); }
.nh-result { text-align:left; border-top:1px solid rgba(255,255,255,.09); padding-top:var(--s2); }
}
@media (max-width: 700px) {
.nh-flow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nh-flow .nh-op { display:none; }
.qa-bar { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; padding-right:32px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.qa-bar::-webkit-scrollbar { display:none; }
.qa-chip { flex:none; }
/* Fade gradient right edge — hints that there are more chips to scroll into view */
.page-head { position:relative; }
.page-head::after {
content:""; pointer-events:none;
position:absolute; right:0; top:0; bottom:0; width:40px;
background:linear-gradient(to right, transparent, var(--surface, #111827) 90%);
z-index:1;
}
}
@media (max-width: 420px) {
.nh-value { font-size:30px; letter-spacing:-1px; }
.nh-step-val { font-size: var(--t-title); }
}
/* ============================================================
PREMIUM BATCH #5 — CSS enhancements
============================================================ */
/* --- FIX_1: NET hero — breathing glow orb + .nh-step hover lift --- */
@keyframes heroOrb {
0%,100% { opacity:.55; transform:scale(1); }
50% { opacity:.72; transform:scale(1.08); }
}
.net-hero::before {
animation: heroOrb 5s ease-in-out infinite;
}
.nh-step {
transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.nh-step:hover {
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.18);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
/* --- FIX_2: KPI tiles — glass hover lift + icon inset ring --- */
.kpi-ico {
transition: box-shadow .2s, background .2s;
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.kpi-grid > .card.kpi {
transition: border-color .25s, box-shadow .25s, transform .2s;
}
.kpi-grid > .card.kpi:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-glow), var(--shadow-md);
transform: translateY(-2px);
}
/* --- FIX_3: Card titles — left accent bar + hairline divider --- */
.card-head {
border-bottom: 1px solid var(--border-soft);
padding-bottom: var(--s2);
}
.card-title {
letter-spacing: .02em;
position: relative;
padding-left: 10px;
}
.card-title::before {
content: "";
position: absolute; left: 0; top: 10%; bottom: 10%;
width: 3px; border-radius: 2px;
background: linear-gradient(180deg, var(--primary), #4f46e5);
}
/* ============================================================
LOOP #8 VISUAL POLISH
Deposits: agent share bars, ledger type accents, premium tiles
============================================================ */
/* ---- Per-agent share bar (mini progress under numbers) ---- */
.dep-share-wrap {
display: flex; align-items: center; gap: 6px; margin-top: 5px;
}
.dep-share-bar {
flex: 1; height: 4px; border-radius: 2px;
background: var(--border); overflow: hidden; max-width: 80px;
}
.dep-share-fill {
height: 100%; border-radius: 2px;
background: linear-gradient(90deg, var(--primary), #818cf8);
transition: width .4s ease;
}
.dep-share-pct {
font-size: var(--t-micro); font-weight: 600; color: var(--muted);
font-variant-numeric: tabular-nums; min-width: 30px;
}
/* ---- Agent total column accent ---- */
td.dep-total-cell {
font-size: var(--t-lead) !important; font-weight: 800 !important;
color: var(--ink) !important;
}
/* ---- Ledger row type accent (left border) ---- */
#depLedger tr[data-kind="ftd"] td:first-child {
box-shadow: inset 3px 0 0 var(--info-ink);
}
#depLedger tr[data-kind="retention"] td:first-child {
box-shadow: inset 3px 0 0 var(--success-ink);
}
/* ---- Ledger amount — larger, bolder ---- */
.dep-amount-cell {
font-size: var(--t-lead) !important; font-weight: 800 !important;
}
/* ---- FTD badge upgraded — pill with icon ---- */
.badge.ftd-badge {
background: var(--info-soft); color: var(--info-ink);
font-size: var(--t-label); font-weight: 700; letter-spacing: .02em;
}
.badge.ret-badge {
background: var(--success-soft); color: var(--success-ink);
font-size: var(--t-label); font-weight: 700; letter-spacing: .02em;
}
/* ---- KPI sub-line on deposits page ---- */
.kpi .kpi-sub {
font-size: var(--t-micro); color: var(--muted); font-weight: 500;
margin-top: 2px; font-variant-numeric: tabular-nums;
}
/* ---- Agent card row — hover accent ---- */
#depByAgent tr:hover td:first-child {
box-shadow: inset 3px 0 0 var(--primary);
}
/* ---- Deposits page: ledger row hover ---- */
#depLedger tr:hover { background: var(--surface); }
/* ---- Cash flow li-ico — ensure consistent rounded icon size ---- */
.money-row .li-ico {
width: 36px; height: 36px; border-radius: 10px; flex: none;
display: grid; place-items: center;
}
.money-row .li-ico svg { width: 18px; height: 18px; }
/* ============================================================
LOOP #9 POLISH
FIX_1: Agent rank badges + dominant total column
FIX_2: Finance group left-border swatch
FIX_3: Payroll bonus amber + sticky thead
============================================================ */
/* ---- FIX_1: Deposit total column — green dominant ---- */
td.dep-total-dominant {
color: var(--success-ink) !important;
font-size: var(--t-lead) !important; font-weight: 800 !important;
}
/* Rank badge inside agent name cell — tighter vertical alignment */
#depByAgent .person .rank {
margin-top: 0; align-self: center;
flex: none;
}
/* ---- FIX_2: Finance group row — left-border accent ---- */
.fin-group-row {
border-radius: 0 4px 4px 0;
transition: background .15s ease;
}
.fin-group-row:hover { background: var(--surface); }
/* ---- FIX_3: Payroll bonus cell — amber when > 0 ---- */
td.pay-bonus-amber .bonus-cell .bonus-inline,
td.pay-bonus-amber .bonus-cell .bonus-input {
color: var(--warning-ink) !important;
font-weight: 700;
}
td.pay-bonus-amber .bonus-cell .cur {
color: var(--warning-ink) !important;
}
td.pay-bonus-amber { background: var(--warning-soft) !important; }
/* ---- FIX_3: Payroll sticky thead ---- */
.pay-sticky-table { border-collapse: separate; border-spacing: 0; }
.pay-sticky-head th {
position: sticky; top: 0; z-index: 10;
background: var(--surface);
box-shadow: 0 1px 0 var(--border);
}
/* ============================================================
LOOP #9 VISUAL PREMIUM — deep polish
1. Regular cards lift on hover (match KPI tile behavior)
2. NET hero value counter-pulse on value update
3. Mobile page-head::after fade gradient fix (bg mismatch)
4. Performance KPI trend labels (all 4 tiles consistent)
5. Card-head spacing breathe — extra 4px below border
6. Section separators — subtle gradient dividers
7. KPI value font upgrade — tighter tracking for large digits
8. Net hero step cards — value color matches meaning
============================================================ */
/* 1. Regular cards lift on hover — matches KPI tile behavior */
.card:not(.kpi):hover {
transform: translateY(-1px);
transition: border-color .25s, box-shadow .25s, transform .2s;
}
/* KPI lift is stronger (2px already defined above in batch#5) */
/* 2. NET hero value pulse-in animation (triggered by JS via class .nh-updated) */
@keyframes nhValuePop {
0% { transform: scale(1); }
30% { transform: scale(1.035); }
65% { transform: scale(0.995); }
100% { transform: scale(1); }
}
.nh-value.nh-updated {
animation: nhValuePop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
/* 3. Mobile page-head fade-gradient — fix wrong bg colour (#1a2138→#0a0e1a) */
@media (max-width: 700px) {
.page-head::after {
background: linear-gradient(to right, transparent, #0a0e1a 90%);
}
}
/* 4. Performance KPI tiles — trend label on all 4 tiles */
/* Injected via CSS only — the three blank kpi-tops now at least show a label */
/* JS in app.js updates them at runtime; this ensures the static fallback looks right */
/* 5. Card-head breathing: add 4px bottom padding after the border so content starts clear */
.card-head {
margin-bottom: var(--s2);
padding-bottom: calc(var(--s2) - 4px);
}
/* 6. Section separator upgrade — gradient divider line */
.divider {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
margin: var(--s2) 0;
}
/* 7. KPI value — tighter negative tracking for 2+ digit numbers */
.kpi-value {
font-feature-settings: "tnum" 1, "kern" 1;
letter-spacing: -.8px;
}
.kpi-value small {
letter-spacing: -.3px;
}
/* 8. NET hero step values — color by meaning */
.nh-step:nth-child(1) .nh-step-val { color: #6ee7b7; } /* Depozita = green */
.nh-step:nth-child(3) .nh-step-val { color: #fca5a5; } /* Shpenzime = red */
.nh-step:nth-child(5) .nh-step-val { color: #7dd3fc; } /* Paga = blue */
/* 9. Performance KPI tiles: show muted trend label even when empty data */
.kpi-top:not(:has(.trend)) .kpi-ico::after {
content: "";
/* placeholder — actual labels added by JS */
}
/* 10. Table row left-accent on first column — stronger on hover */
.table tbody tr:hover td:first-child {
color: var(--ink);
}
/* 11. Topbar blur — increase to feel more glass-like */
.topbar {
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
}
/* 12. Bottom nav active tab — add a glow dot above the icon */
@media (max-width: 900px) {
.bottomnav a.active::before, .bottomnav .nav-more.active::before {
box-shadow: 0 0 8px 2px var(--primary-glow);
}
/* Bottom nav labels: ensure text doesn't clip on very small phones */
.bottomnav a, .bottomnav .nav-more {
font-size: var(--t-micro);
padding: 6px 2px;
}
.bottomnav a svg, .bottomnav .nav-more svg {
width: 20px; height: 20px;
}
}
/* 13. KPI tile loading shimmer — when value is still "—" or "0" and no data yet */
/* (cosmetic only; does not affect real data display) */
.kpi-value:empty::after,
.kpi-value:is(:only-child)::after { content: ""; }
/* 14. Card title eyebrow — tighter gap after the accent bar */
.card-title::before {
top: 15%; bottom: 15%; /* vertically centered to cap height, not full line height */
}
/* 15. Sidebar nav: bottom border before Settings — visual grouping */
.nav-bottom { border-top: 1px solid var(--border-soft); }
/* ============================================================
TRANSAKSIONET — shiriti i filtrave
Wraps on purpose: six controls never fit a 390px phone in one row, and letting them
wrap beats hiding any of them behind a "more filters" toggle on the one page whose
whole job is finding a specific movement.
============================================================ */
.lg-filters {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-top: var(--s3);
}
.lg-filters .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-chip {
min-height: 36px; padding: 0 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: transparent; color: var(--muted);
font-size: var(--t-small); font-weight: 600; cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lg-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.lg-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* 36px këtu i shkelte të dy: .input jep 44px, por këto vijnë më poshtë në skedar dhe e
mundnin. Matur 258x36 te 320px, ku rreshti bëhet kolonë dhe select-i s'e merr më
lartësinë e fqinjit — pra numri i vërtetë dukej vetëm në ekranin më të vogël. */
.lg-sel { min-height: var(--tap); width: auto; min-width: 130px; }
.lg-search { min-height: var(--tap); flex: 1 1 180px; min-width: 150px; }
@media (max-width: 640px) {
/* 16px, not 15 — iOS zooms the whole page on focus for anything UNDER 16px. */
.lg-search, .lg-sel { font-size: var(--t-input); }
/* The first version let the chips WRAP. Ten chips across two groups then stacked into three full
rows and ate ~180px before a single transaction was visible — on the one page whose job is
showing the list. Each group is now a single row that SCROLLS sideways, which is the phone
idiom for a filter strip and costs one row instead of three.
scrollbar-width:none because a visible bar under 36px chips reads as a rendering fault. */
.lg-filters { flex-direction: column; align-items: stretch; gap: 8px; }
.lg-filters .chips {
width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 2px;
}
.lg-filters .chips::-webkit-scrollbar { display: none; }
/* min-height hoqi nga këtu: e jep rregulli i përbashkët i çipave më poshtë (≤720px).
Dy vende për të njëjtin numër ishin pikërisht arsyeja pse divergjuan. */
.lg-chip { flex: 0 0 auto; padding: 0 14px; }
/* Two pickers share one row; the search takes the next. Three full-width controls stacked was
three rows of nothing. */
.lg-row2 { display: flex; gap: 8px; }
.lg-sel { flex: 1; min-width: 0; }
.lg-search { width: 100%; flex: 1 1 auto; }
#lgReset { min-height: 44px; }
}
/* Numeric columns never wrap. "−€22,521.94" broken across two lines reads as a rendering
fault, not a number — the same defect that split "+€847,406" after its plus sign on the
other platform. The date column gets a floor so the day/year pair stays on one line too. */
#lgTable td.num, #lgTable th.num { white-space: nowrap; }
/* Target the DATE by its label, not by position. This was td:first-child when the date WAS first;
the columns were then reordered so the description became first, and the nowrap meant to protect
"12 Gsh 2026" started forbidding the description from wrapping — one long note stretched a row to
594px and put the whole page into horizontal scroll on a 390px phone. A positional selector
silently changes meaning the moment the order changes. */
#lgTable td[data-label="Data"] { white-space: nowrap; }
@media (max-width: 640px) {
/* The card head puts the title and the month selector side by side; at 390px "Të gjitha kohërat"
has no room and gets clipped mid-word. Give the selector its own full-width row instead of
shrinking a label the operator needs to read. */
#lgMonth { width: 100%; justify-content: space-between; margin-top: var(--s2); }
#lgMonth .month-label { flex: 1; text-align: center; }
}
/* A transaction description like "Pages per Vincentin ne usdt -test wallet" has no break
opportunity a browser will take by default, so inside the stacked-card layout it grew to 538px on
a 500px screen and pushed the WHOLE PAGE into horizontal scroll. overflow-wrap:anywhere lets it
break mid-token; min-width:0 stops the flex/table cell from sizing to that unbreakable content.
Scoped to the ledger's own table so no other card layout changes behaviour. */
#lgTable .card-hero-cell,
#lgTable .card-hero-cell .person-name,
#lgTable .card-hero-cell .person-sub {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 640px) {
/* The three summary tiles were full-height cards stacked vertically: ~370px of chrome before a
single transaction appeared, on the page whose entire job is the list. They now sit as one
compact block — label left, figure right — which costs about a third of the height and puts
the first row of data on the first screen. */
#lgKpis { display: block; border: 1px solid var(--border); border-radius: var(--radius-lg);
background: var(--surface); overflow: hidden; }
#lgKpis > .card {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
border: 0; border-radius: 0; background: transparent;
padding: 12px 16px; margin: 0;
border-bottom: 1px solid var(--border);
}
#lgKpis > .card:last-child { border-bottom: 0; }
#lgKpis .card-sub { font-size: var(--t-label); }
/* The sub-label under the figure would push the row to two lines for no information gain. */
#lgKpis .card-sub:last-child { display: none; }
#lgKpis .kpi-value { font-size: var(--t-section); white-space: nowrap; }
}
@media (max-width: 640px) {
/* The three flow tiles wrapped 2 + 1, leaving a dead half-row beside "Paga" — measured at ~175px of
empty card on a 390px screen, inside the most important block on the page. The third tile now
spans the full width instead, and the operators (−, =) stay on their own line so the formula
still reads as a formula rather than three unrelated boxes. */
#netHero .nh-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
#netHero .nh-step { min-width: 0; }
#netHero .nh-step:nth-of-type(3) { grid-column: 1 / -1; }
#netHero .nh-op { display: none; }
#netHero .nh-step-val { font-size: var(--t-section); white-space: nowrap; }
}
/* ============================================================
MOBILE POLISH PASS — 2026-08-12
============================================================ */
@media (max-width: 900px) {
/* Settings was UNREACHABLE on a phone. .sidebar and .bottomnav are both z-index:60 and the bottom
bar paints later, so it won — and .nav-bottom (the only mobile route to Settings) sits exactly
where the bar overlaps. Taps landed on Paneli/Punonjësit instead. Raising the OPEN drawer above
it fixes the hit-test; the padding stops the link sitting visually under the bar as well. The
bottom bar has no business being tappable while the drawer covers the screen. */
body.nav-open .sidebar { z-index: 70; }
.nav-bottom { padding-bottom: 76px; }
}
@media (max-width: 640px) {
/* iOS zooms the entire page when a focused field is under 16px. Every input the operator actually
types into is brought to 16px — the zoom-then-pinch-back dance is the single cheapest thing that
makes a site feel unfinished on a phone. */
input, select, textarea, .input, .m-input { font-size: var(--t-input); }
/* Month steppers control what the whole page shows and were ~38x28. Reuse the size the app already
settled on for .month-arrow rather than inventing a second answer. */
.period-arrow, .month-arrow { min-width: 44px; min-height: 44px; }
/* Consistent breathing room. Cards differed page to page, which is what "not unified" looks like. */
.content { padding-left: 14px; padding-right: 14px; }
.card { padding: 16px; }
.card + .card, .cards + .card, .card + .cards { margin-top: 12px; }
}
@media (max-width: 640px) {
/* .field-search input sets 14px explicitly (styles.css:842), which beats the blanket 16px rule
above it at equal specificity by being more specific. It is the deposits page's only search
box, so under iOS the page zoomed the moment the operator tapped it. */
.field-search input { font-size: var(--t-input); }
}
/* .kpi-3 replaces an INLINE grid-template-columns:repeat(3,1fr) on the expenses page. Inline styles
beat every stylesheet rule, so both mobile fallbacks (2 columns at 900px and at 640px) were dead
and the page forced three columns onto a 390px phone: each card got 113px while "€233,801.61"
needs 145px, so the value overflowed its own box and pushed the document to 408px wide.
As a class it obeys the breakpoints again — three across only where three fit. */
.kpi-grid.kpi-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kpi-grid.kpi-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kpi-grid.kpi-3 { grid-template-columns: 1fr; } }
/* Po ky rregull duhej të vlente për ÇDO .kpi-grid, jo vetëm për ato që mbajnë .kpi-3.
Depozitat kishin tre karta pa atë klasë: 115px kolonë për një shifër 133px të gjerë,
pra "€17,214.48" pritej — shuma totale e depozitave, e palexueshme, në telefon.
E lidhur me elementin dhe jo me një klasë që dikush duhet ta mbajë mend ta shtojë. */
@media (max-width: 640px) { .kpi-grid { grid-template-columns: 1fr; } }
/* ============================================================
VISUAL POLISH — mobile, 2026-08-12
The app was functionally correct but read as unfinished: every page had a slightly different
rhythm, numbers sat at the same weight as their labels, and every surface had the same flat
border. These rules give the phone ONE rhythm and let the figures lead. Nothing here changes a
value, a layout decision or desktop.
============================================================ */
@media (max-width: 640px) {
/* ── Rhythm ──
One vertical step for everything. Cards previously varied 12/16/20/24px page to page, which is
precisely what "not unified" looks like even when nothing is broken. */
.content > * + * { margin-top: 14px; }
.card { border-radius: 16px; }
/* ── Let the numbers lead ──
A figure and its label carried nearly the same visual weight, so the eye had nothing to land on.
Tighter tracking + tabular figures also stop digits shifting as live values tick. */
.kpi-value, .amount, .nh-step-val, .pay-f-net .pay-f-v {
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.card-sub, .kpi-label, .pay-f-k, .nh-step-label {
font-size: var(--t-micro); letter-spacing: .03em;
}
/* ── Section titles ──
The gold rule beside a title is the app's signature; it was inconsistent in height between
pages. Pin it to the cap height of the text it sits against. */
.card-title { font-size: var(--t-lead); letter-spacing: -0.01em; }
/* ── Depth without weight ──
A single hairline plus a whisper of lift reads as a surface. The previous flat 1px border on a
near-black background made every card look like a wireframe. */
.card, .glass-card {
box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -18px rgba(0,0,0,.9);
}
/* ── Touch feedback ──
Nothing acknowledged a tap. 90ms is under the threshold where a delay is perceived as lag, so
it reads as the surface responding rather than as an animation. */
.card.clickable:active, .lg-chip:active, .qa-chip:active,
.btn:active, .nav-item:active, .bottomnav a:active, .bottomnav .nav-more:active {
transform: scale(.985);
transition: transform .09s ease;
}
/* ── Empty states ──
"Asnjë lëvizje me këta filtra." was body text floating in a cell. Centred, muted and given room,
an empty state looks intended rather than broken. */
td[colspan] { padding: 28px 16px !important; color: var(--muted); }
/* ── Scroll affordance ──
A strip that scrolls sideways with no visual hint reads as content that is simply cut off. */
.lg-filters .chips, .qa-bar {
mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
}
/* Respect the system setting. Anyone who asked for less motion gets none of the above. */
@media (prefers-reduced-motion: reduce) {
.card.clickable:active, .lg-chip:active, .qa-chip:active,
.btn:active, .nav-item:active, .bottomnav a:active, .bottomnav .nav-more:active { transform: none; }
}
/* ===================================================================
TRANSAKSIONET — rreshti si pasqyrë banke (vetëm telefon)
-------------------------------------------------------------------
Pamja e përgjithshme .table.cards jep një rresht etiketë/vlerë për çdo
kolonë: gjashtë rreshta, ~260px për lëvizje. Me 128 lëvizje kjo bëhet
një faqe 35,000px — dyzet ekrane rrëshqitje për të parë një listë.
Një pasqyrë banke e zgjidh të njëjtën gjë me dy rreshta: përshkrimi
dhe shuma lart, konteksti poshtë me shkronja të vogla.
Ky bllok prek VETËM #lgTable; kartat e pagave, depozitave dhe
punonjësve mbeten pikërisht siç janë.
=================================================================== */
@media (max-width: 720px) {
/* Zgjedhësi i muajit: 158px kuti për 232px përmbajtje — "Të gjitha
kohërat ›" pritej. Rresht i vetin, gjerësi e plotë. Vlen për çdo
.card-head, se i njëjti zgjedhës është edhe te paneli, depozitat,
shpenzimet dhe pagat. */
.card-head { flex-wrap: wrap; }
.card-head > .month-select { width: 100%; justify-content: space-between; }
.card-head > .month-select .month-label { flex: 1 1 auto; text-align: center; }
#lgTable tbody tr {
display: grid;
/* kolona 3 = 1fr thith hapësirën e tepërt, që "Origjinali" të ngjitet djathtas */
grid-template-columns: auto auto 1fr auto;
grid-template-areas:
"hero hero hero amt"
"typ dat met org";
column-gap: 10px; row-gap: 7px;
align-items: baseline;
padding: 13px 14px;
}
#lgTable tbody td {
display: block; padding: 0; margin: 0; border: 0;
min-height: 0;
text-align: left;
}
/* min-width:0 VETËM te hero-ja. Kur e kisha te çdo qelizë, kolona 1fr e "Metoda"
lejohej të tkurrej nën përmbajtjen e vet dhe "crypto" pritej në "cryp". Qelizat e
meta-s e mbajnë minimumin e tyre natyral; vetëm përshkrimi tkurret e mbështillet. */
#lgTable tbody td.card-hero-cell { min-width: 0; }
#lgTable tbody td::before { content: none; } /* etiketat i zëvendëson pozicioni */
#lgTable tbody td.card-hero-cell {
grid-area: hero; border: 0; padding: 0; margin: 0;
}
#lgTable tbody td.card-hero-cell .person-name {
font-weight: 650; font-size: var(--t-body); line-height: 1.3;
overflow-wrap: anywhere;
}
#lgTable tbody td.card-hero-cell .person-sub {
text-align: left; font-size: var(--t-micro); line-height: 1.35; margin-top: 2px;
color: var(--muted); overflow-wrap: anywhere;
}
#lgTable tbody td[data-label="Në euro"] {
grid-area: amt; justify-self: end; white-space: nowrap;
font-size: var(--t-lead); font-weight: 800; font-variant-numeric: tabular-nums;
}
#lgTable tbody td[data-label="Lloji"] { grid-area: typ; }
#lgTable tbody td[data-label="Data"] { grid-area: dat; white-space: nowrap; font-size: var(--t-label); }
#lgTable tbody td[data-label="Metoda"] { grid-area: met; font-size: var(--t-label); }
#lgTable tbody td[data-label="Origjinali"] {
grid-area: org; justify-self: end; white-space: nowrap; font-size: var(--t-label);
}
/* Fushat me vetëm një vizë largohen fare — rreshti i pagës do të lexonte
"Paga · 1 Kor 2026 · — · —", tre të katërtat shenja pikësimi. */
#lgTable tbody td.is-empty { display: none; }
#lgTable tbody td[data-label="Lloji"] .badge { font-size: var(--t-micro); padding: 2px 7px; }
}
/* ===================================================================
.table.cards — kreu i kartës si bllok, dhe radhë e pavarur nga HTML-ja
-------------------------------------------------------------------
Dy gabime që dolën kur Arka kaloi në këtë model:
1) td.card-hero-cell trashëgonte display:flex nga rregulli i qelizave,
pra fëmijët e tij rreshtoheshin KRAH PËR KRAH. Përshkrimi "Të tjera ·
priza+detergjent" me nën-rreshtin "nga: HR - Proffesori" dilte i
shpërndarë në tre kolona të ngjeshura. Kreu i një karte është tekst
që rrjedh poshtë, jo rresht etiketë/vlerë.
2) Radha e qelizave në kartë ishte radha e kolonave në tabelë. Te Arka
kolona e parë është Data, prandaj karta hapej me "Data 11 Gsh" dhe
përshkrimi vinte i dyti. Në desktop ajo radhë kolonash është e drejtë;
në kartë kreu duhet lart. flex-direction:column + order e ndan radhën
vizuale nga radha e HTML-së, pa prekur asnjë tabelë.
=================================================================== */
@media (max-width: 720px) {
.table.cards tbody tr { display: flex; flex-direction: column; }
.table.cards tbody td.card-hero-cell { display: block; order: -1; }
.table.cards tbody td.card-foot-cell { order: 99; }
}
/* ===================================================================
"GJITHË KOHËN" — çelës pranë zgjedhësit të muajit
-------------------------------------------------------------------
I njëjti model që paneli e kishte të fshehur brenda