:root{
  --brand:#154a78; --brand-dark:#0d2f4d; --brand-light:#4f84b0;
  --bg:#f3f5f8; --text:#182430; --muted:#5f6c7a;
  --ok:#2e9e5b; --warn:#c98a00; --danger:#c0392b; --gray:#8b93a0;
  --card:#ffffff; --border:#dfe4ea;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.45;background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}

.topbar{background:var(--brand-dark);color:#fff;padding:0 20px;}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;min-height:56px;gap:6px 14px;}
.topbar .brand{font-weight:800;font-size:18px;letter-spacing:.01em;color:#fff;flex-shrink:0;}
.topbar .brand:hover{text-decoration:none;}
/* #mainNav: pojedyncza plaska lista linkow, na koncu span.user + Konto +
   Wyloguj. margin-left:auto na .user trzyma te ostatnie 3 elementy razem
   jako grupe dosunieta do prawej - jesli linki nie miesza sie w jednym
   wierszu, ta grupa calo przechodzi na nowa linie zamiast rozjezdzac sie
   pojedynczo (klasyczny, stabilny trik flexbox, bez zagniezdzonych divow,
   ktore w praktyce dawaly nieprzewidywalna kolejnosc przy zawijaniu). */
#mainNav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 2px;flex:1;min-width:0;}
.topbar nav a{color:#fff;margin-left:4px;padding:8px 10px;border-radius:7px;font-size:13.5px;opacity:.85;white-space:nowrap;}
.topbar nav a:hover{opacity:1;background:rgba(255,255,255,.1);text-decoration:none;}
.topbar .user{font-size:12.5px;opacity:.7;padding:0 6px;white-space:nowrap;padding-left:14px;border-left:1px solid rgba(255,255,255,.18);}
.lang-switch{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding-left:6px;font-size:12px;}
.lang-link{color:#fff;opacity:.55;padding:3px 5px;border-radius:5px;font-weight:700;letter-spacing:.02em;}
.lang-link:hover{opacity:.9;text-decoration:none;background:rgba(255,255,255,.1);}
.lang-link.active{opacity:1;background:rgba(255,255,255,.16);}
.lang-sep{opacity:.3;}
.topbar-guest .topbar-inner{justify-content:space-between;}
.topbar-guest .brand{font-weight:800;font-size:18px;}

.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:4px;}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;}

.wrap{max-width:1200px;margin:22px auto;padding:0 16px 60px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(15,30,45,.05);margin-bottom:16px;}

h1{font-size:20px;margin:0 0 14px;font-weight:800;letter-spacing:-.01em;}

/* Naglowek strony z odznaka statusu / przyciskami kontaktowymi obok nazwy
   (kierowca, pojazd) - flex zamiast upychania ich w <h1> jako inline, zeby
   na waskich ekranach caly rzad odznak/przyciskow zawijal sie razem, jednym
   blokiem pod nazwa, zamiast rozjezdzac sie osobno (odznaka na koncu linii
   nazwy, przyciski same na kolejnej). */
.page-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px;}
.page-header h1{margin:0;}
.page-header-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
h2{font-size:16px;margin:0 0 10px;font-weight:700;}

/* Zwijane karty (dlugie sekcje typu Dokumenty / Serwis i naprawy) - natywny
   <details>/<summary>, bez JS. */
details.card{padding:0;}
details.card > summary{padding:20px;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;user-select:none;}
details.card:not([open]) > summary{padding-bottom:20px;}
details.card > summary::-webkit-details-marker{display:none;}
details.card > summary h2{margin:0;}
details.card > summary::after{content:"\25BE";color:var(--muted);font-size:13px;flex-shrink:0;transition:transform .15s ease;}
details.card[open] > summary::after{transform:rotate(180deg);}
details.card > summary + *{margin-top:-4px;}
details.card > .details-body{padding:0 20px 20px;}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:14px;}
.flash.ok{background:#e7f7ee;color:var(--ok);}
.flash.error{background:#fdeceb;color:var(--danger);}

label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:12px 0 6px;}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea,input[type=file]{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:#fff;color:var(--text);
  font-family:inherit;
}
textarea{resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}

.btn{border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;display:inline-block;font-family:inherit;}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-secondary{background:#fff;color:var(--brand);border:1px solid var(--brand);}
.btn-danger{background:#fdeceb;color:var(--danger);border:1px solid #f3c9c5;}
.btn-whatsapp{background:#e9f9ef;color:#1d7a3e;border:1px solid #bfe8cd;}
.btn-call{background:#eef3fb;color:#2456a6;border:1px solid #c9d9f2;}
.btn-sm{padding:6px 12px;font-size:12.5px;}

/* display:block + overflow-x:auto na SAMEJ tabeli (nie tylko na waskich
   ekranach) - tabele o wielu kolumnach (np. grupy kategorii w Spedycji,
   11 kolumn) potrafily byc za szerokie nawet na tablecie (~768px), a bez
   tego przewijala sie wtedy CALA STRONA w bok zamiast tylko tabeli w
   swoim miejscu. .quick-add-grid i .sched-table maja wlasne, dedykowane
   opakowania przewijania (patrz nizej) - zostaja przy zwyklym display:table. */
table{width:100%;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
.quick-add-grid,.sched-table table{display:table;white-space:normal;overflow-x:visible;}
th,td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;}
th{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;}
tr:hover td{background:#f7f9fb;}
.table-center th,.table-center td{text-align:center;}
.table-center th:nth-child(1),.table-center td:nth-child(1),
.table-center th:nth-child(2),.table-center td:nth-child(2){text-align:left;}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;}
.badge-ok{background:#e7f7ee;color:var(--ok);}
.badge-zbliza-sie{background:#fff9db;color:#b58b00;}
.badge-wkrotce{background:#fff6e0;color:var(--warn);}
.badge-wygasl{background:#fdeceb;color:var(--danger);}
.badge-brak{background:#eef0f3;color:var(--gray);}

.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.stat-box{flex:1;min-width:130px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-align:center;}
.stat-box b{display:block;font-size:21px;}
.stat-box span{font-size:12px;color:var(--muted);}

/* Ekran startowy po zalogowaniu - kafle do wyboru modulu. Szerokosc siatki
   jest ograniczona (max-width) - bez tego na szerokim ekranie kafle
   rozciagaly sie w jeden rzadki, plaski rzad u samej gory strony, zostawiajac
   pusta cala dolna polowe ekranu zamiast ulozyc sie w kilka rzedow. */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:8px;max-width:840px;}
.tile{display:flex;flex-direction:column;min-height:150px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:26px 24px;text-decoration:none;color:var(--text);box-shadow:0 2px 8px rgba(15,30,45,.05);transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease;}
.tile:hover{text-decoration:none;border-color:var(--brand-light);box-shadow:0 4px 14px rgba(15,30,45,.1);transform:translateY(-1px);}
.tile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.tile-title{font-size:16.5px;font-weight:800;color:var(--brand-dark);}
.tile-badge{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;border-radius:999px;background:#fff;color:var(--brand);font-size:15px;font-weight:800;box-shadow:0 1px 3px rgba(15,30,45,.14);flex-shrink:0;}
.tile-desc{font-size:12.5px;color:var(--muted);line-height:1.45;margin-top:auto;}

/* Kategorie kafli - lekkie, stonowane tlo (te same odcienie co juz uzywane
   gdzie indziej w apce do oznaczania statusow - .row-w_trakcie, .row-
   zakonczone, .row-svc-czesc, .cell-trasa), zeby modul od razu dawal sie
   rozpoznac po kolorze, bez krzykliwych/ostrych barw. */
.menu-category-title{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:24px 0 10px;}
h1 + p + .menu-category-title{margin-top:20px;}
.tile-fleet{background:#eef3fb;border-color:#d7e5f5;}
.tile-fleet:hover{border-color:#b9d0ec;}
.tile-ops{background:#e7f6ea;border-color:#cdebd3;}
.tile-ops:hover{border-color:#a9dcb4;}
.tile-finance{background:#fff6e3;border-color:#f3e4b8;}
.tile-finance:hover{border-color:#e8cf84;}
.tile-admin{background:#f2edf9;border-color:#e0d5f0;}
.tile-admin:hover{border-color:#c9b3e8;}

.search-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.search-row input[type=text]{flex:1;min-width:200px;}
/* select/date w .search-row dziedziczyly globalne width:100% (patrz input[type=date],
   select ponizej) - jako bezposrednie dzieci flexa to zmuszalo kazde pole do calej
   szerokosci wiersza (jedno pole na linie, formularz wygladal na zepsuty/nieklikalny).
   Zabezpieczenie: nawet bez opakowania w <div> (zalecany wzorzec - patrz spedycja.html),
   pole samo w sobie nie rozwali juz ukladu. */
.search-row > select, .search-row > input[type=date]{width:auto;flex:0 1 200px;min-width:150px;}
.search-row > div{display:flex;flex-direction:column;}
.search-row > div label{margin:0 0 4px;}
.search-row > div select, .search-row > div input{min-width:170px;}

/* Zakladki miesiecy w Spedycji - jak zakladki arkuszy w Excelu (01, 02...) */
.month-tabs{display:flex;align-items:center;gap:6px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.month-tab{flex-shrink:0;padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--border);white-space:nowrap;}
.month-tab:hover{text-decoration:none;border-color:var(--brand-light);color:var(--brand-dark);}
.month-tab.active{background:var(--brand);color:#fff;border-color:var(--brand);}

.totals-row td{font-weight:700;background:#f7f9fb;border-top:2px solid var(--border);}

/* Podzakladki "Dodaj zlecenie" (Spedycja) - przelacznik trzech trybow
   dodawania (pojedyncze / siatka / import) w jednym panelu zamiast trzech
   osobnych, rownorzednych sekcji do przewijania. */
.subtabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:12px;}
.subtab{padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--border);cursor:pointer;font-family:inherit;}
.subtab:hover{border-color:var(--brand-light);color:var(--brand-dark);}
.subtab.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.subtab-panel[hidden]{display:none;}

/* Siatka szybkiego dodawania (Spedycja) - komorki jak w arkuszu kalkulacyjnym */
.quick-add-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;border-radius:8px;}
.quick-add-grid{border-collapse:collapse;width:100%;}
.quick-add-grid th{font-size:11.5px;text-transform:none;letter-spacing:0;white-space:nowrap;padding:6px 4px;text-align:left;color:var(--muted);border-bottom:1px solid var(--border);}
.quick-add-grid td{padding:1px;border:1px solid var(--border);}
.quick-add-grid input{width:100%;min-width:90px;padding:6px 7px;border:none;border-radius:0;font-size:13px;background:transparent;}
.quick-add-grid input:focus{outline:2px solid var(--brand-light);outline-offset:-2px;position:relative;z-index:1;background:#fff;}
.quick-add-grid tr:hover td{background:#f7f9fb;}
.quick-add-grid .qa-col-place input{min-width:120px;}
.quick-add-grid .qa-col-ref input{min-width:80px;}
.quick-add-grid .qa-col-client input{min-width:110px;}
.quick-add-grid .qa-col-num input{min-width:70px;}
.quick-add-grid .qa-col-date input{min-width:96px;}
.quick-add-grid .qa-rownum-col{width:44px;min-width:44px;padding:0 2px;text-align:center;white-space:nowrap;background:#fafbfc;border-right:1px solid var(--border);position:sticky;left:0;z-index:2;}
.quick-add-grid th.qa-rownum-col{z-index:3;}
.qa-num{display:inline-block;min-width:14px;color:var(--muted);font-size:11.5px;vertical-align:middle;}
.qa-row-del{border:none;background:transparent;color:var(--gray);cursor:pointer;font-size:15px;line-height:1;padding:3px 5px;border-radius:4px;vertical-align:middle;margin-left:2px;}
.qa-row-del:hover{color:var(--danger);background:#fdeceb;}
.quick-add-grid tr.qa-row-filled td{background:#f6faf7;}
.quick-add-grid tr.qa-row-filled:hover td{background:#eef7f0;}
.quick-add-grid tr.qa-row-filled td.qa-rownum-col{background:#eef7f0;}
@media(max-width:640px){
  .quick-add-grid input{font-size:16px;}
}
.quick-add-grid input.qa-margin-auto{color:var(--muted);}

/* Kolory/zaznaczenia wierszy w Spedycji wg statusu - szybka orientacja
   wzrokiem "na pierwszy rzut oka", bez czytania kazdego badge'a osobno.
   Zrealizowane = jasnozielony (ten sam odcien, ktorego oryginalny plik
   Excel uzywal dla zamknietych/rzeczywistych zlecen), reszta statusow ma
   wlasny, wyrazny, ale wciaz lekki kolor tla. */
table tr.row-planowane{background:#eef1f5;}
table tr.row-w_trakcie{background:#fff6e3;}
table tr.row-zakonczone{background:#e7f6ea;}
table tr.row-anulowane{background:#fbeae8;}
table tr.row-planowane:hover td,table tr.row-w_trakcie:hover td,
table tr.row-zakonczone:hover td,table tr.row-anulowane:hover td{filter:brightness(.98);}
table tr.row-planowane td:first-child{box-shadow:inset 3px 0 0 var(--gray);}
table tr.row-w_trakcie td:first-child{box-shadow:inset 3px 0 0 var(--warn);}
table tr.row-zakonczone td:first-child{box-shadow:inset 3px 0 0 var(--ok);}
table tr.row-anulowane td:first-child{box-shadow:inset 3px 0 0 var(--danger);}

/* Kolorowy pasek z lewej strony wiersza wg kategorii pracownika (kierowca/
   biuro/magazynier) na liscie Kierowcow i Tablicy floty - sam pasek, bez
   pelnego tla wiersza, zeby nie kolidowac wizualnie z istniejacymi
   plakietkami statusu w tych samych wierszach. Kolory maja odpowiadac
   EMPLOYEE_TYPE_COLOR w app.py. */
table tr.emp-row-kierowca td:first-child{box-shadow:inset 3px 0 0 #2F6FED;}
table tr.emp-row-biuro td:first-child{box-shadow:inset 3px 0 0 #8B5CF6;}
table tr.emp-row-magazynier td:first-child{box-shadow:inset 3px 0 0 #E08A2C;}

/* Plakietka kraju pochodzenia - kolor przypisany deterministycznie per kraj
   (patrz country_color() w app.py), tak zeby ten sam kraj zawsze mial ten
   sam kolor w calej aplikacji. */
.country-pill{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:2px 8px;border-radius:99px;background:color-mix(in srgb, var(--pill-color) 15%, white);
  color:var(--pill-color);
}
.country-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pill-color);}

/* Marza / kwoty - tlo pod liczba, nie tylko kolor tekstu */
.cell-negative{background:#fdecea;border-radius:5px;padding:2px 6px;display:inline-block;}
.cell-positive{background:#e8f6ee;border-radius:5px;padding:2px 6px;display:inline-block;}

/* Serwis pojazdow - lekkie tlo wg kategorii, ta sama logika co statusy w
   Spedycji - orientacja "na pierwszy rzut oka" bez czytania kazdego wiersza. */
table tr.row-svc-naprawa{background:#fbeae8;}
table tr.row-svc-opony{background:#e9f1fb;}
table tr.row-svc-czesc{background:#f2edf9;}
table tr.row-svc-przeglad{background:#e7f6ea;}

/* Urlopy - lekkie tlo wg rodzaju nieobecnosci */
table tr.row-absence-urlop{background:#e7f6ea;}
table tr.row-absence-l4{background:#fbeae8;}
table tr.row-absence-bezplatny{background:#eef1f5;}
table tr.row-absence-inne{background:#fff6e3;}

.login-wrap{max-width:380px;margin:80px auto;padding:0 16px;}
.login-wrap .card{padding:32px;}
.login-wrap h1{text-align:center;letter-spacing:-.01em;}

.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:640px){.doc-grid{grid-template-columns:1fr;}}
.doc-card{border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.doc-card .doc-title{font-weight:600;font-size:14px;margin-bottom:4px;}
.doc-card .doc-meta{font-size:12.5px;color:var(--muted);margin-bottom:8px;}

.sched-table{overflow-x:auto;}
.sched-table table{min-width:900px;}
.cell-trasa{background:#eaf1f8;color:var(--brand);text-align:center;border-radius:6px;font-size:12px;padding:6px 4px;cursor:pointer;}
.cell-dom{background:#eef0f3;color:var(--muted);text-align:center;border-radius:6px;font-size:12px;padding:6px 4px;cursor:pointer;}
.cell-unknown{background:#fafafa;color:#ccc;text-align:center;border-radius:6px;font-size:12px;padding:6px 4px;cursor:pointer;}

.contact-links{display:inline-flex;gap:6px;align-items:center;vertical-align:middle;}
/* Stala szerokosc numeru telefonu w liscie kierowcow - bez tego WhatsApp/
   Zadzwon zaczynaly sie w troche innym miejscu w kazdym wierszu (rozne
   cyfry = odrobine inna szerokosc tekstu), przez co kolumna wygladala
   nierowno mimo lewego wyrownania calej komorki. */
.phone-number{display:inline-block;min-width:112px;}

.timeline{display:flex;flex-direction:column;gap:8px;}
.timeline-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;}
.timeline-row .tl-label{color:var(--text);font-weight:600;}
.timeline-row .tl-sub{color:var(--muted);font-size:12px;}

.footer-note{text-align:center;font-size:12px;color:var(--muted);margin-top:30px;}
.footer-note.footer-copyright{margin-top:6px;font-size:11px;opacity:.75;}

/* ---------------------------------------------------------- MOBILE ---- */
@media(max-width:860px){
  .nav-toggle{display:flex;}
  #mainNav{display:none;flex-direction:column;align-items:stretch;width:100%;padding:6px 0 12px;gap:0;}
  #mainNav.open{display:flex;}
  #mainNav a{margin:2px 0;padding:11px 10px;}
  #mainNav .user{margin:10px 0 4px;padding:10px 10px 0;border-left:none;border-top:1px solid rgba(255,255,255,.18);}
}
@media(max-width:700px){
  .wrap{margin:14px auto;padding:0 12px 40px;}
  .card{padding:14px;border-radius:9px;}
  h1{font-size:18px;}
  input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
    font-size:16px; /* zapobiega automatycznemu przybliżaniu na iOS */
  }
  .btn{padding:11px 16px;}
  .stat-box{min-width:100px;padding:12px 10px;}
  .stat-box b{font-size:18px;}

  /* Listy Kierowcy/Flota: na waskim ekranie pozioma tabela wymagalaby
     przewiniecia o 2-3 szerokosci ekranu, zeby zobaczyc status dokumentow
     (najwazniejsza kolumna) - zamiast tego kazdy wiersz staje sie kartka
     z etykietowanymi polami, jedna pod druga, bez przewijania w bok. */
  .table-cards{display:block;overflow-x:visible;white-space:normal;}
  .table-cards thead{display:none;}
  .table-cards tbody{display:block;}
  .table-cards tr{display:block;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff;}
  .table-cards tr:hover td{background:transparent;}
  .table-cards td{display:block;border-bottom:1px solid var(--border);padding:7px 0;text-align:left;white-space:normal;}
  .table-cards td:last-child{border-bottom:none;padding-bottom:0;}
  .table-cards td::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px;}
  .table-cards td:first-child{font-size:16px;font-weight:700;padding-top:0;}
  .table-cards td:first-child::before{content:none;}
}