/* =========================================================
   Intraco HQ — design system
   Layout: sidebar (desktop) / top bar + bottom tabs (mobile)
   ========================================================= */
:root{
  color-scheme: light;
  --page:      #f5f6f4;
  --surface:   #ffffff;
  --surface-2: #f0f2ef;
  --surface-3: #e7eae6;
  --ink:       #121816;
  --ink-2:     #4a524e;
  --ink-muted: #7d857f;
  --border:    rgba(18,24,22,0.08);
  --border-strong: rgba(18,24,22,0.16);
  --grid:      #e3e6e1;
  --axis:      #c6cbc5;
  --brand:     #1f6f78;
  --brand-2:   #2b8f9a;
  --brand-ink: #ffffff;
  --brand-wash: rgba(31,111,120,0.10);
  --brand-wash-2: rgba(31,111,120,0.18);

  --series-1:  #2a78d6; /* revenue */
  --series-2:  #eb6834; /* expense */
  --series-3:  #1baf7a;
  --series-4:  #eda100;

  --good:      #14934a;
  --good-wash: rgba(20,147,74,0.12);
  --warning:   #e0a00f;
  --warning-wash: rgba(224,160,15,0.16);
  --critical:  #d2413f;
  --critical-wash: rgba(210,65,63,0.12);
  --pink:      #d6488f;
  /* text that sits on the matching *-wash */
  --good-ink:     #0f6d36;
  --warning-ink:  #8a5a00;
  --critical-ink: #a12222;
  --brand-rgb: 31,111,120;

  --fx-usd:    #1e6b3f;
  --fx-eur:    #2a5db0;

  --solar-kwh:     #b8790a;
  --solar-revenue: #1f8a4c;

  --shadow: 0 1px 2px rgba(16,24,20,0.04), 0 6px 20px rgba(16,24,20,0.05);
  --shadow-lg: 0 8px 28px rgba(16,24,20,0.14);

  --font: "Inter", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Inter", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --sidebar-w: 248px;
  --rightpanel-w: 300px;
  --topbar-h: 56px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:      #0e1110;
    --surface:   #161a19;
    --surface-2: #1d2220;
    --surface-3: #252b28;
    --ink:       #f3f5f3;
    --ink-2:     #c3c9c5;
    --ink-muted: #8a918c;
    --border:    rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.18);
    --grid:      #272d2a;
    --axis:      #363d39;
    --brand:     #3fa3ad;
    --brand-2:   #58b7c0;
    --brand-ink: #06181a;
    --brand-wash: rgba(63,163,173,0.16);
    --brand-wash-2: rgba(63,163,173,0.26);
    --series-1:  #3987e5;
    --series-2:  #d95926;
    --series-3:  #199e70;
    --series-4:  #c98500;
    --good:      #34b86a;
    --good-wash: rgba(52,184,106,0.18);
    --warning:   #f0b429;
    --warning-wash: rgba(240,180,41,0.20);
    --critical:  #ef6b69;
    --critical-wash: rgba(239,107,105,0.18);
    --pink:      #e372ac;
    --good-ink:     #7be07b;
    --warning-ink:  #ffd27a;
    --critical-ink: #ff9d9d;
    --brand-rgb: 63,163,173;
    --fx-usd:    #3ea86b;
    --fx-eur:    #5b8fd9;
    --solar-kwh:     #e8b23a;
    --solar-revenue: #3fbb70;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:      #0e1110;
  --surface:   #161a19;
  --surface-2: #1d2220;
  --surface-3: #252b28;
  --ink:       #f3f5f3;
  --ink-2:     #c3c9c5;
  --ink-muted: #8a918c;
  --border:    rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.18);
  --grid:      #272d2a;
  --axis:      #363d39;
  --brand:     #3fa3ad;
  --brand-2:   #58b7c0;
  --brand-ink: #06181a;
  --brand-wash: rgba(63,163,173,0.16);
  --brand-wash-2: rgba(63,163,173,0.26);
  --series-1:  #3987e5;
  --series-2:  #d95926;
  --series-3:  #199e70;
  --series-4:  #c98500;
  --good:      #34b86a;
  --good-wash: rgba(52,184,106,0.18);
  --warning:   #f0b429;
  --warning-wash: rgba(240,180,41,0.20);
  --critical:  #ef6b69;
  --critical-wash: rgba(239,107,105,0.18);
  --pink:      #e372ac;
  --good-ink:     #7be07b;
  --warning-ink:  #ffd27a;
  --critical-ink: #ff9d9d;
  --brand-rgb: 63,163,173;
  --fx-usd:    #3ea86b;
  --fx-eur:    #5b8fd9;
  --solar-kwh:     #e8b23a;
  --solar-revenue: #3fbb70;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.5);
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  overscroll-behavior-y:none;
}
a{ color:inherit; }
button{ font-family:inherit; }
button, input, select, textarea{ font-size:inherit; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- app frame ---------- */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--rightpanel-w);
  min-height:100vh;
  min-height:100dvh;
}
@media (max-width: 1320px){
  .app{ grid-template-columns: var(--sidebar-w) minmax(0,1fr); }
  .right-panel{ display:none; }
}
.app{ display:none; }
body.authed .app{ display:grid; }

