/* ===========================================================
   Personale — styles (base chrome from the Velipoja design system,
   the Personale "Ledger" theme and the assistant panel)
   =========================================================== */

:root{
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e3e7ee;
  --border-strong: #d4dae3;
  --text: #1b2335;
  --text-2: #5a6678;
  --muted: #8a93a3;

  --brand: #2457d6;
  --brand-2: #1b2a4a;
  --brand-soft: #eaf0ff;

  --green: #1f9d57;  --green-soft:#e7f7ee;
  --amber: #c98a12;
  --red: #d23b4e;    --red-soft:#fdecee;

  --st-planned: #ffe6a0;     --st-planned-b:#f3c95a;
  --st-paid: #b4e6c4;        --st-paid-b:#7fcf9a;
  --st-unpaid: #ffd0a6;      --st-unpaid-b:#f3ab6b;
  --st-blocked:#d8dde5;      --st-blocked-b:#c2c9d4;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --sh-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sh-2: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --sh-pop: 0 18px 50px rgba(16,24,40,.22);
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
.hidden{ display:none !important; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#c4ccd8; border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#aab4c4; }

/* ---- Top bar ---- */
.topbar{
  background:linear-gradient(120deg, var(--brand-2) 0%, #25407a 60%, var(--brand) 140%);
  color:#fff;
  padding:12px 20px;
  display:flex; align-items:center; gap:16px;
  box-shadow:var(--sh-2);
  position:relative; z-index:50;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-weight:700; font-size:17px; letter-spacing:.2px; }
.brand-tag{ font-size:11px; color:#b9c6e6; letter-spacing:.3px; }
.controls{ display:flex; align-items:center; gap:8px; margin-left:auto; }
/* season (year) stepper — one cohesive pill */
.year-ctl{ display:inline-flex; align-items:center; gap:9px; }
.ctrl-label{ font-size:10px; text-transform:uppercase; letter-spacing:.9px; font-weight:700; color:rgba(255,255,255,.6); }
.year-pill{ display:inline-flex; align-items:center; height:34px; background:rgba(255,255,255,.12); border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.year-nav{ width:30px; height:34px; border:none; background:transparent; color:#fff; font-size:18px; line-height:1; cursor:pointer; border-radius:10px; transition:background .14s; }
.year-nav:hover{ background:rgba(255,255,255,.18); }
.year-pill select{ height:34px; border:none; background:transparent; color:#fff; font-size:14px; font-weight:700; cursor:pointer; text-align:center; text-align-last:center; padding:0 3px; -webkit-appearance:none; appearance:none; font-variant-numeric:tabular-nums; }
.year-pill select:focus{ outline:none; }
.year-pill select option{ color:#1b2335; background:#fff; }
/* toolbar buttons (notif + logout) — consistent height + subtle glass */
.tb-btn{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:none; border-radius:10px; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:background .14s; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.tb-btn:hover{ background:rgba(255,255,255,.22); }
.tb-btn.tb-icon{ width:34px; padding:0; justify-content:center; }
.tb-ic{ width:18px; height:18px; flex:0 0 auto; }
.who-chip{ display:inline-flex; align-items:center; height:34px; font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); padding:0 12px; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.controls button:focus-visible, .year-pill select:focus-visible, .tb-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.7); }
.mode-switch{ display:flex; gap:2px; background:rgba(0,0,0,.18); border-radius:9px; padding:3px; margin-left:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.ms-btn{ border:none; background:transparent; color:#c2d2f0; padding:6px 18px; border-radius:7px; font-size:13.5px; font-weight:600; letter-spacing:.2px; cursor:pointer; transition:all .15s; }
.ms-btn.active{ background:#fff; color:var(--brand-2); box-shadow:var(--sh-1); }
.ms-btn:not(.active):hover{ color:#fff; background:rgba(255,255,255,.08); }
#logout{ width:auto; padding:0 12px; font-size:13px; font-weight:600; }

/* ---- Tabs ---- */
.tabs{
  display:flex; gap:4px;
  background:var(--surface);
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
  overflow-x:auto;
  box-shadow:var(--sh-1);
}
.tab-btn{
  border:none; background:transparent; color:var(--text-2);
  padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer;
  border-radius:9px; white-space:nowrap; transition:all .15s;
}
.tab-btn:hover{ background:var(--surface-2); color:var(--text); }
.tab-btn.active{ background:var(--brand-soft); color:var(--brand); }
.tab{ display:none; padding:20px; max-width:1280px; margin:0 auto; }
.tab.active{ display:block; animation:fade .18s ease; }
/* calendar uses the whole screen width */
#tab-calendar{ max-width:none; padding:16px 18px; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ---- Forms / Inputs ---- */
form label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:12px; }
form input, form select{
  width:100%; font-size:15px; padding:10px 11px; margin-top:5px;
  border:1px solid var(--border-strong); border-radius:var(--r-sm); background:#fff; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
form input:focus, form select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(36,87,214,.15); }
form input[readonly]{ background:var(--surface-2); color:var(--text-2); }
.row{ display:flex; gap:12px; }
.row label{ flex:1; }
/* deposit/partial-payment row visible again (kapar = amount already paid) */

/* per-night price editor */
.varprice-toggle{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text-2); margin:2px 0 10px; cursor:pointer; }
.varprice-toggle input{ width:auto; margin:0; }
.nightly-box{ max-height:230px; overflow:auto; border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; margin-bottom:12px; background:var(--surface-2); }
.npn-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.npn-head .npn-all{ width:auto; padding:5px 10px; font-size:11px; font-weight:600; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--brand); cursor:pointer; }
.npn-head .npn-all:hover{ background:var(--brand-soft); }
.npn-row{ display:flex; align-items:center; gap:10px; margin:5px 0; }
.npn-row .npn-date{ width:64px; font-size:13px; font-weight:600; color:var(--text-2); }
.npn-in{ flex:1; position:relative; }
.npn-in input{ width:100%; margin:0; padding-right:26px; }
.npn-in i{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-style:normal; color:var(--muted); font-size:13px; }

/* status chips */
.status-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:5px 0 14px; }
.schip{ border:2px solid transparent; border-radius:20px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; color:#3d3320; opacity:.6; transition:all .12s; }
.schip.paid_delivered{ color:#0f5a31; } .schip.paid_not_delivered{ color:#7a3d0c; } .schip.blocked{ color:#454c58; }
.schip:hover{ opacity:.85; }
.schip.active{ opacity:1; border-color:rgba(0,0,0,.32); box-shadow:0 2px 7px rgba(0,0,0,.16); transform:translateY(-1px); }
.schip:disabled{ cursor:default; opacity:.45; }

/* availability: rearrangement option */
.av-opt.rearr{ flex-direction:column; align-items:flex-start; gap:6px; border-color:#cdd9f5; background:#f6f9ff; }
.av-moves{ font-size:13px; color:var(--text-2); }
.av-apply{ background:var(--brand); color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.av-apply:hover{ filter:brightness(1.07); }

/* ---- Mobile header ---- */
@media (max-width:600px){
  /* topbar wraps cleanly: brand + mode on row 1, year + Dil on row 2 */
  .topbar{ padding:10px 12px; gap:8px; row-gap:9px; flex-wrap:wrap; }
  .brand{ gap:9px; }
  .brand-logo{ width:32px; height:32px; font-size:17px; }
  .brand-name{ font-size:15px; line-height:1.1; }
  .brand-tag{ display:none; }       /* hide tagline to save space */
  .ctrl-label{ display:none; }      /* hide "SEZONI" label */
  .who-chip{ display:none; }        /* hide username; keep Dil button */
  .mode-switch{ margin-left:auto; padding:2px; }
  .ms-btn{ padding:6px 11px; font-size:13px; }
  .controls{ gap:6px; margin-left:0; flex:1 1 100%; justify-content:flex-end; }
  .year-pill select{ min-width:52px; }
  .lo-lb{ display:none; }            /* logout = icon-only on phones */
  #logout.tb-btn{ width:34px; padding:0; justify-content:center; }

  /* tabs: comfortable tap targets, horizontal scroll */
  .tabs{ padding:6px 8px; gap:2px; }
  .tab-btn{ padding:9px 13px; font-size:14px; }
  .tab{ padding:14px 12px; }

  /* cards: single column, a touch tighter */
  .today-grid{ grid-template-columns:1fr; gap:12px; }
  .tcard{ padding:14px; }
  .today-head{ font-size:22px; }
  .bar-page, .form-page{ padding:16px; }
  .bar-order-form input#bo-desc{ min-width:140px; }

  /* --- Calendar timeline: tighter on phones so more days fit --- */
  #tab-calendar{ padding:12px 8px; }
  .legend .hint, .cf-hint{ display:none; }       /* long hint takes too much room */
  .cal-filters{ gap:8px; }
  th.corner, td.roomcell{ min-width:70px; width:70px; padding:6px 2px 6px 24px; font-size:11px; }
  td.roomcell .rtype{ font-size:9px; }
  thead th.day, td.day{ min-width:34px; width:34px; }
  .bar{ font-size:11px; padding:2px 5px; margin:3px 4px; }
  .timeline-wrap{ max-height:calc(100vh - 230px); }

  /* --- Availability form: stack fields, full-width button --- */
  .avail-form{ gap:10px; }
  .avail-form label{ flex:1 1 46%; }
  .avail-form input, .avail-form select{ width:100%; }
  .avail-form button{ flex:1 1 100%; width:100%; align-self:stretch; }
}

/* responsive popup (phones) */
@media (max-width:480px){
  .modal{ padding:8px; align-items:flex-start; }
  .modal-box{ padding:16px; max-width:100%; border-radius:12px; margin-top:8px; }
  .modal-box .row{ flex-direction:column; gap:0; }
  .modal-actions{ flex-wrap:wrap; }
  .modal-actions button{ flex:1; }
}

/* ---- Buttons ---- */
.modal-actions button, .form-actions button{
  font-size:14px; font-weight:600; padding:10px 18px; border:none; border-radius:var(--r-sm); cursor:pointer;
  background:#eef1f6; color:var(--text); transition:filter .12s, transform .06s;
}
.modal-actions button:active, .form-actions button:active{ transform:translateY(1px); }
.primary{ background:var(--brand) !important; color:#fff !important; box-shadow:0 2px 6px rgba(36,87,214,.3); }
.primary:hover{ filter:brightness(1.06); }
.danger{ background:var(--red) !important; color:#fff !important; }

/* ---- Modal ---- */
.modal{ position:fixed; inset:0; background:rgba(20,28,46,.5); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:60; padding:14px; animation:fade .15s ease; }
.modal-box{ background:var(--surface); border-radius:var(--r-lg); padding:22px; width:100%; max-width:460px; max-height:92vh; overflow:auto; box-shadow:var(--sh-pop); }
.modal-box h3{ margin:0 0 16px; font-size:19px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.modal-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.modal-actions .spacer{ flex:1; }

/* ---- Login ---- */
.login-screen{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:70; padding:18px;
  background:radial-gradient(120% 90% at 15% 0%, #1a6b58 0%, rgba(26,107,88,0) 60%), radial-gradient(90% 70% at 100% 100%, #0e4f63 0%, rgba(14,79,99,0) 55%), #0a2a24; }
.login-box{ background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.5); border-radius:var(--r-lg); padding:30px 26px; width:100%; max-width:350px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.login-box h2{ margin:0 0 4px; font-size:26px; font-weight:800; letter-spacing:.3px; color:var(--brand-2); }
.login-box p{ color:var(--text-2); margin:0 0 8px; }
@media(max-width:560px){
  .login-screen{ align-items:flex-end; padding:0; }
  .login-box{ max-width:none; border-radius:26px 26px 0 0; padding:30px 22px calc(30px + env(safe-area-inset-bottom)); box-shadow:0 -12px 44px rgba(0,0,0,.55); position:relative; }
  .login-box::before{ content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:42px; height:5px; border-radius:3px; background:#d3d9e2; }
  .login-box h2{ font-size:28px; margin-top:8px; }
  .login-box input{ padding:15px 16px; }
}
.login-box input{ width:100%; font-size:16px; padding:14px 14px; margin:10px 0; border:1px solid var(--border-strong); border-radius:12px; background:#f7f9fc; transition:border-color .15s, box-shadow .15s; }
.login-box input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(36,87,214,.15); background:#fff; }
.login-box button#login-btn{ width:100%; padding:15px; margin-top:6px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none; border-radius:12px; font-size:16px; font-weight:700; letter-spacing:.3px; cursor:pointer; box-shadow:0 8px 20px rgba(36,87,214,.35); transition:filter .12s, transform .05s; }
.login-box button#login-btn:hover{ filter:brightness(1.06); }
.login-box button#login-btn:active{ transform:translateY(1px); }
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:44px !important; }
.pw-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:auto !important; height:auto !important; margin:0 !important; padding:6px !important; background:transparent !important; border:none !important; color:var(--muted) !important; cursor:pointer; display:flex; align-items:center; }
.pw-toggle:hover{ color:var(--brand) !important; }
.pw-toggle.on{ color:var(--brand) !important; }
.error{ color:var(--red); font-size:13px; margin-top:8px; }


.spinner{ width:26px; height:26px; border:3px solid var(--border-strong); border-top-color:var(--brand); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===========================================================
   PERSONALE — "Ledger" personal-finance theme
   Fully scoped under body.mode-fin / .pers (fin-only class names) so
   Hotel & Bar are never affected. Own palette, type, cards, charts.
   =========================================================== */
body.mode-fin{
  /* palette tokens (scoped) */
  --p-ink:#0d1f1c; --p-ink-2:#3d534e; --p-muted:#83978f;
  --p-canvas:#f3f6f3; --p-card:#ffffff; --p-card-2:#f7faf8;
  --p-line:#e5ece8; --p-line-2:#d6e0da;
  --p-brand:#0f8a78; --p-brand-d:#0b6b5e; --p-brand-soft:#e2f3ee; --p-mint:#28c39b;
  --p-gold:#b57e22; --p-gold-soft:#f7eeda; --p-warn:#c2610c; --p-warn-soft:#fdeedd;
  --p-pos:#16a06a; --p-pos-soft:#e4f6ec; --p-neg:#e0555f; --p-neg-soft:#fceaec;
  --p-violet:#6d5ce0; --p-violet-soft:#efeafe;
  --p-r:18px; --p-r-sm:12px; --p-r-xs:9px;
  --p-sh:0 1px 2px rgba(11,31,28,.04), 0 8px 24px -14px rgba(11,31,28,.20);
  --p-sh-2:0 20px 48px -20px rgba(11,31,28,.34);
  --p-font:"Space Grotesk","Inter",system-ui,sans-serif;
  background:var(--p-canvas);
}
/* retheme shared chrome (only while in Personale mode) */
body.mode-fin .tabs{ background:var(--p-card); border-bottom-color:var(--p-line); }
body.mode-fin .tab-btn:hover{ background:var(--p-card-2); color:var(--p-ink); }
body.mode-fin .tab-btn.active{ background:var(--p-brand-soft); color:var(--p-brand-d); }
body.mode-fin .ms-btn.active{ color:var(--p-brand-d); }
body.mode-fin .topbar{ background:linear-gradient(112deg, #0b2a25 0%, #124d43 54%, #0f8a78 132%); box-shadow:0 3px 0 var(--p-brand), var(--sh-2); }
body.mode-fin .tab{ padding:20px 18px 90px; }
body.mode-fin .tab-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:var(--p-neg); color:#fff; font-size:11px; font-weight:700; line-height:1; vertical-align:1px; font-variant-numeric:tabular-nums; }
@media(max-width:560px){ body.mode-fin .tab{ padding:14px 12px 96px; } }

/* ---------- shell ---------- */
.pers{ max-width:1120px; margin:0 auto; color:var(--p-ink); font-size:14px; }
.pers .muted{ color:var(--p-muted); }
.pers *{ -webkit-tap-highlight-color:transparent; }
.pers .pos, .pers-modal .pos{ color:var(--p-pos); } .pers .neg, .pers-modal .neg{ color:var(--p-neg); }
.p-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:2px 0 18px; }
.p-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--p-brand-d); }
.p-mark{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--p-brand); color:#fff; font-size:12px; font-weight:700; }
.p-title{ font-family:var(--p-font); font-weight:600; font-size:30px; letter-spacing:-.6px; margin:5px 0 0; line-height:1.05; }
.p-hero-r{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.p-pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--p-ink-2); background:var(--p-card); border:1px solid var(--p-line-2); border-radius:22px; padding:6px 13px; box-shadow:var(--p-sh); font-variant-numeric:tabular-nums; }
.p-pill-plain b{ color:var(--p-brand-d); } .p-pill-plain b.due-now{ color:var(--p-neg); }
.p-add-btn{ padding:10px 20px; }
.p-link{ background:none; border:none; padding:6px 4px; margin-left:auto; color:var(--p-brand-d); font-weight:600; font-size:13px; cursor:pointer; border-radius:7px; white-space:nowrap; }
.p-link:hover{ text-decoration:underline; }

/* ---------- cards ---------- */
.p-card{ background:var(--p-card); border:1px solid var(--p-line); border-radius:var(--p-r); padding:18px; box-shadow:var(--p-sh); margin-bottom:16px; }
.p-card-h{ display:flex; align-items:center; gap:10px; margin:0 0 14px; flex-wrap:wrap; }
.p-card h3{ font-family:var(--p-font); font-weight:600; font-size:15px; letter-spacing:-.2px; margin:0; color:var(--p-ink); }
.p-card-sub{ font-size:12px; color:var(--p-muted); margin-left:auto; text-align:right; }
.p-card-sub + .p-link, .p-card-sub + .p-btn{ margin-left:0; }
.p-card-sub-inline{ font-family:"Inter"; font-size:12px; font-weight:500; color:var(--p-muted); margin-left:4px; }
.p-count{ display:inline-block; font-family:"Inter"; font-size:11px; font-weight:700; color:var(--p-brand-d); background:var(--p-brand-soft); border-radius:20px; padding:1px 9px; margin-left:6px; vertical-align:middle; }
.p-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.p-grid-2 > .p-card{ margin-bottom:16px; }
@media(max-width:820px){ .p-grid-2{ grid-template-columns:minmax(0,1fr); gap:0; } }
.p-tag{ display:inline-block; font-size:10.5px; font-weight:700; padding:1px 8px; border-radius:20px; vertical-align:middle; }
.p-tag.muted{ background:var(--p-card-2); color:var(--p-muted); }

/* ---------- "Sa kam" hero (net worth) ---------- */
.p-nw{ display:grid; grid-template-columns:minmax(240px,1fr) 1.35fr; gap:22px; align-items:center;
  background:radial-gradient(120% 140% at 0% 0%, #14413a 0%, #0e2e2a 46%, #0a2320 100%);
  border-radius:var(--p-r); padding:22px 24px; margin-bottom:16px; color:#eafcf6;
  box-shadow:0 24px 60px -28px rgba(9,40,35,.7); position:relative; overflow:hidden; }
.p-nw::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(94,234,212,.16), transparent 70%); pointer-events:none; }
.p-nw-label{ font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#7fd8c6; }
.p-nw-val{ font-family:var(--p-font); font-weight:600; font-size:40px; letter-spacing:-1.4px; margin:6px 0 14px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.p-nw-delta{ font-family:"Inter"; font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:0; }
.p-nw-delta.up{ color:#052e1c; background:#6ee7b7; } .p-nw-delta.down{ color:#fff; background:#e0555f; }
.nw-chips{ display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
.nw-chip{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:500; color:#cfeee7; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:6px 12px; cursor:pointer; transition:background .12s; }
.nw-chip:hover{ background:rgba(255,255,255,.14); }
.nw-chip b{ color:#fff; font-weight:700; font-variant-numeric:tabular-nums; }
.nw-chip i{ width:8px; height:8px; border-radius:50%; }
.nw-chip i.k-bank{ background:#5eead4; } .nw-chip i.k-wallet{ background:#8bd7ad; } .nw-chip i.k-reserve{ background:#f3c77a; }
.nw-chip i.k-pos{ background:#8bd7ad; } .nw-chip i.k-neg{ background:#f0a3a9; }
.nw-empty{ font-size:13px; color:#b9ddd5; } .nw-empty b{ color:#fff; }
.p-nw-chart{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.p-nw-chart .p-svg-area{ height:140px; }
.p-nw-chart .p-grid{ stroke:rgba(255,255,255,.10); }
.p-nw-chart .p-axis{ color:#7fd8c6; }
@media(max-width:720px){ .p-nw{ grid-template-columns:1fr; gap:14px; padding:20px; } .p-nw-val{ font-size:34px; } .p-nw-chart .p-svg-area{ height:110px; } }

/* ---------- "Kete muaj" ---------- */
.km-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.km{ background:var(--p-card-2); border:1px solid var(--p-line); border-radius:var(--p-r-sm); padding:11px 12px; min-width:0; }
.km span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--p-muted); }
.km b{ display:block; font-family:var(--p-font); font-weight:600; font-size:23px; letter-spacing:-.6px; margin-top:4px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.km-bar{ height:8px; background:var(--p-line); border-radius:6px; overflow:hidden; margin-top:14px; }
.km-bar span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--p-brand),var(--p-neg)); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.km-cmp{ font-size:12.5px; color:var(--p-ink-2); margin:10px 0 0; line-height:1.45; }

/* ---------- phone: swipe cards on Paneli ---------- */
.ds{ margin-bottom:4px; }
.ds-tabs{ display:flex; gap:4px; background:var(--p-card-2); border:1px solid var(--p-line); border-radius:12px; padding:4px; margin-bottom:12px; }
.ds-tab{ flex:1; border:none; background:transparent; font-family:var(--p-font); font-weight:600; font-size:14px; color:var(--p-muted); padding:9px 6px; border-radius:9px; cursor:pointer; transition:all .15s; }
.ds-tab.on{ background:var(--p-card); color:var(--p-brand-d); box-shadow:var(--p-sh); }
.ds-track{ display:flex; gap:16px; align-items:stretch; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; margin:0 -4px; padding:0 4px 4px; }
.ds-track::-webkit-scrollbar{ display:none; }
.ds-slide{ flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; }
.ds-slide > :last-child{ margin-bottom:12px; flex:1 1 auto; }   /* the last card fills the shared height */
.ds-slide .brk-card{ display:flex; flex-direction:column; }
.ds-slide .brk-card .brk-bars{ flex:1 1 auto; justify-content:space-evenly; gap:2px; }   /* rows spread over the extra height */
.ds-slide .brk-card > .p-empty{ flex:1 1 auto; }

/* ---------- "Per kete muaj" checklist (bills + salary) ---------- */
.chk-list{ display:flex; flex-direction:column; }
.chk-row{ display:flex; align-items:center; gap:11px; padding:10px 2px; border-bottom:1px solid var(--p-line); }
.chk-row:last-child{ border-bottom:none; }
.chk-dot{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:2px solid var(--p-line-2); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.chk-row.is-done .chk-dot{ background:var(--p-pos); border-color:var(--p-pos); }
.chk-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.chk-n{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chk-s{ font-size:12px; color:var(--p-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chk-amt{ flex:0 0 auto; font-family:var(--p-font); font-weight:600; font-variant-numeric:tabular-nums; }
.chk-row.is-in .chk-amt{ color:var(--p-pos); }
.chk-row.is-done .chk-n, .chk-row.is-done .chk-amt{ color:var(--p-muted); }
.chk-btn{ flex:0 0 auto; min-width:74px; border:none; border-radius:9px; padding:8px 12px; font-family:var(--p-font); font-weight:600; font-size:13px; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--p-brand),var(--p-brand-d)); box-shadow:0 5px 12px -7px rgba(11,107,94,.8); }
.chk-btn.in{ background:linear-gradient(135deg,#1fb47a,var(--p-pos)); }
.chk-btn:hover{ filter:brightness(1.06); }
.chk-state{ flex:0 0 auto; min-width:74px; border:1px solid #bde7cd; background:var(--p-pos-soft); color:var(--p-pos); border-radius:9px; padding:7px 10px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.chk-state:hover{ border-color:var(--p-pos); }

/* ---------- charts ---------- */
.p-svg{ display:block; width:100%; }
.p-svg-area{ height:170px; } .p-svg-bars{ height:170px; }
.p-grid{ stroke:var(--p-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.p-grid-dash{ stroke-dasharray:3 4; }
.p-bar-in{ fill:var(--p-brand); } .p-bar-out{ fill:var(--p-neg); opacity:.92; }
.p-axis{ display:flex; justify-content:space-between; gap:4px; margin-top:7px; font-size:10.5px; color:var(--p-muted); font-variant-numeric:tabular-nums; overflow:hidden; }
.p-axis span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; text-align:center; }
.p-axis span:first-child{ text-align:left; } .p-axis span:last-child{ text-align:right; }
.p-legend-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:6px; font-size:11.5px; font-weight:600; color:var(--p-ink-2); }
.p-legend-row span{ display:inline-flex; align-items:center; gap:6px; }
.p-legend-row i{ width:11px; height:11px; border-radius:3px; }
.p-legend-row i.lg-in{ background:var(--p-brand); } .p-legend-row i.lg-out{ background:var(--p-neg); } .p-legend-row i.lg-net{ background:var(--p-violet); border-radius:50%; }
.p-chart-empty{ padding:26px 10px; text-align:center; color:var(--p-muted); font-size:13px; background:var(--p-card-2); border:1px dashed var(--p-line-2); border-radius:var(--p-r-sm); }
.p-hbars{ display:flex; flex-direction:column; gap:4px; }
.p-hbar{ display:flex; align-items:center; gap:11px; font-size:13px; }
.p-hbar-l{ width:34%; max-width:150px; flex:0 0 auto; color:var(--p-ink-2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:7px; }
.p-hbar-l i{ flex:0 0 auto; width:9px; height:9px; border-radius:3px; }
.p-hbar-track{ flex:1; height:9px; background:var(--p-line); border-radius:6px; overflow:hidden; }
.p-hbar-fill{ display:block; height:100%; border-radius:6px; transition:width .5s cubic-bezier(.2,.7,.2,1); }
.p-hbar-v{ width:70px; flex:0 0 auto; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.cat-bar{ width:100%; font:inherit; color:inherit; background:none; border:none; border-radius:8px; padding:6px 4px; cursor:pointer; text-align:left; }
.cat-bar:hover{ background:var(--p-card-2); } .cat-bar:hover .p-hbar-l{ color:var(--p-brand-d); }
.p-spark{ display:block; width:100%; height:26px; }
/* empty state */
.p-empty{ display:flex; align-items:center; justify-content:center; gap:9px; padding:22px 12px; color:var(--p-muted); font-size:13px; text-align:center; }
.p-empty-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:var(--p-card-2); color:var(--p-brand); font-size:13px; }
.mv-empty-add{ display:flex; justify-content:center; padding:0 0 14px; }
/* interactive chart tooltip */
.p-chart{ position:relative; touch-action:pan-y; }
.p-cursor{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--p-line-2); display:none; pointer-events:none; transform:translateX(-0.5px); }
.p-cursor-dot{ position:absolute; left:-4px; width:8px; height:8px; border-radius:50%; background:var(--p-brand); box-shadow:0 0 0 3px rgba(15,138,120,.2); transform:translateY(-50%); }
.p-tip{ position:absolute; top:0; transform:translate(-50%,-108%); display:none; pointer-events:none; z-index:5;
  background:var(--p-ink); color:#fff; font-size:11.5px; line-height:1.5; font-weight:500; padding:6px 9px; border-radius:8px; white-space:nowrap; box-shadow:0 8px 22px -8px rgba(11,31,28,.5); font-variant-numeric:tabular-nums; }
.p-tip b{ font-weight:700; } .p-tip i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:baseline; }
.p-tip i.lg-in{ background:var(--p-brand); } .p-tip i.lg-out{ background:var(--p-neg); } .p-tip i.lg-net{ background:var(--p-violet); }
.p-tip .tip-mut{ color:#9fb0ab; font-weight:500; }
.p-chart-dark .p-cursor{ border-left-color:rgba(255,255,255,.35); }
.p-chart-dark .p-cursor-dot{ background:#5eead4; box-shadow:0 0 0 3px rgba(94,234,212,.25); }
.p-chart-dark .p-tip{ background:#052e28; box-shadow:0 8px 22px -8px rgba(0,0,0,.6); }

/* ---------- buttons, hints, segmented control, collapsible ---------- */
.p-btn{ font-family:var(--p-font); font-weight:600; font-size:14px; padding:11px 22px; border-radius:var(--p-r-xs); border:1px solid var(--p-line-2); background:var(--p-card); color:var(--p-ink); cursor:pointer; transition:all .14s; }
.p-btn:not(.p-btn-primary):hover{ background:var(--p-card-2); color:var(--p-ink); }
.p-btn-primary{ background:linear-gradient(135deg,var(--p-brand),var(--p-brand-d)); color:#fff; border:none; box-shadow:0 6px 16px -8px rgba(11,107,94,.7); }
.p-btn-primary:hover{ background:linear-gradient(135deg,var(--p-brand-d),#085146); color:#fff; box-shadow:0 8px 20px -8px rgba(11,107,94,.85); }
.p-btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.p-btn-sm{ padding:7px 14px; font-size:13px; }
.p-hint{ font-size:12px; color:var(--p-muted); margin:0 0 12px; line-height:1.5; }
.p-inline{ display:flex; gap:8px; align-items:center; }
.p-inline > input{ flex:1; min-width:0; }
.p-inline > select{ flex:0 0 auto; width:auto; }
.p-seg{ display:inline-flex; gap:2px; background:var(--p-card-2); border:1px solid var(--p-line); border-radius:9px; padding:3px; }
.p-seg-btn{ border:none; background:transparent; color:var(--p-muted); font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:7px; cursor:pointer; transition:all .12s; white-space:nowrap; }
.p-seg-btn:hover{ color:var(--p-ink); }
.p-seg-btn.on{ background:var(--p-card); color:var(--p-brand-d); box-shadow:var(--p-sh); }
.p-collapse summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; font-family:var(--p-font); font-weight:600; font-size:15px; color:var(--p-ink); min-height:40px; }
.p-collapse summary::-webkit-details-marker{ display:none; }
.p-collapse summary::before{ content:"›"; flex:0 0 auto; color:var(--p-brand-d); font-size:19px; font-weight:800; line-height:1; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:var(--p-brand-soft); border-radius:8px; transition:transform .18s; }
.p-collapse details[open] summary::before{ transform:rotate(90deg); }
.pf-del{ background:none; border:none; color:var(--p-muted); cursor:pointer; font-size:14px; padding:4px 7px; border-radius:6px; }
.pf-del:hover{ color:var(--p-neg); background:var(--p-neg-soft); }

/* ---------- day chips (TODO due date + money date) ---------- */
.due-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.due-chip{ position:relative; display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:13px; font-weight:600; color:var(--p-ink-2); background:var(--p-card); border:1px solid var(--p-line-2); border-radius:20px; padding:6px 12px; cursor:pointer; transition:all .12s; user-select:none; -webkit-user-select:none; }
.due-chip:hover{ border-color:var(--p-brand); color:var(--p-brand-d); }
.due-chip.on{ background:var(--p-brand-soft); border-color:var(--p-brand); color:var(--p-brand-d); }
.due-pick input{ position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; border:0; padding:0; pointer-events:none; }

/* ---------- TODO ---------- */
.p-todo-add{ display:flex; flex-direction:column; gap:12px; }
.todo-add-form{ display:flex; gap:10px; }
.todo-add-form input{ flex:1; min-width:0; font-size:16px; padding:12px 14px; border:1px solid var(--p-line-2); border-radius:var(--p-r-xs); background:var(--p-card); color:var(--p-ink); }
.todo-add-form input:focus, .todo-edit input:focus{ outline:none; border-color:var(--p-brand); box-shadow:0 0 0 3px var(--p-brand-soft); }
.todo-list{ list-style:none; margin:0; padding:0; }
.todo-item{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--p-line); }
.todo-item:last-child{ border-bottom:none; }
.todo-rank .todo-item{ background:var(--p-card); border:1px solid var(--p-line); border-radius:12px; margin-bottom:8px; padding:8px 10px 8px 6px; transition:box-shadow .12s; }
.todo-rank .todo-item:last-child{ border-bottom:1px solid var(--p-line); margin-bottom:0; }
.todo-rank .todo-item.due-late{ box-shadow:inset 3px 0 0 var(--p-neg); }
.todo-rank .todo-item.due-today{ box-shadow:inset 3px 0 0 var(--p-warn); }
.todo-rank .todo-item.dragging{ box-shadow:var(--p-sh-2); opacity:.97; position:relative; z-index:20; }
.todo-rank .todo-item.drop-before{ box-shadow:inset 0 3px 0 var(--p-brand); }
.todo-rank .todo-item.drop-after{ box-shadow:inset 0 -3px 0 var(--p-brand); }
.todo-grip{ flex:0 0 auto; color:var(--p-muted); cursor:grab; font-size:17px; line-height:1; padding:8px 4px; touch-action:none; user-select:none; -webkit-user-select:none; }
.todo-grip:active{ cursor:grabbing; }
.todo-check{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:2px solid var(--p-line-2); background:var(--p-card); cursor:pointer; color:transparent; font-size:13px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; transition:all .14s; }
.todo-check:hover{ border-color:var(--p-brand); color:var(--p-brand); }
.todo-check:hover::after{ content:"✓"; }
.todo-item.done .todo-check{ background:var(--p-brand); border-color:var(--p-brand); color:#fff; }
.todo-item.done .todo-check::after{ content:none; }
.todo-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; font:inherit; color:inherit; text-align:left; background:none; border:none; padding:4px 2px; cursor:text; border-radius:8px; }
.todo-text{ flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.35; overflow-wrap:anywhere; }
.todo-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
.todo-note{ font-size:12.5px; color:var(--p-muted); overflow-wrap:anywhere; }
.todo-due{ flex:0 0 auto; font-size:11px; font-weight:700; padding:1px 8px; border-radius:20px; white-space:nowrap; }
.todo-due.late{ color:var(--p-neg); background:var(--p-neg-soft); }
.todo-due.today{ color:var(--p-warn); background:var(--p-warn-soft); }
.todo-due.soon{ color:var(--p-brand-d); background:var(--p-brand-soft); }
.todo-due.later{ color:var(--p-ink-2); background:var(--p-card-2); border:1px solid var(--p-line); }
.todo-item.done .todo-text{ text-decoration:line-through; color:var(--p-muted); }
.todo-hint{ margin:12px 2px 0 !important; }
.todo-item.editing{ display:block; padding:12px; box-shadow:0 0 0 2px var(--p-brand-soft); border-color:var(--p-brand); }
.todo-edit{ display:flex; flex-direction:column; gap:10px; }
.todo-edit input{ width:100%; font-size:16px; padding:10px 12px; border:1px solid var(--p-line-2); border-radius:var(--p-r-xs); background:var(--p-card); color:var(--p-ink); }
.todo-edit .te-note{ font-size:14px; }
.te-actions{ display:flex; align-items:center; gap:8px; }
.te-actions .spacer{ flex:1; }
.te-actions .p-btn{ padding:9px 16px; }
.todo-history{ margin-top:8px; display:flex; flex-direction:column; gap:14px; }
.th-day .th-date{ font-size:11.5px; font-weight:700; letter-spacing:.4px; color:var(--p-muted); text-transform:uppercase; margin-bottom:4px; }
.done-list .todo-item{ padding:7px 2px; }
.done-list .todo-check{ width:24px; height:24px; }
.todo-mini .todo-item{ padding:9px 2px; }
.todo-mini .todo-text{ font-size:14px; }
/* time · person · reminder · follow-ups */
.todo-person{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--p-violet); background:var(--p-violet-soft); padding:1px 8px; border-radius:20px; white-space:nowrap; }
.todo-bell{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--p-ink-2); background:var(--p-card-2); border:1px solid var(--p-line); padding:0 7px; border-radius:20px; white-space:nowrap; }
.todo-ico{ width:11px; height:11px; flex:0 0 auto; opacity:.85; }
.todo-after{ font-size:11.5px; color:var(--p-muted); }
.todo-rank .todo-item.lvl-1{ margin-left:30px; }
.todo-rank .todo-item.lvl-2{ margin-left:56px; }
.todo-branch{ flex:0 0 auto; color:var(--p-muted); font-size:15px; padding:8px 4px; }
.todo-mini-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.te-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.te-f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.te-f > span{ font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p-muted); }
.te-f input, .te-f select{ width:100%; min-width:0; font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--p-line-2); border-radius:9px; background:var(--p-card); color:var(--p-ink); }
.te-f input:focus, .te-f select:focus{ outline:none; border-color:var(--p-brand); box-shadow:0 0 0 3px var(--p-brand-soft); }
.te-follow{ display:flex; gap:8px; }
.te-follow input{ flex:1; min-width:0; font:inherit; font-size:14px; padding:8px 10px; border:1px dashed var(--p-line-2); border-radius:9px; background:var(--p-card-2); }
.te-follow .p-btn{ padding:8px 14px; }
.te-kids{ list-style:none; margin:0; padding:0 0 0 4px; font-size:13px; color:var(--p-ink-2); display:flex; flex-direction:column; gap:2px; }
.te-kids:empty{ display:none; }
.todo-add-more{ margin-top:2px; }
.todo-more-btn{ margin-left:0; align-self:flex-start; padding:2px 0; }
.todo-add-parent{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--p-ink-2); background:var(--p-brand-soft); border-radius:9px; padding:5px 10px; }
.todo-add-parent .p-link{ padding:0 4px; margin-left:auto; }
.tg-pill{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.tg-logo{ width:15px; height:15px; flex:0 0 auto; }
.tg-pill.on .tg-logo{ color:#229ed9; }
.tg-dot{ width:7px; height:7px; border-radius:50%; background:#1f9d57; box-shadow:0 0 0 2px #d8f1e3; }
.tg-pill.on{ color:#1d7fc4; border-color:#b9dcf3; background:#eaf5fd; }
.p-btn.tg-pill{ background:#229ed9; border-color:#229ed9; color:#fff; }
.p-btn.tg-pill:hover{ background:#1b8bc0; color:#fff; }
.tg-sheet p{ margin:0 0 10px; line-height:1.5; }
.mcp-pill{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer; }
.mcp-ico{ width:14px; height:14px; flex:0 0 auto; }
.mcp-sheet p{ margin:0 0 12px; line-height:1.5; }
.mcp-url{ display:flex; gap:8px; margin:4px 0 14px; }
.mcp-url input{ flex:1; min-width:0; padding:9px 11px; border:1px solid var(--p-line); border-radius:10px; font:13px ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--p-card-2); color:var(--p-ink); }
.mcp-sheet .p-label{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--p-muted); margin:6px 0 2px; }
.mcp-steps{ margin:0 0 14px; padding-left:18px; font-size:13.5px; line-height:1.55; color:var(--p-ink-2); }
.mcp-steps li{ margin-bottom:4px; }
.mcp-apps{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.mcp-app{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--p-line); border-radius:12px; }
.mcp-app span{ display:block; font-size:12px; color:var(--p-muted); }
.mcp-off{ color:#c0392b; }
@media(max-width:560px){ .mcp-lbl{ display:none; } }
.tg-sheet-h{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tg-sheet-h .tg-logo{ width:36px; height:36px; color:#229ed9; }
.tg-sheet-h span{ display:block; font-size:12px; color:#1f9d57; font-weight:600; }
@media(max-width:560px){
  .te-fields{ grid-template-columns:1fr 1fr; }
  .te-fields .te-f:last-child{ grid-column:1 / -1; }
  .todo-rank .todo-item.lvl-1{ margin-left:18px; } .todo-rank .todo-item.lvl-2{ margin-left:32px; }
}

/* ---------- period picker (Paneli breakdown + Levizjet) ---------- */
.pp{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pp-kind{ font:inherit; font-size:13.5px; font-weight:600; color:var(--p-ink); background:var(--p-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b6b5e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--p-line-2); border-radius:10px; padding:8px 32px 8px 12px; -webkit-appearance:none; appearance:none; cursor:pointer; box-shadow:var(--p-sh); }
.pp-step{ display:inline-flex; align-items:center; gap:2px; background:var(--p-card); border:1px solid var(--p-line); border-radius:10px; padding:3px; box-shadow:var(--p-sh); }
.pp-nav{ width:32px; height:32px; border:none; background:var(--p-card-2); color:var(--p-brand-d); border-radius:8px; font-size:18px; font-weight:700; cursor:pointer; line-height:1; }
.pp-nav:hover:not(:disabled){ background:var(--p-brand-soft); }
.pp-nav:disabled{ opacity:.35; cursor:default; }
.pp-label{ font-family:var(--p-font); font-weight:600; font-size:14.5px; min-width:118px; text-align:center; padding:0 4px; white-space:nowrap; }
.pp-range{ display:inline-flex; align-items:center; gap:6px; color:var(--p-muted); }
.pp-range input{ font:inherit; font-size:14px; padding:7px 9px; border:1px solid var(--p-line-2); border-radius:9px; background:var(--p-card); color:var(--p-ink); }
.pp-kind:focus, .pp-range input:focus{ outline:none; border-color:var(--p-brand); box-shadow:0 0 0 3px var(--p-brand-soft); }
/* "Ku shkuan parate" card */
.brk-h .pp{ margin-left:auto; }
.brk-total{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:-2px 0 10px; }
.brk-total b{ font-family:var(--p-font); font-weight:600; font-size:26px; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.brk-total span{ font-size:12.5px; color:var(--p-muted); }
/* comparison with the previous period (last month by default) */
.brk-vs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--p-muted); margin:-4px 0 12px; font-variant-numeric:tabular-nums; }
.brk-vs b{ color:var(--p-ink-2); font-weight:700; }
.brk-row{ display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.brk-row .p-hbar{ width:100%; }
.brk-cmp{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-left:16px; font-size:11.5px; color:var(--p-muted); font-variant-numeric:tabular-nums; }
.brk-delta{ font-size:11px; font-weight:700; padding:1px 8px; border-radius:20px; white-space:nowrap; }
.brk-delta.up{ color:var(--p-neg); background:var(--p-neg-soft); }
.brk-delta.down{ color:var(--p-pos); background:var(--p-pos-soft); }
.brk-delta.new{ color:var(--p-warn); background:var(--p-warn-soft); }
.brk-delta.flat{ color:var(--p-muted); background:var(--p-card-2); }
.brk-row.is-zero .p-hbar-l, .brk-row.is-zero .p-hbar-v{ color:var(--p-muted); }
.brk-more{ display:block; margin:8px auto 2px; }
.brk-bars .p-hbar-v{ width:112px; }
.p-hbar-v small{ display:inline-block; min-width:36px; margin-left:6px; font-size:11px; font-weight:600; color:var(--p-muted); text-align:right; }
.brk-hist{ display:flex; flex-direction:column; gap:2px; width:100%; margin-top:12px; padding:10px 12px; font:inherit; text-align:left; color:var(--p-ink-2); background:var(--p-card-2); border:1px dashed var(--p-line-2); border-radius:10px; cursor:pointer; }
.brk-hist:hover{ border-color:var(--p-brand); }
.brk-hist b{ color:var(--p-ink); font-weight:600; }
.brk-hist small{ font-size:12px; color:var(--p-muted); }

/* ---------- movements (Levizjet, account history) ---------- */
.mv-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.mv-sum{ display:flex; gap:8px; }
.mv-clear{ margin-left:0; }
.mv-month-h{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--p-font); font-weight:600; font-size:14.5px; color:var(--p-ink); padding:18px 4px 6px; border-bottom:2px solid var(--p-line); }
.mv-month-h:first-child{ padding-top:10px; }
.mv-month-out{ font-family:"Inter"; font-size:12.5px; font-weight:700; color:var(--p-neg); font-variant-numeric:tabular-nums; }
.ms{ display:flex; flex-direction:column; background:var(--p-card); border:1px solid var(--p-line); border-radius:12px; padding:7px 13px; min-width:92px; box-shadow:var(--p-sh); font-family:var(--p-font); font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; }
.ms small{ font-family:"Inter"; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--p-muted); }
.ms-in{ color:var(--p-pos); } .ms-out{ color:var(--p-neg); } .ms-net.pos{ color:var(--p-pos); } .ms-net.neg{ color:var(--p-neg); }
.mv-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.mv-sel, .mv-search{ font:inherit; font-size:14px; padding:8px 11px; border:1px solid var(--p-line-2); border-radius:9px; background:var(--p-card); color:var(--p-ink); }
.mv-search{ flex:1; min-width:140px; }
.mv-sel:focus, .mv-search:focus{ outline:none; border-color:var(--p-brand); box-shadow:0 0 0 3px var(--p-brand-soft); }
.mv-card{ padding:4px 14px 8px; }
.mv-day-h{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p-muted); padding:14px 4px 4px; }
.mv-day-out{ color:var(--p-neg); font-variant-numeric:tabular-nums; letter-spacing:0; }
.mv-item{ display:flex; align-items:center; gap:12px; width:100%; font:inherit; color:inherit; text-align:left; background:none; border:none; border-bottom:1px solid var(--p-line); padding:10px 4px; cursor:pointer; border-radius:0; transition:background .1s; }
.mv-day .mv-item:last-child{ border-bottom:none; }
.mv-item:hover{ background:var(--p-card-2); }
.mv-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--p-font); font-weight:700; font-size:14px; color:var(--c); background:var(--p-card-2); background:color-mix(in srgb, var(--c) 14%, #fff); }
.mv-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mv-t{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mv-s{ font-size:12px; color:var(--p-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mv-amt{ flex:0 0 auto; text-align:right; font-family:var(--p-font); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }
.mv-amt.neg{ color:var(--p-neg); } .mv-amt.pos{ color:var(--p-pos); } .mv-amt.tr{ color:var(--p-ink-2); }
.mv-amt small{ display:block; font-family:"Inter"; font-size:11px; font-weight:500; color:var(--p-muted); }
.mvd{ text-align:center; padding:6px 0 4px; }
.mvd .mv-amt{ font-size:30px; text-align:center; }
.mvd-meta{ font-size:13px; color:var(--p-muted); margin:4px 0 10px; }

/* ---------- accounts ---------- */
.acc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.acc-head .p-btn{ white-space:nowrap; }
.acc-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
.acc-cols .acc-grid{ grid-template-columns:1fr; }
@media(max-width:820px){ .acc-cols{ grid-template-columns:1fr; gap:0; } }
.acc-total{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.acc-total small{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--p-muted); width:100%; }
.acc-total b{ font-family:var(--p-font); font-weight:600; font-size:28px; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.acc-total .muted{ font-size:12.5px; }
.acc-sec{ margin:2px 0 6px; }
.acc-sec-h{ display:flex; align-items:baseline; gap:8px; font-family:var(--p-font); font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--p-ink-2); margin:6px 2px 10px; }
.acc-sec-h small{ font-family:"Inter"; font-size:11px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--p-muted); }
.acc-sec-t{ margin-left:auto; font-variant-numeric:tabular-nums; }
.acc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin:0 0 14px; }
.acc-card{ position:relative; display:flex; flex-direction:column; align-items:stretch; width:100%; font:inherit; color:inherit; text-align:left; background:var(--p-card); border:1px solid var(--p-line); border-radius:var(--p-r); padding:16px 17px; box-shadow:var(--p-sh); cursor:pointer; transition:box-shadow .14s, transform .14s; }
.acc-card:hover{ box-shadow:var(--p-sh-2); transform:translateY(-2px); }
.acc-card:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--p-brand-soft), var(--p-sh); }
.acc-card::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:3px; background:var(--p-brand); }
.acc-card.k-wallet{ background:linear-gradient(180deg,#fff,#f4fbf7); } .acc-card.k-wallet::before{ background:var(--p-pos); }
.acc-card.k-reserve{ background:linear-gradient(180deg,#fff,#fbf6ec); } .acc-card.k-reserve::before{ background:var(--p-gold); }
.acc-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-left:8px; }
.acc-name{ font-family:var(--p-font); font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-cur{ font-size:10.5px; font-weight:700; color:var(--p-brand-d); background:var(--p-brand-soft); border-radius:20px; padding:2px 10px; white-space:nowrap; letter-spacing:.3px; }
.acc-bal{ display:block; font-family:var(--p-font); font-size:26px; font-weight:600; letter-spacing:-.8px; margin-top:8px; padding-left:8px; font-variant-numeric:tabular-nums; }
.acc-bal.neg{ color:var(--p-neg); }
.acc-eur{ display:block; font-size:12px; margin-top:1px; padding-left:8px; }
.acc-hint{ margin:-4px 2px 16px; }
.acc-acts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 4px; }
.acc-act{ font:inherit; font-family:var(--p-font); font-size:13.5px; font-weight:600; padding:12px 6px; border-radius:11px; cursor:pointer; border:1px solid var(--p-line); transition:filter .12s; }
.acc-act:hover:not(:disabled){ filter:brightness(.97); }
.acc-act:disabled{ opacity:.45; cursor:default; }
.acc-act.t-out{ background:var(--p-neg-soft); color:var(--p-neg); border-color:#f5cfd3; }
.acc-act.t-in{ background:var(--p-pos-soft); color:var(--p-pos); border-color:#bde7cd; }
.acc-act.t-tr{ background:var(--p-violet-soft); color:var(--p-violet); border-color:#ddd4fb; }
.acc-recent-h{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p-muted); margin:16px 2px 2px; }
.acc-recent-h .p-link{ text-transform:none; letter-spacing:0; margin-left:0; }
.fx-line{ font-size:12px; color:var(--p-muted); text-align:center; margin:4px 0 0; font-variant-numeric:tabular-nums; }

/* ---------- debts ---------- */
.debt-grid{ gap:18px; }
.debt-group{ border-left:3px solid var(--p-line-2); padding-left:12px; min-width:0; margin-bottom:6px; }
.debt-group.t-pos{ border-left-color:var(--p-pos); } .debt-group.t-neg{ border-left-color:var(--p-neg); }
.debt-gh{ display:flex; align-items:baseline; justify-content:space-between; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p-ink-2); margin-bottom:4px; }
.debt-gh b{ font-family:var(--p-font); font-size:17px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.debt-group.t-pos .debt-gh b{ color:var(--p-pos); } .debt-group.t-neg .debt-gh b{ color:var(--p-neg); }
.debt-row{ display:flex; align-items:center; gap:10px; width:100%; font:inherit; color:inherit; text-align:left; background:none; border:none; border-bottom:1px solid var(--p-line); padding:10px 4px; cursor:pointer; }
.debt-row:hover{ background:var(--p-card-2); }
.debt-row.is-done{ opacity:.6; }
.debt-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.debt-p{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.debt-s{ font-size:12px; color:var(--p-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.debt-bar{ display:block; height:5px; background:var(--p-line); border-radius:4px; overflow:hidden; margin-top:4px; max-width:180px; }
.debt-bar span{ display:block; height:100%; background:var(--p-pos); border-radius:4px; }
.debt-amt{ flex:0 0 auto; text-align:right; font-family:var(--p-font); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }
.debt-amt small{ display:block; font-family:"Inter"; font-size:11px; font-weight:500; color:var(--p-muted); }
.debt-none{ font-size:13px; color:var(--p-muted); padding:10px 4px; }
.debt-closed summary{ font-size:12.5px; font-weight:600; color:var(--p-muted); cursor:pointer; padding:10px 2px 4px; }
.gift-arch{ margin-top:10px; border-top:1px solid var(--p-line); padding-top:4px; }
.gift-row{ display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--p-line); font-size:13.5px; }
.gift-row span{ flex:1; min-width:0; } .gift-row b{ font-variant-numeric:tabular-nums; }
.debt-sheet-h{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:4px 2px 14px; margin-bottom:14px; border-bottom:1px solid var(--p-line); }
.debt-sheet-h span{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.debt-sheet-h b{ font-family:var(--p-font); font-size:30px; font-weight:600; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.debt-sheet-h small{ font-size:12px; color:var(--p-muted); }
.debt-pay{ margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--p-line); }

/* ---------- popup / bottom sheet ---------- */
body.pers-modal-open{ overflow:hidden; }
.pers-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(9,26,23,.44); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:pmxFade .16s ease; }
@keyframes pmxFade{ from{ opacity:0; } to{ opacity:1; } }
.pers-modal-box{ width:100%; max-width:460px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; background:var(--p-canvas); border:1px solid var(--p-line); border-radius:20px;
  box-shadow:0 30px 70px -24px rgba(9,40,35,.55); overflow:hidden; animation:pmxPop .18s cubic-bezier(.2,.8,.2,1); color:var(--p-ink); font-size:14px; }
@keyframes pmxPop{ from{ transform:translateY(12px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.pmx-head{ flex:0 0 auto; display:flex; align-items:flex-start; gap:12px; padding:18px 18px 16px; background:radial-gradient(120% 160% at 0% 0%, #14413a 0%, #0e2e2a 60%, #0a2320 100%); color:#eafcf6; }
.pmx-head-l{ min-width:0; }
.pmx-name{ font-family:var(--p-font); font-weight:600; font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pmx-head .acc-cur{ background:rgba(255,255,255,.16); color:#bff3e7; }
.pmx-bal{ font-family:var(--p-font); font-size:30px; font-weight:600; letter-spacing:-1px; margin-top:6px; font-variant-numeric:tabular-nums; }
.pmx-eur{ font-size:12px; color:#9fd6c9 !important; margin-top:1px; }
.pmx-x{ margin-left:auto; background:rgba(255,255,255,.14); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:15px; flex:0 0 auto; }
.pmx-x:hover{ background:rgba(255,255,255,.24); }
.pmx-head-plain{ background:var(--p-card); color:var(--p-ink); border-bottom:1px solid var(--p-line); padding:14px 16px; align-items:center; }
.pmx-head-plain .pmx-name{ color:var(--p-ink); }
.pmx-head-plain .pmx-x{ background:var(--p-card-2); color:var(--p-ink-2); }
.pmx-head-plain .pmx-x:hover{ background:var(--p-line); }
.pmx-body{ flex:1 1 auto; overflow:auto; padding:14px 16px 18px; }
.pmx-scroll{ max-height:44vh; overflow:auto; }
.pmx-foot{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:10px 16px; border-top:1px solid var(--p-line); background:var(--p-card); }
.pmx-foot .p-link{ margin-left:0; }

/* ---------- "+ Shto" sheet and the small forms in popups ---------- */
.qa-form{ display:flex; flex-direction:column; gap:12px; }
.qa-form input[type=text], .qa-form input[type=date], .qa-form select, .qa-form .p-inline input{ width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--p-line-2); border-radius:10px; background:var(--p-card); color:var(--p-ink); }
.qa-form .p-inline select{ width:auto; }
.qa-form input:focus, .qa-form select:focus{ outline:none; border-color:var(--p-brand); box-shadow:0 0 0 3px var(--p-brand-soft); }
.qa-seg{ display:flex; gap:3px; background:var(--p-card-2); border:1px solid var(--p-line); border-radius:12px; padding:4px; margin-bottom:12px; }
.qa-form .qa-seg{ margin-bottom:0; }
.qa-seg-btn{ flex:1; border:none; background:transparent; color:var(--p-muted); font-family:var(--p-font); font-size:14px; font-weight:600; padding:9px 6px; border-radius:9px; cursor:pointer; transition:all .12s; }
.qa-seg-btn:hover{ color:var(--p-ink); }
.qa-seg-btn.on{ background:var(--p-card); color:var(--p-brand-d); box-shadow:var(--p-sh); }
.qa-seg-btn.t-out.on{ color:var(--p-neg); } .qa-seg-btn.t-in.on{ color:var(--p-pos); } .qa-seg-btn.t-transfer.on{ color:var(--p-violet); }
.qa-amt{ display:flex; align-items:baseline; gap:8px; border-bottom:2px solid var(--p-line-2); padding:2px 2px 4px; transition:border-color .12s; }
.qa-amt:focus-within{ border-color:var(--p-brand); }
.qa-amt input{ flex:1; min-width:0; font-family:var(--p-font); font-weight:600; font-size:34px; letter-spacing:-1px; border:none; background:transparent; color:var(--p-ink); padding:0; outline:none; font-variant-numeric:tabular-nums; }
.qa-amt.t-out input{ color:var(--p-neg); } .qa-amt.t-in input{ color:var(--p-pos); }
.qa-amt input::placeholder{ color:#c3cec9; }
.qa-cur{ font-family:var(--p-font); font-size:22px; font-weight:600; color:var(--p-muted); }
.qa-conv{ font-size:12.5px; color:var(--p-muted); min-height:17px; margin-top:-6px; font-variant-numeric:tabular-nums; }
.qa-conv b{ color:var(--p-ink-2); } .qa-conv b.neg{ color:var(--p-neg); }
.qa-cats{ display:flex; flex-wrap:wrap; gap:6px; }
.qa-cat{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; color:var(--p-ink-2); background:var(--p-card); border:1px solid var(--p-line-2); border-radius:20px; padding:6px 11px; cursor:pointer; transition:all .12s; }
.qa-cat::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c); }
.qa-cat:hover{ border-color:var(--c); }
.qa-cat.on{ background:var(--c); border-color:var(--c); color:#fff; }
.qa-cat.on::before{ background:#fff; }
.qa-field{ display:flex; align-items:center; gap:10px; }
.qa-field > span{ flex:0 0 72px; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--p-muted); }
.qa-field > select, .qa-field > input{ flex:1; min-width:0; }
.qa-foot{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.qa-foot .spacer{ flex:1; }
.qa-foot .p-btn-primary{ min-width:120px; }
.qa-del{ background:none; border:none; color:var(--p-neg); font-weight:600; font-size:14px; cursor:pointer; padding:8px 4px; border-radius:7px; }
.qa-del:hover{ text-decoration:underline; }
.qa-empty{ display:flex; flex-direction:column; align-items:center; gap:4px; padding-bottom:6px; }
.rm-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.rm-item{ display:flex; align-items:center; gap:10px; width:100%; font:inherit; color:inherit; text-align:left; background:var(--p-card); border:1px solid var(--p-line); border-radius:12px; padding:9px 12px; cursor:pointer; }
.rm-item:hover{ border-color:var(--p-line-2); }
.rm-item.on{ border-color:var(--p-brand); box-shadow:0 0 0 3px var(--p-brand-soft); }
.rm-sign{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.rm-sign.in{ background:var(--p-pos-soft); color:var(--p-pos); } .rm-sign.out{ background:var(--p-neg-soft); color:var(--p-neg); }
.rm-n{ flex:1; min-width:0; display:flex; flex-direction:column; font-weight:600; }
.rm-n small{ font-weight:500; font-size:12px; color:var(--p-muted); }
.rm-item b{ font-variant-numeric:tabular-nums; }
.rm-form{ border-top:1px solid var(--p-line); padding-top:14px; }
.rm-list:empty + .rm-form, .rm-form:first-child{ border-top:none; padding-top:0; }
.rm-form-h{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--p-brand-d); }

/* ---------- toast (with Zhbej / + Vazhdim) ---------- */
.pers-toast{ position:fixed; left:50%; bottom:24px; z-index:250; display:flex; align-items:center; gap:8px; max-width:min(92vw,520px);
  background:#0d1f1c; color:#eafcf6; border-radius:14px; padding:9px 10px 9px 16px; box-shadow:0 18px 40px -14px rgba(9,26,23,.6);
  font-family:"Inter",system-ui,sans-serif; font-size:14px; font-weight:500; opacity:0; pointer-events:none; transform:translate(-50%,24px); transition:opacity .18s, transform .22s cubic-bezier(.2,.8,.2,1); }
.pers-toast.show{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.pers-toast.err{ background:#7a1f28; }
.pt-msg{ flex:1 1 auto; min-width:0; padding-right:4px; }
.pers-toast.has-acts .pt-msg{ flex:0 0 auto; white-space:nowrap; }
.pt-act{ flex:0 0 auto; border:none; background:rgba(255,255,255,.12); color:#5eead4; font-weight:700; font-size:13px; padding:7px 11px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.pt-act:hover{ background:rgba(255,255,255,.2); }

/* ---------- boot loader (no Hotel flash before restoring Personale) ---------- */
#boot-loader{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:#eef1f6; }
body.mode-fin #boot-loader{ background:var(--p-canvas); }
#boot-loader .bl-box{ display:flex; flex-direction:column; align-items:center; gap:14px; }
#boot-loader .bl-txt{ font-family:"Space Grotesk","Inter",sans-serif; font-weight:600; font-size:15px; letter-spacing:.4px; color:#7a8698; }

/* ---------- phones ---------- */
@media(max-width:560px){
  .p-title{ font-size:25px; }
  .p-hero{ align-items:center; margin-bottom:14px; }
  .p-hero-r .p-pill{ font-size:12px; padding:5px 11px; }
  .p-card{ padding:15px; }
  .km-row{ gap:6px; } .km{ padding:9px 8px; } .km span{ font-size:9.5px; letter-spacing:.3px; }
  .km b{ font-size:clamp(15px,4.6vw,20px); letter-spacing:-.4px; overflow:visible; text-overflow:clip; }
  .p-hbar-l{ width:38%; } .p-hbar-v{ width:62px; }
  .p-card-h .p-card-sub{ order:3; flex-basis:100%; margin-left:0; text-align:left; }   /* sub-line under the title, the action stays top-right */
  .p-card-h .p-link, .p-card-h > .p-btn{ margin-left:auto; }
  .chk-row{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:10px; row-gap:5px; align-items:center; padding:11px 0; }
  .chk-dot{ grid-row:1 / span 2; }
  .chk-main{ grid-column:2; grid-row:1 / span 2; }
  .chk-n{ white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
  .chk-s{ white-space:normal; line-height:1.3; }
  .chk-amt{ grid-column:3; grid-row:1; text-align:right; }
  .chk-btn, .chk-state{ grid-column:3; grid-row:2; justify-self:end; min-width:0; padding:6px 11px; font-size:12px; }
  .mv-top{ flex-direction:column; align-items:stretch; }
  .mv-top .pp, .brk-h .pp{ width:100%; margin-left:0; }
  .pp-kind{ flex:1 1 auto; }
  .pp-step{ flex:1 1 auto; justify-content:space-between; }
  .pp-range{ width:100%; } .pp-range input{ flex:1; min-width:0; }
  .brk-bars .p-hbar-v{ width:92px; }
  .brk-bars .p-hbar-l{ width:auto; max-width:none; flex:0 0 42%; }
  .mv-filters #mv-cat, .mv-filters #mv-acc{ flex:1 1 40%; min-width:0; }
  .mv-sum .ms{ flex:1; min-width:0; font-size:15px; padding:7px 10px; }
  .mv-filters .p-seg{ width:100%; } .mv-filters .p-seg-btn{ flex:1; padding:7px 4px; font-size:12px; }
  .mv-sel{ flex:1 1 40%; min-width:0; } .mv-search{ flex:1 1 40%; min-width:0; }
  .mv-card{ padding:2px 10px 6px; }
  .acc-grid{ grid-template-columns:1fr; gap:10px; }
  .acc-card{ padding:13px 15px; }
  .acc-bal{ font-size:22px; margin-top:5px; }
  .acc-total b{ font-size:24px; }
  .todo-check{ width:30px; height:30px; }
  .todo-grip{ padding:10px 6px; font-size:19px; }
  .todo-add-form .p-btn{ padding:11px 16px; }
  .qa-field > span{ flex-basis:58px; }
  /* popup becomes a bottom sheet */
  .pers-modal{ align-items:flex-end; padding:0; }
  .pers-modal-box{ max-width:none; max-height:92vh; border-radius:20px 20px 0 0; animation:pmxSheet .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes pmxSheet{ from{ transform:translateY(100%); } to{ transform:none; } }
  .pmx-body{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .pmx-scroll{ max-height:40vh; }
  .pers-toast{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}


/* ============================================================
   CROSS-MODE connective tissue — shared chrome adopts the ACTIVE
   module's accent via --ui-accent (Hotel blue / Bar brass /
   Personale teal). Themes shared popups (#dialog, notif) + the app
   switcher; each module's own content design is untouched.
   ============================================================ */
body.mode-hotel{ --ui-accent:#2457d6; --ui-accent-strong:#1a3f9e; --ui-accent-soft:#eaf0ff; --ui-accent-ink:#fff; }
body.mode-bar  { --ui-accent:#b5741f; --ui-accent-strong:#8a5514; --ui-accent-soft:#f6e8cf; --ui-accent-ink:#fff; }
body.mode-fin  { --ui-accent:#0f8a78; --ui-accent-strong:#0b6b5e; --ui-accent-soft:#e2f3ee; --ui-accent-ink:#fff; }

/* ---- shared confirm / alert / prompt dialog (#dialog) ---- */
#dialog .modal-box{ border-radius:18px; }
#dialog #dialog-ok.primary{ background:linear-gradient(135deg, var(--ui-accent,#2457d6), var(--ui-accent-strong,#1a3f9e)) !important; color:var(--ui-accent-ink,#fff) !important; border:none; box-shadow:0 8px 18px -8px rgba(16,24,40,.45); }
#dialog #dialog-ok.primary:hover{ filter:brightness(1.05); }
#dialog #dialog-ok.primary:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ui-accent-soft,#eaf0ff), 0 8px 18px -8px rgba(16,24,40,.45); }
#dialog .dialog-input:focus{ outline:none; border-color:var(--ui-accent,#2457d6); box-shadow:0 0 0 3px var(--ui-accent-soft,#eaf0ff); }

/* ---- premium app switcher (mode-switch) ---- */
.mode-switch{ gap:3px; padding:3px; border-radius:11px; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.ms-btn{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:8px; color:rgba(255,255,255,.72); }
.ms-ic{ width:16px; height:16px; flex:0 0 auto; opacity:.9; }
.ms-btn:not(.active):hover{ color:#fff; background:rgba(255,255,255,.10); }
.ms-btn:not(.active):hover .ms-ic{ opacity:1; }
.ms-btn.active{ background:#fff; box-shadow:0 2px 9px rgba(0,0,0,.3); }   /* text/icon color = module accent (per-mode rule) */
.ms-btn.active .ms-ic{ opacity:1; }
.ms-btn:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.65); }
.ms-btn.active:focus-visible{ box-shadow:0 0 0 2px var(--ui-accent,#2457d6), 0 2px 9px rgba(0,0,0,.3); }

/* ---- subtle content cross-fade on mode switch (nav + active tab; NOT the topbar) ---- */
@keyframes modeSwap{ from{ opacity:.45; transform:translateY(4px); } to{ opacity:1; transform:none; } }
#app.mode-swap .tabs, #app.mode-swap .tab.active{ animation:modeSwap .3s cubic-bezier(.2,.7,.2,1); }

@media(max-width:600px){
  .mode-switch .ms-lb{ display:none; }          /* icon-only on phones — clean + tappable */
  .ms-btn{ padding:8px 12px; }
  .ms-ic{ width:18px; height:18px; }
}

/* Season (year) selector visibility is per-tab (JS: YEAR_TABS in showTab) — shown only on
   Kalendari / Dashboard / Shpenzime (+ Bar Dashboard / Shpenzime), hidden elsewhere & in Personale. */

/* ---- brand logo mark (clean SVG villa, all modes) ---- */
.brand-logo svg{ width:22px; height:22px; display:block; }

/* ---- shared popup head + X (Hotel-only modals: availability + add-expense) ---- */
.hx-modal-head{ display:flex; align-items:center; gap:12px; margin:-22px -22px 16px; padding:16px 22px; background:linear-gradient(120deg,#17245b 0%, #2457d6 100%); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.hx-modal-head h3{ margin:0; padding:0; border:none; font-family:var(--h-font,"Sora","Inter",sans-serif); font-weight:600; font-size:18px; color:#fff; }
.hx-x{ margin-left:auto; width:32px; height:32px; border:none; border-radius:9px; background:rgba(255,255,255,.16); color:#fff; font-size:15px; cursor:pointer; flex:0 0 auto; }
.hx-x:hover{ background:rgba(255,255,255,.28); }
#avail-modal .modal-box, #exp-modal .modal-box{ border-radius:var(--r-lg); }
@media(max-width:480px){ .hx-modal-head{ margin:-16px -16px 14px; border-radius:12px 12px 0 0; } }

/* ---- add-expense popup form (stacked) ---- */
#exp-modal .exp-modal-box{ max-width:420px; }
#exp-modal .expense-form{ display:flex; flex-direction:column; gap:12px; margin:0; }
#exp-modal .exp-field{ display:flex; flex-direction:column; gap:5px; margin:0; }
#exp-modal .exp-field>span{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--h-muted,#8b95a8); }
#exp-modal .exp-field input{ width:100%; margin:0; }
#exp-modal .expense-form>button.primary{ margin-top:4px; }

/* ---- Nevojat collapsible inside Shpenzime ---- */
body.mode-hotel .hx-nevojat{ margin-top:18px; border:1px solid var(--h-line); border-radius:var(--h-r); background:var(--h-card); box-shadow:var(--h-sh); padding:4px 16px; }
body.mode-hotel .hx-nevojat>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 2px; font-family:var(--h-font); font-weight:600; font-size:15px; color:var(--h-ink); }
body.mode-hotel .hx-nevojat>summary::-webkit-details-marker{ display:none; }
body.mode-hotel .hx-nevojat>summary::before{ content:'▸'; color:var(--h-brand); font-size:12px; transition:transform .15s; }
body.mode-hotel .hx-nevojat[open]>summary::before{ transform:rotate(90deg); }
body.mode-hotel .hx-nev-hint{ margin-left:auto; font-size:11.5px; font-weight:500; color:var(--h-muted); }
body.mode-hotel .hx-nevojat .supplies-page{ padding:0 0 12px; }

/* ---- Arka: single Veprime form + polished action buttons ---- */
body.mode-hotel .cash-op{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
body.mode-hotel .cash-op input{ height:42px; padding:0 12px; border:1px solid var(--h-line-2); border-radius:10px; font-size:14px; background:var(--h-card); color:var(--h-ink); }
body.mode-hotel .cash-op input:focus{ outline:none; border-color:var(--h-brand); box-shadow:0 0 0 3px var(--h-brand-soft); }
body.mode-hotel .cash-op .cf-amt{ width:120px; }
body.mode-hotel .cash-op .cf-reason{ flex:1; min-width:180px; }
body.mode-hotel .cash-op-btns{ display:flex; gap:10px; flex:1 1 100%; }
body.mode-hotel .cash-op-btns button{ flex:1; border:none; border-radius:10px; padding:11px 14px; font-size:14px; font-weight:600; color:#fff; cursor:pointer; transition:filter .12s; }
body.mode-hotel .cf-withdraw{ background:linear-gradient(135deg,#e0697a,#c0303f); box-shadow:0 8px 18px -8px rgba(192,48,63,.6); }
body.mode-hotel .cf-return{ background:linear-gradient(135deg,#3fbf72,#1f9d57); box-shadow:0 8px 18px -8px rgba(31,157,87,.6); }
body.mode-hotel .cash-op-btns button:hover{ filter:brightness(1.05); }

/* ---- Dashboard daily chart: current-day marker + amount badge ---- */
body.mode-hotel .hd-today{ z-index:2; }
body.mode-hotel .hd-tline{ stroke:var(--h-brand); stroke-width:1.4; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; opacity:.55; }
body.mode-hotel .hd-tdot{ fill:var(--h-brand); stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke; }
body.mode-hotel .hd-today{ position:absolute; top:0; transform:translateX(-50%); background:var(--h-brand); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; pointer-events:none; box-shadow:0 4px 10px -4px rgba(20,40,90,.6); font-variant-numeric:tabular-nums; }
body.mode-hotel .hd-today i{ font-weight:500; font-style:normal; opacity:.85; margin-left:4px; }


/* ============================================================
   ASISTENTI (AI) — floating chat; adopts the active app accent (--ui-accent)
   ============================================================ */
.asst-fab{ position:fixed; right:20px; bottom:20px; z-index:80; width:56px; height:56px; border:none; border-radius:50%; background:linear-gradient(135deg, var(--ui-accent,#2457d6), var(--ui-accent-strong,#1a3f9e)); color:#fff; cursor:pointer; box-shadow:0 12px 30px -8px rgba(20,30,60,.5); display:flex; align-items:center; justify-content:center; transition:transform .14s, box-shadow .14s; }
.asst-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(20,30,60,.6); }
.asst-fab svg{ width:26px; height:26px; }
.asst-panel{ position:fixed; right:20px; bottom:88px; z-index:80; width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 130px)); background:#fff; border:1px solid #e3e7ee; border-radius:18px; box-shadow:0 24px 60px -18px rgba(16,24,40,.42); display:flex; flex-direction:column; overflow:hidden; animation:asstIn .18s ease; }
.asst-panel.hidden{ display:none; }
@keyframes asstIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.asst-grip{ display:none; }
.asst-head{ display:flex; align-items:center; gap:8px; padding:13px 16px; background:linear-gradient(135deg, var(--ui-accent,#2457d6), var(--ui-accent-strong,#1a3f9e)); color:#fff; }
.asst-title{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px; margin-right:auto; }
.asst-dot{ width:8px; height:8px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 0 3px rgba(110,231,183,.3); }
.asst-sub{ font-weight:600; font-size:11px; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.18); color:#fff; }
.asst-icon{ background:rgba(255,255,255,.16); border:none; color:#fff; width:30px; height:30px; border-radius:9px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .14s; }
.asst-icon:hover{ background:rgba(255,255,255,.30); }
.asst-icon svg{ width:16px; height:16px; }
.asst-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#f5f7fb; }
.asst-b{ max-width:86%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.5; word-wrap:break-word; }
.asst-b.ai{ background:#fff; border:1px solid #e3e7ee; align-self:flex-start; border-bottom-left-radius:5px; color:#1b2335; }
.asst-b.me{ background:linear-gradient(135deg, var(--ui-accent,#2457d6), var(--ui-accent-strong,#1a3f9e)); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.asst-input{ display:flex; gap:8px; padding:12px; border-top:1px solid #e3e7ee; background:#fff; }
.asst-input input{ flex:1; border:1px solid #d4dae3; border-radius:22px; padding:11px 15px; font-size:16px; outline:none; min-width:0; background:#f7f9fc; transition:background .12s, border-color .12s, box-shadow .12s; }
.asst-input input:focus{ border-color:var(--ui-accent,#2457d6); box-shadow:0 0 0 3px var(--ui-accent-soft,#eaf0ff); background:#fff; }
.asst-input input::placeholder{ color:#9aa4b4; }
.asst-send{ width:42px; height:42px; flex:0 0 auto; border:none; border-radius:50%; background:linear-gradient(135deg, var(--ui-accent,#2457d6), var(--ui-accent-strong,#1a3f9e)); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s, box-shadow .12s; box-shadow:0 6px 16px -8px rgba(20,30,60,.5); }
.asst-send:hover{ transform:translateY(-1px); }
.asst-send:active{ transform:scale(.94); }
.asst-send svg{ width:18px; height:18px; margin-left:-1px; }
.asst-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.asst-chip{ border:1px solid var(--ui-accent-soft,#dbe4fb); background:#fff; color:var(--ui-accent-strong,#1a3f9e); border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer; line-height:1.2; transition:background .12s, border-color .12s, transform .1s; text-align:left; }
.asst-chip:hover{ background:var(--ui-accent-soft,#eef3ff); border-color:var(--ui-accent,#2457d6); }
.asst-chip:active{ transform:scale(.97); }
.asst-typing{ display:inline-flex; gap:4px; align-items:center; } .asst-typing i{ width:6px; height:6px; border-radius:50%; background:#b8c2d4; animation:asstBlink 1s infinite; } .asst-typing i:nth-child(2){ animation-delay:.2s; } .asst-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes asstBlink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.asst-card{ background:#fff; border:1px solid #e3e7ee; border-radius:12px; padding:12px; font-size:13px; box-shadow:0 6px 16px -10px rgba(16,24,40,.3); }
.asst-task{ font-weight:600; color:#1b2335; margin:-2px 0 8px; line-height:1.35; }
.asst-mic{ width:42px; height:42px; flex:0 0 auto; border:1px solid #d4dae3; border-radius:50%; background:#fff; color:#4a5568; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s, border-color .12s; }
.asst-mic svg{ width:18px; height:18px; }
.asst-mic:hover{ border-color:var(--ui-accent,#2457d6); color:var(--ui-accent,#2457d6); }
.asst-mic.rec{ background:#e5484d; border-color:#e5484d; color:#fff; animation:asstRec 1.4s ease-in-out infinite; }
.asst-mic:disabled{ opacity:.5; cursor:wait; }
.asst-mic.hidden{ display:none; }
@keyframes asstRec{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,72,77,.45); } 50%{ box-shadow:0 0 0 7px rgba(229,72,77,0); } }
.asst-card-h{ font-weight:700; margin-bottom:8px; color:#1b2335; }
.asst-pl{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid #f0f2f5; }
.asst-pl.tot{ border-bottom:none; border-top:1px solid #e3e7ee; margin-top:4px; padding-top:8px; font-size:14px; }
.asst-pl b{ font-variant-numeric:tabular-nums; color:#1b2335; }
.asst-warn{ color:#c0303f; font-size:12px; margin-top:6px; }
.asst-hint{ color:#8a93a3; font-size:11.5px; margin-top:8px; line-height:1.45; }
.asst-acts{ display:flex; gap:8px; margin-top:10px; align-items:center; }
.asst-ok{ flex:1; border:none; border-radius:9px; padding:9px; font-weight:600; color:#fff; background:linear-gradient(135deg, var(--ui-accent,#2457d6), var(--ui-accent-strong,#1a3f9e)); cursor:pointer; }
.asst-ok:disabled{ opacity:.5; cursor:not-allowed; }
.asst-no{ border:1px solid #d4dae3; background:#fff; border-radius:9px; padding:9px 14px; cursor:pointer; color:#5a6678; }
.asst-done{ color:#1f9d57; font-weight:600; }
/* scrim behind the assistant sheet on phones */
.asst-scrim{ position:fixed; inset:0; z-index:79; background:rgba(16,24,40,.42); backdrop-filter:blur(1.5px); animation:asstIn .18s ease; }
.asst-scrim.hidden{ display:none; }
@media(min-width:561px){ .asst-scrim{ display:none; } }
@media(max-width:560px){
  .asst-panel{ right:0; left:0; bottom:0; width:100%; height:min(88vh, calc(100vh - 48px)); border-radius:20px 20px 0 0; }
  .asst-panel .asst-input{ padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .asst-fab{ right:16px; bottom:16px; }
  .asst-grip{ display:block; width:38px; height:4px; border-radius:999px; background:#cfd6e2; margin:8px auto 0; flex:0 0 auto; }
}

/* lock background scroll while a .modal popup or the assistant is open */
body.modal-open, body.asst-open{ overflow:hidden; }
.asst-free{ color:#0f7a3e; font-weight:700; }


/* ===========================================================
   Personale as its own app: sign-in colours and a one-row header on phones
   (the shared chrome above was built around the hotel's blue and its app switcher)
   =========================================================== */
.login-box h2{ color:#0b3d33; }
.login-box button#login-btn{ background:linear-gradient(135deg,#0f8a78,#0b5a48); box-shadow:0 8px 20px rgba(11,90,72,.35); }
@media(max-width:560px){
  body.mode-fin .topbar{ flex-wrap:nowrap; }
  body.mode-fin .controls{ flex:0 0 auto; margin-left:auto; }
}