/* =====================================================================
   Apteczka by Dragua – arkusz stylów.
   System wizualny: koncepcja „Koło apteczki” (D13), opis w docs/13-system-wizualny.md.
   Kolorystyka biało-jasnoniebieska, zwarty układ, czytelna czcionka Figtree.
   ===================================================================== */

/* ---------- Czcionka (pliki lokalne, licencja OFL – wwwroot/fonts/OFL.txt) ---------- */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree-latin.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: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* ---------- Tokeny ---------- */
:root {
    --c-primary: #1878C9;
    --c-primary-dark: #1263A8;
    --c-primary-50: #EEF7FE;
    --c-primary-100: #DCEEFC;
    --c-primary-200: #BFDDF6;
    --c-ink: #14263B;
    --c-muted: #5A6E85;
    --c-border: #DCE7F2;
    --c-bg: #F6FAFE;
    --c-surface: #FFFFFF;
    --c-help: #F0A400;
    --c-help-bg: #FFF9E8;
    --c-help-border: #F3E2B3;
    --c-warn-bg: #FFF4CC;
    --c-warn-ink: #7A5A00;
    --c-danger-bg: #FDE2E2;
    --c-danger-ink: #A11D1D;
    --c-ok-bg: #E3F4EC;
    --c-ok-ink: #1D6B47;


    --font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;

    --radius: 10px;
    --radius-pill: 999px;
    --shadow: 0 4px 18px rgba(24, 120, 201, 0.12);
    --sidebar-w: 232px;
    --tabbar-h: 62px;
    --gutter: 16px;
}

/* ---------- Podstawy ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--c-ink);
    background: var(--c-bg);
}
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
a { color: var(--c-primary-dark); }
:focus-visible { outline: 3px solid var(--c-help); outline-offset: 2px; }
.muted { color: var(--c-muted); }
/* Atrybut hidden zawsze ukrywa element – także przyciski i bloki z własnym display */
[hidden] { display: none !important; }

.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 100;
    padding: 8px 12px;
    background: var(--c-ink);
    color: #fff;
    border-radius: 6px;
}
.skip-link:focus { top: 8px; }

/* ---------- Układ: panel boczny z menu (www), dolny pasek (telefon) – D54 ---------- */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}
.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--c-surface);
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 14px;
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--c-primary);
    text-decoration: none;
}
.brand small { font-weight: 500; font-size: var(--fs-sm); color: var(--c-muted); }

/* Znak aplikacji: biały krzyż na niebieskim tle */
.brand-mark {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    background:
        linear-gradient(#fff, #fff) center / 4px 13px no-repeat,
        linear-gradient(#fff, #fff) center / 13px 4px no-repeat,
        var(--c-primary);
}
.brand-mark--mobile { display: none; }

/* ---------- Menu główne: panel boczny ---------- */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    border-right: 1px solid var(--c-border);
    background: #F9FBFE;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-list--settings { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
}
.nav-link:hover { background: var(--c-primary-50); color: var(--c-primary-dark); }
.nav-link[aria-current="page"] { background: var(--c-primary-100); color: var(--c-primary-dark); }
.nav-link .icon { width: 20px; height: 20px; }
.nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--c-danger-bg);
    color: var(--c-danger-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: center;
}
.nav-link .icon, .tab .icon, .more-link .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Menu główne: dolny pasek (telefon) ---------- */
.tabbar { display: none; }

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding-block: 8px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}
.page-title { flex: 1; font-size: var(--fs-xl); font-weight: 650; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Treść każdego ekranu zaczyna się od góry, tuż pod nagłówkiem (D56) – wyszukiwarka i listy są zawsze w tym samym miejscu */
.app-content {
    flex: 1;
    display: grid;
    gap: 14px;
    align-content: start;
    padding-block: 16px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    max-width: 1100px;
    width: 100%;
}

.app-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding-block: 8px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--c-border);
    background: #FAFCFE;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}
