/* =============================================================
   Eszközkölcsönzés — demo
   style.css   ·   Mammoth Hire szerkezet: szalag, hero, csempék,
                    sötét promó-panelek — nem admin-dashboard rács

   Tartalom
     1.  Design tokenek (:root)
     2.  Alap / reset
     3.  Szalag + felső sáv (appbar) + navigáció
     4.  Hero + nézet-fejléc
     5.  Gombok
     6.  Csempék (KPI / gyorsnavigáció)
     7.  Panelek
     8.  Táblázat
     9.  Bérleti kalkulátor + promó-sor
     10. Idővonal
     11. Jegyzőkönyv
     12. Eszközkártyák (szűrő-chipek + eszközrács)
     13. Bérlők lista
     14. Intro panel (Bootstrap offcanvas)
     15. Toast
     16. Lábléc (Amethyst Nexalune)
     17. Reszponzív
   ============================================================= */


/* ---------- 1. Design tokenek ------------------------------- */
:root {
        --ink:       #2c2c2e;
        --ink-2:     #404042;
        --muted:     #6a6a6f;
        --faint:     #9b9ba1;
        --line:      #e2e2e5;
        --line-2:    #f1f1f3;
        --paper:     #f4f4f5;
        --white:     #ffffff;

        --brand:     #f63d1d;
        --brand-2:   #d5330f;
        --brand-soft:#fde9e3;
        --brand-tint:#f8ccbf;

        --green-ink: #1a7f4b;
        --green-bg:  #e5f4ec;
        --amber-ink: #a76719;
        --amber-bg:  #fbeed7;
        --blue-ink:  #345bb5;
        --blue-bg:   #e8eefb;
        --slate-ink: #4b4b52;
        --slate-bg:  #ececef;
        --red-ink:   #c0341a;
        --red-bg:    #fce9e5;

        --r-1: 4px;
        --r-2: 6px;
        --r-3: 8px;
        --r-4: 10px;

        --sh-xs: 0 1px 2px rgba(20,20,22,.06);
        --sh-sm: 0 3px 10px rgba(20,20,22,.09);
        --sh-md: 0 10px 28px rgba(20,20,22,.12);
        --sh-lg: 0 24px 56px rgba(20,20,22,.20);

        --font-sans: 'Titillium Web', 'Segoe UI', system-ui, -apple-system, sans-serif;

        --maxw: 1280px;
}


/* ---------- 2. Alap / reset -------------------------------- */
* { box-sizing: border-box; }

html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
}

body {
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--paper);
        color: var(--ink);
        font-family: var(--font-sans);
        font-size: 16px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }

svg { display: block; }

h1, h2, h3 { letter-spacing: -.01em; }

:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
        border-radius: 3px;
}


