/* ============================================================
   Sitzplanreservierung - Styles
   Farben angelehnt an die mcwald-Webseite (hell + dunkel)
   ============================================================ */

:root {
    color-scheme: light;
    --clr-bg: #fbfcfa;          /* papier, aufgehellt */
    --clr-bg2: #f5f6f4;         /* rueck-bg: hover, sanfte Flächen */
    --clr-surface: #ffffff;     /* flaeche */
    --clr-text: #1f2933;        /* tinte */
    --clr-text-muted: #5b6770;  /* grau */
    --clr-primary: #1d5c44;     /* grün */
    --clr-primary-hover: #143f2f;
    --clr-accent: #f2b705;      /* gelb */
    --clr-danger: #dc2626;
    --clr-danger-hover: #b91c1c;
    --clr-success: #16a34a;
    --clr-border: #e0e4e0;      /* linie */
    --clr-ok-bg: #eaf4ee;       /* hervor-bg */
    --clr-warn-bg: #fef9c3;
    --clr-warn-border: #fde68a;
    --clr-warn-text: #92400e;
    --clr-seat-free: #facc15;
    --clr-seat-free-border: #ca8a04;
    --clr-seat-selected: #15803d;
    --clr-seat-selected-border: #14532d;
    --clr-seat-locked: #c2410c;
    --clr-seat-locked-border: #7c2d12;
    --clr-seat-reserved: #64748b;
    --clr-seat-reserved-border: #334155;
    --clr-seat-checkedin: #14a02e;      /* Gast ist da: mcwald hellgrün, voll */
    --clr-seat-checkedin-text: #04240c; /* dunkle Zahl, sonst zu wenig Kontrast */
    --clr-table: #d1d5db;
    --seat-size: 34px;
    --seat-gap: 6px;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.1);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --clr-bg: #1c211e;
    --clr-bg2: #242a27;
    --clr-surface: #272e2a;
    --clr-text: #e6ebe8;
    --clr-text-muted: #a2aca7;
    --clr-primary: #2f8a5e;
    --clr-primary-hover: #3ba26f;
    --clr-danger: #ef4444;
    --clr-danger-hover: #dc2626;
    --clr-success: #3ba26f;
    --clr-border: #3a453f;
    --clr-ok-bg: #203228;
    --clr-warn-bg: #2c260f;
    --clr-warn-border: #5c4d15;
    --clr-warn-text: #fbbf24;
    --clr-table: #46534c;
    --shadow: 0 1px 3px rgba(0,0,0,.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.5;
    min-height: 100vh;
}
a { color: var(--clr-primary); }

/* --- Layout --- */
.container { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
.container-wide { max-width: 1280px; }

/* --- Navbar --- */
.navbar {
    display: flex;
    align-items: center;
    padding: .5rem 1.5rem;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 60px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-right: auto;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--clr-text);
    text-decoration: none;
}
/* Logo hat schwarze Schrift: bleibt in beiden Themes auf Weiss */
.nav-brand img {
    height: 40px;
    width: auto;
    background: #fff;
    border-radius: 6px;
    padding: 3px 6px;
    display: block;
}
.theme-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-surface);
    color: var(--clr-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    flex: 0 0 auto;
}
.theme-toggle::before { content: "☾"; }
html[data-theme="dark"] .theme-toggle::before { content: "☀"; }

/* Role signal: the top bar is red for sysadmin, yellow for manage.
   Fixed colours on purpose — the warning must look the same in both themes. */