.app-footer .disclaimer { flex: 1; min-width: 240px; margin: 0; }
.app-version { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Przełącznik języka ---------- */
.lang-switch { display: flex; border: 1px solid var(--c-border); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch button {
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 10px;
    border: 0;
    background: var(--c-surface);
    color: var(--c-muted);
    cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--c-primary); color: #fff; }

/* ---------- Pomoc „?” – rozsuwany panel, który przesuwa treść w dół ---------- */
.help-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: var(--c-help);
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(240, 164, 0, 0.22);
}
.help-btn[aria-expanded="true"] { background: var(--c-ink); box-shadow: none; }
.help {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    background: var(--c-help-bg);
}
.help.is-open { grid-template-rows: 1fr; border-bottom: 1px solid var(--c-help-border); }
.help-inner { overflow: hidden; }
.help-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px 28px;
    padding-block: 14px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    font-size: var(--fs-sm);
}
.help-section h2 { font-size: var(--fs-base); margin-bottom: 4px; }
.help-section p { margin: 0 0 4px; max-width: 65ch; }
.help-section ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.help-close {
    grid-column: 1 / -1;
    justify-self: start;
    font: inherit;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-help-border);
    background: var(--c-surface);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    cursor: pointer;
}

/* ---------- Ostrzeżenie medyczne ---------- */
.disclaimer strong { color: #9A5B00; }
.disclaimer--prominent {
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--c-help-border);
    border-radius: var(--radius);
    background: var(--c-help-bg);
    font-size: var(--fs-sm);
}

/* ---------- Komponenty ---------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.card h2 { font-size: var(--fs-lg); margin-bottom: 6px; }
.card p { margin: 0 0 6px; }
.lead { font-size: var(--fs-lg); max-width: 65ch; }
.feature-list { margin: 8px 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.feature-list li { padding-left: 22px; position: relative; }
.feature-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.45em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-primary-200);
    box-shadow: inset 0 0 0 3px var(--c-primary);
}
.coming-soon { border-style: dashed; background: var(--c-primary-50); }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-primary-dark);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--c-primary-50); }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-danger { background: var(--c-surface); border-color: #E7B4B4; color: var(--c-danger-ink); }
.btn-danger:hover { background: var(--c-danger-bg); }
.card--danger { border-color: #E7B4B4; }
.error-card { justify-items: start; display: grid; gap: 8px; }

/* ---------- Formularze ---------- */
.form-card { max-width: 460px; display: grid; gap: 10px; }
.form { display: grid; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input:not([type="checkbox"]) {
    font: inherit;
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-ink);
}
.field input:not([type="checkbox"]):focus { border-color: var(--c-primary); outline: 2px solid var(--c-primary-100); outline-offset: 0; }
.field input.input-validation-error { border-color: var(--c-danger-ink); }
.field--check label { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; }
.field--check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--c-primary); flex: none; }
.field-hint { font-size: var(--fs-xs); color: var(--c-muted); }
.field-validation-error { font-size: var(--fs-xs); color: var(--c-danger-ink); }
.form-errors ul { margin: 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--c-danger-bg); color: var(--c-danger-ink); font-size: var(--fs-sm); }
.validation-summary-valid { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0; font-size: var(--fs-sm); }
.status-message { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--c-ok-bg); color: var(--c-ok-ink); font-size: var(--fs-sm); }

.status-message--error { background: var(--c-danger-bg); color: var(--c-danger-ink); }
.optional-tag {
    font-weight: 500;
    font-size: var(--fs-xs);
    color: var(--c-muted);
    background: var(--c-primary-50);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: 0 8px;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.btn-small { padding: 3px 10px; font-size: var(--fs-sm); }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--c-primary-50);
    color: var(--c-primary-dark);
    border: 1px solid var(--c-primary-100);
    white-space: nowrap;
}
.badge--active { background: var(--c-ok-bg); color: var(--c-ok-ink); border-color: transparent; }

