/* ============================================================================
   WYSYŁKI — chrome aplikacji + komponenty. Korzysta wyłącznie z tokenów
   (assets/theme/tokens.css). Layout: sidebar + topbar + obszar treści.
   ========================================================================== */

/* ---- Sidebar ---- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
    display: flex; flex-direction: column; gap: var(--sp-xs);
    padding: var(--sp-md);
    background: linear-gradient(180deg, var(--violet-700), var(--violet-800));
    color: #fff; z-index: 40;
}
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.sidebar__logo { font-size: 28px; color: var(--pink-300); }
.sidebar__brand-text { font-weight: 700; font-size: 18px; line-height: 1.1; display: flex; flex-direction: column; }
.sidebar__brand-text small { font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-200); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; }

.navlink {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 11px; border-radius: var(--r-md);
    color: var(--slate-300); font-weight: 500; font-size: 14px;
    transition: background .15s, color .15s;
}
.navlink:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.navlink.is-active { background: rgba(255,255,255,.06); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.navlink.is-active .material-symbols-outlined { color: var(--accent); }
.navlink .material-symbols-outlined { font-size: 20px; }

/* ---- App shell + topbar ---- */
.app { margin-left: var(--sidebar-w); min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 30;
    height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-md);
    padding: 0 var(--sp-lg);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--outline-soft);
}
.topbar__burger { display: none; cursor: pointer; }
.topbar__title { font-weight: 600; font-size: 15.5px; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-md); }
.topbar__user { font-size: 13.5px; font-weight: 500; color: var(--on-surface-mut); }
.avatar {
    width: 34px; height: 34px; border-radius: var(--r-pill);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
    background: var(--accent-container); color: var(--accent-strong);
}
.shell { padding: var(--sp-lg); max-width: 1180px; width: 100%; }

/* ---- Lang switch ---- */
.lang-switch { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; }
.lang-switch__btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 4px 10px; border-radius: var(--r-pill);
    font: 600 12px var(--font); color: var(--on-surface-mut);
}
.lang-switch__btn.is-active { background: var(--surface); color: var(--primary-strong); box-shadow: var(--shadow-sm); }

/* ---- Page head ---- */
.page-head { margin-bottom: var(--sp-md); }
.page-head .muted { margin-top: 3px; }

/* ---- Karty ---- */
.card {
    background: var(--surface); border: 1px solid var(--outline-soft);
    border-radius: var(--r-lg); padding: 16px 18px;
    box-shadow: var(--shadow-card); margin-bottom: var(--sp-md);
}
.card--soon { display: flex; align-items: center; gap: var(--sp-md); }
.card--soon__ico {
    font-size: 30px; color: var(--primary);
    background: var(--primary-container); border-radius: var(--r-md); padding: 12px;
}

/* ---- Kafelki podsumowania ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.tile {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--surface); border: 1px solid var(--outline-soft);
    border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-card);
}
.tile:hover { text-decoration: none; box-shadow: var(--shadow-pop); transform: translateY(-1px); transition: .15s; }
.tile__ico { font-size: 22px; color: var(--accent-strong); }
.tile__num { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.tile__lbl { font-size: 12.5px; color: var(--on-surface-mut); }

/* ---- Formularze ---- */
/* Formularze: responsywna siatka pól (do 3 kolumn), zwarta i ograniczona szerokością —
   zamiast jednej długiej kolumny pełnowymiarowych pól. auto-fill (nie auto-fit), by
   pojedyncze pole nie rozciągało się na całość. */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; align-items: start; max-width: 780px; }
.form > label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--on-surface-mut); min-width: 0; }
/* Elementy na pełną szerokość wiersza: przyciski (w <div> lub wprost), akapity,
   pola wieloliniowe oraz wiersze z checkbox/radio. */
.form > div, .form > button, .form > p,
.form > label:has(textarea),
.form > label:has(input[type="checkbox"]),
.form > label:has(input[type="radio"]) { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
    font: 400 14.5px var(--font); color: var(--on-surface);
    padding: 9px 12px; border: 1px solid var(--outline); border-radius: var(--r-md);
    background: var(--surface); width: 100%;
    scroll-margin-top: calc(var(--topbar-h) + 12px); /* by walidacja nie chowała pola pod topbarem */
}
/* Checkbox/radio: naturalny rozmiar — reguła .form input (width:100%/padding/border) rozciągała je na całość. */
.form input[type="checkbox"], .form input[type="radio"] { width: auto; padding: 0; border: 0; box-shadow: none; flex: 0 0 auto; accent-color: var(--accent); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: 600 14px var(--font); cursor: pointer; border: 1px solid transparent;
    padding: 9px 16px; border-radius: var(--r-md); transition: filter .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-pop); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: var(--surface-2); color: var(--on-surface); border-color: var(--outline-soft); }