/* ---------- 3. Szalag + felső sáv + navigáció ------------- */
.ribbon { background: var(--brand); color: #fff; }
.ribbon-inner {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 10px 4vw;
        text-align: center;
        font-size: 13.5px;
        font-weight: 600;
}

.appbar {
        position: sticky;
        top: 0;
        z-index: 30;
        background: var(--ink-2);
        box-shadow: var(--sh-sm);
}
.appbar-inner {
        display: flex;
        align-items: stretch;
        gap: 30px;
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 4vw;
        min-height: 68px;
}

.brand {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: none;
        color: #fff;
}
.brand-mark {
        flex: none;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        background: var(--brand);
        color: #fff;
        border-radius: var(--r-2);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-name { font-weight: 700; font-size: 18px; white-space: nowrap; }

.topnav {
        display: flex;
        align-items: stretch;
        gap: 4px;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav-btn {
        display: flex;
        align-items: center;
        padding: 0 17px;
        color: rgba(255,255,255,.7);
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
        border-bottom: 3px solid transparent;
        transition: background .12s, color .12s, border-color .12s;
}
.topnav-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.topnav-btn.active { color: #fff; border-bottom-color: var(--brand); }

.appbar-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
}


/* ---------- 4. Hero + nézet-fejléc ------------------------ */
main {
        flex: 1;
        width: 100%;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 4vw 72px;
}

.hero {
        padding: 46px 0 38px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 40px;
}
.hero-date { margin-bottom: 14px; color: var(--brand); font-size: 15px; font-weight: 700; }
.hero h1 {
        margin: 0;
        font-size: clamp(32px, 4.2vw, 52px);
        font-weight: 900;
        line-height: 1.1;
}
.hero h1 .accent { color: var(--brand); }
.hero .lead { margin: 18px 0 0; max-width: 640px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-compact { padding: 30px 0 34px; }
.hero-compact h1 { font-size: clamp(28px, 3.6vw, 40px); }
.hero-compact .lead { margin-top: 14px; }
.hero-compact .hero-actions { margin-top: 22px; }

.view-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        padding-top: 34px;
        margin-bottom: 26px;
}

.icon-btn {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: var(--r-2);
        color: rgba(255,255,255,.85);
        transition: background .13s, color .13s, border-color .13s;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

.lang-switch {
        display: inline-flex;
        gap: 2px;
        padding: 3px;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: var(--r-2);
}
.lang-btn {
        padding: 7px 12px;
        border-radius: var(--r-1);
        color: rgba(255,255,255,.7);
        font: 700 14px var(--font-sans);
        transition: background .13s, color .13s;
}
.lang-btn:hover { color: #fff; }
.lang-btn.active { background: var(--brand); color: #fff; }


/* ---------- 5. Gombok ------------------------------------- */
.outline-btn,
.primary-btn {
        padding: 13px 22px;
        border-radius: var(--r-2);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        transition: background .13s, box-shadow .18s, transform .13s, border-color .13s;
}
.outline-btn { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.outline-btn:hover { background: var(--line-2); border-color: var(--faint); }
.primary-btn { background: var(--brand); color: #fff; box-shadow: var(--sh-xs); }
.primary-btn:hover { background: var(--brand-2); }
.primary-btn:active { transform: translateY(1px); }


/* ---------- 6. Csempék (KPI / gyorsnavigáció) ------------- */
.tiles { margin-bottom: 40px; }
.tiles h2 { margin: 0 0 18px; }

.tile-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
}
.tile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 22px 22px 20px;
        background: var(--white);
        border-radius: var(--r-4);
        box-shadow: var(--sh-xs);
        border-bottom: 4px solid var(--brand);
        text-align: left;
        transition: transform .16s, box-shadow .16s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.tile-icon {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        background: var(--brand-soft);
        border-radius: var(--r-2);
        color: var(--brand);
}
.tile-icon svg { width: 18px; height: 18px; }
.tile-value { margin-top: 2px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-value small { margin-left: 3px; color: var(--faint); font-size: 14px; font-weight: 600; }
.tile-label { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.tile-warn { border-bottom-color: var(--amber-ink); }
.tile-warn .tile-icon { background: var(--amber-bg); color: var(--amber-ink); }


/* ---------- 7. Panelek -------------------------------------- */
.panel {
        padding: 28px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-4);
}
.panel-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 22px;
}
h2 { margin: 0; font-size: 22px; font-weight: 700; }
h3 { margin: 0; font-size: 17px; font-weight: 700; }
.panel-link { padding: 12px 0; margin: -12px 0; color: var(--brand); font-size: 14px; font-weight: 700; transition: color .13s; }
.panel-link:hover { color: var(--brand-2); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter {
        padding: 9px 14px;
        border-radius: var(--r-2);
        background: var(--line-2);
        color: var(--muted);
        font-size: 13.5px;
        font-weight: 700;
        transition: background .13s, color .13s;
}
.filter b { margin-left: 4px; opacity: .7; }
.filter:hover { color: var(--ink); }
.filter.active { background: var(--brand-soft); color: var(--brand-2); }


/* ---------- 8. Táblázat --------------------------------- */
.table-wrap { margin: 0 -4px; overflow-x: auto; }
table { width: 100%; min-width: 660px; border-collapse: collapse; }
th {
        padding: 0 14px 12px;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 13.5px;
        font-weight: 600;
        text-align: left;
}
td {
        padding: 17px 14px;
        border-bottom: 1px solid var(--line-2);
        font-size: 14.5px;
        white-space: nowrap;
}
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--line-2); }
tr:last-child td { border-bottom: 0; }

.equipment { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.equip-img {
        flex: none;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        background: var(--brand-soft);
        border-radius: var(--r-2);
        color: var(--brand);
}
.equip-img svg { width: 19px; height: 19px; }
.person { color: var(--slate-ink); }
.due { color: var(--red-ink); font-weight: 700; }

.status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 700;
}
.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.out  { background: var(--slate-bg); color: var(--slate-ink); }
.status.ok   { background: var(--green-bg); color: var(--green-ink); }
.status.soon { background: var(--blue-bg);  color: var(--blue-ink); }
.status.late { background: var(--red-bg);   color: var(--red-ink); }


/* ---------- 9. Bérleti kalkulátor + promó-sor ----------- */
.promo-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        margin: 36px 0;
        align-items: stretch;
}

.calculator {
        background: var(--ink-2);
        border-color: var(--ink-2);
        color: #fff;
}
.calculator .eyebrow { color: #ffb4a1; }
.calculator h2 { margin: 10px 0 12px; }
.calc-intro { margin-bottom: 24px; color: rgba(255,255,255,.6); font-size: 14.5px; line-height: 1.6; }

label {
        display: block;
        margin-bottom: 8px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 600;
}
.calculator label { color: rgba(255,255,255,.55); }
.field { margin-bottom: 16px; }
.field:last-of-type { margin-bottom: 0; }

input, select {
        width: 100%;
        padding: 12px 13px;
        background: #4c4c4f;
        border: 1px solid #5c5c60;
        border-radius: var(--r-1);
        color: #fff;
        font-size: 16px;
        outline: none;
        transition: border-color .13s, box-shadow .13s;
}
input:focus, select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(246,61,29,.2);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.calc-result { margin-top: 22px; padding-top: 20px; border-top: 1px solid #5a5a5e; }
.result-line {
        display: flex;
        justify-content: space-between;
        margin: 11px 0;
        color: rgba(255,255,255,.7);
        font-size: 14.5px;
}
.result-line strong { color: #fff; font-variant-numeric: tabular-nums; }
.result-line.total { margin-top: 16px; color: #fff; font-size: 19px; font-weight: 700; }
.calc-result .primary-btn {
        width: 100%;
        margin-top: 18px;
        background: var(--brand);
        color: #fff;
        box-shadow: none;
}
.calc-result .primary-btn:hover { background: var(--brand-2); }

.eyebrow { color: var(--brand); font-size: 15px; font-weight: 700; }

/* jegyzőkönyv promó-panel */
.promo-facts { margin: 18px 0 22px; }
.promo-facts .protocol-row:first-child { border-top: 0; }


/* ---------- 10. Idővonal ------------------------------- */
.timeline-item {
        display: grid;
        grid-template-columns: 92px 16px 1fr;
        min-height: 72px;
        font-size: 13.5px;
}
.timeline-date { padding-top: 2px; color: var(--muted); font-size: 13px; font-weight: 600; }
.timeline-line { position: relative; border-left: 1px solid var(--line); }
.timeline-line::before {
        content: '';
        position: absolute;
        left: -4px;
        top: 3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand);
        border: 2px solid var(--white);
        box-shadow: 0 0 0 1px var(--brand);
}
.timeline-item:last-child .timeline-line { border-left-color: transparent; }
.timeline-copy { padding-left: 16px; line-height: 1.55; color: var(--muted); }
.timeline-copy strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 14.5px; }


/* ---------- 11. Jegyzőkönyv ---------------------------- */
.protocol { background: var(--line-2); }
.protocol p { margin: 10px 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.protocol-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 0;
        border-top: 1px solid var(--line);
        font-size: 14px;
}
.protocol-row > span:first-child { color: var(--muted); }
.document-button { width: 100%; margin-top: 18px; }

.protocol-panel { max-width: 800px; margin-top: 34px; }
.protocol-title { margin: 10px 0 26px; font-size: clamp(26px, 2.8vw, 34px); font-weight: 900; }
.light-field { background: var(--white); border-color: var(--line); color: var(--ink); }
.light-field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(246,61,29,.15); }
.protocol-panel .primary-btn { margin-top: 8px; }


/* ---------- 12. Eszközkártyák --------------------------- */
.view { display: none; }
.view.active { display: block; animation: fade .22s ease; }
@keyframes fade {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
}

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 600;
        transition: background .13s, color .13s, border-color .13s;
}
.chip b { color: var(--faint); font-weight: 700; }
.chip:hover { border-color: var(--faint); color: var(--ink); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.active b { color: rgba(255,255,255,.75); }

.eq-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 8px;
}
.eq-card {
        background: var(--white);
        border-radius: var(--r-4);
        overflow: hidden;
        box-shadow: var(--sh-xs);
        transition: transform .16s, box-shadow .16s;
}
.eq-card:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.eq-card-top {
        display: grid;
        place-items: center;
        height: 76px;
        background: var(--ink-2);
        color: rgba(255,255,255,.9);
        border-bottom: 3px solid var(--brand);
}
.eq-card-top svg { width: 30px; height: 30px; }
.eq-card-body { padding: 16px 17px 18px; }
.eq-card-body h3 { margin: 0 0 12px; }
.eq-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price small { color: var(--faint); font-size: 12.5px; font-weight: 500; }


/* ---------- 13. Bérlők lista --------------------------- */
.people-list { padding: 8px 26px; }
.people-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 17px 0;
        border-bottom: 1px solid var(--line-2);
}
.people-row:last-child { border-bottom: 0; }
.avatar {
        flex: none;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: var(--r-2);
        background: var(--brand-soft);
        color: var(--brand-2);
        font-size: 14px;
        font-weight: 700;
}
.people-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.people-info strong { font-size: 16px; }
.people-info span { color: var(--muted); font-size: 13.5px; }
.people-info .late-text { color: var(--red-ink); font-weight: 700; }
.people-contact {
        margin-left: auto;
        color: var(--faint);
        font-size: 13.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}


/* ---------- 14. Intro panel (Bootstrap offcanvas) ------ */
.offcanvas.offcanvas-end {
        width: min(430px, 88vw);
        background: var(--ink-2);
        color: #fff;
        border-left: 3px solid var(--brand);
}
.offcanvas:focus-visible { outline: 0; }
.offcanvas-header { justify-content: flex-end; padding: 18px 20px 0; border: 0; }
.offcanvas-body { padding: 8px 28px 32px; }
.panel-close {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.28);
        border-radius: var(--r-2);
        color: #fff;
        transition: background .13s, border-color .13s;
}
.panel-close svg { width: 22px; height: 22px; }
.panel-close:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }

.intro-badge {
        display: inline-block;
        padding: 5px 11px;
        background: rgba(255,255,255,.12);
        border-radius: 999px;
        color: #ffb4a1;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
}
.intro-title { margin: 16px 0 10px; font-size: 28px; font-weight: 900; }
.intro-desc { margin: 0 0 22px; color: rgba(255,255,255,.68); font-size: 15.5px; line-height: 1.6; }

.intro-list { margin: 0 0 22px; padding: 0; list-style: none; }
.intro-list li {
        position: relative;
        padding: 9px 0 9px 26px;
        color: rgba(255,255,255,.92);
        font-size: 15px;
}
.intro-list li::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 16px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand);
}

