/* ============================================================
   Flotta — shared design system
   Enterprise SaaS: dense data, trustworthy blue, real depth
   (layered shadows, not just borders), bold tight-tracked
   display type. Linked by every page; page-specific <style>
   blocks may still add layout rules but should reuse these
   tokens/classes.
   ============================================================ */

:root{
  /* ---------- surfaces ---------- */
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;
  --surface-sunken:#EEF2F8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;

  /* ---------- text ---------- */
  --ink:#0B1220;
  --ink-soft:#48566B;
  --muted:#8492A6;
  --on-accent:#FFFFFF;

  /* ---------- accent (brand blue → cyan) ---------- */
  --blue:#2563EB;
  --blue-deep:#1D4ED8;
  --blue-bright:#3B82F6;
  --blue-bg:#EAF1FE;
  --blue-border:#C9DBFC;
  --cyan:#0EA5E9;
  --dark:#0B1220;
  --grad-brand:linear-gradient(135deg,#38BDF8 0%,#2563EB 55%,#1D4ED8 100%);
  --grad-brand-hover:linear-gradient(135deg,#5CC9FB 0%,#3B72F0 55%,#2A5AE0 100%);
  --grad-mesh-1:#38BDF8;
  --grad-mesh-2:#2563EB;
  --grad-mesh-3:#F0A868;

  /* ---------- semantic ---------- */
  --green:#0F9D6B;
  --green-bg:#E4F8EF;
  --green-border:#BCEBD5;
  --amber:#B7791F;
  --amber-bg:#FEF3DC;
  --amber-border:#FBE3AE;
  --coral:#C0362C;
  --coral-bg:#FDECEA;
  --coral-border:#F7CFC9;

  /* ---------- radius ---------- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-pill:999px;

  /* ---------- shadow — layered, real depth ---------- */
  --shadow-xs:0 1px 2px rgba(11,18,32,0.05);
  --shadow-sm:0 2px 6px -2px rgba(11,18,32,0.08),0 1px 2px rgba(11,18,32,0.05);
  --shadow-md:0 12px 28px -10px rgba(11,18,32,0.14),0 4px 10px -6px rgba(11,18,32,0.08);
  --shadow-lg:0 28px 60px -16px rgba(11,18,32,0.22),0 10px 24px -10px rgba(11,18,32,0.12);
  --shadow-blue:0 16px 36px -12px rgba(37,99,235,0.4),0 4px 10px -4px rgba(37,99,235,0.25);
  --shadow-blue-lg:0 24px 56px -14px rgba(29,78,216,0.45),0 8px 18px -6px rgba(29,78,216,0.3);

  --font-display:'Inter','Segoe UI',sans-serif;
  --font-body:'Inter','Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink);}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
::selection{background:var(--blue-bg);color:var(--blue-deep);}

h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.02em;color:var(--ink);}

.text-gradient{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ============================================================
   Buttons — bold gradient primary, real hover lift.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;font-family:var(--font-body);letter-spacing:-0.005em;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,box-shadow .18s ease,color .15s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px) scale(0.99);}
.btn:disabled,.btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none;}

.btn-primary{
  background:var(--grad-brand);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 1px 2px rgba(29,78,216,0.3),0 10px 22px -8px rgba(29,78,216,0.5);
}
.btn-primary:hover{background:var(--grad-brand-hover);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 1px 2px rgba(29,78,216,0.32),0 16px 30px -8px rgba(29,78,216,0.55);}

.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-xs);}
.btn-secondary:hover{border-color:var(--ink);background:var(--surface-2);transform:translateY(-1px);box-shadow:var(--shadow-sm);}

.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--line-strong);background:var(--surface-2);}

.btn-danger{background:var(--coral-bg);color:var(--coral);border-color:var(--coral-border);}
.btn-danger:hover{background:var(--coral);color:#fff;border-color:var(--coral);}

.btn-sm{height:38px;padding:0 16px;font-size:13px;}
.btn-block{width:100%;}

/* ============================================================
   Cards & sections — real elevation, hover lift on interactive ones.
   ============================================================ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);}
.card-table{padding:0;overflow:hidden;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.card-head h3{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-0.01em;color:var(--ink);}

.section-title{font-family:var(--font-display);font-weight:700;font-size:19px;margin:40px 0 14px;letter-spacing:-0.015em;color:var(--ink);}

/* ============================================================
   Status pills / badges / stamps — one consistent tag system.
   ============================================================ */
.status-pill{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);
  text-transform:uppercase;letter-spacing:0.03em;background:var(--surface-sunken);color:var(--muted);border:1px solid var(--line);}