/* Podpowiedź (tooltip) po najechaniu na przycisk akcji – atrybut data-tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 25;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--c-ink);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

/* ---------- Tabele (zwarte wiersze) ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th {
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-muted);
    padding: 6px 10px;
    border-bottom: 1px solid var(--c-border);
    background: #F7FAFD;
    white-space: nowrap;
}
.table td { padding: 5px 10px; border-bottom: 1px solid var(--c-border); }
.table tr:last-child td { border-bottom: 0; }
.cell-actions { width: 1%; text-align: right; white-space: nowrap; }
.cell-actions form { margin: 0; display: inline; }
.cell-email { overflow-wrap: anywhere; }
.icon-btn--danger { color: var(--c-danger-ink); }
.icon-btn--danger:hover { color: var(--c-danger-ink); background: var(--c-danger-bg); border-color: #E7B4B4; }
.icon-btn--primary { color: var(--c-primary-dark); }
.icon-btn--primary:hover { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }
a.icon-btn { text-decoration: none; }

/* Grupa przycisków-ikon (akcje przy obiekcie); opis akcji w podpowiedzi data-tooltip */
.icon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.icon-actions form { margin: 0; }

/* ---------- Domowe apteczki ---------- */
.empty-state { display: grid; gap: 6px; max-width: 560px; }
.kit-list ul { list-style: none; margin: 0; padding: 0; }
.kit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--c-border);
}
.kit-row:last-child { border-bottom: 0; }
.kit-row form { margin: 0; }
.kit-row-name { font-weight: 650; text-decoration: none; color: var(--c-ink); flex: 1 1 200px; min-width: 0; }
.kit-row-name:hover { color: var(--c-primary-dark); }
.kit-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.kit-row--active { background: linear-gradient(90deg, var(--c-primary-50), transparent 70%); }
.kit-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.kit-header form { margin: 0; }
.kit-header p { margin: 0; }
.kit-address { font-size: var(--fs-lg); }
.form--inline { grid-template-columns: minmax(0, 260px) auto; align-items: end; }
.code-input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; }

/* Przełącznik aktywnej apteczki w nagłówku (<details> – działa bez JavaScriptu) */
.kit-switcher { position: relative; min-width: 0; }
.kit-switcher summary {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 4px 10px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.kit-switcher summary::-webkit-details-marker { display: none; }
.kit-switcher summary::after { content: "▾"; color: var(--c-muted); font-size: var(--fs-xs); }
.kit-switcher summary svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--c-primary); stroke-width: 1.8; stroke-linejoin: round; }
.kit-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kit-switcher-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    min-width: 230px;
    padding: 6px;
    display: grid;
    gap: 2px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(20, 60, 110, 0.16);
}
.kit-switcher-menu form { margin: 0; }
.kit-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.kit-option:hover { background: var(--c-primary-50); }
.kit-option[aria-current="true"] { color: var(--c-primary-dark); font-weight: 650; }
.kit-option small { color: var(--c-muted); font-weight: 400; }
.kit-option--manage { border-top: 1px solid var(--c-border); border-radius: 0 0 7px 7px; color: var(--c-primary-dark); }
.kit-switcher-empty { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* ---------- Leki w apteczce ---------- */
.med-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.med-search { display: flex; gap: 8px; flex: 1 1 280px; max-width: 520px; margin: 0; }
.med-search input[type="search"],
.field select,
.column-picker select {
    font: inherit;
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-ink);
}
.med-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.med-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.btn .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Wybór kolumn – rozwijany panel (<details>), działa bez JavaScriptu */
.column-picker { position: relative; }
.column-picker summary { list-style: none; }
.column-picker summary::-webkit-details-marker { display: none; }
.column-picker[open] summary { color: var(--c-primary-dark); background: var(--c-primary-50); }
.column-picker-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    min-width: 230px;
    padding: 10px 12px;
    display: grid;
    gap: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(20, 60, 110, 0.16);
}
.column-picker-menu fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.column-picker-menu legend { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--c-primary); }