.intro-note {
        margin: 0 0 24px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.14);
        color: rgba(255,255,255,.42);
        font-size: 13px;
        line-height: 1.5;
}
.intro-cta { width: 100%; }


/* ---------- 15. Toast ---------------------------------- */
.toast-note {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 40;
        padding: 15px 19px;
        background: var(--ink);
        border-radius: var(--r-2);
        color: #fff;
        font-size: 14.5px;
        font-weight: 600;
        box-shadow: var(--sh-md);
        opacity: 0;
        transform: translateY(12px);
        pointer-events: none;
        transition: opacity .25s, transform .25s;
}
.toast-note.show { opacity: 1; transform: translateY(0); }


/* ---------- 16. Lábléc (Amethyst Nexalune) ------------- */
.site-footer {
        background: radial-gradient(135% 210% at 14% 50%, #241640 0%, #150c2c 46%, #0a0618 100%);
        border-top: 1px solid #2a1f4a;
}
.footer-inner {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 26px 4vw;
        display: flex;
        align-items: center;
        gap: 15px;
}
.footer-brand {
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        transition: opacity .15s;
}
.footer-brand:hover { opacity: .85; }
.footer-logo {
        flex: none;
        width: 60px;
        height: 60px;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(20, 111, 209, .45));
}
.footer-brand-text {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
}
.footer-name {
        padding-bottom: 5px;
        border-bottom: 2px solid #d8b765;
        color: #146fd1;
        font: 700 20px/1.1 'Unbounded', var(--font-sans);
        letter-spacing: .05em;
        text-transform: uppercase;
        white-space: nowrap;
}
.footer-tag {
        color: #c7c2d6;
        font: 500 13px/1.2 'Plus Jakarta Sans', var(--font-sans);
        letter-spacing: .14em;
        text-transform: uppercase;
        text-decoration: underline;
        text-decoration-color: #146fd1;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
}