.status-pill.active{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}
.status-pill.warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border);}
.status-pill.expired{background:var(--coral-bg);color:var(--coral);border-color:var(--coral-border);}

.stamp{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.02em;
  text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--muted);border:1px solid var(--line);}
.stamp::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.stamp.active{color:var(--green);background:var(--green-bg);border-color:var(--green-border);}
.stamp.warn{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-border);}
.stamp.expired{color:var(--coral);background:var(--coral-bg);border-color:var(--coral-border);}

.plan-chip,.role-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);background:var(--surface-sunken);border:1px solid var(--line);color:var(--ink-soft);}
.role-chip{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue-deep);}

/* ============================================================
   Tabs — a page split into named sections the user switches between
   without a page load (e.g. Beállítások). Same pill visual language as
   the equipment-catalog modal's tab switcher, generalized for full-page use.
   ============================================================ */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:14px;}
.tab-btn{padding:8px 15px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;}
.tab-btn:hover{background:var(--surface-sunken);}
.tab-btn.active{background:var(--grad-brand);color:#fff;border-color:transparent;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ============================================================
   Tables — dense, enterprise-dashboard-like precision.
   ============================================================ */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);
  font-weight:700;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface-2);}
tbody td{padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.cell-main{font-weight:600;color:var(--ink);}
.cell-sub{font-size:12px;color:var(--muted);margin-top:2px;font-weight:500;}
.mono{font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-soft);}
.empty-row td{text-align:center;color:var(--muted);padding:32px 20px;font-weight:500;}

/* ============================================================
   List toolbar (search) & pagination — shared across every list page so search
   input styling and prev/next paging look identical everywhere.
   ============================================================ */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.search-box{position:relative;max-width:320px;flex:1;min-width:220px;}
.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
/* input[type="text"], not bare input: the generic Forms rule below also matches
   input[type=text] with equal (0,1,1) specificity — without the type qualifier here this loses
   that tie via source order and the icon collides with the placeholder text. */
.search-box input[type="text"]{padding-left:38px;}

/* Combinable with the search box (AND filter, not a replacement) — a dropdown narrowing the list
   by one categorical field (status, type, …) while the text search keeps matching everything else. */
.filter-select{height:42px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 14px;
  font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--ink);min-width:180px;flex-shrink:0;}

.pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 20px;}
.pagination button{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;}
.pagination button:hover:not(:disabled){background:var(--surface-sunken);color:var(--ink);}
.pagination button:disabled{opacity:.45;cursor:default;}
.pagination .page-info{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;}

/* ============================================================
   Forms
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.field input,.field select,.field textarea,
input[type=text],input[type=email],input[type=password]{
  height:42px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 14px;
  font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--ink);width:100%;min-width:0;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field select:focus,input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
.field input:disabled{opacity:0.55;cursor:not-allowed;background:var(--surface-2);}

.form-error{display:none;background:var(--coral-bg);border:1px solid var(--coral-border);color:var(--coral);
  font-size:13px;font-weight:600;padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:16px;}
.form-error.show{display:block;}
.form-success{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);
  font-size:13px;font-weight:600;padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:16px;}

/* ============================================================
   Notice banners
   ============================================================ */
.notice{display:flex;align-items:flex-start;gap:12px;background:var(--amber-bg);border:1px solid var(--amber-border);
  border-radius:var(--radius-md);padding:14px 16px;margin-bottom:16px;}