/* ---------- sidebar ---------- */
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:18px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  scrollbar-width:thin;
}
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 6px; }
/* No tile: the emblem sits straight on the sidebar's white, drawn in the
   logo's own navy. Nothing behind it — no fill, no border, no shadow. */
.brand-mark{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
/* Width only, so the emblem keeps its aspect ratio at both the 34px sidebar
   size and the 48px login-card size. */
.brand-mark img{ width:100%; height:auto; display:block; }
/* On dark there is no white to sit on, and navy lines on a dark sidebar are
   unreadable — flip the same PNG to white rather than ship a second asset. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-mark img{ filter:brightness(0) invert(1); }
}
:root[data-theme="dark"] .brand-mark img{ filter:brightness(0) invert(1); }
.brand-home{ display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none; border-radius:8px; }
.brand-home:hover .brand-name{ color:var(--brand); }
.brand-name{ font-weight:700; font-size:15px; letter-spacing:-0.01em; }
/* Day / night switch, injected by shell.js. Sun when the page is dark
   (“go to day”), moon when it is light. theme.js owns the clock rule. */
.theme-btn{
  margin-left:auto; width:30px; height:30px; flex:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border); background:var(--surface-2);
  color:var(--ink-2); cursor:pointer;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}
.theme-btn:hover{ background:var(--brand-wash); color:var(--brand); }
.theme-btn:active{ transform:scale(0.94); }
.theme-btn svg{ width:16px; height:16px; display:block; }
/* manual override: a small dot marks that the clock is not in charge */
.theme-btn.manual{ position:relative; }
.theme-btn.manual::after{ content:""; position:absolute; top:1px; right:1px; width:7px; height:7px; border-radius:50%; background:var(--brand); border:2px solid var(--surface); }
.brand-sub{ font-size:11px; color:var(--ink-muted); margin-top:1px; }