/* ---------- 17. Reszponzív ----------------------------- */
@media (max-width: 1080px) {
        .tile-grid { grid-template-columns: 1fr 1fr; }
        .promo-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
        .appbar { position: static; }
        .appbar-inner { flex-wrap: wrap; gap: 0 18px; padding: 10px 18px; min-height: 0; }
        .brand { order: 1; }
        .appbar-actions { order: 2; margin-left: auto; }
        .topnav { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; margin-top: 10px; gap: 8px; }
        .topnav-btn { padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-2); text-transform: uppercase; font-size: 13px; }
        .topnav-btn.active { background: var(--brand); border-color: var(--brand); }
}

/* alacsony (fekvő telefon) képernyőn a fejléc ne foglalja a kép felét */
@media (max-height: 520px) {
        .appbar { position: static; }
}

@media (max-width: 860px) {
        main { padding: 0 18px 50px; }
}

/* érintőképernyő: min. ~40–44 px-es kattintási felületek */
@media (pointer: coarse), (max-width: 900px) {
        .lang-btn { min-height: 40px; padding: 0 14px; }
        .icon-btn { width: 44px; height: 44px; }
        .topnav-btn { min-height: 44px; }
        .filter, .chip { min-height: 44px; }
        .panel-link { display: inline-flex; align-items: center; }
}

