/* SunbedManagement — app-specific styles
   All shared UI (buttons, cards, forms, nav, badges base, stat cards, etc.)
   is in style.css, which is copied from SolStack master at deploy time.
   Only add styles here that are unique to SunbedManagement. */

/* SunbedManagement-only button */
.btn-warning { background: var(--warning); color: #ffffff; }

/* Status badges — solid fills per §7.13 */
.badge-pending   { background: var(--warning);  color: #ffffff; }
.badge-paid      { background: var(--accent2);  color: #ffffff; }
.badge-present   { background: var(--accent);   color: #ffffff; }
.badge-cancelled { background: var(--danger);   color: #ffffff; }
.badge-expired   { background: #636366;         color: #ffffff; }
.badge-complete  { background: var(--accent2);  color: #ffffff; }

/* Admin table row hover */
.admin-table tr:hover td { color: var(--text); }

/* Compact nav padding — SunbedManagement has 9 nav items */
.nav-links a { padding: 0.55rem 1.5rem; }

/* ── Date Strip ── */
.date-strip { margin-bottom: 16px; }

.date-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.date-strip-month {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-strip-arrow {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 2px 10px;
    border-radius: 8px;
    line-height: 1;
}

.date-strip-arrow:disabled { opacity: 0.25; cursor: not-allowed; }

.date-strip-days { display: flex; gap: 8px; }

.date-tile {
    flex: 1;
    height: 60px;
    border-radius: 10px;
    border: 2px solid var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 3px;
    transition: background 0.15s, border-color 0.15s;
}

.date-tile-day {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text);
    letter-spacing: 0.4px;
}

.date-tile-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.date-tile.today { border-color: var(--accent2); }
.date-tile.today .date-tile-day { color: var(--accent2); }
.date-tile.selected { background: var(--accent); border-color: var(--accent); }
.date-tile.selected .date-tile-day,
.date-tile.selected .date-tile-num { color: #ffffff; }

/* ── Sunbed Matrix ── */
.matrix-date-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.matrix-date-bar input[type="date"] {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    padding: 10px 12px;
    outline: none;
}

.matrix-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.75rem;
    color: var(--text2);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

.legend-dot.available   { background: var(--accent2); }
.legend-dot.booked      { background: var(--danger); }
.legend-dot.unavailable { background: transparent; border: 2px solid var(--text); opacity: 1; }
.legend-dot.selected    { background: var(--accent); }

.matrix-row-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 8px;
}

.matrix-row-label span {
    font-size: 0.75rem;
    color: var(--text);
    margin-left: 6px;
    font-weight: 400;
}

.umbrella-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 4px;
}

.umbrella-card {
    background: transparent;
    border: 2px solid var(--text);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.umbrella-number { font-size: 1rem; color: var(--text); font-weight: 700; }
.umbrella-icon   { font-size: 1rem; line-height: 1; }

.sunbed-slots { display: flex; gap: 4px; }

.sunbed-slot {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: default;
    transition: transform 0.1s, opacity 0.2s;
    border: 2px solid transparent;
}

.sunbed-slot.available {
    background: rgba(48, 209, 88, 0.2);
    color: var(--accent2);
    cursor: pointer;
    border-color: var(--accent2);
}

.sunbed-slot.available:hover {
    background: rgba(48, 209, 88, 0.35);
    transform: scale(1.1);
}

.sunbed-slot.selected {
    background: rgba(10, 132, 255, 0.25);
    color: var(--accent);
    cursor: pointer;
    border-color: var(--accent);
    transform: scale(1.1);
}

.sunbed-slot.booked {
    background: rgba(255, 69, 58, 0.15);
    color: var(--danger);
    border-color: var(--danger);
}

.sunbed-slot.unavailable {
    background: transparent;
    color: #888888;
    border-color: #888888;
    opacity: 0.7;
}

/* Booking summary bar */
.booking-bar {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.booking-bar-info { font-size: 0.85rem; color: var(--text2); }
.booking-bar-info strong { color: var(--text); font-size: 1rem; }

/* Order cards */
.order-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent);
}

.order-card.food    { border-left-color: var(--warning); }
.order-card.drinks  { border-left-color: var(--accent2); }

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
/* The left block (sunbed, guest, menus) takes the full width of the header. No age chip or clock sits
   on the right any more — those are management/report figures; lateness shows as a red pane instead. */
.order-card-header > div:first-child { flex: 1; min-width: 0; }

.order-sunbed { font-weight: 700; font-size: 1rem; }
/* Who the order is for — the attendant calls the guest by name at the sunbed. */
.order-customer { font-weight: 600; font-size: 0.85rem; margin-left: 8px; }

/* Attendant's view: he delivers, so he gets a status, not pour/cook buttons.
   The card is COLLAPSED to one line (sunbed · guest · status) — on a busy day he scans a short list
   instead of scrolling; tapping the line opens the items.
   Colour carries the meaning: QUEUED is deliberately QUIET (grey — nothing for him to do yet), READY is
   AMBER and flashing. Everything else on this screen is green, so green cannot draw the eye; amber is
   the platform's attention token and is the only loud thing on the page. */
.order-status,
.order-item-state {
    display: inline-block;
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.order-status.queued,
.order-item-state.queued { background: #3a3a3c; color: #f2f2f7; }
.order-status.ready,
.order-item-state.ready  { background: var(--warning); color: #000; }
/* LATE is no longer a chip — the whole pane goes red (see .order-card.late / .order-collapse.late).
   Amber READY says collect this; a red pane says the guest is still waiting and it is now a complaint
   in the making, and it must be visible across the beach, not read off a small chip. */
/* --warning is a bright amber on dark (black text reads best) but a deep burnt orange on light, where
   black would be too close to it — white is the readable pairing there. */
html.light-theme .order-status.ready,
html.light-theme .order-item-state.ready { color: #fff; }
/* NOTHING flashes except LATE. Amber READY is a solid chip: it is a job to do, but it is not yet a
   problem. If amber flashed too, the red would be competing with it and would stop being the one thing
   on the screen that shouts — the same mistake green made when it was used for everything. */

/* Deliberately NOT gated on prefers-reduced-motion: a READY order is the one thing on this screen the
   attendant must not miss, and Windows ships with animation effects off for many users, which silently
   killed the flash. A 1Hz opacity pulse is far below any seizure-risk threshold. */
@keyframes order-ready-flash {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* LATE alert lives on the WHOLE pane, not a chip — a red, pulsing card reads across the beach in bright
   sun where a small chip does not. Only LATE colours the pane; QUEUED/READY keep their quiet chips, so
   red stays the one loud thing on the screen. White-on-danger is the same readable pairing the chips
   already used. */
.order-card.late,
.order-collapse.late {
    background: var(--danger);
    border-left-color: #fff;
    animation: order-ready-flash 1s ease-in-out infinite;
}
.order-card.late *:not(button),
.order-collapse.late *:not(button) { color: #fff !important; }
/* Once the attendant OPENS a late order to work it (take payment, hit SERVED), stop the pulse — it stays
   solid red so it is still clearly the late one, but a flashing pane under his hands is a distraction. */
.order-collapse.late.expanded { animation: none; }
/* Calm the inner chips so they read ON the red instead of fighting it with their own colours. */
.order-card.late .order-status,
.order-card.late .order-pay,
.order-collapse.late .order-status,
.order-collapse.late .order-pay {
    background: rgba(0, 0, 0, 0.22) !important;
    animation: none;
}

/* Money chip on the attendant's row. Blue (the platform's informational chip), NOT amber or red — those
   two already mean "late" on this screen and must keep meaning only that. PAID is grey and quiet: it is
   there so an empty space can never be mistaken for "no cash needed". */
.order-pay {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.order-pay.cash { background: var(--accent); color: #fff; }
.order-pay.paid { background: #3a3a3c; color: #ababab; }

/* The collapsed order line: sunbed, guest, status, time, chevron — all on one row. */
.order-collapse {
    background: var(--surface);
    border-radius: 12px;
    border-left: 3px solid var(--accent);
    margin: 0 0 8px;
    padding: 0 12px;
}
.order-collapse-header { gap: 10px; }
.order-collapse .order-customer { flex: 1; margin-left: 0; }
.order-collapse .collapse-section-body { padding-bottom: 10px; }

/* ⚠️ THE HEADER MUST BE TRANSPARENT HERE. The shared .collapse-section-header gained its own
   `background: var(--surface)` on 21 Jul (the "shelf" that makes a collapsed heading look pressable).
   Inside an order row that surface paints OVER the pane colour set by .order-collapse.late, leaving
   the white-on-danger text stranded on a pale header -- unreadable in the light theme, and only a thin
   red sliver of the card edge still visible. The PANE owns the colour on this screen; the header just
   sits in it. Same for the hover/active lift, which would otherwise flash grey over the red. */
.order-collapse .collapse-section-header,
.order-collapse .collapse-section-header:hover,
.order-collapse .collapse-section-header:active { background: transparent; }
html.light-theme .order-collapse .collapse-section-header,
html.light-theme .order-collapse .collapse-section-header:hover,
html.light-theme .order-collapse .collapse-section-header:active { background: transparent; }

/* Per-line state uses the SAME two words and the same pills as the order chip (see above): a line is
   QUEUED until the bar/kitchen make it, then READY. The order is READY when every line is. */

.order-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}

.order-item-name { color: var(--text2); }
.order-item-qty  { color: var(--text3); font-size: 0.75rem; margin-left: 6px; }

/* Customer order screen — a menu item is not a form field, so it does not use .field-group/.field-row
   (that shared component stacks the label above the control). One line: name · price · qty. */
.order-menu-head { text-align: center; }

/* A menu outside its serving window. Shown but not orderable: the guest still gets to read it and see
   when it comes back. --warning is used rather than a hardcoded amber because it is the token that is
   overridden for the light theme (plain amber scores 1.84:1 on white — invisible on a beach). */
.menu-off-service {
    color: var(--warning);
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0 0 10px;
}

/* Muted, not hidden. Opacity alone would drag the text under the contrast floor, so it stays mild and
   the missing steppers are what actually says "not now". */
.menu-section-off .collapse-section-body { opacity: 0.55; }

.menu-item {
    background: var(--surface);
    border-radius: 12px;
    margin-bottom: 2px;
    padding: 10px 14px;
}

.menu-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-line-name {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-line-price {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--text2);
}

.menu-line select {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 4px 0;
    appearance: auto;
    -webkit-appearance: menulist;
}

.menu-line select option { background: var(--surface); color: var(--text); }

.menu-line-desc {
    font-size: 0.75rem;
    color: var(--text3);
    margin-top: 4px;
}

/* Quantity stepper — one tap per unit beats opening a native picker for every dish on a phone. */
.qty-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.qty-btn:active { background: var(--accent); border-color: var(--accent); color: #ffffff; }

.qty-value {
    width: 30px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    -moz-appearance: textfield;
}

.qty-value::-webkit-outer-spin-button,
.qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Basket bar — exists ONLY when something is in the basket, so there is nothing to mis-press. */
.basket-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    margin: 16px -16px 0;
}
/* The browser's own [hidden]{display:none} is a weaker rule than the class above, so `display:flex`
   beats it and an EMPTY basket bar stays on screen ("0 items - EUR0.00"). Restore the hidden attribute. */
.basket-bar[hidden] { display: none; }

.basket-bar-info { font-size: 0.85rem; color: var(--text2); }
.basket-bar-info strong { color: var(--text); font-size: 1rem; }

.basket-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.basket-total strong { font-size: 1.25rem; color: var(--text); }

/* Scan result */
.scan-status-box {
    background: var(--surface);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    margin: 16px 0;
}

.scan-status-label {
    font-size: 0.75rem;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.scan-sunbed-label {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 8px 0;
}

/* Public booking page */
.public-header { text-align: center; padding: 24px 16px 16px; }
.public-header h1 { font-size: 1.5rem; font-weight: 800; }
.public-header p { color: var(--text2); font-size: 0.9rem; margin-top: 6px; }