.notice svg{flex-shrink:0;color:var(--amber);margin-top:1px;}
.notice .txt{font-size:13px;font-weight:500;color:#7A5410;line-height:1.5;}
.notice .txt b{font-weight:700;}

/* ============================================================
   Modal shell — used by every add/edit dialog (vehicles, drivers, …)
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(11,18,32,0.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:250;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  transform:translateY(10px) scale(0.98);transition:transform .2s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-lg);border:1px solid var(--line);}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 4px;}
.modal-head h2{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--ink);}
.modal-head p{color:var(--ink-soft);font-size:13px;margin-top:6px;font-weight:500;line-height:1.5;}
.modal-close{width:30px;height:30px;border-radius:50%;border:none;background:var(--surface-sunken);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex-shrink:0;}
.modal-close:hover{background:var(--line);color:var(--ink);}
.modal-body{padding:14px 24px 6px;color:var(--ink-soft);font-size:13.5px;line-height:1.6;}
.modal-body b{color:var(--ink);}
.modal-footer{display:flex;gap:10px;padding:20px 24px 24px;}
.modal-footer .btn{flex:1;}

/* ============================================================
   App shell — sidebar + main (dashboard.html)
   ============================================================ */
.app{display:flex;height:100vh;overflow:hidden;background:var(--bg);}
.sidebar{width:260px;flex-shrink:0;height:100vh;overflow:hidden;background:var(--surface);color:var(--ink);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 20px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-shrink:0;}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--grad-brand);flex-shrink:0;box-shadow:0 2px 8px -2px rgba(37,99,235,0.5);}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--ink);}
/* Only the nav items scroll — brand and footer stay fixed. min-height:0 is required for a flex
   item to actually shrink and let its own overflow-y:auto take over instead of growing with
   content. Negative margin + matching padding lets the scrollbar sit flush with the sidebar
   edge instead of appearing inset from the nav items' own padding. */
.nav-scroll{flex:1;min-height:0;overflow-y:auto;margin:0 -16px;padding:0 16px;}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);padding:0 12px;margin:14px 0 6px;font-weight:700;}
.nav-label:first-child{margin-top:0;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;
  color:var(--ink-soft);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:var(--font-body);margin-bottom:1px;position:relative;
  transition:background .15s ease,color .15s ease;}
.nav-item .ico{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.nav-item:hover{background:var(--surface-sunken);color:var(--ink);}
.nav-item.active{background:var(--grad-brand);color:#fff;font-weight:600;box-shadow:0 4px 12px -4px rgba(37,99,235,0.5);}
.nav-item.active .ico{color:#fff;}
.nav-item.disabled{opacity:0.5;cursor:default;}
.nav-item .soon{margin-left:auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--muted);}

/* Collapsible parent nav item with sub-items (e.g. "Raktáreszközök" > Eszközök / Szervíz) —
   the only two-level nav group in the app, kept visually close to a plain .nav-item. */
.nav-group{margin-bottom:1px;}
.nav-group-toggle{margin-bottom:0;}
.nav-group-chevron{margin-left:auto;font-size:10px;color:var(--muted);transition:transform .15s ease;}
.nav-group.collapsed .nav-group-chevron{transform:rotate(-90deg);}
.nav-group-items{display:flex;flex-direction:column;margin:2px 0 2px 14px;padding-left:12px;border-left:1px solid var(--line);}
.nav-group.collapsed .nav-group-items{display:none;}
.nav-subitem{font-size:13px;padding:7px 10px;}

.sidebar-footer{flex-shrink:0;border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;gap:10px;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad-brand);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0;box-shadow:0 2px 8px -2px rgba(37,99,235,0.5);}
.sidebar-footer .who{font-size:13px;line-height:1.25;font-weight:600;color:var(--ink);}
.sidebar-footer .who small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;}
.logout-link{margin-left:auto;color:var(--muted);}
.logout-link:hover{color:var(--ink);}

.main{flex:1;min-width:0;height:100vh;overflow-y:auto;padding:32px 40px 56px;}

.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px;}
.page-header h1{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-0.025em;color:var(--ink);}
.page-header p{color:var(--ink-soft);font-size:13.5px;margin-top:4px;font-weight:500;}

/* Hamburger toggle for the mobile nav drawer — fixed top-left, only rendered/visible below the
   drawer breakpoint. Markup: a sibling of .sidebar inside .app, present on every app-shell page. */
.mobile-nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:210;width:40px;height:40px;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);
  align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(11,18,32,0.5);z-index:190;opacity:0;
  pointer-events:none;transition:opacity .2s ease;}
.app.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto;}