.navbar.role-sysadmin { background: #b3261e; border-bottom-color: #7f1a15; }
.navbar.role-manage   { background: #f2b705; border-bottom-color: #c2920a; }
.navbar.role-sysadmin, .navbar.role-sysadmin .nav-brand,
.navbar.role-sysadmin .nav-user, .navbar.role-sysadmin .nav-event-name { color: #fff; }
.navbar.role-manage, .navbar.role-manage .nav-brand,
.navbar.role-manage .nav-user, .navbar.role-manage .nav-event-name { color: #1f2933; }
.navbar.role-sysadmin .btn, .navbar.role-manage .btn,
.navbar.role-sysadmin .theme-toggle, .navbar.role-manage .theme-toggle {
    background: rgba(255, 255, 255, .92);
    color: #1f2933;
    border-color: rgba(0, 0, 0, .15);
}
.navbar.role-sysadmin .btn:hover, .navbar.role-manage .btn:hover,
.navbar.role-sysadmin .theme-toggle:hover, .navbar.role-manage .theme-toggle:hover {
    background: #fff;
}
/* Einlass mode (entrance + pages opened from it): petrol, so nobody mixes it
   up with the Kasse. Same fixed colours in light and dark theme. */
.navbar.mode-einlass { background: #1a7982; border-bottom-color: #10545a; }
.navbar.mode-einlass, .navbar.mode-einlass .nav-brand,
.navbar.mode-einlass .nav-user, .navbar.mode-einlass .nav-event-name { color: #fff; }
.navbar.mode-einlass .btn, .navbar.mode-einlass .theme-toggle {
    background: rgba(255, 255, 255, .92);
    color: #1f2933;
    border-color: rgba(0, 0, 0, .15);
}
.navbar.mode-einlass .btn:hover, .navbar.mode-einlass .theme-toggle:hover { background: #fff; }
.nav-links {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.nav-event-name {
    font-size: 1.15rem;
    color: var(--clr-text);
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
/* Countdown chip in the top bar: "Reservierung öffnet erst ab …" */
.nav-opens {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--clr-border);
    background: var(--clr-warn-bg);
    color: var(--clr-warn-text);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.nav-opens #nav-opens-timer { font-variant-numeric: tabular-nums; }
.navbar.role-sysadmin .nav-opens, .navbar.role-manage .nav-opens {
    background: rgba(255, 255, 255, .92);
    color: #1f2933;
    border-color: rgba(0, 0, 0, .15);
}
/* Wide screens: one row. Long parts shrink (event name with an ellipsis)
   instead of pushing the theme toggle out of the bar. */
@media (min-width: 769px) {
    .navbar { flex-wrap: nowrap; }
    .nav-links { flex-wrap: nowrap; min-width: 0; }
    .nav-links .nav-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-brand { min-width: 0; }
    .nav-brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* On the seating plan the event name matters more than the word "Ticketing" */
    .navbar:has(.nav-event-name) .brand-name { display: none; }
}

/* --- Page Header --- */
.page-header { margin-bottom: 2rem; }
.page-header h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.page-header p { color: var(--clr-text-muted); }

/* --- Cards --- */
.card {
    background: var(--clr-surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.card h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.card h3 { font-size: 1.1rem; margin-bottom: .75rem; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    background: var(--clr-surface);
    color: var(--clr-text);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.btn:hover { background: var(--clr-bg2); }
.btn-primary { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }
.btn-primary:hover { background: var(--clr-primary-hover); }
.btn-danger { background: var(--clr-danger); color: #fff; border-color: var(--clr-danger); }
.btn-danger:hover { background: var(--clr-danger-hover); }
.btn-outline { background: transparent; }
.btn-outline:hover { background: var(--clr-bg2); }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-edit-res { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }
.btn-edit-res:hover { background: var(--clr-primary-hover); }
.btn-lg { padding: .7rem 1.5rem; font-size: 1rem; min-height: 44px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Forms --- */
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    margin-bottom: .3rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--clr-text);
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    font-size: 1rem;
    min-height: 44px;
    font-family: inherit;
    background: var(--clr-surface);
    color: var(--clr-text);
    transition: border-color .15s;
}
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--clr-primary); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(29, 92, 68, .15);
}
.form-row {
    display: flex;
    gap: 1rem;
}
.form-row .form-group { flex: 1; }

/* --- Alerts --- */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-warning { background: #fef3c7; color: #713f12; border: 1px solid #f2b705; }
.alert-warning a { color: inherit; font-weight: 600; }
html[data-theme="dark"] .alert-error { background: #3a1215; color: #fca5a5; border-color: #7f1d1d; }
html[data-theme="dark"] .alert-success { background: #122a1d; color: #86efac; border-color: #14532d; }
html[data-theme="dark"] .alert-warning { background: #2e2408; color: #fcd34d; border-color: #8a6a05; }
/* Sysadmin-only flags on the start page (inactive / past / without date) */
.event-flag { font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .2rem .65rem; border: 1px solid var(--clr-border); color: var(--clr-text-muted); }
.event-flag.flag-inactive { background: #fef3c7; color: #713f12; border-color: #f2b705; }
html[data-theme="dark"] .event-flag.flag-inactive { background: #2e2408; color: #fcd34d; border-color: #8a6a05; }
/* Admin user list: account locked after wrong logins */
.user-locked { margin-top: .3rem; font-size: .8rem; font-weight: 600; color: #991b1b; }
html[data-theme="dark"] .user-locked { color: #fca5a5; }

/* --- Tables --- */
.table-responsive { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.data-table th,
.data-table td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--clr-border);
}
.data-table th {
    font-weight: 600;
    color: var(--clr-text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.data-table tbody tr:hover { background: var(--clr-bg2); }

/* --- Event Grid --- */
.event-grid {
    display: grid;
    gap: 1rem;
}
.event-card {
    display: flex;
    background: var(--clr-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--clr-text);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.event-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background: var(--clr-primary);
    color: #fff;
    min-width: 100px;
}
.event-date .day { font-size: 2rem; font-weight: 700; line-height: 1; }
.event-date .month { font-size: .85rem; text-transform: uppercase; font-weight: 600; }
.event-date .year { font-size: .75rem; opacity: .8; }
.event-date .time { font-size: .8rem; font-weight: 600; margin-top: .25rem; opacity: .9; }
.event-info {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.event-info h2 { font-size: 1.15rem; margin-bottom: .4rem; }
.event-info p { color: var(--clr-text-muted); font-size: .9rem; flex: 1; margin-bottom: .5rem; }

/* ============================================================
   SEATING PLAN
   ============================================================ */

.plan-wrapper {
    position: relative;
    background: var(--clr-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 3rem 2.5rem 2rem;
    margin-bottom: 1.5rem;
}

.plan-scroll {
    overflow-x: auto;
    /* Scroll shadows: show a soft edge where more content is hidden */
    background:
        linear-gradient(90deg, var(--clr-surface) 30%, transparent),
        linear-gradient(90deg, transparent, var(--clr-surface) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.25), transparent),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.25), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Swipe hint shown on narrow screens until the user scrolls the plan */
.swipe-hint {
    display: none;
    text-align: center;
    font-size: .85rem;
    color: var(--clr-text-muted);
    background: #eef2ff;
    border-radius: 999px;
    padding: .35rem .9rem;
    margin: 0 auto .75rem;
    width: fit-content;
}
@media (max-width: 820px) {
    .swipe-hint { display: block; }
}

.plan-label {
    position: absolute;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.plan-label-top { top: .75rem; left: 50%; transform: translateX(-50%); }
.plan-label-left { left: .75rem; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.plan-label-right { right: .75rem; top: 50%; transform: translateY(-50%) rotate(90deg); }

.plan-legend {
    display: flex;
    gap: .9rem;
    justify-content: center;
    align-items: center;
    margin-bottom: .6rem;
    flex-wrap: wrap;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--clr-text-muted);
}
.legend-tip {
    padding-left: .9rem;
    border-left: 1px solid var(--clr-border);
}
.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid;
}
.legend-dot.free { background: var(--clr-seat-free); border-color: var(--clr-seat-free-border); }
.legend-dot.selected { background: var(--clr-seat-selected); border-color: var(--clr-seat-selected-border); border-radius: 30%; }
.legend-dot.locked { background: var(--clr-seat-locked); border-color: var(--clr-seat-locked-border); }
.legend-dot.reserved { background: var(--clr-seat-reserved); border-color: var(--clr-seat-reserved-border); }
.legend-dot.paid { background: var(--clr-seat-reserved); border: 3px solid var(--clr-seat-checkedin); }
.legend-dot.checkedin { background: var(--clr-seat-checkedin); border-color: var(--clr-seat-checkedin); }

/* Seating grid: tables arranged in rows */
.seating-plan {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 700px;
}
.table-row {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: nowrap;
}

/* Single table: light box around table + its seats, so it is clear which
   seats belong to which table. */
.table-unit {
    display: flex;
    align-items: stretch; /* table rect grows to the height of its seat columns */
    gap: 0;
    position: relative;
    padding: 4px;
    background: var(--clr-bg2);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
}
.table-rect {
    width: 44px;
    min-height: 200px;
    background: var(--clr-table);
    border: 2px solid var(--clr-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-text-muted);
    position: relative;
    z-index: 1;
}

/* Seat columns */
.seats-column {
    display: flex;
    flex-direction: column;
    gap: var(--seat-gap);
    padding: 4px 0;
}
.seats-left { align-items: flex-end; padding-right: 4px; }
.seats-right { align-items: flex-start; padding-left: 4px; }

/* Individual seat */
.seat {
    width: var(--seat-size);
    height: var(--seat-size);
    border-radius: 50%;
    border: 2px solid var(--clr-seat-free-border);
    background: var(--clr-seat-free);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
    position: relative;
    user-select: none;
    color: #333;
    z-index: 2;
}
.seat:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 5;
}

/* Selected: darker green AND a shape change (rounded square) so the
   state is visible without color perception */
.seat.selected {
    background: var(--clr-seat-selected);
    border-color: var(--clr-seat-selected-border);
    color: #fff;
    border-radius: 30%;
}
.seat.locked {
    background: var(--clr-seat-locked);
    border-color: var(--clr-seat-locked-border);
    cursor: not-allowed;
    color: #fff;
}
.seat.locked.mine {
    background: var(--clr-seat-selected);
    border-color: var(--clr-seat-selected-border);
    cursor: pointer;
    color: #fff;
    border-radius: 30%;
}
.seat.reserved {
    background: var(--clr-seat-reserved);
    border-color: var(--clr-seat-reserved-border);
    cursor: pointer;
    color: #fff;
}
/* Money state, one colour that fills up: grey = open, grey with a thick
   bright-green ring = paid, fully bright green = checked in (a check-in
   always means paid, so the two can never contradict). */
.seat.reserved.paid {
    border-color: var(--clr-seat-checkedin);
    box-shadow: inset 0 0 0 3px var(--clr-seat-checkedin);
}
.seat.reserved.checked-in {
    background: var(--clr-seat-checkedin);
    border-color: var(--clr-seat-checkedin);
    color: var(--clr-seat-checkedin-text);
}

/* Status menu for one seat (staff) */
.seat-menu {
    position: absolute;
    z-index: 60;
    min-width: 230px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .6rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.seat-menu-head {
    font-size: .8rem;
    color: var(--clr-text-muted);
    line-height: 1.35;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--clr-border);
}
.seat-menu .btn { justify-content: flex-start; text-align: left; }

/* Reservation panel */
.reservation-panel {
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Staff reservation highlight */
.seat.staff-highlight {
    box-shadow: 0 0 0 3px var(--clr-primary), 0 0 12px rgba(242, 183, 5, .45);
}

/* Clickable row in reservation list */
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover { background: var(--clr-bg2); }
.data-table tbody tr.row-active { background: var(--clr-ok-bg); }
.data-table tbody tr.row-editing {
    background: var(--clr-ok-bg);
    box-shadow: inset 3px 0 0 var(--clr-primary);
}
.data-table tbody tr.row-editing td:first-child::before {
    content: '✏️ ';
}

/* Toggle buttons (present/paid) */
.btn-toggle {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 4px;
    transition: background .15s;
    line-height: 1;
}
.btn-toggle:hover { background: var(--clr-bg2); }

/* Responsive */
@media (max-width: 768px) {
    .container { padding: .75rem; }
    .form-row { flex-direction: column; gap: 0; }
    .plan-wrapper { padding: 2.2rem .3rem .75rem; }
    .plan-scroll { padding: 0 2.2rem; }
    .plan-label { font-size: .65rem; letter-spacing: .03em; }
    .navbar { padding: .5rem .75rem; gap: .35rem; }
    .brand-name { display: none; } /* Name steht im Logo */
    .nav-brand img { height: 34px; }

    /* Navbar: row 1 is always just the logo and the toggle — a dedicated
       empty, zero-height flex item (::after) right after the toggle forces
       a hard line break, so the toggle is pinned to the far right of row 1
       on every page and nothing else can drift back onto that row. The
       wrapper div would otherwise force its own row even when its content
       would fit; display:contents dissolves it so every button/chip is a
       real flex item that wraps on its own below row 1. */
    .nav-links { display: contents; }
    .theme-toggle { order: 1; }
    .navbar::after { content: ''; order: 2; flex-basis: 100%; }
    .nav-links > * { order: 3; }
    .nav-links > .nav-event-name {
        order: 2;
        flex: 1 1 100%;
        font-size: .95rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        text-align: left;
    }
    /* User chip: icon + role only, the name is dropped to save width. */
    .nav-user { font-size: .8rem; }
    .nav-user-name { display: none; }
    /* Nav buttons: less horizontal padding/smaller text, still >=40px tall
       (set by the touch-target rule below) and wrap tightly. */
    .navbar .btn-sm { padding: .4rem .45rem; font-size: .78rem; }

    /* Event cards: a half-card date column pushed long titles into 4 lines.
       Compact horizontal date bar on top instead. */
    .event-card { flex-direction: column; }
    .event-date {
        flex-direction: row;
        justify-content: center;
        gap: .5rem;
        padding: .5rem 1rem;
        min-width: 0;
    }
    .event-date .day { font-size: 1.3rem; }
    .event-date .time { margin-top: 0; }
    .event-info h2 { font-size: 1.05rem; }

    /* Seating plan: smaller seats/gaps so more of the plan fits before the
       user has to swipe; never below 28px (tap target). min-width:0 and
       flex-start stop the plan being centered in a fixed 700px box — with
       small seats that box left a big empty gap before the first table. */
    :root { --seat-size: 28px; --seat-gap: 4px; }
    .seating-plan { gap: 1rem; min-width: 0; }
    .table-row { gap: 1rem; justify-content: flex-start; }
    .table-unit { padding: 3px; border-radius: 10px; }
    .table-rect { width: 30px; font-size: .8rem; }
    .seat { font-size: .68rem; }
}

/* Touch targets: on phone/pad the fine-pointer defaults below 44/40px are
   too small to tap reliably (nav buttons, table/tariff inputs in admin,
   per-row action buttons). Keep desktop untouched. */
@media (pointer: coarse), (max-width: 900px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; min-width: 40px; padding: .5rem .85rem; }
    .nav-brand { padding: .3rem; margin-top: -.3rem; margin-bottom: -.3rem; margin-left: -.3rem; border-radius: 8px; }
    .data-table input,
    .data-table select { min-height: 40px; }
    .list-search-input { min-height: 40px; }
    .guest-name-input { min-height: 40px; padding: .5rem .6rem !important; }
    /* Per-seat Anwesend/Bezahlt/Entfernen icons in the reservations list:
       widened from 24/24/20px so they stay dense but are tappable. */
    .seat-mini-row { grid-template-columns: 1fr 34px 34px 30px !important; gap: 6px !important; padding: 4px 0 !important; }
    .btn-toggle { width: 34px !important; min-height: 34px; font-size: 1.05rem !important; }
    .btn-remove-seat { width: 30px !important; min-height: 34px; font-size: .9rem !important; opacity: .8 !important; }
}

/* --- Sticky selection bar (guides user from plan to form) --- */
.selection-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
    padding: .6rem 1rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
}
.selection-bar-info { display: flex; flex-direction: column; line-height: 1.3; }
.selection-bar-info span { color: var(--clr-text-muted); font-size: .85rem; }
body.selbar-open { padding-bottom: 5rem; }

/* Tooltip for reserved seats (staff) */
.seat[title] { position: relative; }

/* Footer-Credit (öffentliche Seiten) */
.site-credit { text-align: center; color: var(--clr-text-muted); font-size: .85rem; margin: 2rem 0 1rem; }
.site-credit a { color: var(--clr-text-muted); }

/* --- Printing (Kasse): page 1 seating plan, then the reservations ---------- */
.print-only { display: none; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }

    /* Keep seat colours on paper */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    html, body { background: #fff; color: #000; }

    .navbar, .theme-toggle, .plan-legend, .swipe-hint, .selection-bar,
    .reservation-panel, #confirmation-panel, #reservation-countdown,
    #staff-new-reservation-btn, #reservations-search, .seat-menu, .no-print,
    .site-credit {
        display: none !important;
    }

    .print-only { display: block; }
    .print-header {
        margin-bottom: 6mm;
        border-bottom: 2px solid #000;
        padding-bottom: 2mm;
        font-size: 12pt;
    }
    .print-header strong { font-size: 14pt; }

    .container, .container-wide { max-width: none; padding: 0; }
    .card { box-shadow: none; border: none; padding: 0; margin: 0 0 4mm; background: #fff; }

    /* The plan must fit on the sheet: no scrolling, smaller seats */
    .plan-wrapper { background: #fff; padding: 10mm 0 0; margin: 0; }
    .plan-scroll { overflow: visible !important; background: none; }
    .plan-label { color: #000; }
    .seating-plan { gap: 4mm; }
    .table-row { gap: 3mm; }
    .seats-column { gap: 1mm; }
    .seat { width: 6.5mm; height: 6.5mm; font-size: 6pt; border-width: 1px; }
    /* JS sets an inline min-height for the screen plan — override it, so the
       bar is exactly as long as the seat column next to it */
    .table-rect { width: 7mm; min-width: 7mm; min-height: 0 !important; font-size: 7pt; }

    /* Reservations start on a new sheet. While staff are writing a new
       reservation the list is hidden on screen (inline style) — on paper it
       must always be there, so override it with !important. */
    #reservations-card {
        display: block !important;
        page-break-before: always;
        break-before: page;
    }
    #reservations-card h3 { font-size: 13pt; margin-bottom: 3mm; }
    .data-table { font-size: 8pt; width: 100%; }
    .data-table th, .data-table td { padding: 1mm 2mm; }
    .data-table tr { page-break-inside: avoid; }
    /* the action buttons are hidden, so drop their column too */
    #reservations-table th:last-child, #reservations-table td:last-child { display: none; }
    .table-responsive { overflow: visible !important; }
    .btn, .btn-toggle, .btn-edit-res, .btn-delete-res, .btn-remove-seat { display: none !important; }
}