nav.seclist{ display:flex; flex-direction:column; gap:2px; }
.navlabel{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-muted); padding:0 10px; margin:6px 0 4px; font-weight:600;
}
.navlink{
  display:flex; align-items:center; gap:10px;
  min-height:38px; padding:8px 10px;
  border-radius:var(--r-md);
  font-size:13.5px; font-weight:500;
  color:var(--ink-2);
  text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.navlink:hover{ background:var(--surface-2); color:var(--ink); }
.navlink.active{ background:var(--brand-wash); color:var(--brand); font-weight:600; }
.navlink svg{ flex:none; opacity:0.9; width:16px; height:16px; }
.navlink-sub{
  display:flex; align-items:center;
  min-height:32px; padding:5px 10px 5px 36px;
  border-radius:var(--r-md);
  font-size:12.5px;
  color:var(--ink-muted);
  text-decoration:none;
  position:relative;
  transition:background .12s ease, color .12s ease;
}
.navlink-sub::before{ content:""; position:absolute; left:18px; top:50%; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45; transform:translateY(-50%); }
.navlink-sub:hover{ background:var(--surface-2); color:var(--ink); }
.navlink-sub.active{ background:var(--brand-wash); color:var(--brand); font-weight:600; }
.navlink-sub[data-nav="task-registry"]{ display:none; }
body.is-admin .navlink-sub[data-nav="task-registry"]{ display:flex; }
.navlink[data-nav="users"]{ display:none; }
body.is-admin .navlink[data-nav="users"]{ display:flex; }
/* Collapsible groups: a module row carries its own caret, and its
   sub-pages stay folded away until that caret is pressed — every page load
   starts closed. shell.js owns the .open class. */
.navgroup{ display:flex; flex-direction:column; gap:2px; }
.navrow{ display:flex; align-items:center; gap:2px; }
.navrow .navlink{ flex:1; min-width:0; }
.navcaret{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:26px; align-self:stretch; min-height:38px;
  border:0; background:none; padding:0; cursor:pointer;
  color:var(--ink-muted); border-radius:var(--r-md);
  transition:background .12s ease, color .12s ease;
}
.navcaret:hover{ background:var(--surface-2); color:var(--ink); }
.navcaret svg{ transition:transform .15s ease; }
.navcaret[aria-expanded="true"] svg{ transform:rotate(90deg); }
.navsubs{ display:none; flex-direction:column; gap:2px; }
.navgroup.open .navsubs{ display:flex; }
/* Closed group whose sub-page you are on: the module row says so instead. */
.navgroup.has-active:not(.open) > .navrow > .navlink{ background:var(--brand-wash); color:var(--brand); font-weight:600; }
/* A module the signed-in user wasn't granted: the whole nav entry goes away
   rather than sitting there as a link to a 403. Set by auth.js. */
.no-access{ display:none !important; }
/* A link inside a table or sentence to such a page: plain text instead. */
.link-off{ color:inherit !important; text-decoration:none !important; cursor:inherit; pointer-events:none; }
#users{ display:none; }
/* Home page: the members panel opens only from its nav link (#users), and then
   takes the page instead of sitting under the issue groups. */
body.is-admin #users:target{ display:block; }
body.is-admin main:has(#users:target) > :not(#users){ display:none; }

.fx-widget{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:10px 12px;
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
}
.fx-widget:hover{ background:var(--surface-3); border-color:var(--border-strong); }
.fx-row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; gap:6px; }
.fx-cur{ font-weight:600; color:var(--ink-2); }
.fx-val{ font-variant-numeric:tabular-nums; font-family:var(--mono); flex:1; text-align:right; margin-right:2px; color:var(--ink); font-weight:600; }
.fx-delta{ font-size:10.5px; font-weight:600; width:56px; text-align:right; flex:none; font-variant-numeric:tabular-nums; }
.fx-delta.up{ color:var(--good); }
.fx-delta.down{ color:var(--critical); }
.fx-delta.flat{ color:var(--ink-muted); }
.fx-note{ font-size:10px; color:var(--ink-muted); margin-top:2px; }
/* Fuel rows carry long Georgian product names, so they need a tighter
   layout than the 3-letter currency rows to fit the same 248px sidebar. */
#fuelRows .fx-row{ font-size:11.5px; gap:4px; }
#fuelRows .fx-cur{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#fuelRows .fx-val{ margin-right:0; flex:none; white-space:nowrap; }
/* Premium + Euro 5 diesel (Nano) fold under a "მეტი" toggle (shell.js). */
#fuelWidget .fx-extra{ display:none; }
#fuelWidget.show-extra .fx-extra{ display:flex; }
.fx-more{ align-self:flex-start; font-size:10.5px; font-weight:600; color:var(--ink-muted); cursor:pointer; border-radius:var(--r-sm, 4px); padding:1px 4px; margin-left:-4px; }
.fx-more:hover, .fx-more:focus-visible{ color:var(--ink); background:var(--surface-2); outline:none; }
.fx-more-close, #fuelWidget.show-extra .fx-more-open{ display:none; }
#fuelWidget.show-extra .fx-more-close{ display:inline; }
#fuelRows .fx-delta{ width:38px; font-size:10px; }

.sidebar-foot{ margin-top:auto; font-size:11.5px; color:var(--ink-muted); padding:10px 6px 0; border-top:1px solid var(--border); }
#userFoot{ display:flex; align-items:center; gap:8px; }
#userFootRow{ display:flex; align-items:center; gap:10px; width:100%; min-width:0; }
.userfoot-avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--brand-wash); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; overflow:hidden;
}
.userfoot-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.userfoot-name{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--ink); overflow-wrap:break-word; white-space:normal; line-height:1.3; }
.logout-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--r-sm); flex:none;
  color:var(--ink-2); text-decoration:none;
  border:1px solid var(--border-strong);
  transition:background .12s ease, color .12s ease;
}
.logout-btn:hover{ background:var(--critical-wash); color:var(--critical); border-color:transparent; }