.btn--danger { background: var(--danger-bg); color: #9b1f2c; border-color: #f5c2c8; }
.btn--danger:hover { filter: brightness(.97); }
.btn--sm { padding: 6px 11px; font-size: 12.5px; }
.btn--block { width: 100%; }

/* Formularz w komórce tabeli (akcje per wiersz) */
.cell-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cell-form input { width: 96px; padding: 7px 9px; font: 400 14px var(--font); border: 1px solid var(--outline); border-radius: var(--r-sm); background: var(--surface); }
.cell-form input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

/* ---- Tabele ---- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--outline-soft); }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface-mut); font-weight: 600; background: var(--surface-2); }
.table tr:hover td { background: var(--surface-2); }

/* ---- Siatka kart kurierów ("ulotki") + plakietka marki ---- */
.courier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-lg); align-items: stretch; }
.courier-grid .card { margin-bottom: 0; }
/* Karty kurierów: równa wysokość (grid) + akcje przyklejone do dołu, żeby przyciski
   tworzyły równą linię niezależnie od liczby pól w formularzu. */
.courier-card { display: flex; flex-direction: column; }
.courier-card__body { flex: 1 1 auto; }
.courier-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: var(--sp-md); }
.courier-card__foot form { margin: 0; }
.courier-card > form:last-child { margin-top: auto; }
.courier-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-md); padding-bottom: var(--sp-md); border-bottom: 1px solid var(--outline-soft); }
.courier-card__head .muted { margin-left: auto; font-size: 12px; }
.clogo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 66px; height: 30px; padding: 0 12px; border-radius: var(--r-sm);
    font: 800 13px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
    background: var(--clogo-bg, var(--primary)); color: var(--clogo-fg, #fff);
    box-shadow: var(--shadow-sm); white-space: nowrap;
}
.clogo--lg { height: 38px; min-width: 88px; font-size: 15px; }
/* Wariant z prawdziwym logo (SVG) — bez tła/ramki, logo wprost na powierzchni, skalowane do wysokości. */
.clogo--img { height: auto; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.clogo--img img { height: 20px; width: auto; display: block; }
.clogo--lg.clogo--img img { height: 28px; }
.lp-couriers .clogo--img { padding: 0; }
.lp-couriers .clogo--img img { height: 30px; }

/* ---- Odznaki ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.badge--admin { background: var(--accent-container); color: var(--accent-strong); }
.badge--client { background: var(--primary-container); color: var(--on-primary-container); }

/* ---- Flash ---- */
.flash { padding: 12px 16px; border-radius: var(--r-md); margin-bottom: var(--sp-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.flash--info, .flash--success { background: var(--success-bg); color: #0c6b48; border-color: #b6e8d4; }
.flash--error { background: var(--danger-bg); color: #9b1f2c; border-color: #f5c2c8; }
.flash--warn { background: var(--warning-bg); color: var(--warning); border-color: #f3d79a; }
.flash code { background: rgba(0,0,0,.06); padding: 2px 6px; border-radius: 6px; word-break: break-all; }

/* ---- Auth (logowanie/rejestracja) ---- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-lg);
    background: radial-gradient(1100px 560px at 100% 0%, var(--slate-100), transparent),
                radial-gradient(820px 460px at 0% 100%, var(--lime-100), transparent), var(--background); }
.auth__card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--outline-soft);
    border-radius: var(--r-xl); padding: var(--sp-xl); box-shadow: var(--shadow-pop); }
.auth__brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.auth__brand .material-symbols-outlined { color: var(--accent); }
.auth__sub { color: var(--on-surface-mut); font-size: 14px; margin-bottom: var(--sp-lg); }
.auth .form { margin-top: var(--sp-md); }
.auth__alt { margin-top: var(--sp-md); font-size: 14px; color: var(--on-surface-mut); text-align: center; }
.form-error { background: var(--danger-bg); color: #9b1f2c; padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; }

/* ---- Mobile ---- */
.nav-toggle-cb { display: none; }
.nav-scrim { display: none; }
@media (max-width: 860px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s; }
    .app { margin-left: 0; }
    .topbar__burger { display: inline-flex; }
    .nav-toggle-cb:checked ~ .sidebar { transform: none; box-shadow: var(--shadow-pop); }
    .nav-toggle-cb:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(33,28,51,.4); z-index: 35; }
}