/* =====================================================================
   STS GPS — ndërfaqja (tema e çelët / e errët)
   Ngjyrat janë variabla: [data-theme] në <html> i ndryshon të gjitha.
   ===================================================================== */
:root {
  --bg: #f4f6fa; --card: #ffffff; --card-2: #f7f9fc; --ink: #142130; --ink-2: #3a4a5c; --muted: #6a7889;
  --line: #e3e8ef; --line-2: #cfd7e2; --input: #ffffff; --hover: #f1f5fa;
  --accent: #2563eb; --accent-ink: #ffffff; --accent-soft: #e8f0fe; --accent-2: #0ea5a4;
  --ok: #15803d; --ok-soft: #e4f6ea; --warn: #b45309; --warn-soft: #fdf2df; --bad: #c62828; --bad-soft: #fde9e9;
  --neutral-soft: #edf0f4;
  --side: #0f1c2b; --side-ink: #b9c6d4; --side-hover: rgba(255,255,255,.06); --side-on: rgba(96,165,250,.16); --side-on-ink: #ffffff;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);
  --radius: 12px; --radius-sm: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --chart-bar: #3b82f6; --chart-bar-2: #93c5fd; --grid: #e9edf3;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1220; --card: #111a2b; --card-2: #0f1727; --ink: #e6edf6; --ink-2: #c3cfdd; --muted: #8b9bb0;
  --line: #1f2b3e; --line-2: #2c3a50; --input: #0d1626; --hover: #16223a;
  --accent: #60a5fa; --accent-ink: #0b1220; --accent-soft: rgba(96,165,250,.14); --accent-2: #2dd4bf;
  --ok: #4ade80; --ok-soft: rgba(74,222,128,.12); --warn: #fbbf24; --warn-soft: rgba(251,191,36,.13); --bad: #f87171; --bad-soft: rgba(248,113,113,.13);
  --neutral-soft: #1a2538;
  --side: #08101c; --side-ink: #9fb0c4; --side-hover: rgba(255,255,255,.05); --side-on: rgba(96,165,250,.18);
  --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 14px 36px rgba(0,0,0,.5);
  --chart-bar: #60a5fa; --chart-bar-2: #1e3a5f; --grid: #1c2840;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 12px; }
small, .muted { color: var(--muted); }
code { font-family: var(--mono); font-size: 12px; background: var(--neutral-soft); padding: 1px 6px; border-radius: 5px; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* ---------------------------------------------------------------- Struktura */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1100; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 16px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.side .brand .logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #3b82f6, #14b8a6); color: #fff; }
.side .brand .logo svg { width: 18px; height: 18px; }
.side .brand small { display: block; font-weight: 500; font-size: 11px; color: var(--side-ink); letter-spacing: .4px; text-transform: uppercase; }
.side nav { padding: 6px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.side .sect { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6f8197; padding: 14px 10px 6px; }
.side nav a { display: flex; align-items: center; gap: 11px; color: var(--side-ink); padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.side nav a:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.side nav a.on { background: var(--side-on); color: var(--side-on-ink); }
.side nav a.on svg { color: #60a5fa; }
.side nav a .badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.side .foot { margin-top: auto; padding: 14px 20px; font-size: 12px; color: #6f8197; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1000; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .crumb { font-weight: 600; color: var(--ink-2); }
.topbar .spacer { flex: 1; }
.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; padding: 0; }
.iconbtn:hover { border-color: var(--line-2); color: var(--ink); background: var(--hover); }
.iconbtn .moon { display: none; }
:root[data-theme="dark"] .iconbtn .moon { display: block; }
:root[data-theme="dark"] .iconbtn .sun { display: none; }
.menu-btn { display: none; }
details.usermenu { position: relative; }
details.usermenu summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 12px; border: 1px solid transparent; }
details.usermenu summary::-webkit-details-marker { display: none; }
details.usermenu summary:hover, details.usermenu[open] summary { background: var(--card); border-color: var(--line); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, #6366f1, #3b82f6); }
.usermenu .who { line-height: 1.2; }
.usermenu .who b { display: block; font-size: 13px; }
.usermenu .who small { font-size: 11px; }
.usermenu .drop { position: absolute; right: 0; top: 48px; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 1200; }
.usermenu .drop a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); }
.usermenu .drop a:hover { background: var(--hover); text-decoration: none; }
.usermenu .drop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

main.content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 24px 28px 56px; }
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead h1 { margin: 0; }
.pagehead .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.card > h2:first-child { display: flex; align-items: center; gap: 8px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid2 > .card, .grid3 > .card { margin-bottom: 0; }
.grid2, .grid3 { margin-bottom: 18px; }

/* ---------------------------------------------------------------- KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); position: relative; }
.result .kpi { background: var(--card-2); box-shadow: none; }
.kpi > span:not(.ic):not(.delta) { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-weight: 500; }
.kpi b { display: block; clear: both; font-size: 20px; white-space: nowrap; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .ic { float: right; margin: -2px -4px 0 6px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kpi .ic svg { width: 16px; height: 16px; }
.kpi .ic.ok { background: var(--ok-soft); color: var(--ok); } .kpi .ic.warn { background: var(--warn-soft); color: var(--warn); } .kpi .ic.bad { background: var(--bad-soft); color: var(--bad); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; margin-top: 4px; }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); } .delta.flat { color: var(--muted); }
.delta small { font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------- Tabela */
.tablewrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.data th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); background: var(--card-2); padding: 9px 10px; white-space: nowrap; position: sticky; top: 0;
  border-bottom: 1px solid var(--line); text-transform: none; }
table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody tr:hover td { background: var(--hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tfoot td { font-weight: 700; background: var(--card-2); border-top: 1px solid var(--line-2); }
table.data .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.empty { text-align: center; color: var(--muted); padding: 28px; }
tr.muted td { color: var(--muted); }
table.settings td { vertical-align: middle; }
table.settings input:not([type=checkbox]), table.settings select, table.settings textarea { width: 100%; max-width: 520px; }
table.data + h2 { margin-top: 18px; }

/* ---------------------------------------------------------------- Statuset */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.online { background: var(--ok-soft); color: var(--ok); }
.st.delayed { background: var(--warn-soft); color: var(--warn); }
.st.offline { background: var(--bad-soft); color: var(--bad); }
.st.never { background: var(--neutral-soft); color: var(--muted); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--neutral-soft); color: var(--ink-2); }
.tag.admin { background: var(--accent-soft); color: var(--accent); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------------------------------------------------------------- Formularët */
form .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); min-width: 150px; }
form label.wide { flex: 1 1 260px; }
form label.chk { flex-direction: row; align-items: center; min-width: 0; gap: 6px; color: var(--ink); }
input, select, textarea, button { font: inherit; }
input, select, textarea { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--input); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type=file] { padding: 6px; }
select[multiple] { padding: 4px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button, .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; font-weight: 500; line-height: 1.3; transition: background .15s, border-color .15s; }
button:hover, .btn:hover { border-color: var(--accent); background: var(--hover); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
button.danger, .btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
button.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
button.link { border: 0; background: none; color: var(--accent); padding: 0; font-weight: 500; }
button.link:hover { text-decoration: underline; background: none; }
button.link.danger { color: var(--bad); }
button:disabled { opacity: .55; cursor: not-allowed; }
form.inline { display: inline; }
.quick { display: flex; gap: 4px; flex-wrap: wrap; }
.quick button { padding: 6px 10px; font-size: 12px; }
.days { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.rowform { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rowform input, .rowform select { padding: 6px 8px; font-size: 13px; }
.rowform input[name=group_name] { width: 120px; } .rowform input[type=number] { width: 80px; }
.copyrow { display: flex; gap: 6px; }
.copyrow input { flex: 1; font-family: var(--mono); font-size: 13px; }
input.tablefilter { width: 100%; max-width: 420px; margin-bottom: 12px; }

/* segmentet (zgjedhja e periudhës) */
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg a { padding: 6px 12px; border-radius: 7px; color: var(--ink-2); font-weight: 500; font-size: 13px; }
.seg a:hover { background: var(--hover); text-decoration: none; }
.seg a.on { background: var(--accent); color: var(--accent-ink); }

.result-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.result-head p { margin: 0; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.actions.bar { margin: 0 0 16px; }
details.mail { position: relative; }
details.mail summary { list-style: none; }
details.mail form { position: absolute; right: 0; top: 42px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; gap: 6px; box-shadow: var(--shadow-lg); z-index: 500; }

/* ---------------------------------------------------------------- Mesazhet */
.flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid transparent; }
.flash.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.flash.error { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.flash.warn { background: var(--warn-soft); color: var(--warn); font-size: 13px; border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.secret { font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: .06em; background: var(--card); color: var(--ink); padding: 6px 12px; border-radius: 8px; border: 1px dashed var(--line-2); display: inline-block; margin: 6px 0; user-select: all; }

/* ---------------------------------------------------------------- Harta */
.map { height: 420px; border-radius: var(--radius-sm); position: relative; background: var(--card-2); z-index: 0; }
.map.tall { height: 520px; }
.map-warn { position: absolute; z-index: 800; left: 56px; right: 12px; top: 12px; background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }
:root[data-theme="dark"] .leaflet-container { background: #0d1626; }
:root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .leaflet-bar a { background: var(--card); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(17,26,43,.8); color: var(--muted); }
:root[data-theme="dark"] .leaflet-tooltip { background: var(--card); color: var(--ink); border-color: var(--line); }

ul.alerts { list-style: none; padding: 0; margin: 0 0 10px; }
ul.alerts li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; display: flex; gap: 8px; }
ul.alerts li:last-child { border-bottom: 0; }
ul.alerts time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
pre { white-space: pre-wrap; font-size: 12px; }
pre.raw { max-height: 420px; overflow: auto; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-family: var(--mono); font-size: 12px; }

ol.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
ol.steps li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
ol.steps .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--neutral-soft); color: var(--muted); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
ol.steps li.done .num { background: var(--ok-soft); color: var(--ok); }
ol.steps li.next { border-color: var(--accent); background: var(--accent-soft); }
ol.steps li.next .num { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- Dashboard */
.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank li { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rank li:last-child { border-bottom: 0; }
.rank li::before { counter-increment: r; content: counter(r); width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--neutral-soft); color: var(--muted); grid-row: span 2; }
.rank li:nth-child(1)::before { background: #fde68a; color: #92400e; }
.rank li:nth-child(2)::before { background: #e2e8f0; color: #334155; }
.rank li:nth-child(3)::before { background: #fed7aa; color: #9a3412; }
.rank .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rank .meta { grid-column: 2 / 4; font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.rank .bar { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: var(--neutral-soft); overflow: hidden; }
.rank .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.empty-state { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 13px; }
.chart { width: 100%; height: 220px; display: block; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart .gl { stroke: var(--grid); stroke-width: 1; }
.chart .b { fill: var(--chart-bar); }
.chart .b:hover { fill: var(--accent-2); }
.chart .b.today { fill: var(--accent-2); }
.donut-row { display: flex; align-items: center; gap: 18px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend b { margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; }
.refresh { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

/* ---------------------------------------------------------------- Hyrja */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth .hero { background: radial-gradient(1200px 600px at -10% -20%, #1d4ed8 0%, transparent 60%), radial-gradient(900px 500px at 120% 120%, #0d9488 0%, transparent 55%), #0b1424;
  color: #e6edf6; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth .hero h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; max-width: 520px; }
.auth .hero p { color: #a8b8cc; max-width: 460px; font-size: 15px; }
.auth .hero ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; color: #c8d5e4; }
.auth .hero li { display: flex; gap: 10px; align-items: center; }
.auth .hero li svg { color: #5eead4; }
.auth .panel { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); position: relative; }
.auth .panel .iconbtn { position: absolute; top: 18px; right: 18px; }
.auth .box { width: 100%; max-width: 380px; }
.auth .box h1 { font-size: 26px; margin-bottom: 6px; }
.auth .box form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.auth .box label { font-size: 13px; color: var(--ink-2); }
.auth .box input { padding: 11px 12px; }
.auth .box button.primary { justify-content: center; padding: 11px; font-size: 15px; }
.brandmark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #fff; }
.brandmark .logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #3b82f6, #14b8a6); }
.pwmeter { height: 5px; border-radius: 3px; background: var(--neutral-soft); overflow: hidden; margin-top: 6px; }
.pwmeter i { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }

/* ---------------------------------------------------------------- Responsive */
.scrim { display: none; }
@media (max-width: 1100px) { .grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1050; }
  .menu-btn { display: inline-grid; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; }
  main.content { padding: 18px 14px 44px; }
  .usermenu .who { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth .hero { display: none; }
}
@media print {
  .side, .topbar, form.filters, .actions { display: none; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .card { border: 0; padding: 0; box-shadow: none; }
}

/* =====================================================================
   Ikonat në tituj, butona dhe mesazhe
   ===================================================================== */
h1 { display: flex; align-items: center; gap: 12px; }
.h1ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); flex: none; }
.h1ic svg.i { width: 20px; height: 20px; }
button svg.i, .btn svg.i { width: 16px; height: 16px; vertical-align: -3px; }
h2 svg.i { width: 17px; height: 17px; color: var(--accent); }
.flash { position: relative; padding-left: 42px; }
.flash > svg.fi { position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; }
.flabel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.flabel svg.i { width: 15px; height: 15px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; position: relative; }
.field.wide { flex: 1 1 280px; }
svg.i.big { width: 34px; height: 34px; color: var(--muted); opacity: .6; margin-bottom: 6px; }
button.big, .btn.big { padding: 11px 22px; font-size: 15px; border-radius: 10px; }
.pill svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }

/* =====================================================================
   Raportet: ndërtuesi
   ===================================================================== */
.rbuilder { padding: 0; overflow: visible; }
.rbuilder > * { padding: 16px 20px; }
.rbuilder > * + * { border-top: 1px solid var(--line); }
.rstep { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; flex: none; }
.rsec-h { display: flex; align-items: center; gap: 10px; font-weight: 650; margin-bottom: 12px; }
.rsection .row { margin-bottom: 0; }
.rcatalog > summary { list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.rcatalog > summary::-webkit-details-marker { display: none; }
.rcur { display: flex; align-items: center; gap: 12px; flex: 1; }
.rcur small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rcur b { font-size: 16px; }
.rchange { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.rchange:hover { background: var(--accent-soft); }
.rcatalog[open] .rchange svg { transform: rotate(180deg); }
.rcatalog-body { margin-top: 16px; display: grid; gap: 16px; }
.rgroup-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.rtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rtile { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; background: var(--card); color: var(--ink) !important; transition: border-color .15s, background .15s, box-shadow .15s; min-width: 0 !important; }
.rtile:hover { border-color: var(--line-2); background: var(--hover); }
.rtile input { position: absolute; opacity: 0; pointer-events: none; }
.rtile:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.rtile:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft); }
.rtile-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--neutral-soft); color: var(--ink-2); flex: none; }
.rtile-ic.lg { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.rtile-ic.lg svg.i { width: 22px; height: 22px; }
.rtile:has(input:checked) .rtile-ic, .rcur .rtile-ic { background: var(--accent); color: var(--accent-ink); }
.rtile-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtile-tx b { font-size: 14px; font-weight: 600; }
.rtile-tx small { font-size: 12px; line-height: 1.35; }
.chips { gap: 6px; flex-basis: 100%; }
.chips button { border-radius: 999px; padding: 6px 13px; font-size: 13px; }
.chips button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--card-2); border-radius: 0 0 var(--radius) var(--radius); }
.rfoot svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.noopts { display: none; }
[data-section-opts].empty .noopts { display: inline; }

/* Zgjedhësi me listë (automjetet, zonat) */
details.picker { position: relative; }
details.picker > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 8px 10px; background: var(--input); cursor: pointer; color: var(--ink); }
details.picker > summary::-webkit-details-marker { display: none; }
details.picker[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
details.picker > summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
details.picker[open] > summary svg { transform: rotate(180deg); }
.picker-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 900; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px; min-width: 300px; }
.picker-tools { display: flex; gap: 6px; margin-bottom: 8px; }
.picker-tools input { flex: 1; min-width: 0; }
.picker-tools button { padding: 6px 10px; font-size: 12px; }
.picker-list { max-height: 300px; overflow-y: auto; display: grid; gap: 1px; margin-bottom: 6px; }
.pick-item { display: grid !important; grid-template-columns: 18px 10px 1fr auto; align-items: center; gap: 8px !important; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  color: var(--ink) !important; font-size: 13px !important; min-width: 0 !important; flex-direction: row !important; }
.pick-item:hover { background: var(--hover); }
.pick-item:has(input:checked) { background: var(--accent-soft); }
.pick-item .pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pick-item small { white-space: nowrap; }
.pick-item:not(:has(.dot)) { grid-template-columns: 18px 1fr; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.online { background: var(--ok); } .dot.delayed { background: var(--warn); } .dot.offline { background: var(--bad); }

/* Raportet e fundit */
.recents { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
a.recent { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
a.recent:hover { border-color: var(--accent); background: var(--hover); text-decoration: none; }
a.recent > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
a.recent small { color: var(--muted); font-size: 12px; }
a.recent .go { width: 14px; height: 14px; color: var(--accent); opacity: 0; transition: opacity .15s; }
a.recent:hover .go { opacity: 1; }

/* =====================================================================
   Raportet: rezultati
   ===================================================================== */
.rtitle { display: flex; align-items: center; gap: 14px; }
.rtitle h2 { font-size: 18px; margin: 0 0 6px; }
.rtitle .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.result .kpis { margin: 4px 0 0; }
.tbl-tools { display: flex; align-items: center; gap: 10px; }
.tbl-tools input.tablefilter { margin: 0; width: 260px; }
.tbl-tools .muted { font-size: 12px; white-space: nowrap; }
.tablewrap.tall { max-height: 70vh; overflow: auto; border: 1px solid var(--line); }
.tablewrap.tall table.data th { z-index: 2; }
table.sortable th { cursor: pointer; user-select: none; }
table.sortable th:hover { color: var(--ink); }
table.sortable th .sort::after { content: "↕"; opacity: .35; margin-left: 4px; font-size: 11px; }
table.sortable th.asc .sort::after { content: "▲"; opacity: 1; color: var(--accent); }
table.sortable th.desc .sort::after { content: "▼"; opacity: 1; color: var(--accent); }
.st.b-trip { background: var(--accent-soft); color: var(--accent); }
.st.b-stop { background: var(--warn-soft); color: var(--warn); }
button[data-loading].loading { pointer-events: none; opacity: .8; }
button[data-loading].loading svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 960px) {
  .tbl-tools input.tablefilter { width: 160px; }
  .rtiles { grid-template-columns: 1fr; }
  .picker-panel { min-width: 0; }
}
@media print {
  .rbuilder, .recents, .tbl-tools, .h1ic, .pagehead { display: none !important; }
  .tablewrap.tall { max-height: none; overflow: visible; border: 0; }
  .map { break-inside: avoid; }
}
.pick-item.hide { display: none !important; }
table.data td.dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.content { scroll-margin-top: 70px; } #result { scroll-margin-top: 76px; }

/* Paneli: periudha prej – deri */
details.rangepick { position: relative; }
details.rangepick > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 13px; }
details.rangepick > summary::-webkit-details-marker { display: none; }
details.rangepick > summary:hover { background: var(--hover); }
details.rangepick.on > summary { background: var(--accent); color: var(--accent-ink); }
details.rangepick > summary svg.i { width: 15px; height: 15px; }
.rangepick-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 340px; }
.rangepick-panel label { min-width: 0; }
.rangepick-panel .chips { grid-column: 1 / -1; }
.rangepick-panel button.primary { grid-column: 1 / -1; justify-content: center; }
.seg { align-items: center; }

/* =====================================================================
   Harta live
   ===================================================================== */
.live { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: calc(100vh - 60px - 48px); min-height: 520px; }
.live > .card { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.live-head { padding: 14px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.live-title { display: flex; align-items: center; gap: 10px; }
.live-title b { display: block; font-size: 16px; }
.live-title small { font-size: 12px; }
.live-title small.err { color: var(--bad); }
.live-filter { width: 100%; justify-content: space-between; }
.live-filter a { padding: 5px 8px; font-size: 12px; flex: 1; text-align: center; }
.live-filter a span { opacity: .7; font-size: 11px; margin-left: 2px; }
.live-list { overflow-y: auto; flex: 1; padding: 6px; }
.live-item { display: grid; gap: 2px; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 10px; padding: 9px 10px; margin-bottom: 2px; }
.live-item:hover { background: var(--hover); border-color: transparent; }
.live-item.on { background: var(--accent-soft); border-color: var(--accent); }
.li-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.li-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sub { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sub.muted { color: var(--muted); }
.live-map { position: relative; }
.live-map .map { height: 100%; border-radius: var(--radius); }
.live-panel { position: absolute; z-index: 800; right: 14px; top: 14px; width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 14px; }
.lp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lp-head b { font-size: 15px; }
.lp-head .iconbtn { width: 30px; height: 30px; font-size: 13px; }
.lp-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
.lp-grid span { color: var(--muted); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.lp-actions select { padding: 6px 8px; font-size: 13px; }
.lp-actions .btn { padding: 6px 10px; font-size: 13px; }
.vmark { background: none; border: 0; }
.vm-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.vm-dot.sel { box-shadow: 0 0 0 4px rgba(37,99,235,.35), 0 2px 6px rgba(0,0,0,.35); }
.vm-dot svg { width: 18px; height: 18px; }
.vm-lbl { position: absolute; left: 34px; top: 5px; white-space: nowrap; background: var(--card); color: var(--ink); font: 600 11px/1 Inter, system-ui, sans-serif; padding: 4px 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
@media (max-width: 960px) {
  .live { grid-template-columns: 1fr; height: auto; }
  .live-side .live-list { max-height: 260px; }
  .live-map { height: 70vh; }
  .live-panel { left: 10px; right: 10px; width: auto; top: auto; bottom: 10px; }
}
.live-filter a { white-space: nowrap; padding: 5px 4px; }

/* Ditët e punës dhe ndihma e SMTP */
.daychips { display: flex; gap: 6px; flex-wrap: wrap; }
.daychip { display: inline-flex !important; flex-direction: row !important; min-width: 0 !important; cursor: pointer; }
.daychip input { position: absolute; opacity: 0; pointer-events: none; }
.daychip span { display: inline-block; min-width: 46px; text-align: center; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px; color: var(--ink-2); font-weight: 600; font-size: 13px; background: var(--card); }
.daychip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.daychip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.smtp-help { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink-2); font-size: 13px; line-height: 1.5; max-width: 760px; }
tr.smtp-preset td { background: var(--card-2); }
svg.i.sm { width: 12px; height: 12px; vertical-align: -1px; }

.tabs { margin-bottom: 16px; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; }
.tabs svg.i { width: 15px; height: 15px; }
.atype { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.atype svg.i { width: 15px; height: 15px; color: var(--accent); }
tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
ol.howto { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }

/* =====================================================================
   Rishikimi i rrugës
   ===================================================================== */
.rp-pick select { min-width: 240px; }
.replay { display: grid; grid-template-columns: 1fr 300px; grid-template-rows: minmax(420px, calc(100vh - 340px)) auto; gap: 16px; }
.replay > .card { margin: 0; }
.rp-map { padding: 0; position: relative; overflow: hidden; }
.rp-map .map { height: 100%; border-radius: var(--radius); }
.rp-side { grid-row: span 2; display: flex; flex-direction: column; max-height: calc(100vh - 140px); }
.rp-trips { overflow-y: auto; display: grid; gap: 6px; }
.rp-trip { display: grid; gap: 2px; text-align: left; width: 100%; border-radius: 10px; padding: 9px 10px; }
.rp-trip span { font-size: 12px; color: var(--muted); }
.rp-trip.on { border-color: var(--accent); background: var(--accent-soft); }
.rp-ctrl { padding: 12px 16px; }
.rp-bar { display: flex; align-items: center; gap: 10px; }
.rp-bar #rp-play { width: 42px; height: 38px; justify-content: center; padding: 0; }
.rp-bar #rp-play svg.i { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.rp-bar input[type=range] { flex: 1; accent-color: var(--accent); padding: 0; border: 0; box-shadow: none; }
.rp-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 72px; }
.rp-chart { width: 100%; height: 90px; display: block; margin-top: 10px; cursor: pointer; background: var(--card-2); border-radius: 8px; }
.rp-chart .sp { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rp-chart .lim { stroke: var(--bad); stroke-dasharray: 6 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-chart .cur { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rp-hud { position: absolute; z-index: 800; left: 56px; top: 12px; display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 12px; box-shadow: var(--shadow-lg); font-size: 13px; }
.rp-hud:empty { display: none; }
.rp-hud b { font-size: 16px; } .rp-hud b.bad { color: var(--bad); }
.rp-hud span { color: var(--muted); }
.rp-stop { background: #1f3b57; color: #fff; border: 2px solid #fff; border-radius: 50%; width: 22px; height: 22px; font: 700 11px/18px system-ui; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
@media (max-width: 960px) { .replay { grid-template-columns: 1fr; grid-template-rows: 60vh auto auto; } .rp-side { grid-row: auto; max-height: 300px; } }

/* Vlerësimi i shoferëve */
.grade { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-weight: 800; font-size: 13px; }
.grade.gA { background: var(--ok-soft); color: var(--ok); } .grade.gB { background: #e0f2fe; color: #0369a1; }
.grade.gC { background: var(--warn-soft); color: var(--warn); } .grade.gD, .grade.gE { background: var(--bad-soft); color: var(--bad); }
:root[data-theme="dark"] .grade.gB { background: rgba(56,189,248,.15); color: #7dd3fc; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.podium .card { margin: 0; text-align: center; padding: 20px 14px; }
.podium .medal { font-size: 30px; line-height: 1; }
.podium b { display: block; font-size: 16px; margin: 8px 0 2px; }
.podium .big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.scorebar { height: 8px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; min-width: 120px; }
.scorebar i { display: block; height: 100%; border-radius: 4px; }
@media (max-width: 760px) { .podium { grid-template-columns: 1fr; } }
/* Mirëmbajtja */
.mstat { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mstat a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; }
.mstat a.on { border-color: var(--accent); background: var(--accent-soft); }
.mstat a b { font-size: 18px; }
.help h2 { display: flex; gap: 8px; align-items: center; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.help-grid .card { margin: 0; }
.help ol, .help ul { padding-left: 20px; margin: 6px 0 0; display: grid; gap: 5px; }
.help .tip { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Modulet e përdoruesit */
.mods { display: grid; gap: 10px; }
.mods.off { opacity: .5; }
.mgroup { display: grid; gap: 6px; }
.mchip span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mchip svg.i { width: 14px; height: 14px; }

/* Parametrat e vlerësimit */
details.scoreparams > summary { list-style: none; cursor: pointer; }
details.scoreparams > summary::-webkit-details-marker { display: none; }
details.scoreparams > summary .card-head > span { display: inline-flex; align-items: center; gap: 10px; }
details.scoreparams[open] > summary svg.i:last-child { transform: rotate(180deg); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.sp-grid fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 10px; align-content: start; }
.sp-grid legend { padding: 0 6px; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.sp-grid legend svg.i { width: 16px; height: 16px; color: var(--accent); }
.sp-grid label { min-width: 0; }
.sp-grid .chips { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.sp-grid .chips button { padding: 2px 8px; font-size: 11px; }

/* =====================================================================
   Shpenzimet: dokumenti
   ===================================================================== */
tr.clickrow { cursor: pointer; }
tr.clickrow:focus-visible td { background: var(--accent-soft); }
.rank.nonum li::before { display: none; }
.rank.nonum li { grid-template-columns: 1fr auto; }
.rank.nonum .bar, .rank.nonum .meta { grid-column: 1 / 3; }
.rank .nm svg.i { width: 14px; height: 14px; color: var(--accent); vertical-align: -2px; }
.doc { max-width: 860px; margin: 0 auto 24px; background: #fff; color: #142130; border-radius: 6px; box-shadow: var(--shadow-lg); padding: 44px 52px; border: 1px solid var(--line); }
.doc .muted { color: #6a7889; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 18px; border-bottom: 3px solid #2563eb; }
.doc-company { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.doc-no { text-align: right; }
.doc-no span { display: block; color: #2563eb; font-weight: 800; letter-spacing: .08em; font-size: 15px; }
.doc-no b { font-family: var(--mono); font-size: 13px; color: #6a7889; font-weight: 600; }
.doc-main { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 26px 0; flex-wrap: wrap; }
.doc-title { display: flex; gap: 14px; align-items: center; }
.doc-title h2 { font-size: 22px; margin: 0 0 4px; }
.doc .rtile-ic.lg { background: #e8f0fe; color: #2563eb; }
.doc-amount { background: #eff5ff; border-radius: 12px; padding: 12px 20px; text-align: right; min-width: 200px; }
.doc-amount span { display: block; font-size: 11px; font-weight: 700; color: #6a7889; letter-spacing: .08em; text-transform: uppercase; }
.doc-amount b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e3e8ef; border-radius: 10px; overflow: hidden; }
.doc-grid div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e3e8ef; font-size: 14px; }
.doc-grid div:nth-child(odd) { border-right: 1px solid #e3e8ef; }
.doc-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.doc-grid span { color: #6a7889; }
.doc-label { font-size: 12px; font-weight: 700; color: #6a7889; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.doc-label a { text-transform: none; letter-spacing: 0; font-weight: 600; }
.doc-desc { margin-top: 22px; line-height: 1.6; }
.doc-att { margin-top: 24px; }
.doc-img { max-width: 100%; max-height: 720px; border: 1px solid #e3e8ef; border-radius: 8px; display: block; }
.doc-pdf { width: 100%; height: 720px; border: 1px solid #e3e8ef; border-radius: 8px; }
.doc-foot { display: flex; justify-content: space-between; margin-top: 36px; padding-top: 14px; border-top: 1px solid #e3e8ef; color: #6a7889; font-size: 12px; }
@media (max-width: 760px) { .doc { padding: 24px 18px; } .doc-grid { grid-template-columns: 1fr; } .doc-grid div:nth-child(odd) { border-right: 0; } .doc-grid div { grid-template-columns: 120px 1fr; } }
@media print {
  .doc-tools, .flash { display: none !important; }
  .doc { box-shadow: none; border: 0; padding: 0; max-width: none; }
  .doc-pdf { display: none; }
}

/* Shoferët: sinkronizimi dhe historia e kartelave */
.tag.ok { background: var(--ok-soft); color: var(--ok); }
label.check { display: flex; align-items: center; gap: 8px; flex-direction: row; font-weight: 500; margin-top: 6px; }
tr.dim td { opacity: .6; }
#import .kpis { margin-bottom: 14px; }
.rowform input[type=datetime-local] { width: auto; }

/* Raportet e grupuara (udhëtimet e detajuara) */
table.data.grouped tr.grp td { background: var(--accent-soft); color: var(--ink); padding-top: 10px; padding-bottom: 10px; border-top: 2px solid var(--accent); }
table.data.grouped tr.grp td svg.i { width: 15px; height: 15px; vertical-align: -3px; color: var(--accent); }
table.data.grouped tr.sub td { font-weight: 700; background: var(--neutral-soft); border-bottom: 2px solid var(--line); }
table.data.grouped tr.grp:not(:first-child) td { box-shadow: inset 0 8px 0 var(--card); padding-top: 18px; }
.sharebar { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--neutral-soft); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.sharebar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.hbars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.hbar-panel h3 { font-size: 13px; margin: 0 0 10px; color: var(--ink-2); font-weight: 600; }
.hbar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.hbar .hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hbar .ht { height: 12px; background: var(--neutral-soft); border-radius: 4px; overflow: hidden; }
.hbar .ht i { display: block; height: 100%; border-radius: 4px; background: var(--accent); min-width: 2px; }
.hbar-panel.s1 .ht i { background: #0e9f6e; }
.hbar-panel.s2 .ht i { background: #d97706; }
.hbar .hv { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 58px; text-align: right; }
@media print { .hbars { grid-template-columns: 1fr 1fr 1fr; } }

/* Odometri: propozimet nga platforma */
#kmtable tr.odo-pending td { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
#kmtable td .tag { white-space: nowrap; }
details.odo-hist { margin-top: 14px; }
details.odo-hist summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 6px 0; }
details.odo-hist summary svg.i { width: 15px; height: 15px; vertical-align: -3px; }