/* ---------- right panel (my tasks) ---------- */
.right-panel{
  background:var(--surface);
  border-left:1px solid var(--border);
  padding:20px 16px;
  display:flex; flex-direction:column; gap:16px;
  position:sticky; top:0; align-self:start;
  height:100vh; height:100dvh; overflow-y:auto; scrollbar-width:thin;
}
.right-panel-head{ font-size:13.5px; font-weight:700; color:var(--ink); }
.right-panel-section-label{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:8px; }
.right-panel-list{ display:flex; flex-direction:column; gap:6px; }
.right-panel-item{ display:block; border:1px solid var(--border); border-radius:var(--r-md); padding:8px 10px; text-decoration:none; color:inherit; transition:background .12s ease, border-color .12s ease; }
.right-panel-item:hover{ background:var(--surface-2); border-color:var(--border-strong); }
.right-panel-item-overdue{ border-color:rgba(210,65,63,0.45); background:var(--critical-wash); }
.right-panel-item-overdue:hover{ background:var(--critical-wash); }
.right-panel-item-pending{ border-color:rgba(224,160,15,0.45); background:var(--warning-wash); }
.right-panel-item-pending:hover{ background:var(--warning-wash); }
.right-panel-item-title{ font-size:12.5px; color:var(--ink); font-weight:600; line-height:1.3; }
.right-panel-item-meta{ font-size:10.5px; color:var(--ink-muted); margin-top:3px; display:flex; justify-content:space-between; gap:6px; }
.right-panel-empty{ font-size:11.5px; color:var(--ink-muted); }
.right-panel-link{ font-size:12px; color:var(--brand); text-decoration:none; margin-top:auto; padding-top:6px; font-weight:600; }
.right-panel-link:hover{ text-decoration:underline; }

/* ---------- main ---------- */
main{ padding:26px 32px 64px; min-width:0; max-width:1380px; width:100%; }
.topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
h1{ font-size:22px; margin:0 0 4px; letter-spacing:-0.015em; font-weight:700; text-wrap:balance; line-height:1.2; }
.topbar-meta{ color:var(--ink-muted); font-size:13px; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); text-decoration:none; margin-bottom:14px; }
.back-link:hover{ color:var(--ink); }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px;
  background:var(--warning-wash); color:var(--warning-ink); white-space:nowrap;
}
.badge svg{ flex:none; }

