/* VP Racing Europe · Orderdesk — system wizualny.
   Kolory wyłącznie z VP Brand Standards Guide v3: podstawowe granat #0047BB, czerwień #E4002B,
   czerń #101820; dodatkowe (turkus, pomarańcz, fiolet, błękit, żółty) tylko jako kolory statusów.
   Nagłówki: Oswald wersalikami (wytyczne VP, „Digital”). Treść: krój systemowy — na Macu to
   SF / Helvetica Neue, czyli krój treści z tych samych wytycznych.
   Ładowany jako ostatni: nadpisuje wygląd, nie zmienia żadnego zachowania. */
@font-face{font-family:Oswald;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/oswald-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/oswald-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/oswald-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/oswald-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--vp-navy:#0047BB;--vp-navy-dark:#00358C;--vp-red:#E4002B;--vp-black:#101820;--vp-teal:#00A499;--vp-orange:#FF6720;--vp-purple:#5F249F;--vp-blue:#0093B2;
 --navy:#0047BB;--ink:#101820;--muted:#5F6672;--line:#E3E5E8;--paper:#fff;--bg:#F5F5F7;--blue:#0047BB;--red:#E4002B;--green:#00806F;--radius:18px;
 --display:Oswald,"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body{background:var(--bg)}
main{max-width:1480px;padding:32px 40px 48px}
@media(max-width:640px){main{padding:22px 16px 36px}h1{font-size:32px}}

/* Typografia */
h1{font-family:var(--display);font-weight:600;font-size:40px;line-height:1.05;letter-spacing:.01em;text-transform:uppercase}
h2{font-size:19px;font-weight:600;letter-spacing:-.01em}
.eyebrow{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--vp-red);margin-bottom:8px}
.page-heading{margin:0 0 28px;align-items:flex-end}
.page-heading h1{margin:0 0 8px}
.page-heading .muted{font-size:16px;color:var(--muted)}
.muted,.form-hint,small{color:var(--muted)}

/* Przyciski — pigułki, jak w Apple; główne w granacie VP */
.button{border:0;border-radius:999px;min-height:38px;padding:8px 18px;background:#EEF1F5;color:var(--ink);font-weight:600;box-shadow:none}
.button:hover{background:#E3E7ED;border-color:transparent}
.button.primary{background:var(--vp-navy);color:#fff;box-shadow:none}
.button.primary:hover{background:var(--vp-navy-dark)}
.button.danger{background:#FDEEF1;color:#A3001F}
.button.danger:hover{background:#FADDE3}
.text-button,.text-link{color:var(--vp-navy)}
button:focus-visible,a:focus-visible{outline:3px solid #7FA8E8;outline-offset:2px}

/* Karty i panele */
.panel,.status-card{border:0;border-radius:var(--radius);background:#fff;box-shadow:0 1px 2px rgba(16,24,32,.06),0 0 0 1px rgba(16,24,32,.03)}
.panel{margin-bottom:24px}
.panel-heading,.table-tools{border-bottom:1px solid #EEF0F2;padding:18px 24px}
.status-card:hover,.status-card.selected{box-shadow:0 0 0 2px var(--vp-navy),0 6px 18px rgba(0,71,187,.10)}
.status-card strong{font-size:32px;letter-spacing:-.02em;font-weight:600}
.status-line{height:4px;border-radius:2px;left:22px;bottom:14px;width:28px}
.status-line.new{background:var(--vp-navy)}.status-line.ready{background:var(--vp-orange)}.status-line.shipped{background:var(--vp-purple)}.status-line.completed{background:var(--vp-teal)}

/* Zakładki → przełącznik segmentowy */
.tabs{background:#E8EAEE;border-radius:10px;padding:3px;gap:2px;display:inline-flex;flex-wrap:wrap}
.tabs button{border-radius:8px;color:var(--ink);font-weight:500;padding:6px 12px}
.tabs button.selected{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(16,24,32,.12)}
.tabs button span{background:#E3E7ED;border-radius:6px}

/* Tabele */
th{background:#fff;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.01em;padding:12px 20px;border-bottom:1px solid #EEF0F2}
td{padding:14px 20px;border-top:1px solid #EEF0F2}
tbody tr:hover{background:#F7F9FC}

/* Statusy — kolory dodatkowe z wytycznych VP */
.badge{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;background:#F0F2F5;color:var(--muted)}
.badge.draft{background:#F0F2F5;color:#4A525C}
.badge.new{background:#EAF0FB;color:var(--vp-navy)}
.badge.ready{background:#FFF1E9;color:#B44A12}
.badge.shipped{background:#F1EAF8;color:var(--vp-purple)}
.badge.completed{background:#E3F6F4;color:#006D66}
.badge.cancelled{background:#FDEEF1;color:#A3001F}

/* Formularze */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{border:1px solid #DADDE2;border-radius:10px;background:#fff;color:var(--ink)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,select:focus,textarea:focus{outline:0;border-color:var(--vp-navy);box-shadow:0 0 0 3px rgba(0,71,187,.15)}
.form-error{color:#A3001F}

/* Okna dialogowe */
dialog{border:0;border-radius:22px;padding:30px;box-shadow:0 30px 80px rgba(16,24,32,.28)}
dialog::backdrop{background:rgba(16,24,32,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-heading h2{font-size:22px}
.modal-footer{border-top:1px solid #EEF0F2}
#toast{background:var(--vp-black);border-radius:14px}

/* Ekran logowania — pierwsze, co widzi klient i zespół: zdjęcie z toru i barwy VP */
.login-intro{background:linear-gradient(90deg,rgba(0,71,187,.97) 0%,rgba(0,71,187,.88) 45%,rgba(0,71,187,.45) 100%),url(/brand/login-hero.jpg) center/cover no-repeat;border-top:5px solid var(--vp-red)}
.login-intro h1{font-family:var(--display);font-weight:600;font-size:52px;line-height:1.02;letter-spacing:.01em;text-transform:uppercase}
.login-intro .eyebrow{color:rgba(255,255,255,.85)}
.login-flow span{border-color:rgba(255,255,255,.35)!important}
.login-side{background:var(--bg)}
.login-card{border:0;border-radius:22px;box-shadow:0 1px 2px rgba(16,24,32,.06),0 12px 40px rgba(16,24,32,.08)}
.login-card h2{font-family:var(--display);font-weight:600;font-size:30px;text-transform:uppercase;letter-spacing:.01em}