@media (max-width: 620px) {
        .ribbon-inner { padding: 8px 4vw; font-size: 12.5px; line-height: 1.35; }

        /* táblázat → egymás alatti kártyák: semmi nem lóg ki oldalra */
        .table-wrap { margin: 0; overflow: visible; }
        table, tbody, tr, td { display: block; }
        table { min-width: 0; }
        thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
        tbody tr { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
        tbody tr:last-child { border-bottom: 0; }
        td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 16px;
                padding: 6px 0;
                border: 0;
                white-space: normal;
                text-align: right;
        }
        td::before {
                content: attr(data-label);
                flex: none;
                color: var(--muted);
                font-size: 13.5px;
                font-weight: 600;
                text-align: left;
        }
        td:first-child { padding-bottom: 8px; }
        td:first-child::before { display: none; }

        .view-head { flex-direction: column; padding-top: 26px; }
        .protocol-panel { margin-top: 26px; }
        .hero { padding: 32px 0 28px; }
        .hero .lead { font-size: 16px; }
        .tile-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
        .tile { padding: 16px 16px 14px; }
        .tile-value { font-size: 24px; }
        .panel { padding: 18px; }
        .people-list { padding: 4px 18px; }
        .people-contact { display: none; }
        .offcanvas-header { padding: 14px 14px 0; }
        .offcanvas-body { padding: 6px 22px 26px; }
        .row { grid-template-columns: 1fr; }
        .toast-note { left: 16px; right: 16px; bottom: 16px; text-align: center; }
        .footer-inner { flex-direction: column; text-align: center; padding: 22px 18px; }
        .footer-brand { flex-direction: column; }
        .footer-name { font-size: 16px; }
        .footer-tag { font-size: 12px; }
}