:root {
  --bg: #0f1216;
  --panel: #171b21;
  --border: #262b33;
  --text: #e8eaed;
  --muted: #9aa3ad;
  --accent: #e0ac55;        /* The Vault gold (sampled from static/img/logo.svg) */
  --accent-dark: #c68a3c;
  --danger: #f87171;
  --warn: #fbbf24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  text-transform: uppercase;
}

/* Free-text fields keep exactly what's typed — non-credential fields are already
   uppercased live as you type (static/js/common.js); credential fields (username/
   password) must never be visually altered, since that would be confusing while typing
   even though the submitted value itself is unaffected by CSS. */
input, textarea {
  text-transform: none;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

header.topbar .brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The Vault logo, see .login-logo below. */
header.topbar .brand-logo { display: block; height: 30px; width: auto; }

/* Tab labels wrap to fit; if even that isn't enough (Pavle's 8 tabs on a tablet held
   upright, ~800px), the bar scrolls sideways inside itself instead of widening the page. */
nav.tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
nav.tabs::-webkit-scrollbar { display: none; }

nav.tabs a {
  color: var(--muted);
  text-decoration: none;
  padding: 12px 16px;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}

nav.tabs a.active, nav.tabs a:hover {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}

.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #2a0a0a;
  font-size: 0.7rem;
  font-weight: 700;
}