/* Zakładki filtrów z licznikami i sortowanie */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}
.chip:hover { border-color: var(--c-primary-200); color: var(--c-primary-dark); }
.chip[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.chip-count { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
.chip--expiringsoon:not([aria-current]) .chip-count { color: var(--c-warn-ink); opacity: 1; }
.chip--expired:not([aria-current]) .chip-count { color: var(--c-danger-ink); opacity: 1; }
.chips-sort { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--c-muted); }
.chips-sort a { color: var(--c-muted); }
.chips-sort a[aria-current="true"] { color: var(--c-ink); font-weight: 650; text-decoration: none; }

/* Stan ważności */
.badge--expired { background: var(--c-danger-bg); color: var(--c-danger-ink); border-color: #F2B8B8; }
.badge--soon { background: var(--c-warn-bg); color: var(--c-warn-ink); border-color: #EED48A; }
.badge--valid { background: var(--c-ok-bg); color: var(--c-ok-ink); border-color: transparent; }

/* Komputer: wiersze-kapsułki (D13) – zaokrąglone wiersze tabeli, kolor według stanu ważności */
.med-table-wrap { overflow-x: auto; }
.med-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.med-table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); padding: 0 10px; white-space: nowrap; }
.med-table td {
    padding: 5px 10px;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}
.med-table td:first-child { border-left: 1px solid var(--c-border); border-radius: var(--radius-pill) 0 0 var(--radius-pill); padding-left: 16px; }
.med-table td:last-child { border-right: 1px solid var(--c-border); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; padding-right: 6px; }
.med-table .icon-btn { border-radius: 50%; }
.med-table .icon-actions { flex-wrap: nowrap; gap: 4px; }
.med-table tr.med--soon td { background: var(--c-warn-bg); border-color: #EED48A; }
.med-table tr.med--expired td { background: var(--c-danger-bg); border-color: #F2B8B8; }
.med-table tr.med--archived td { color: var(--c-muted); }
.med-name { font-weight: 650; }
.med-col { color: var(--c-ink); }
.med-expiry { white-space: nowrap; }
.med-expiry .badge { margin-left: 6px; }

/* Telefon: kafelki rozwijane dotknięciem */
.med-tiles { display: none; list-style: none; margin: 0; padding: 0; gap: 6px; }
.med-tile { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.med-tile.med--soon { background: var(--c-warn-bg); border-color: #EED48A; }
.med-tile.med--expired { background: var(--c-danger-bg); border-color: #F2B8B8; }
.med-tile summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; }
.med-tile summary::-webkit-details-marker { display: none; }
.med-tile-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.med-tile-name small { font-weight: 500; color: var(--c-primary-dark); margin-left: 4px; }
.med-tile .details { padding: 0 12px 8px; font-size: var(--fs-sm); }
.med-tile .icon-actions { padding: 0 12px 10px; justify-content: flex-end; }
.med-tile .icon-btn { width: 40px; height: 40px; border-radius: 50%; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: var(--fs-sm); }

/* Formularz leku */
.form-card--wide { max-width: 620px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.med-product { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border-radius: 8px; background: var(--c-primary-50); }
.med-product-change { margin-left: auto; font-size: var(--fs-sm); }

/* ---------- Rejestr leków ---------- */
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1 1 auto; min-width: 0; }
.registry-source { font-size: var(--fs-xs); margin: 8px 0 0; }
.registry-count { font-size: var(--fs-sm); }
.registry-results ul { list-style: none; margin: 0; padding: 0; }
.registry-row {
    display: grid;
    gap: 2px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--c-border);
}
.registry-row:last-child { border-bottom: 0; }
/* Moc bywa w rejestrze bardzo długa (np. leki złożone) – nazwa z mocą na liście zajmuje najwyżej trzy linie */
.registry-row-name {
    font-weight: 650;
    text-decoration: none;
    color: var(--c-ink);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.registry-row-name:hover { color: var(--c-primary-dark); }
.registry-strength { font-weight: 500; color: var(--c-primary-dark); margin-left: 4px; }
.registry-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-sm); }
.registry-row--withdrawn .registry-row-name { color: var(--c-muted); }
.registry-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.registry-legend { margin-top: 10px; font-size: var(--fs-sm); }
.badge--muted { background: #F1F4F8; color: var(--c-muted); border-color: var(--c-border); }
.back-link { margin: 0; font-size: var(--fs-sm); }
.cell-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; }
.row--removed td { color: var(--c-muted); }

/* ---------- Fragmenty ChPL na karcie leku (E8) ---------- */
.chpl { display: grid; gap: 8px; }
.chpl-section { border: 1px solid var(--c-border); border-radius: 8px; background: #FAFCFE; }
.chpl-section summary { padding: 8px 12px; font-weight: 650; cursor: pointer; color: var(--c-primary-dark); }
.chpl-section[open] summary { border-bottom: 1px solid var(--c-border); }
.chpl-text { padding: 8px 12px; max-width: 80ch; font-size: var(--fs-sm); }
.chpl-text p { margin: 0 0 6px; }
.chpl-text .chpl-sub { font-weight: 650; margin-top: 10px; }

/* ---------- Skanowanie opakowania (E9) ---------- */
.add-start { gap: 10px; }
.scan-start { display: grid; gap: 6px; }
.btn-scan { justify-content: center; padding: 14px 16px; font-size: var(--fs-lg); border-radius: 12px; }
.btn-scan .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.or-separator { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.or-separator::before, .or-separator::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.status-message--warn { background: var(--c-warn-bg); color: var(--c-warn-ink); }
.from-code {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--c-ok-bg);
    color: var(--c-ok-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.field input.input-from-code { border-color: #9CD3B5; background: #F4FBF7; }

/* Okno aparatu: na komputerze okno nad stroną, na telefonie cały ekran */
.scanner {
    width: min(560px, 100vw);
    max-width: 100vw;
    padding: 0;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}
.scanner::backdrop { background: rgba(20, 38, 59, 0.6); }
.scanner-view { position: relative; aspect-ratio: 4 / 3; color: #fff; }
.scanner-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #1d252c; }
.scanner-finder {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(62vw, 240px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.42);
    transition: border-color 0.15s;
}
.scanner-finder.is-found { border-color: #3DDC84; }
.scanner-top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.scanner-round {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.scanner-round[aria-pressed="true"] { background: var(--c-help); }
.scanner-round .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scanner-hint {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 64px;
    margin: 0;
    text-align: center;
    font-weight: 650;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.scanner-hint small { display: block; font-weight: 500; opacity: 0.85; font-size: var(--fs-xs); }
.scanner-bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: center; }
.scanner-manual { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.scanner-manual:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
@media (max-width: 899.98px) {
    .scanner { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .scanner-view { aspect-ratio: auto; height: 100%; }
    .scanner-hint { bottom: 96px; }
    .scanner-bottom { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Konto ---------- */
.details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.details dt { color: var(--c-muted); font-size: var(--fs-sm); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.invitation-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.invitation-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-primary-dark);
}
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.account-actions form { margin: 0; }

/* ---------- Użytkownik w nagłówku ---------- */
.user-menu { display: flex; align-items: center; gap: 4px; min-width: 0; }
.user-menu form { margin: 0; }
.user-email {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sm);
    color: var(--c-muted);
    text-decoration: none;
}
.user-email:hover { color: var(--c-primary-dark); }
/* Na węższych ekranach adres e-mail ustępuje miejsca tytułowi i przełącznikowi apteczki */
@media (max-width: 1199.98px) { .user-email { display: none; } }
.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-muted);
    cursor: pointer;
}
.icon-btn:hover { color: var(--c-primary-dark); background: var(--c-primary-50); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.offline { margin: 0 auto; max-width: 600px; }
.offline .card { display: grid; gap: 8px; }
.error-code { font-size: 2.5rem; font-weight: 800; color: var(--c-primary-200); margin: 0; line-height: 1; }

/* ---------- Telefon: dolny pasek zakładek z wyróżnionym „Dodaj” (w zasięgu kciuka) ---------- */
@media (max-width: 899.98px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .app-main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); min-height: 100vh; }
    .sidebar { display: none; }
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: end;
        min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -4px 16px rgba(24, 120, 201, 0.08);
    }
    .tab {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 2px;
        padding: 4px 0;
        color: var(--c-muted);
        font-size: 0.6875rem;
        font-weight: 650;
        text-decoration: none;
        cursor: pointer;
        list-style: none;
    }
    .tab::-webkit-details-marker { display: none; }
    .tab .icon { width: 24px; height: 24px; }
    .tab[aria-current="page"], .tab.is-active, .tab-more[open] > .tab { color: var(--c-primary-dark); }
    .tab[aria-current="page"]::before, .tab.is-active::before {
        content: "";
        position: absolute;
        top: -7px;
        width: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--c-primary);
    }
    .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tab-badge {
        position: absolute;
        top: 0;
        left: calc(50% + 6px);
        min-width: 16px;
        padding: 0 4px;
        border-radius: var(--radius-pill);
        background: var(--c-danger-ink);
        color: #fff;
        font-size: 0.625rem;
        line-height: 16px;
        text-align: center;
    }
    /* Najczęstsza akcja – „Dodaj lek” – jako duży, wyniesiony przycisk w środku paska */
    .tab--primary .tab-icon {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--c-primary);
        color: #fff;
        box-shadow: 0 6px 14px rgba(24, 120, 201, 0.35);
    }
    .tab--primary[aria-current="page"] .tab-icon { background: var(--c-primary-dark); }
    .tab--primary[aria-current="page"]::before { display: none; }

    /* Panel „Więcej” nad paskiem (<details>) */
    .tab-more { position: static; }
    .more-sheet {
        position: fixed;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        display: grid;
        padding: 8px 14px 12px;
        background: var(--c-surface);
        border-radius: 16px 16px 0 0;
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -10px 30px rgba(20, 60, 110, 0.18);
    }
    .more-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 4px;
        border-bottom: 1px solid var(--c-border);
        color: var(--c-ink);
        font-weight: 600;
        text-decoration: none;
    }
    .more-link[aria-current="page"] { color: var(--c-primary-dark); }
    .more-link .icon { width: 22px; height: 22px; }
    .more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
    .more-row form { margin: 0; }

    /* Zalogowany: konto, wylogowanie i język są w panelu „Więcej” – nagłówek zostaje zwarty */
    .app--auth .app-header .user-menu,
    .app--auth .app-header .lang-switch { display: none; }

    .brand-mark--mobile { display: block; }
    .page-title { font-size: var(--fs-lg); }
    .user-email { display: none; }
    /* Nagłówek na telefonie: tytuł w jednej linii, przełącznik apteczki w drugim wierszu na całą szerokość */
    .app-header { flex-wrap: wrap; row-gap: 6px; }
    .kit-switcher, .kit-switcher-empty { order: 10; flex-basis: 100%; }
    .kit-switcher summary { max-width: none; }
    .kit-switcher-menu { left: 0; right: 0; min-width: 0; }
    .form--inline { grid-template-columns: minmax(0, 1fr); }
    .med-table-wrap { display: none; }
    /* „Dodaj lek” jest w dolnym pasku – na liście zostaje tylko wybór kolumn */
    .med-toolbar-actions .btn-primary { display: none; }
    .med-tiles { display: grid; }
    .chips-sort { margin-left: 0; flex-basis: 100%; }
    .form-row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .help { transition: none; }
}