section{ margin-bottom:28px; scroll-margin-top:20px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.section-head h2{ font-size:16px; margin:0; letter-spacing:-0.005em; font-weight:700; }
.section-head .hint{ font-size:12.5px; color:var(--ink-muted); }

/* ---------- KPI ---------- */
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 16px 14px; box-shadow:var(--shadow); }
.kpi-label{ font-size:12.5px; color:var(--ink-2); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.kpi-vs{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; }
.kpi-value{ font-family:var(--mono); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.kpi-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.delta{ display:inline-flex; align-items:center; gap:3px; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.delta.good{ color:var(--good); }
.delta.bad{ color:var(--critical); }
.delta.neutral{ color:var(--ink-muted); }
.spark{ flex:none; opacity:0.9; }
.icon-badge{ width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; }
.icon-badge.rev{ background:rgba(42,120,214,0.14); color:var(--series-1); }
.icon-badge.exp{ background:rgba(235,104,52,0.14); color:var(--series-2); }
.icon-badge.good{ background:var(--good-wash); color:var(--good); }
.icon-badge.neutral{ background:var(--surface-2); color:var(--ink-muted); }
.icon-badge.usd{ background:rgba(30,107,63,0.14); color:var(--fx-usd); }
.icon-badge.eur{ background:rgba(42,93,176,0.14); color:var(--fx-eur); }
.icon-badge.premium{ background:rgba(42,120,214,0.14); color:var(--series-1); }
.icon-badge.eurreg{ background:rgba(27,175,122,0.14); color:var(--series-3); }
.icon-badge.diesel{ background:rgba(235,104,52,0.14); color:var(--series-2); }
.icon-badge.eurodsl{ background:rgba(237,161,0,0.14); color:var(--series-4); }

.hero-card{
  background:linear-gradient(135deg, #14433c 0%, #0b2622 100%);
  color:#eafff5; border-radius:var(--r-xl); padding:22px 24px; margin-bottom:16px;
  box-shadow:0 12px 32px rgba(8,26,22,0.28);
}
.hero-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hero-label{ font-size:12.5px; color:#a8dcc8; margin-bottom:6px; }
.hero-value{ font-size:30px; font-weight:700; letter-spacing:-0.02em; font-family:var(--mono); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.hero-delta{ font-size:13px; font-weight:600; color:#7ce8b6; }
.hero-btn{ background:rgba(255,255,255,0.12); color:#eafff5; border:1px solid rgba(255,255,255,0.22); border-radius:var(--r-md); padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.hero-btn:hover{ background:rgba(255,255,255,0.2); }
.hero-sub{ display:flex; gap:22px; margin-top:16px; flex-wrap:wrap; }
.hero-subitem{ font-size:12.5px; color:#cdeee0; display:flex; align-items:center; gap:7px; }
.hero-subitem .dot{ width:8px; height:8px; border-radius:50%; flex:none; }

/* ---------- cards / grids ---------- */
.grid-2{ display:grid; grid-template-columns: 1.5fr 1fr; gap:16px; align-items:start; }
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
}
.card h3{ font-size:14px; margin:0 0 2px; font-weight:700; }
.card .sub{ font-size:12.5px; color:var(--ink-muted); margin-bottom:14px; }
.card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* ---------- buttons & inputs ---------- */
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-md); min-height:34px; padding:6px 11px;
  font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.iconbtn:hover{ background:var(--surface-2); color:var(--ink); }
.iconbtn.active{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.iconbtn:disabled{ opacity:.55; cursor:default; }
.primary-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--brand); color:var(--brand-ink); border:1px solid transparent;
  border-radius:var(--r-md); min-height:36px; padding:8px 16px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:filter .12s ease, transform .05s ease;
}
.primary-btn:hover{ filter:brightness(1.06); }
.primary-btn:active{ transform:translateY(1px); }
.primary-btn:disabled{ opacity:.6; cursor:default; }
.primary-btn.danger{ background:var(--critical); }
.ghost-btn{ background:transparent; border:none; color:var(--brand); font-weight:600; font-size:13px; cursor:pointer; padding:6px 8px; border-radius:var(--r-sm); }
.ghost-btn:hover{ background:var(--brand-wash); }
.auth-btn{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  background:var(--brand); color:var(--brand-ink); border:none; border-radius:var(--r-md);
  min-height:44px; padding:11px 16px; font-size:14px; font-weight:600; cursor:pointer;
}
.auth-btn:hover{ filter:brightness(1.06); }

.form-field{ display:flex; flex-direction:column; gap:5px; }
.form-field label{ font-size:11.5px; color:var(--ink-muted); font-weight:500; }
.form-field input, .form-field select, .form-field textarea, input[type="date"], input.date-text, .search{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:var(--r-md);
  min-height:38px; padding:8px 11px; font-size:13.5px; font-family:inherit;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, input[type="date"]:focus, input.date-text:focus, .search:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash);
}
/* dd/mm/yyyy text field + calendar button over a hidden native picker. */
.date-dmy{ position:relative; display:inline-flex; align-items:center; }
.date-dmy input.date-text{ width:128px; padding-right:34px; font-variant-numeric:tabular-nums; }
.date-dmy input.date-text.invalid{ border-color:var(--critical); }
.date-dmy .date-pick{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:0; padding:5px; color:var(--ink-muted); cursor:pointer; display:flex; border-radius:var(--r-sm, 4px); }
.date-dmy .date-pick:hover{ color:var(--ink); }
.date-dmy .date-native{ position:absolute; left:0; bottom:0; width:100%; height:0; padding:0; border:0; min-height:0; opacity:0; pointer-events:none; }
.form-field textarea{ resize:vertical; min-height:72px; line-height:1.45; }
input[type="date"]::-webkit-calendar-picker-indicator{ filter:var(--date-icon-filter, none); cursor:pointer; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --date-icon-filter: invert(1); } }
:root[data-theme="dark"]{ --date-icon-filter: invert(1); }
.form-msg{ font-size:12px; margin-top:8px; min-height:1em; }

/* segmented controls & chips (shared) */
.seg{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r-md); overflow:hidden; background:var(--surface); max-width:100%; }
.seg button{ border:none; background:transparent; color:var(--ink-2); min-height:34px; padding:6px 12px; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
.seg button + button{ border-left:1px solid var(--border-strong); }
.seg button.active{ background:var(--brand); color:var(--brand-ink); font-weight:600; }
.seg button:hover:not(.active){ background:var(--surface-2); }
.chips-scroll{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.chips-scroll::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2);
  border-radius:999px; min-height:34px; padding:5px 12px; font-size:12.5px; font-weight:500; cursor:pointer; flex:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.chip:hover{ background:var(--surface-2); }
.chip.active{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:600; }
.chip .cnt{ font-size:11px; font-weight:700; background:rgba(0,0,0,0.08); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; }
.chip.active .cnt{ background:rgba(255,255,255,0.22); }
:root[data-theme="dark"] .chip:not(.active) .cnt{ background:rgba(255,255,255,0.10); }

/* ---------- legend / charts ---------- */
.legend{ display:flex; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); }
.legend-dot{ width:9px; height:9px; border-radius:2px; flex:none; }
.chart-wrap{ position:relative; }
svg.chart{ width:100%; height:auto; display:block; overflow:visible; }
.gridline{ stroke:var(--grid); stroke-width:1; }
.axislabel{ fill:var(--ink-muted); font-size:10.5px; font-family:inherit; }
.endlabel{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.tooltip{
  position:absolute; pointer-events:none;
  background:var(--ink); color:var(--page);
  font-size:11.5px; line-height:1.4; padding:6px 9px; border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg); transform:translate(-50%,-115%); white-space:nowrap;
  opacity:0; transition:opacity .1s ease; z-index:5;
}
.tooltip.show{ opacity:1; }

/* ---------- tables ---------- */
table.datatable{ display:none; }
table.datatable.show{ display:table; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:middle; }
th{ color:var(--ink-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; background:var(--surface); }
thead th{ position:sticky; top:0; z-index:1; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
tbody tr:hover{ background:var(--surface-2); }
tbody tr:last-child td{ border-bottom:none; }
main [style*="overflow-x"]{ border-radius:var(--r-md); -webkit-overflow-scrolling:touch; }

/* ცხრილის ზედა სქროლბარი — ტყუპი, რომელსაც shell.js განიერი ცხრილის თავზე
   სვამს, რომ გვერდზე გასაწევად ცხრილის ბოლომდე ჩამოსქროლვა აღარ დასჭირდეს.
   sticky — ცხრილის შუაშიც ხელთაა. `off` = ცხრილი სიგანეში ეტევა. */
.x-scroll-top{
  height:12px; margin:0 0 6px;
  overflow-x:auto; overflow-y:hidden;
  position:sticky; top:0; z-index:4;
  background:var(--surface);
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}
.x-scroll-top.off{ display:none; }
.x-scroll-top > div{ height:1px; }
.x-scroll-top::-webkit-scrollbar{ height:10px; }
.x-scroll-top::-webkit-scrollbar-track{ background:transparent; }
.x-scroll-top::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
.x-scroll-top::-webkit-scrollbar-thumb:hover{ background:var(--ink-muted); }

/* ვიწრო ცხრილში ბრაუზერი ჭარბ სიგანეს ყველა სვეტს თანაბრად უნაწილებს და
   მონაცემები გვერდზე იფანტება — რიცხვი ცალკე ჰაერში ჰკიდია, ბოლო სვეტი კი
   კიდეზეა მიკრული. `fit` სვეტებს შიგთავსის ზომაზე ტოვებს, ჭარბი სიგანე კი
   ერთ სვეტს რჩება: ნაგულისხმევად პირველს, ან იმას, რომელსაც `grow` აწერია
   (მაშინ პირველს `hug` სჭირდება). */
table.fit th, table.fit td{ width:1%; }
table.fit th:first-child, table.fit td:first-child{ width:auto; }
table.fit th.hug, table.fit td.hug{ width:1%; }
table.fit th.grow, table.fit td.grow{ width:auto; }
table.fit th + th, table.fit td + td{ padding-left:20px; }

.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 9px 3px 7px; border-radius:999px; white-space:nowrap; }
.status-pill .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.status-pill.good{ background:var(--good-wash); color:var(--good-ink); }
.status-pill.warning{ background:var(--warning-wash); color:var(--warning-ink); }
.status-pill.critical{ background:var(--critical-wash); color:var(--critical-ink); }
.status-pill.blocked{ background:var(--critical-wash); color:var(--critical-ink); }
.status-pill.active{ background:var(--brand-wash); color:var(--brand); }

.fleet-summary{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.fleet-chip{ flex:1 1 120px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow); }
.fleet-chip .n{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; font-family:var(--mono); letter-spacing:-0.01em; }
.fleet-chip .l{ font-size:11.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }

.stackbar{ display:flex; height:10px; border-radius:6px; overflow:hidden; margin-bottom:18px; background:var(--surface-2); }
.stackbar span{ height:100%; }
.barrow{ display:grid; grid-template-columns: 92px 1fr 56px; align-items:center; gap:10px; margin-bottom:10px; }
.barrow .lbl{ font-size:12.5px; color:var(--ink-2); }
.bartrack{ background:var(--surface-2); border-radius:5px; height:16px; position:relative; overflow:hidden; }
.barfill{ height:100%; border-radius:5px; }
.barval{ font-size:12.5px; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink-2); }

.feed{ display:flex; flex-direction:column; gap:10px; }
.feed-item{ display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--border); border-radius:var(--r-md); }
.filetype{ width:32px; height:32px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; letter-spacing:0.02em; color:#fff; }
.filetype.pdf{ background:#c0392b; } .filetype.doc{ background:#2a5db0; } .filetype.xls{ background:#1b7a43; } .filetype.jpg{ background:#8a5a00; }
.feed-body{ min-width:0; flex:1; }
.feed-title{ font-size:13.5px; font-weight:600; margin-bottom:2px; }
.feed-meta{ font-size:11.5px; color:var(--ink-muted); display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--surface-2); color:var(--ink-2); }
.empty-state{ text-align:center; color:var(--ink-muted); font-size:13px; padding:36px 12px; }

/* ---------- home dashboard tiles ---------- */
.home-hello{ margin-bottom:18px; }
.home-hello h1{ font-size:24px; }
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.tile{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:14px; min-height:96px; box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tile:hover{ transform:translateY(-1px); border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
.tile .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--brand-wash); color:var(--brand); }
.tile .t{ font-size:13.5px; font-weight:600; line-height:1.25; }
.tile .s{ font-size:11.5px; color:var(--ink-muted); }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow); text-decoration:none; color:inherit; display:block; }
.stat .n{ font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1.1; }
.stat .l{ font-size:12px; color:var(--ink-2); margin-top:4px; }
.stat.critical .n{ color:var(--critical); }
.stat.warning .n{ color:var(--warning-ink); }
.stat.brand .n{ color:var(--brand); }

/* „მიმდინარე / საინფორმაციო საკითხები" ზოლები — ტექსტი უფრო დიდი, რომ იოლად იკითხებოდეს.
   .issues-ით სპეციფიკურობა მაღალია, ამიტომ გვერდების საკუთარ <style>-ს ფარავს. */
.issues .band .band-title{ font-size:16px; }
.issues .band .band-hint{ font-size:13.5px; }
.issues .stat .n{ font-size:30px; }
.issues .stat .n.small{ font-size:22px; }
.issues .stat .l{ font-size:14px; line-height:1.4; }
.issues .stat .who{ font-size:13px; }
.issues .stat .when{ font-size:12.5px; }
.issues .stat .more{ font-size:12.5px; }
.issues .band-foot{ font-size:13.5px; }

/* ---------- modals / sheets ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(8,12,11,0.5); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; backdrop-filter:blur(2px); }
.modal-overlay.show{ display:flex; }
.modal-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:22px 22px 18px; width:100%; max-width:400px; max-height:calc(100dvh - 40px); overflow:auto; }
.modal-head{ font-size:15px; font-weight:700; margin-bottom:4px; }
.modal-sub{ font-size:12.5px; color:var(--ink-muted); margin-bottom:16px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; flex-wrap:wrap; }
.sheet-overlay{ position:fixed; inset:0; background:rgba(8,12,11,0.5); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; backdrop-filter:blur(2px); }
.sheet-overlay.show{ display:flex; }
.sheet{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); width:100%; max-width:560px; max-height:calc(100dvh - 40px); overflow:auto; padding:20px 22px calc(18px + var(--safe-b)); }
.sheet-handle{ display:none; width:40px; height:4px; border-radius:2px; background:var(--border-strong); margin:0 auto 12px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.sheet-head h3{ margin:0; font-size:16px; font-weight:700; }
.close-x{ width:36px; height:36px; border-radius:50%; border:none; background:var(--surface-2); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.close-x:hover{ background:var(--surface-3); }
.fab{
  display:none; position:fixed; right:18px; bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index:45;
  width:56px; height:56px; border-radius:18px; border:none; background:var(--brand); color:var(--brand-ink);
  box-shadow:0 8px 24px rgba(31,111,120,0.4); font-size:28px; line-height:1; cursor:pointer;
  align-items:center; justify-content:center;
}
.fab:active{ transform:scale(.96); }

/* ---------- auth gate ---------- */
.auth-gate{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--page); z-index:20; padding:20px; }
body.authed .auth-gate{ display:none; }
.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:34px 30px; width:100%; max-width:360px; text-align:center; }
.auth-card .brand-mark{ width:48px; height:48px; margin:0 auto 16px; }
.auth-card h1{ font-size:19px; margin-bottom:6px; }
.auth-sub{ font-size:13px; color:var(--ink-muted); margin:0 0 22px; line-height:1.5; }
.avatar-preview{ width:56px; height:56px; border-radius:50%; flex:none; background:var(--brand-wash); color:var(--brand); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; overflow:hidden; }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- mobile shell (injected by shell.js) ---------- */
.m-topbar, .m-tabbar, .drawer-overlay, .m-drawer-head{ display:none; }