/* ============================================================
   Mobile layout (<=768px) — sidebar becomes an off-canvas drawer toggled by
   .mobile-nav-toggle/.sidebar-backdrop above; main content goes full-width and
   single-column. Several rules here override page-specific inline <style>
   blocks (field-row-2/3 grids, stat-grid, etc.) that are declared unconditionally
   per page — !important is intentional and scoped to only this breakpoint.
   ============================================================ */
@media (max-width:768px){
  .mobile-nav-toggle{display:flex;}
  .sidebar-backdrop{display:block;}

  .app{display:block;height:auto;min-height:100vh;overflow:visible;}
  /* 100dvh, not 100vh: iOS Safari sizes 100vh against the viewport with the address bar
     hidden, so a fixed-position drawer at 100vh extends past the real visible area whenever
     the bar is showing — clipping .sidebar-footer (profile/logout) below the fold with no
     way to scroll to it. dvh tracks the actual visible viewport instead. */
  .sidebar{position:fixed;top:0;left:0;height:100dvh;width:82vw;max-width:300px;z-index:200;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-lg);}
  .app.sidebar-open .sidebar{transform:translateX(0);}

  .main{height:auto;min-height:100vh;overflow-y:visible;padding:64px 16px 40px;}

  .page-header{flex-direction:column;align-items:stretch;gap:12px;}
  .page-header h1{font-size:22px;}
  /* A page-header with one button (button as page-header's direct child) inherits
     align-items:stretch above and goes full-width automatically. A page-header with several
     buttons wraps them in an extra div (e.g. equipment.html) — that wrapper stretches to full
     width but its own row layout doesn't pass the stretch down to each button inside it, so
     they fell back to content width. Column + stretch here makes each button its own
     full-width row instead, matching the single-button pages. */
  .page-header > div:last-child{display:flex;flex-direction:column;align-items:stretch;gap:8px;}

  .toolbar{flex-direction:column;align-items:stretch;}
  .search-box{max-width:none;width:100%;}

  /* Filter dropdowns read better as centered, naturally-sized pills than full-width bars —
     auto margins absorb the stretch/flex-start and center the element regardless of whether
     its parent runs row (.filter-row) or column (.toolbar) on mobile. */
  .filter-select{margin:0 auto;}

  /* Dense multi-column tables scroll horizontally instead of squeezing columns unreadably thin.
     No -webkit-overflow-scrolling:touch here — that property is a known iOS Safari bug trigger:
     it breaks z-index stacking for position:fixed elements anywhere on the page (the drawer
     backdrop stops covering scrollable content). Modern iOS scrolls overflow:auto smoothly
     without it. */
  .card-table{overflow-x:auto;}
  .card-table table{min-width:640px;}

  .modal-overlay{padding:0;align-items:flex-end;}
  .modal{max-width:none;width:100%;max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}

  /* min-width:0 is required here: grid items default to min-width:auto, which refuses to shrink
     below the content's intrinsic width — on iOS Safari, input[type=date] has a wide intrinsic
     size that then overflows its column and pokes out past the modal edge without this. */
  .field-row-2,.field-row-3{grid-template-columns:1fr !important;}
  .field-row-2 > *,.field-row-3 > *{min-width:0;}
  .stat-grid{grid-template-columns:1fr !important;}

  /* overflow:hidden alone wasn't enough: iOS Safari's native date-picker chrome doesn't just
     paint past the border-box, it computes the box itself wider than the CSS width — nothing
     is technically "overflowing" for overflow:hidden to clip. -webkit-appearance:none forces
     Safari to lay the input out with normal CSS sizing instead of its native widget algorithm.
     Tapping the field still opens the native date picker; only the inline chrome changes. */
  input[type="date"]{-webkit-appearance:none;appearance:none;overflow:hidden;}

  .split{grid-template-columns:1fr !important;}
}

/* ============================================================
   Role-based visibility — body gets is-admin/scope-own-vehicle from each
   page's own auth bootstrap script (backend is the real enforcement; this
   is just UI polish so no one sees a button that would 403 anyway).
   Generalized past the 3 built-in roles: is-admin covers any admin role,
   scope-own-vehicle covers Driver AND any custom own-vehicle-scoped role.
   ============================================================ */
body:not(.is-admin) .admin-only,
body.scope-own-vehicle .driver-hidden{display:none !important;}