@font-face{font-family:"Gremium Eurostile";src:url('/assets/fonts/eurostile-next-semibold-extended.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Gremium Microgramma";src:url('/assets/fonts/microgramma-extended-bold.woff2') format('woff2');font-style:normal;font-weight:700 900;font-display:swap}

:root {
  --font-body:"DM Sans","Segoe UI Variable","Segoe UI",Arial,sans-serif;
  --font-heading-h1:"Gremium Eurostile",Manrope,"Segoe UI",sans-serif;
  --font-heading-h2:"Gremium Microgramma",Manrope,"Segoe UI",sans-serif;
  --surface: #ffffff;
  --surface-soft: #f7f6f1;
  --surface-raised: #ffffff;
  --text: #151515;
  --text-soft: #686868;
  --border: #e4e1d7;
  --app-bg: #f3f2ed;
  --sidebar: #ffffff;
  --sidebar-soft: #f3f2ed;
  --accent: #facc00;
  --accent-text: #151515;
  --brand: #facc00;
  --brand-ink: #151515;
  --dark: #151515;
  --ink: #151515;
  --muted: #686868;
  --line: #e4e1d7;
  --bg: #f3f2ed;
  --panel: #ffffff;
}

:root[data-theme="dark"] {
  --surface: #1c1c1c;
  --surface-soft: #242424;
  --surface-raised: #202020;
  --text: #ffffff;
  --text-soft: #d2d2d2;
  --border: #343434;
  --app-bg: #151515;
  --sidebar: #000000;
  --sidebar-soft: #1c1c1c;
  --accent: #facc00;
  --accent-text: #151515;
  --brand: #facc00;
  --brand-ink: #151515;
  --dark: #000000;
  --ink: #ffffff;
  --muted: #d2d2d2;
  --line: #343434;
  --bg: #151515;
  --panel: #1c1c1c;
}

html, body { background: var(--app-bg); color: var(--text); }

.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.app-loading { position:relative;min-height:100svh;overflow:hidden;display:grid;place-content:center;justify-items:center;gap:20px;padding:28px;background:var(--app-bg);color:var(--text);isolation:isolate; }
.splash-glow { position:absolute;z-index:-1;width:min(460px,88vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(250,204,0,.14) 0,rgba(250,204,0,.045) 42%,transparent 70%);animation:splash-breathe 2.4s ease-in-out infinite; }
.splash-mark { position:relative;width:92px;height:92px;border-radius:26px;display:grid;place-items:center;background:var(--accent);color:var(--accent-text);font:800 38px Manrope;box-shadow:0 20px 60px rgba(250,204,0,.22);animation:splash-float 1.8s ease-in-out infinite; }
.splash-mark i { position:absolute;inset:-9px;border:1px solid rgba(250,204,0,.28);border-radius:32px;animation:splash-ring 1.8s ease-out infinite; }
.splash-mark:has(.splash-logo-image){background:var(--surface);border:1px solid var(--border);padding:8px}.splash-logo-image{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.splash-copy { display:grid;justify-items:center;gap:8px;text-align:center;margin-top:7px; }
.splash-copy strong { font:800 29px Manrope;letter-spacing:-.035em; }
.splash-copy span { color:var(--text-soft);font-size:16px;line-height:1.45;max-width:min(520px,calc(100vw - 40px)); }
.splash-progress { width:176px;height:4px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--border); }
.splash-progress i { display:block;width:42%;height:100%;border-radius:inherit;background:var(--accent);animation:splash-load 1.25s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes splash-float { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.015)} }
@keyframes splash-ring { 0%{opacity:.75;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.18)} }
@keyframes splash-breathe { 0%,100%{opacity:.65;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)} }
@keyframes splash-load { 0%{transform:translateX(-115%)}50%{transform:translateX(70%)}100%{transform:translateX(240%)} }
@media(prefers-reduced-motion:reduce){.splash-glow,.splash-mark,.splash-mark i,.splash-progress i{animation:none}.splash-progress i{width:100%;opacity:.7}}
body { min-width: 0; }
body, .topbar { transition: background-color .22s ease, color .22s ease; }
.sidebar { background: var(--sidebar); color:var(--text); border-right:1px solid var(--border); }
.nav-button:hover { background: var(--sidebar-soft); }
.nav-button{color:var(--text-soft)}
.sidebar-footer{border-color:var(--border)}
.profile-exit:hover{color:var(--text)}
:root:not([data-theme="dark"]) .nav-button:hover,
:root:not([data-theme="dark"]) .settings-nav button:hover {
  color: var(--text);
}
:root:not([data-theme="dark"]) .nav-button:hover svg,
:root:not([data-theme="dark"]) .settings-nav button:hover small {
  color: var(--text);
}
:root[data-theme="dark"] .sidebar{color:#fff;border-color:#292929}
:root[data-theme="dark"] .nav-button{color:#aeb2b9}
.main, .content { background: var(--app-bg); }
.topbar { background: color-mix(in srgb, var(--app-bg) 88%, transparent); border-color: var(--border); }
.card, .event-card, .choice, .icon-button, .btn, .search input, .select, .modal, .table-wrap { background: var(--surface); color: var(--text); border-color: var(--border); }
.data-table th { background: var(--surface-soft); color: var(--text-soft); border-color: var(--border); }
.data-table td, .data-table th, .event-row, .problem-row, .contact-row, .check-row, .suggestion, .settings-row { border-color: var(--border); }
.data-table tbody tr:hover { background: var(--surface-soft); }
.muted, .page-head p, .row-main span, .event-card p, .stat-note, .stat-top, .choice span, .suggestion span, .settings-row span, .field label, .empty { color: var(--text-soft); }
.date-block, .stat-icon { background: var(--surface-soft); }
.check { background: var(--surface); border-color: var(--border); }
.check.checked, .btn.brand, .nav-button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.nav-button.active{color:#111!important;font-weight:850;box-shadow:0 4px 14px rgba(250,204,0,.18)}
.search input:focus { border-color:#facc00;box-shadow:0 0 0 3px rgba(250,204,0,.2); }
.event-card.active { border-color:#facc00;box-shadow:0 0 0 2px rgba(250,204,0,.22); }
.choice.active { border-color:#facc00;background:rgba(250,204,0,.1);box-shadow:inset 0 0 0 1px rgba(250,204,0,.45); }
.progress span { background:#facc00; }
.brand-mark { background:#facc00;color:#151515; }
.detail-hero { background: #090b0e; }
.profile-exit { margin-left:auto;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:18px;padding:7px 9px;border-radius:9px;display:grid;justify-items:center;gap:1px; }
.profile-exit small{font-size:7px;text-transform:uppercase;letter-spacing:.04em}
.profile-exit:hover { color:#fff; }

/* Semantyczne statusy */
.badge { border: 1px solid transparent; letter-spacing: .01em; }
.badge.needsPacking, .tile-status.needsPacking { background:#fff0b8;color:#7e5a00;border-color:#f3d471; }
.badge.packed, .tile-status.packed { background:#dceaff;color:#175fae;border-color:#a9cef9; }
.badge.shortages, .tile-status.shortages { background:#ffe1c4;color:#9d4300;border-color:#ffbd7d; }
.badge.needsSettlement, .tile-status.needsSettlement { background:#ffdcdc;color:#ad2929;border-color:#f5a4a4; }
.badge.settled, .tile-status.settled { background:#d7f4e3;color:#177346;border-color:#9edbb8; }
.badge.archived, .tile-status.archived { background:#e7e8ea;color:#5c626c;border-color:#cacdd2; }
:root[data-theme="dark"] .badge.needsPacking,:root[data-theme="dark"] .tile-status.needsPacking{background:#44380e;color:#ffd85c;border-color:#6d5916}
:root[data-theme="dark"] .badge.packed,:root[data-theme="dark"] .tile-status.packed{background:#122e52;color:#78b5ff;border-color:#224d80}
:root[data-theme="dark"] .badge.shortages,:root[data-theme="dark"] .tile-status.shortages{background:#49270e;color:#ffad61;border-color:#754018}
:root[data-theme="dark"] .badge.needsSettlement,:root[data-theme="dark"] .tile-status.needsSettlement{background:#4a191d;color:#ff858d;border-color:#772b31}
:root[data-theme="dark"] .badge.settled,:root[data-theme="dark"] .tile-status.settled{background:#123725;color:#67d99c;border-color:#205b3d}
:root[data-theme="dark"] .badge.archived,:root[data-theme="dark"] .tile-status.archived{background:#2b2f35;color:#b4bac4;border-color:#41464f}

/* Dashboard zgodny z hierarchią aplikacji iOS */
.ios-dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 30px; }
.dashboard-tile { text-align:left; min-height:190px; display:flex; flex-direction:column; align-items:flex-start; position:relative; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.dashboard-tile:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:0 16px 40px rgba(0,0,0,.1); }
.tile-top { display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-bottom:18px; }
.tile-icon { width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-soft);font:800 18px Manrope;color:var(--text); }
.tile-icon.shortages { color:#ff8f32;background:color-mix(in srgb,#ff8f32 14%,transparent); }
.tile-icon.settled { color:#45bd7c;background:color-mix(in srgb,#45bd7c 14%,transparent); }
.tile-icon.packed { color:#5797ef;background:color-mix(in srgb,#5797ef 14%,transparent); }
.tile-arrow { color:var(--text-soft); }
.tile-value { font:800 24px Manrope;line-height:1.15;margin-bottom:7px;max-width:90%; }
.tile-label { font-size:13px;font-weight:600;color:var(--text-soft);margin-bottom:8px; }
.tile-preview { font-size:12px;color:var(--text-soft);line-height:1.35; }
.tile-status { margin-top:auto;padding-top:10px;background:transparent!important;border:0!important;font-size:11px;font-weight:800; }
.dashboard-section { margin-top:28px; }
.dashboard-section .section-title h2 { margin-top:4px;font-size:20px; }
.event-list-card { padding-top:7px;padding-bottom:7px; }
.attention-strip { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px; }

/* Logowanie */
.login-page{position:relative;isolation:isolate;min-height:100dvh;overflow-x:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,480px);grid-template-rows:auto 1fr auto;background:#08090a;color:#fff}
.login-scene{position:absolute;z-index:-2;inset:0;background:#0a0b0d url('/assets/login-stage.jpg') center/cover no-repeat}.login-scene:after{content:"";position:absolute;inset:0;background:rgba(5,6,7,.28)}
.login-brand{z-index:3;grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:clamp(24px,3vw,38px) clamp(26px,4vw,58px)}
.login-brand-head,.login-logo{display:flex;align-items:center;gap:13px}.login-brand-head .brand-mark,.login-brand-head .brand-logo-image{width:46px;height:46px;flex:0 0 46px;margin:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.login-brand-head>div,.login-logo>div{display:grid;gap:3px}.login-brand-head strong,.login-logo strong{color:#fff;font:800 14px Manrope}.login-brand-head span,.login-logo span{color:rgba(255,255,255,.56);font-size:9px;text-transform:uppercase}
.login-brand-copy{z-index:1;grid-column:1;grid-row:2;align-self:end;max-width:650px;padding:30px clamp(26px,4vw,58px) clamp(32px,6vh,64px)}.login-kicker{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.72);font-size:10px;font-weight:800;text-transform:uppercase}.login-kicker i{width:28px;height:2px;border-radius:2px;background:#facc00}.login-brand-copy h1{margin:18px 0 20px;color:#fff;font:800 clamp(56px,7.2vw,112px)/.86 Manrope;letter-spacing:0}.login-brand-copy h1 b{color:#facc00;font-weight:800}.login-brand-copy p{max-width:490px;margin:0;color:rgba(255,255,255,.78);font-size:clamp(15px,1.4vw,20px);line-height:1.5}
.login-brand-footer{z-index:3;grid-column:1;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 clamp(26px,4vw,58px);padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.56);font-size:9px;text-transform:uppercase}.login-pulse{display:flex;align-items:center;gap:9px;margin:0}.login-pulse i{width:7px;height:7px;border-radius:50%;background:#54d388;box-shadow:0 0 0 4px rgba(84,211,136,.13)}.login-pulse.offline i{background:#ef5d67;box-shadow:0 0 0 4px rgba(239,93,103,.13)}
.login-panel{z-index:2;grid-column:2;grid-row:1/4;display:flex;align-items:center;width:100%;padding:100px 42px 70px;box-sizing:border-box;border-left:1px solid rgba(255,255,255,.11);background:rgba(10,11,13,.9);box-shadow:-24px 0 70px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.login-panel-frame{width:100%;max-width:396px;margin:auto}.auth-theme{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(10,11,13,.5);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-theme:hover,.auth-theme:focus-visible{border-color:#facc00;color:#facc00;background:rgba(10,11,13,.78)}
.login-form{width:100%;display:grid;gap:19px}.login-logo{margin-bottom:18px}.login-logo .brand-mark,.login-logo .brand-logo-image{width:36px;height:36px;flex:0 0 36px;margin:0;border-radius:8px}
.login-intro{padding-bottom:8px}.login-form .eyebrow{color:#facc00}.login-form h2{margin:8px 0 9px;color:#fff;font:800 32px Manrope;letter-spacing:0}.login-form p{margin:0;color:rgba(255,255,255,.58);font-size:12px;line-height:1.55}.login-form .field{gap:8px}.login-form .field label{color:rgba(255,255,255,.84);font-size:10px}.login-label-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.login-form input{min-height:52px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.07);color:#fff;box-shadow:none}.login-form input::placeholder{color:rgba(255,255,255,.32)}.login-form input:hover{border-color:rgba(255,255,255,.28)}.login-form input:focus{border-color:#facc00;box-shadow:0 0 0 3px rgba(250,204,0,.12);outline:0}
.password-input{position:relative}.password-input input{width:100%;padding-right:50px}.password-input button{position:absolute;right:6px;top:6px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:rgba(255,255,255,.52);cursor:pointer}.password-input button:hover,.password-input button:focus-visible{background:rgba(255,255,255,.08);color:#fff}.password-input .nav-icon{width:18px;height:18px}
.login-remember{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;border:1px solid rgba(255,255,255,.11);border-radius:7px;background:rgba(255,255,255,.035);cursor:pointer}.login-remember:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.055)}.login-form .login-remember input{flex:0 0 auto;width:18px;height:18px;min-height:18px;margin:0;accent-color:#facc00}.login-remember span{display:grid;gap:2px}.login-remember strong{color:#fff;font-size:10px}.login-remember small{color:rgba(255,255,255,.46);font-size:9px}
.remember{font-size:12px;color:rgba(255,255,255,.58);display:flex;align-items:center;gap:8px}.login-submit{min-height:52px;width:100%;border-radius:7px;font-size:12px;box-shadow:0 12px 28px rgba(250,204,0,.12)}.login-submit:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(250,204,0,.18)}.auth-link{justify-self:center;color:rgba(255,255,255,.66)}.auth-link:hover,.auth-link:focus-visible{color:#facc00}.auth-link-inline{justify-self:auto;padding:0;border:0;background:transparent;font-size:9px}.login-security{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:2px}.login-security span{color:#54d388;font-size:8px}.login-security p{font-size:9px}.login-hint{margin-top:-2px!important;text-align:center;font-size:10px!important}.login-database-error{padding:11px 12px;border:1px solid rgba(239,93,103,.35);border-radius:7px;background:rgba(239,93,103,.1);color:#ff9ca3;font-size:10px;line-height:1.45}

:root:not([data-theme="dark"]) .login-panel{border-left-color:rgba(20,22,26,.12);background:rgba(248,249,251,.94);box-shadow:-24px 0 70px rgba(0,0,0,.16)}
:root:not([data-theme="dark"]) .login-panel-frame{color:#17191e}
:root:not([data-theme="dark"]) .auth-theme{border-color:rgba(20,22,26,.16);background:rgba(255,255,255,.76);color:#17191e}
:root:not([data-theme="dark"]) .auth-theme:hover,:root:not([data-theme="dark"]) .auth-theme:focus-visible{border-color:#c7a400;background:#fff;color:#8f7600}
:root:not([data-theme="dark"]) .login-form h2{color:#17191e}
:root:not([data-theme="dark"]) .login-form p{color:#68707c}
:root:not([data-theme="dark"]) .login-form .field label{color:#30343b}
:root:not([data-theme="dark"]) .login-form .field small{color:#747b86}
:root:not([data-theme="dark"]) .login-form input{border-color:#d8dce2;background:rgba(255,255,255,.82);color:#17191e}
:root:not([data-theme="dark"]) .login-form input::placeholder{color:#9aa1ab}
:root:not([data-theme="dark"]) .login-form input:hover{border-color:#b7bdc7}
:root:not([data-theme="dark"]) .password-input button{color:#747b86}
:root:not([data-theme="dark"]) .password-input button:hover,:root:not([data-theme="dark"]) .password-input button:focus-visible{background:#eceef2;color:#17191e}
:root:not([data-theme="dark"]) .login-remember{border-color:#dfe2e7;background:rgba(255,255,255,.58)}
:root:not([data-theme="dark"]) .login-remember:hover{border-color:#c8cdd5;background:#fff}
:root:not([data-theme="dark"]) .login-remember strong{color:#202329}
:root:not([data-theme="dark"]) .login-remember small{color:#747b86}
:root:not([data-theme="dark"]) .remember,:root:not([data-theme="dark"]) .auth-link{color:#626a76}
:root:not([data-theme="dark"]) .auth-link:hover,:root:not([data-theme="dark"]) .auth-link:focus-visible{color:#8f7600}
:root:not([data-theme="dark"]) .login-database-error{border-color:rgba(200,50,61,.28);background:rgba(200,50,61,.07);color:#a7252e}

@media(max-width:820px){
  .ios-dashboard-grid{grid-template-columns:minmax(0,1fr)}
  .dashboard-tile{min-height:170px}
  .attention-strip{grid-template-columns:minmax(0,1fr)}
  .login-page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;overflow-y:auto}.login-scene{background-position:38% center}.login-scene:after{background:rgba(5,6,7,.68)}
  .login-brand{grid-column:1;grid-row:1;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(8,9,10,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.login-brand-head .brand-mark,.login-brand-head .brand-logo-image{width:38px;height:38px;flex-basis:38px}.login-brand-copy{display:none}.login-panel{grid-column:1;grid-row:2;min-height:auto;padding:34px 20px 28px;border-left:0;background:rgba(8,9,10,.82);box-shadow:none;backdrop-filter:none}.login-panel-frame{max-width:430px}.login-brand-footer{grid-column:1;grid-row:3;margin:0 20px;padding:16px 0 20px}.login-logo{display:none}
  :root:not([data-theme="dark"]) .login-panel{background:rgba(248,249,251,.94);box-shadow:none}
  .theme-switch{display:inline-flex!important}
  .event-row .badge{display:inline-flex}
}

@media(max-width:420px){
  .top-actions .btn.brand{display:none}
  .topbar{gap:8px}
  .event-row{align-items:flex-start}
  .event-row .badge{font-size:9px;padding:5px 7px}
  .event-row .row-main span{display:none}
  .date-block{width:43px;height:47px;flex:0 0 auto}
  .login-brand-head span{display:none}.login-panel{padding:26px 18px 22px}.login-form{gap:16px}.login-form h2{font-size:28px}.login-form input,.login-submit{min-height:50px}.login-remember{min-height:48px}.login-brand-footer{font-size:8px}.login-brand-footer>span{display:none}
}