/* ========================= responsive ========================= */
@media (max-width: 1100px){
  main{ padding:22px 22px 60px; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  :root{ --sidebar-w: 0px; }
  body.authed .app{ display:block; }
  main{ padding:calc(var(--topbar-h) + var(--safe-t) + 14px) 14px calc(var(--tabbar-h) + var(--safe-b) + 24px); max-width:none; }
  h1{ font-size:20px; }
  .topbar{ margin-bottom:14px; gap:10px; }
  .topbar-meta{ font-size:12.5px; }
  .back-link{ display:none; }
  .card{ padding:14px 14px 12px; border-radius:var(--r-lg); }
  .kpi{ padding:12px 12px 10px; }
  .kpi-value{ font-size:22px; }
  section{ margin-bottom:22px; }
  .home-hello h1{ font-size:22px; }

  /* touch targets */
  .iconbtn, .primary-btn, .seg button, .chip, .form-field input, .form-field select, .form-field textarea, input[type="date"], input.date-text, .search{ min-height:44px; }
  .iconbtn, .primary-btn{ padding:8px 14px; font-size:13.5px; }
  .seg{ overflow-x:auto; scrollbar-width:none; }
  .seg::-webkit-scrollbar{ display:none; }
  .form-field input, .form-field select, .form-field textarea, input[type="date"], input.date-text{ font-size:16px; } /* prevents iOS zoom */
  .date-dmy input.date-text{ width:150px; }
  table{ font-size:12.5px; }
  th,td{ padding:8px 8px; }
  main [style*="overflow-x"] table th:first-child, main [style*="overflow-x"] table td:first-child{ position:sticky; left:0; background:var(--surface); z-index:2; box-shadow:1px 0 0 var(--border); }
  main [style*="overflow-x"] table thead th:first-child{ z-index:3; }
  /* მობილურზე ცხრილი თითით იწევა და სქროლბარი ისედაც არ ჩანს — ზოლი ზედმეტია. */
  .x-scroll-top{ display:none; }
  tbody tr:hover{ background:transparent; }

  /* sidebar → off-canvas drawer */
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:min(84vw, 320px); height:100dvh; z-index:70;
    transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
    padding:calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
    border-right:1px solid var(--border);
  }
  body.nav-open .sidebar{ transform:translateX(0); }
  body.nav-open{ overflow:hidden; }
  .drawer-overlay{ display:block; position:fixed; inset:0; background:rgba(8,12,11,0.5); z-index:65; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  body.nav-open .drawer-overlay{ opacity:1; pointer-events:auto; }
  .m-drawer-head{ display:flex; justify-content:flex-end; margin:-4px -4px 0 0; }
  .sidebar-foot{ display:block; }
  .right-panel{ display:none; }

  /* top bar */
  .m-topbar{
    display:flex; align-items:center; gap:8px;
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:calc(var(--topbar-h) + var(--safe-t)); padding:var(--safe-t) 8px 0 8px;
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
    border-bottom:1px solid var(--border);
  }
  .m-iconbtn{ width:44px; height:44px; border-radius:12px; border:none; background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
  .m-iconbtn:active{ background:var(--surface-2); }
  .m-title{ flex:1; min-width:0; font-size:16px; font-weight:700; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .m-avatar{ width:34px; height:34px; border-radius:50%; background:var(--brand-wash); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; text-decoration:none; overflow:hidden; flex:none; margin-right:4px; }
  .m-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* bottom tab bar */
  .m-tabbar{
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    height:calc(var(--tabbar-h) + var(--safe-b)); padding:6px 4px var(--safe-b);
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
    border-top:1px solid var(--border);
  }
  .m-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--ink-muted); font-size:10.5px; font-weight:600; border-radius:12px; padding:4px 2px; background:none; border:none; cursor:pointer; font-family:inherit; min-height:48px; }
  .m-tab svg{ width:22px; height:22px; }
  .m-tab.active{ color:var(--brand); }
  .m-tab.active .m-tab-ic{ background:var(--brand-wash); }
  .m-tab-ic{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:26px; border-radius:13px; }
  .m-tab .dotbadge{ position:absolute; }
  .m-tab-wrap{ position:relative; }
  .m-tab .cnt{ position:absolute; top:0; right:14%; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--critical); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }

  .fab{ display:flex; }
  .sheet-overlay{ align-items:flex-end; padding:0; }
  .sheet{ max-width:none; border-radius:20px 20px 0 0; border-bottom:none; max-height:92dvh; padding-top:10px; }
  .sheet-handle{ display:block; }
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal-card{ max-width:none; border-radius:20px 20px 0 0; padding-bottom:calc(18px + var(--safe-b)); }
  .modal-actions .primary-btn, .modal-actions .iconbtn{ flex:1; }
}

@media (max-width: 480px){
  .kpis{ grid-template-columns:1fr 1fr; gap:10px; }
  .fleet-chip{ flex-basis:calc(50% - 5px); }
  .tile-grid{ grid-template-columns:repeat(2,1fr); }
}

/* standalone PWA: slightly tighter */
@media (display-mode: standalone){
  body{ -webkit-user-select:none; user-select:none; }
  input, textarea, td, .task-desc, .comment-text{ -webkit-user-select:text; user-select:text; }
}