main {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

body.wide main {
  max-width: none;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

.user-pill {
  font-size: 0.85rem;
  color: var(--muted);
}

.user-pill a { color: var(--accent); margin-left: 10px; text-decoration: none; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

h1, h2, h3 { margin-top: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

th { color: var(--muted); font-weight: 600; }

form.entry-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

form.entry-form .full { grid-column: 1 / -1; }

label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }

input, select, .dropdown-check-toggle {
  width: 100%;
  padding: 8px 10px;
  background: #0d1015;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.dropdown-check { position: relative; }
.dropdown-check-toggle {
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-check-toggle::after { content: '▾'; float: right; color: var(--muted); margin-left: 8px; }
.dropdown-check-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.dropdown-check-panel.open { display: block; }
.dropdown-check-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--text);
  cursor: pointer;
}
.dropdown-check-panel input[type="checkbox"] { width: auto; }

.uppercase-select, .uppercase-select option { text-transform: uppercase; }

button {
  background: var(--accent);
  color: #1a1714;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}

button:hover { background: var(--accent-dark); }

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

button.danger { background: var(--danger); color: #2a0a0a; }

a.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
a.btn-secondary:hover { border-color: var(--accent); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.pending_review { background: #4b3a12; color: var(--warn); }
.badge.assigned { background: #172a45; color: #60a5fa; }  /* blue, not gold: gold would blur into amber "Na čekanju" */
.badge.delivered { background: #123a1c; color: #4ade80; }
.badge.failed { background: #3a1414; color: var(--danger); }
.badge.neutral { background: #262b33; color: var(--text); }

.table-scroll { overflow-x: auto; }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }

/* Stack table (courier dashboard): a normal table on wide desktop screens, one card per row on
   phones and tablets — see the @media block right below. Cells carry a class (c-primalac,
   c-adresa, …) and a data-label (the column name, shown above the value on a card); a row's
   buttons sit in a .row-actions wrapper. On a table they stack in one column, so the button
   column stays narrow instead of pushing past the card edge. */
.stack-table .row-actions { display: flex; flex-direction: column; gap: 6px; }
.stack-table .row-actions > button,
.stack-table .row-actions > a.btn-secondary { white-space: nowrap; text-align: center; }
.stack-table .row-actions > .badge { align-self: center; }

/* Up to 1280px covers every 10.5" tablet in either orientation (800–834px portrait,
   1112–1280px landscape) and every phone; touch screens get cards at any width. The card
   grid fits as many 300px columns as there's room for: 1 on a phone, 2 on a tablet held
   upright, 3 held sideways — it reflows on rotation by itself. */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
  table.stack-table { display: block; overflow: visible; }
  table.stack-table thead { display: none; }
  table.stack-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
  }
  table.stack-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-content: start;
    min-width: 0;
    padding: 12px;
    background: #0d1015;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  table.stack-table td { display: block; min-width: 0; padding: 0; border: none; overflow-wrap: anywhere; }
  table.stack-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  table.stack-table td.is-empty { display: none; }

  /* Card order: name + status/time on top, then the address, then the rest in pairs. */
  table.stack-table td.c-primalac { order: 1; font-weight: 700; font-size: 1.05rem; }
  table.stack-table td.c-status,
  table.stack-table td.c-uneseno { order: 2; justify-self: end; text-align: right; }
  table.stack-table td.c-adresa { order: 3; grid-column: 1 / -1; }
  table.stack-table td.c-grad { order: 4; }
  table.stack-table td.c-naselje { order: 5; }
  table.stack-table td.c-posiljalac { order: 6; }
  table.stack-table td.c-telefon { order: 7; }
  table.stack-table td.c-otkup { order: 8; }
  table.stack-table td.c-dostava { order: 9; }
  table.stack-table td.c-napomena { order: 10; grid-column: 1 / -1; }
  table.stack-table td.c-actions { order: 11; grid-column: 1 / -1; margin-top: 4px; }

  /* Buttons two per row, full card width, finger-sized. */
  table.stack-table .row-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  table.stack-table .row-actions > button,
  table.stack-table .row-actions > a.btn-secondary {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    white-space: normal;
  }

  /* Full-width rows in the card grid: a partner header (pickup tab) and "Nema paketa…". */
  table.stack-table tbody tr.group-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
  }
  table.stack-table tr.group-row button { min-height: 44px; }
  table.stack-table tbody tr.empty-row { grid-column: 1 / -1; display: block; padding: 0; background: none; border: none; }

  /* Totals footer (Dostavljeno) becomes a summary box under the cards. */
  table.stack-table tfoot {
    display: block;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  table.stack-table tfoot tr { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 6px 20px; }
  table.stack-table tfoot td:empty { display: none; }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.icon-edit { background: transparent; color: var(--text); }
.icon-btn.icon-edit:hover { background: #20242b; }
.icon-btn.icon-delete { background: var(--danger); color: #2a0a0a; border-color: var(--danger); }
.icon-btn.icon-delete:hover { background: #f19e98; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
}
.modal-box form > div { margin-bottom: 14px; }
.modal-close {
  cursor: pointer;
  color: var(--muted);
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 4px;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.login-box h1 { font-size: 1.3rem; margin: 0 0 8px; text-align: center; }
/* The Vault logo (static/img/logo.svg — light-lettering version of the client's logo, made
   for this dark theme). Gold below is sampled from the same logo. */
.login-logo { display: block; width: 100%; height: auto; }
.login-box p.sub { color: var(--muted); margin-top: 0; margin-bottom: 20px; font-size: 0.85rem; text-align: center; }
.login-box .error { color: var(--danger); font-size: 0.85rem; margin-bottom: 12px; }
.login-box form > div { margin-bottom: 14px; }
.login-box button {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(90deg, #c98d3f, #f2ca77 50%, #c98d3f);
  color: #1a1714;
}
.login-box button:hover { background: linear-gradient(90deg, #a8662a, #d9a24c 50%, #a8662a); }

.stat-row { display: flex; gap: 16px; margin-bottom: 20px; }
.stat {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.stat .label { color: var(--muted); font-size: 0.8rem; }
.stat .value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.stat .delta { margin-top: 4px; min-height: 1em; }
.delta-good { color: #4ade80; font-size: 0.8rem; }
.delta-bad { color: var(--danger); font-size: 0.8rem; }

#gps-map, #route-map { height: 520px; border-radius: 10px; overflow: hidden; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }

.muted { color: var(--muted); }

/* Small "i" hint next to a label, its text in data-tip (e.g. Troškovi → Iznos: which
   decimal separator to use). Opens on hover, and on tap/focus — tablets and phones have no
   hover. Use it as <label class="tip-host">Iznos <span class="info-tip" tabindex="0"
   data-tip="…">i</span></label>: a plain label (no for=), or a tap would jump focus into
   the field and close the hint straight away. The hint spans the label's own width (its
   form column), so it can never stick out past the form or widen the page. */
.tip-host { position: relative; }
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  vertical-align: middle;
}
.info-tip:hover, .info-tip:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  padding: 8px 10px;
  background: #0d1015;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s;
}
.info-tip:hover::after, .info-tip:focus::after { opacity: 1; visibility: visible; }

/* Phones (Pavle checking the app on the go, couriers, partners). Nothing below changes the
   desktop layout. The rule of thumb: the page itself never scrolls sideways — the tab bar
   and wide tables scroll inside their own box instead. */
@media (max-width: 760px) {
  header.topbar { padding: 10px 12px; gap: 8px; }
  header.topbar .brand-logo { height: 24px; }
  header.topbar .brand { font-size: 0.8rem; }
  .user-pill { font-size: 0.75rem; text-align: right; }

  nav.tabs { padding: 0 4px; }
  nav.tabs a { flex: 0 0 auto; white-space: nowrap; padding: 10px 12px; font-size: 0.85rem; }

  main, body.wide main { padding: 12px; }
  h1 { font-size: 1.25rem; }
  h2 { font-size: 1.1rem; }
  .card { padding: 14px; }

  /* A table scrolls sideways within its own box rather than widening the page. */
  table { display: block; overflow-x: auto; }

  .stat-row { flex-wrap: wrap; gap: 10px; }
  .stat { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px; }
  .stat .value { font-size: 1.3rem; }

  /* Day pickers ("◀ Prethodni dan · Title · Sljedeći dan ▶"): title on its own line. */
  .toolbar { gap: 8px; }
  .toolbar > h1, .toolbar > h2 { order: -1; flex-basis: 100%; }

  /* Entry forms stack in one column, including the few set inline on the element. */
  form.entry-form, [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="min-width"] { min-width: 0 !important; }

  #gps-map, #route-map { height: 60vh; }
  .login-box { width: calc(100vw - 32px); max-width: 340px; padding: 24px; }
}