/* =========================================================================
   CakeHut Online Order Dashboard - stylesheet
   Brand colors:
     Primary Orange  #F36B21
     Dark Orange     #D84A12
     Cream Background#FFF4EA
     Brown Text      #4B2C20
   ========================================================================= */

:root {
    --ch-orange: #F36B21;
    --ch-orange-dark: #D84A12;
    --ch-cream: #FFF4EA;
    --ch-brown: #4B2C20;
    --ch-white: #FFFFFF;
    --ch-border: #F0DCC9;
    --ch-shadow: 0 2px 10px rgba(75, 44, 32, 0.08);
    --ch-radius: 14px;
    --ch-green: #2E9E5B;
    --ch-red: #D64545;
    --ch-blue: #2E7FD6;
    --ch-gray: #8A7B6F;
    --ch-header-h: 56px;
    --ch-tabs-h: 36px;
    --ch-filter-h: 56px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ch-cream);
    color: var(--ch-brown);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 15px;
}

a { color: inherit; }

button, select, input {
    font-family: inherit;
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--ch-header-h);
    background: var(--ch-white);
    border-bottom: 3px solid var(--ch-orange);
    /* Two deliberate rows instead of one wide one: row 1 is brand (left)
       + who's logged in (right), row 2 is the button toolbar. Splitting
       these up (rather than letting one long row wrap wherever it runs
       out of space) means row 1 never sits mostly-empty next to a wrapped
       toolbar - every row has a reason to be exactly as wide as it is.
       --ch-header-h still tracks the header's real rendered height (see
       initHeaderHeightSync() in app.js) so anything sticky below it keeps
       following along automatically, including the within-row wrapping
       fallback below for very narrow screens. */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 20px;
    box-shadow: var(--ch-shadow);
}

.app-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-header__logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.app-header__titles {
    /* Belt-and-braces: on the rare line so narrow even the brand alone
       can't fit, this ellipsizes instead of wrapping the title itself. */
    min-width: 0;
    overflow: hidden;
}

.app-header h1 {
    margin: 0;
    font-size: 15px;
    color: var(--ch-orange-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__subtitle {
    margin: 0;
    font-size: 10.5px;
    color: var(--ch-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.app-header__identity > * {
    flex-shrink: 0;
}

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* Safety valve for the toolbar's own row being narrower than its
       (button-heavy) content even alone - each child below is pinned to
       its natural size (flex-shrink: 0) so a button's own label is never
       what gives; the row scrolls sideways as a whole instead. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.app-header__actions > * {
    flex-shrink: 0;
}

.last-updated {
    font-size: 11px;
    color: var(--ch-gray);
}

.fastest-today {
    font-size: 12px;
    font-weight: 600;
    color: var(--ch-orange-dark);
    background: var(--ch-cream);
    border: 1px solid var(--ch-orange);
    border-radius: 20px;
    padding: 5px 12px;
    white-space: nowrap;
    /* A long shop/address name (see updateFastestToday() in app.js) is
       truncated here rather than being left free to stretch the whole
       header - flex-shrink:0 keeps the pill from being squashed illegibly
       thin first, so it shrinks down to max-width and ellipsizes instead. */
    flex-shrink: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.kitchen-mode .fastest-today {
    background: #2A1B0E;
    border-color: #6B4530;
    color: #FFE4C8;
}
/* Same pill styling as .fastest-today, just a different brand color so the
   two badges (fastest delivery / next milestone) read as distinct at a
   glance when both are visible at once. */
.milestone-countdown {
    color: #3FA34D;
    border-color: #3FA34D;
}
body.kitchen-mode .milestone-countdown {
    color: #A8E6B8;
    border-color: #3FA34D;
}

.db-error-banner {
    background: var(--ch-red);
    color: #fff;
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
}

.connection-banner {
    background: #B32418;
    color: #fff;
    padding: 10px 16px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 60;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    border: none;
    border-radius: 20px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--ch-orange);
    color: #fff;
}
.btn-primary:hover { background: var(--ch-orange-dark); }

.btn-ghost {
    background: var(--ch-cream);
    color: var(--ch-orange-dark);
    border: 1px solid var(--ch-orange);
}
.btn-ghost[aria-pressed="true"] {
    background: var(--ch-orange-dark);
    color: #fff;
}

/* "More" menu - houses the admin/reporting actions used far less often
   than the buttons in the main row, so the header toolbar stops growing
   (and needing to scroll sideways) every time one more feature ships. */
.more-actions {
    position: relative;
}
.more-actions__menu {
    /* position: fixed, not absolute - .app-header__actions (its original
       parent in the DOM) scrolls horizontally via overflow-x/y, and any
       "overflow" value other than visible on an ancestor clips an
       absolutely-positioned descendant too, which silently hid this menu
       entirely. initMoreActionsMenu() in app.js re-parents this to
       <body> on load and sets top/right inline from the button's actual
       position each time it opens, so position: fixed here is what
       actually escapes that clipping. */
    position: fixed;
    z-index: 55;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    background: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    padding: 6px;
}
/* The `display: flex` above has the same author-stylesheet specificity as
   the browser's default `[hidden] { display: none }` rule, so without this
   it silently wins and the menu never actually disappears when closed -
   same fix already used for .order-card[hidden] / .bulk-bar[hidden] /
   .modal-overlay[hidden] elsewhere in this file. This was the "dropdown
   doesn't close" bug - see Changelog v3.32. */
.more-actions__menu[hidden] { display: none; }
.more-actions__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-brown);
    cursor: pointer;
    white-space: nowrap;
}
.more-actions__item:hover { background: var(--ch-cream); }
.more-actions__divider {
    height: 1px;
    background: var(--ch-border);
    margin: 5px 2px;
}
body.kitchen-mode .more-actions__menu {
    background: #2A1B0E;
    border-color: #6B4530;
}
body.kitchen-mode .more-actions__item { color: #FFF4EA; }
body.kitchen-mode .more-actions__item:hover { background: #3A2717; }
body.kitchen-mode .more-actions__divider { background: #6B4530; }

/* Announce/Award Points/Insights/Export CSV (admin/reporting actions) -
   this group has no box of its own (display: contents), so its buttons
   sit inline in the header row exactly like the ones before them, taking
   up real width there, right up until layoutHeaderActions() in app.js
   measures that the row has started overflowing and moves this whole
   group into #moreActionsMenu instead (revealing the "More" button). The
   divider is only meaningful once it's actually inside that menu. */
.header-overflow-group { display: contents; }
/* Inline (row not overflowing): a thin VERTICAL rule, matching
   .app-header__group-label's own separator below - Export CSV still
   reads as its own thing after the Admin cluster instead of blending into
   it. Once collapsed into the dropdown (.is-collapsed), this becomes the
   full-width HORIZONTAL rule the dropdown always used - same element,
   different geometry for its two very different contexts. */
.header-overflow-group .more-actions__divider {
    display: block;
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--ch-border);
}
.header-overflow-group.is-collapsed .more-actions__divider {
    width: auto;
    height: 1px;
    margin: 5px 2px;
}

/* Plain text labels ("Team" / "Kitchen Tools" / "Admin") segregating the
   header toolbar into logical clusters - see app-header__actions markup
   in index.php. Deliberately not buttons/dropdowns: every action stays
   inline and one click away, same as before this grouping existed. */
.app-header__group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ch-gray);
    white-space: nowrap;
    padding: 0 2px;
}
.app-header__group-label::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--ch-border);
}
/* No divider before the very first label in the row - nothing to its
   left to separate it from. */
.app-header__actions > .app-header__group-label:first-child::before { display: none; }
body.kitchen-mode .app-header__group-label { color: #C9A67A; }
body.kitchen-mode .app-header__group-label::before { background: #6B4530; }
/* (the inline vertical divider before Export CSV already picks up the
   existing body.kitchen-mode .more-actions__divider background rule
   above - no separate override needed here) */
/* Inside the collapsed "More" dropdown, a label reads as a small section
   heading over the buttons below it, not a divider - no vertical rule,
   proper breathing room instead of being flush against neighbors. */
.more-actions__menu .app-header__group-label {
    padding: 8px 10px 2px;
}
.more-actions__menu .app-header__group-label::before { display: none; }

/* Today's two "at a glance" badges (fastest delivery, next milestone) -
   moved out of the button toolbar into their own row so they never
   compete with buttons for space or push the row into horizontal scroll. */
.today-stats-strip {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 16px 0;
}
.today-stats-strip.is-visible { display: flex; }

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    border: none;
    padding: 9px 15px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    margin: 3px 4px 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform .08s ease, box-shadow .08s ease, filter .1s ease;
}
.action-btn__icon { font-size: 14px; line-height: 1; }
.action-btn:hover { filter: brightness(1.07); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); }
.action-btn:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.action-btn:disabled { opacity: .6; cursor: wait; box-shadow: none; filter: none; transform: none; }

/* Distinct but harmonized colors per action - each is what the order's
   status pill will look like right after the button is pressed, so the
   color is already a preview of the outcome. */
.action-btn--delivered { background: var(--ch-green); }
.action-btn--delivered_no_mail { background: #3E8E75; }
.action-btn--out_for_delivery { background: var(--ch-blue); }
.action-btn--ready_for_pickup { background: #8E5FD1; }
.action-btn--baking_over { background: var(--ch-orange); }

/* ---------------------------------------------------------------------
   Tabs (view navigation)
   --------------------------------------------------------------------- */
.tabs {
    position: sticky;
    top: var(--ch-header-h);
    z-index: 49;
    display: flex;
    gap: 4px;
    background: var(--ch-white);
    padding: 0 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ch-border);
}

.tab {
    display: inline-block;
    padding: 9px 14px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ch-brown);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.tab:hover { color: var(--ch-orange-dark); }
.tab--active {
    color: var(--ch-orange-dark);
    border-bottom-color: var(--ch-orange);
}

/* Thin indeterminate progress bar along the bottom edge of the tabs,
   shown while switching views/shops so a slow request isn't silent.
   Absolutely positioned so it adds no height and can't disturb the
   sticky header/tabs/filter-bar stacking above it. */
.top-loader {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
}
.top-loader::before {
    content: '';
    display: block;
    height: 100%;
    width: 35%;
    background: var(--ch-orange-dark);
    transform: translateX(-100%);
}
.top-loader--active::before {
    animation: cakehut-top-loader 0.9s ease-in-out infinite;
}
@keyframes cakehut-top-loader {
    0% { transform: translateX(-120%); }
    60% { transform: translateX(280%); }
    100% { transform: translateX(280%); }
}

/* ---------------------------------------------------------------------
   Per-shop order counts, shown as small chips just under the tabs
   --------------------------------------------------------------------- */
.shop-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 16px 0;
    font-size: 11px;
}
.shop-breakdown:empty { padding: 0; }
.shop-breakdown__chip {
    font: inherit;
    cursor: pointer;
    background: #fff;
    border: 1px solid rgba(75, 44, 32, 0.12);
    border-radius: 999px;
    padding: 2px 9px;
    color: var(--ch-gray);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.shop-breakdown__chip strong {
    color: var(--ch-brown);
    font-weight: 700;
    margin-left: 2px;
}
.shop-breakdown__chip:hover { border-color: var(--ch-orange); }
.shop-breakdown__chip--active {
    background: var(--ch-orange-dark);
    border-color: var(--ch-orange-dark);
    color: #fff;
}
.shop-breakdown__chip--active strong { color: #fff; }
body.kitchen-mode .shop-breakdown__chip {
    background: #2A1B0E;
    border-color: rgba(255, 244, 234, 0.25);
    color: #E8C9AE;
}
body.kitchen-mode .shop-breakdown__chip strong { color: #FFF4EA; }
body.kitchen-mode .shop-breakdown__chip--active {
    background: var(--ch-orange);
    border-color: var(--ch-orange);
    color: #2A1B0E;
}
body.kitchen-mode .shop-breakdown__chip--active strong { color: #2A1B0E; }

/* "Not assigned" gets its own red highlight so an order sitting with no
   shop yet stands out from the rest of the (neutral) breakdown row at a
   glance, instead of blending in as just another shop chip. */
.shop-breakdown__chip--unassigned {
    background: #fdecea;
    border-color: #e0776d;
    color: #b3261e;
}
.shop-breakdown__chip--unassigned strong { color: #b3261e; }
.shop-breakdown__chip--unassigned:hover { border-color: #b3261e; }
.shop-breakdown__chip--unassigned.shop-breakdown__chip--active {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
.shop-breakdown__chip--unassigned.shop-breakdown__chip--active strong { color: #fff; }
body.kitchen-mode .shop-breakdown__chip--unassigned {
    background: rgba(220, 53, 69, 0.22);
    border-color: rgba(255, 107, 107, 0.55);
    color: #ff9a92;
}
body.kitchen-mode .shop-breakdown__chip--unassigned strong { color: #ff9a92; }
body.kitchen-mode .shop-breakdown__chip--unassigned.shop-breakdown__chip--active {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
body.kitchen-mode .shop-breakdown__chip--unassigned.shop-breakdown__chip--active strong { color: #fff; }

/* ---------------------------------------------------------------------
   Filter bar
   --------------------------------------------------------------------- */
.filter-bar {
    position: sticky;
    top: calc(var(--ch-header-h) + var(--ch-tabs-h));
    z-index: 48;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: var(--ch-cream);
    padding: 7px 14px;
    border-bottom: 1px solid var(--ch-border);
}

.filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.filter-bar__group label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ch-gray);
}

.filter-bar__search { flex: 1 1 220px; min-width: 180px; }

.filter-select, #orderSearch {
    border: 1px solid var(--ch-orange);
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--ch-brown);
    background: #fff;
    outline: none;
    width: 100%;
}
.filter-select:focus, #orderSearch:focus { border-color: var(--ch-orange-dark); }

.switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--ch-brown);
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Summary cards
   --------------------------------------------------------------------- */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 12px 14px;
}

.summary-card {
    background: #fff;
    border-radius: var(--ch-radius);
    padding: 10px 14px;
    box-shadow: var(--ch-shadow);
    border-top: 4px solid var(--ch-orange);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.summary-card__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ch-gray);
}
.summary-card__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ch-brown);
}
.summary-card--pending { border-top-color: var(--ch-gray); }
.summary-card--baking { border-top-color: var(--ch-orange); }
.summary-card--out { border-top-color: var(--ch-blue); }
.summary-card--delivered { border-top-color: var(--ch-green); }
.summary-card--sales { border-top-color: var(--ch-orange-dark); }

.summary-card--clickable {
    cursor: pointer;
    user-select: none;
    transition: box-shadow .15s ease, transform .1s ease;
}
.summary-card--clickable:hover { box-shadow: 0 4px 14px rgba(75, 44, 32, 0.16); }
.summary-card--clickable:active { transform: scale(0.98); }
.summary-card--active {
    box-shadow: 0 0 0 2px var(--ch-orange-dark), var(--ch-shadow);
}
body.kitchen-mode .summary-card--active {
    box-shadow: 0 0 0 2px var(--ch-orange);
}

/* ---------------------------------------------------------------------
   Content / order cards
   --------------------------------------------------------------------- */
.content { padding: 4px 16px 40px; }

.view-heading {
    font-size: 16px;
    color: var(--ch-orange-dark);
    margin: 6px 0 14px;
}

.order-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.order-list__loading, .no-orders {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ch-gray);
    padding: 40px 0;
    font-size: 14px;
}

/* "Group by time slot" sections - each one spans the full width of the
   .order-list grid and lays its own cards out in the same card grid. */
.slot-group {
    grid-column: 1 / -1;
}
.slot-group + .slot-group {
    margin-top: 8px;
}
.slot-group__heading {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--ch-orange-dark);
    border-bottom: 2px solid var(--ch-border);
    padding-bottom: 6px;
}
.slot-group__count {
    font-weight: 400;
    color: var(--ch-gray);
    font-size: 13px;
}
.slot-group__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
body.kitchen-mode .slot-group__heading {
    color: #FFE4C8;
    border-bottom-color: #6B4530;
}
body.kitchen-mode .slot-group__count {
    color: #C9A98A;
}

/* Search filter hides non-matching cards via the [hidden] attribute. Since
   .order-card below sets its own `display`, it would otherwise win over the
   browser's default `[hidden] { display: none }` rule (same specificity,
   later in the cascade) and cards would never actually disappear. */
.order-card[hidden] {
    display: none;
}

.order-card {
    background: #fff;
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    padding: 16px;
    border: 1px solid var(--ch-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .3s ease, transform .3s ease;
}

/* New-order highlight: a gentle repeating "blink" (soft glow + faint
   cream tint, not a hard on/off flash) so a fresh order stands out on a
   busy screen for a good while without being annoying to look at. 8
   pulses of 1.25s = 10s total, then removeAfterAnimation() (see app.js)
   strips the class once animationend fires for the whole iteration
   count. */
.order-card--new {
    animation: ch-highlight-blink 1.25s ease-in-out 8;
    border-color: var(--ch-orange);
}

@keyframes ch-highlight-blink {
    0%, 100% { box-shadow: var(--ch-shadow); background-color: #fff; }
    50% { box-shadow: 0 0 0 4px rgba(243, 107, 33, 0.35); background-color: var(--ch-cream); }
}

/* Delivery-slot urgency: where an order sits against its own delivery
   slot (Any Time / 10-1 / 1-6 / 6-9) while it's still Pending / Baking
   Completed - "ready" (upcoming), "need" (inside the slot now), or
   "overdue" (slot has ended). */
.order-card--ready {
    border-color: #6B8CAE;
    box-shadow: 0 0 0 2px rgba(107, 140, 174, 0.30), var(--ch-shadow);
}
.order-card--need {
    border-color: #E0A100;
    box-shadow: 0 0 0 2px rgba(224, 161, 0, 0.35), var(--ch-shadow);
}
.order-card--overdue {
    border-color: #D3382C;
    box-shadow: 0 0 0 2px rgba(211, 56, 44, 0.45), var(--ch-shadow);
}
.urgency-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 8px;
    border-radius: 20px;
    color: #fff;
    white-space: nowrap;
}
.urgency-badge--ready { background: #6B8CAE; }
.urgency-badge--need { background: #E0A100; }
.urgency-badge--overdue { background: #D3382C; animation: ch-urgent-pulse 1.6s ease-in-out infinite; }
@keyframes ch-urgent-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}
body.kitchen-mode .order-card--ready { box-shadow: 0 0 0 2px #8FB2D6; }
body.kitchen-mode .order-card--need { box-shadow: 0 0 0 2px #E0A100; }
body.kitchen-mode .order-card--overdue { box-shadow: 0 0 0 2px #FF5A46; }

.order-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.order-card__top-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.order-card__top-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.order-card__select {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--ch-orange-dark);
    cursor: pointer;
    flex-shrink: 0;
}

.icon-btn {
    border: 1px solid var(--ch-border);
    background: #fff;
    color: var(--ch-brown);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--ch-orange); color: var(--ch-orange-dark); }
body.kitchen-mode .icon-btn { background: #2A1B0E; border-color: #6B4530; color: #FFF4EA; }

.whatsapp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 5px;
    background: #25D366;
    border-radius: 50%;
    vertical-align: middle;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.whatsapp-link svg { width: 13px; height: 13px; fill: #fff; }
.whatsapp-link:hover { opacity: .85; }
body.kitchen-mode .whatsapp-link { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

.order-card__id {
    font-size: 17px;
    font-weight: 700;
    color: var(--ch-orange-dark);
}

.order-card__shop {
    font-size: 12px;
    color: var(--ch-gray);
}

/* Full-bleed banner across the top of the card - see assignedStripeHtml()
   in app.js. Negative side/top margins cancel out .order-card's own 16px
   padding so this reaches the card's actual edges (flush with its rounded
   top corners) instead of sitting inset like every other row on the card -
   that's the whole point, since the small pill this replaces wasn't being
   noticed. .order-card's flex "gap" still applies below it, so there's no
   need for a bottom margin here to create breathing room before the next
   row. */
.order-card__assign-stripe {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: -16px -16px 0 -16px;
    padding: 6px 16px;
    background: var(--ch-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--ch-radius) var(--ch-radius) 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.kitchen-mode .order-card__assign-stripe {
    background: #6B4530;
    color: #FFD9A8;
}

.customer-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 8px;
    vertical-align: middle;
}
.customer-type-badge--repeat {
    background: #E7F6ED;
    color: var(--ch-green);
    border: 1px solid rgba(46, 158, 91, 0.35);
}
.customer-type-badge--guest {
    background: var(--ch-cream);
    color: var(--ch-gray);
    border: 1px solid var(--ch-border);
}
body.kitchen-mode .customer-type-badge--repeat {
    background: #1E3B29;
    color: #7FE0A6;
    border-color: #2E5C3D;
}
body.kitchen-mode .customer-type-badge--guest {
    background: #3A2415;
    color: #C9A98A;
    border-color: #6B4530;
}

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--ch-gray);
    white-space: nowrap;
}
.status-pill--out { background: var(--ch-blue); }
.status-pill--baking { background: var(--ch-orange); }
.status-pill--delivered, .status-pill--shipped, .status-pill--complete { background: var(--ch-green); }
.status-pill--pickup { background: #8E5FD1; }

.order-card__row {
    font-size: 13px;
    line-height: 1.5;
}
.order-card__row strong { color: var(--ch-brown); }
.order-card__row--muted { color: var(--ch-gray); font-size: 12px; }
body.kitchen-mode .order-card__row--muted { color: #C9A98A; }
/* Same purple as .status-pill--pickup, so "this is a pickup order" reads
   as one consistent color across the card rather than just this one row. */
.order-card__row--pickup { background: #F3EDFB; border-radius: 6px; padding: 4px 6px; margin: 2px -6px; }
.order-card__row--pickup .order-card__label { color: #8E5FD1; }
body.kitchen-mode .order-card__row--pickup { background: #3A2A52; }
body.kitchen-mode .order-card__row--pickup .order-card__label { color: #C9A8F0; }
.order-card__label {
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--ch-gray);
    letter-spacing: .03em;
    display: block;
    margin-bottom: 1px;
}

.order-card__items { border-top: 1px dashed var(--ch-border); padding-top: 8px; }
.item-line { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.item-line img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ch-border); }
.item-line__name { font-weight: 600; font-size: 13px; }
.item-line__meta { font-size: 12px; color: var(--ch-gray); }
.item-line__weight {
    display: inline-block;
    font-weight: 700;
    font-size: 11.5px;
    color: #fff;
    background: var(--ch-orange);
    border-radius: 20px;
    padding: 2px 9px;
    margin: 0 2px;
    vertical-align: middle;
}
.order-card__email {
    color: var(--ch-brown);
    text-decoration: underline;
    text-decoration-color: var(--ch-border);
}
.order-card__email:hover { text-decoration-color: var(--ch-orange); }
.customer-history-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ch-brown);
    text-decoration: underline;
    text-decoration-color: var(--ch-border);
    cursor: pointer;
}
.customer-history-link:hover, .customer-history-link:focus-visible { text-decoration-color: var(--ch-orange); }
.order-flag {
    margin-left: 4px;
    cursor: help;
    vertical-align: middle;
}
img.order-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--ch-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.order-flag--text {
    font-size: 14px;
}

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--ch-cream);
    border: 1px solid var(--ch-border);
    color: var(--ch-brown);
}
.tag--birthday { background: #FFE3EC; border-color: #F5A9C4; }
.tag--notes { background: #FFF3CF; border-color: #EAD27B; }

.order-card__comment-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.order-card__comment-row input[type=text] {
    flex: 1;
    border: 1px solid var(--ch-border);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12.5px;
}

.order-card__actions {
    border-top: 1px dashed var(--ch-border);
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.order-card__actions .action-btn { margin: 0; }

/* ---------------------------------------------------------------------
   Toasts (new order notifications)
   --------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    /* Follows the header's real height (see initHeaderHeightSync() in
       app.js) now that the header can wrap onto two rows - a fixed 80px
       only cleared the old single-row header by coincidence. */
    top: calc(var(--ch-header-h) + 12px);
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
}
.toast {
    background: var(--ch-orange-dark);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: var(--ch-shadow);
    font-size: 13.5px;
    animation: ch-toast-in .25s ease-out;
}
@keyframes ch-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------------
   Announcements - admin broadcast banner, bottom corner (see
   initAnnouncements() in app.js). Deliberately styled distinct from the
   toasts above: blue/official rather than orange, and never auto-dismisses
   on its own - it sits there until the staff member closes it themselves,
   since it's a message from a person, not a system confirmation.
   --------------------------------------------------------------------- */
.announcement-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 250;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: 340px;
    width: calc(100% - 32px);
}
.announcement-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* A light blue tint (not plain white) so the card reads as one solid
       "info" piece at a glance, matching the blue left border/meta text,
       rather than a white box that merely has a blue edge on it. */
    background: #E7F1FC;
    color: var(--ch-brown);
    border-left: 4px solid var(--ch-blue);
    padding: 12px 12px 12px 14px;
    border-radius: 10px;
    box-shadow: var(--ch-shadow);
    animation: ch-toast-in .25s ease-out;
}
.announcement-banner__icon { font-size: 18px; line-height: 1.3; }
.announcement-banner__body { flex: 1; min-width: 0; }
.announcement-banner__meta {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ch-blue);
    margin-bottom: 3px;
}
.announcement-banner__message {
    font-size: 13.5px;
    line-height: 1.4;
    word-wrap: break-word;
}
.announcement-banner__close {
    background: none;
    border: none;
    color: var(--ch-gray);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
.announcement-banner__close:hover { color: var(--ch-brown); }
body.kitchen-mode .announcement-banner {
    font-size: 17px;
    padding: 16px 16px 16px 18px;
}
body.kitchen-mode .announcement-banner__message { font-size: 16px; }
body.kitchen-mode .announcement-banner__close { font-size: 22px; }

/* ---------------------------------------------------------------------
   Kitchen Mode - large fonts, high contrast, tablet friendly
   --------------------------------------------------------------------- */
body.kitchen-mode {
    background: #1B1208;
    color: #FFF4EA;
    font-size: 19px;
}
body.kitchen-mode .app-header,
body.kitchen-mode .tabs,
body.kitchen-mode .filter-bar {
    background: #2A1B0E;
    color: #FFF4EA;
    border-color: #4B2C20;
}
body.kitchen-mode .app-header h1 { color: var(--ch-orange); }
body.kitchen-mode .tab { color: #FFF4EA; }
body.kitchen-mode .tab--active { color: var(--ch-orange); border-bottom-color: var(--ch-orange); }
body.kitchen-mode .summary-card {
    background: #2A1B0E;
    color: #FFF4EA;
}
body.kitchen-mode .summary-card__value { font-size: 34px; }
body.kitchen-mode .order-card {
    background: #2A1B0E;
    border-color: #4B2C20;
    color: #FFF4EA;
    font-size: 18px;
}
body.kitchen-mode .order-card__id { font-size: 22px; }
body.kitchen-mode .action-btn { font-size: 16px; padding: 12px 18px; }
body.kitchen-mode .order-list { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
body.kitchen-mode .view-heading { color: var(--ch-orange); font-size: 20px; }
body.kitchen-mode .filter-select, body.kitchen-mode #orderSearch { font-size: 16px; padding: 10px 16px; }
/* High-contrast overrides: the default label/strong colors are brown-on-white
   and become hard to read on Kitchen Mode's dark background. */
body.kitchen-mode .order-card__row strong,
body.kitchen-mode .item-line__name { color: #FFE4C8; }
body.kitchen-mode .order-card__label,
body.kitchen-mode .order-card__shop,
body.kitchen-mode .item-line__meta,
body.kitchen-mode .last-updated { color: #C9A98A; }
body.kitchen-mode .order-card__row,
body.kitchen-mode .order-card__items { color: #FFF4EA; }
body.kitchen-mode .tag { background: #4B2C20; border-color: #6B4530; color: #FFF4EA; }
body.kitchen-mode .order-card__comment-row input[type=text] { background: #1B1208; color: #FFF4EA; border-color: #6B4530; }
body.kitchen-mode .order-card__email { color: #FFE4C8; text-decoration-color: #6B4530; }
body.kitchen-mode .customer-history-link { color: #FFE4C8; text-decoration-color: #6B4530; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
    .app-header__subtitle { display: none; }
    .order-list { grid-template-columns: 1fr; }
    .filter-bar { gap: 10px; }
    .summary-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) and (max-width: 1300px) {
    /* tablet / kitchen display */
    .order-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ---------------------------------------------------------------------
   Printing a single order ticket (see printOrderCard() in app.js) - only
   the card flagged .order-card--printing is shown, enlarged and stripped
   of anything interactive, everything else on the page is hidden.
   --------------------------------------------------------------------- */
@media print {
    html, body { background: #fff !important; }
    body * { visibility: hidden; }
    .order-card--printing, .order-card--printing * { visibility: visible; }
    .order-card--printing {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none;
        border: none;
        padding: 24px;
        font-size: 15px;
    }
    .order-card--printing .order-card__id { font-size: 24px; }
    .order-card--printing .order-card__actions,
    .order-card--printing .order-card__comment-row,
    .order-card--printing .order-card__row--assign-shop,
    .order-card--printing .icon-btn,
    .order-card--printing .urgency-badge,
    .order-card--printing .whatsapp-link { display: none !important; }
}

/* ---------------------------------------------------------------------
   Printing every currently-visible order at once ("Print Visible" in the
   header - see printVisibleOrders() in app.js). Unlike the single-ticket
   print above, cards stay in normal document flow (not absolutely
   positioned) and each gets its own page via page-break-after, so this
   scales to any number of orders. A card already hidden by the current
   filters (search/status/slot) is skipped automatically - [hidden] means
   display:none regardless of print mode, nothing extra needed for that.
   --------------------------------------------------------------------- */
@media print {
    body.printing-visible-orders .app-header,
    body.printing-visible-orders .tabs,
    body.printing-visible-orders .shop-breakdown,
    body.printing-visible-orders .filter-bar,
    body.printing-visible-orders .summary-cards,
    body.printing-visible-orders .bulk-bar,
    body.printing-visible-orders .fun-banner,
    body.printing-visible-orders .connection-banner,
    body.printing-visible-orders .view-heading,
    body.printing-visible-orders .no-orders,
    body.printing-visible-orders .confetti-layer { display: none !important; }

    body.printing-visible-orders html,
    body.printing-visible-orders { background: #fff !important; }

    /* The single-card print mode above (.order-card--printing) sets
       `body * { visibility: hidden; }` unconditionally for every print job,
       then only reveals the one flagged card. Print Visible doesn't flag
       individual cards, so without this override every order in the list
       stays invisible - the page prints, but blank - even though `display`
       and page-break rules below are all correct. Same fix already used
       for the Bake List print view below. */
    body.printing-visible-orders .order-list,
    body.printing-visible-orders .order-list * {
        visibility: visible;
    }

    body.printing-visible-orders .order-list {
        display: block !important;
        padding: 0;
        margin: 0;
    }
    /* "Group by time slot" may be on when Print Visible is clicked - the
       printed ticket run doesn't need the section headings, and the group
       wrappers need to go back to plain block flow so every card still
       lands one-per-page in the same order they're shown on screen. */
    body.printing-visible-orders .slot-group,
    body.printing-visible-orders .slot-group__cards {
        display: block !important;
    }
    body.printing-visible-orders .slot-group__heading { display: none !important; }
    body.printing-visible-orders .order-card {
        box-shadow: none;
        border: none;
        border-bottom: 1px dashed #ccc;
        padding: 24px;
        font-size: 15px;
        page-break-after: always;
    }
    /* Skip the trailing page break only for the actual last ticket printed -
       ungrouped, that's the last card directly in the list; grouped, it's
       the last card of the last (non-empty) slot section. Scoping both
       selectors this way avoids every group's own last card wrongly
       sharing a page with the next group's first card. */
    body.printing-visible-orders .order-list > .order-card:last-child { page-break-after: auto; }
    body.printing-visible-orders .slot-group:last-child .order-card:last-child { page-break-after: auto; }
    body.printing-visible-orders .order-card__id { font-size: 24px; }
    body.printing-visible-orders .order-card__select,
    body.printing-visible-orders .order-card__actions,
    body.printing-visible-orders .order-card__comment-row,
    body.printing-visible-orders .order-card__row--assign-shop,
    body.printing-visible-orders .icon-btn,
    body.printing-visible-orders .urgency-badge,
    body.printing-visible-orders .whatsapp-link { display: none !important; }
}

/* ---------------------------------------------------------------------
   Fun extras: confetti (checkAllClearCelebration) and the rotating
   footer line (startFunFooter). Purely decorative - no layout impact.
   --------------------------------------------------------------------- */
.confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 999;
}
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 9px;
    height: 14px;
    opacity: 0.9;
    border-radius: 2px;
    animation-name: ch-confetti-fall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes ch-confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}

/* One-time per-click celebration on the specific order card whose status
   button just succeeded - see playCardCelebration() in app.js. Positioned
   absolutely inside the same fixed, full-viewport .confetti-layer, so its
   top/left are plain viewport pixel coordinates from getBoundingClientRect(),
   not relative to the card itself. */
.card-celebration {
    position: absolute;
    font-size: 26px;
    line-height: 1;
    pointer-events: none;
    will-change: transform, opacity;
}
.card-celebration--fly {
    animation: ch-card-fly 1.1s ease-in-out forwards;
}
@keyframes ch-card-fly {
    0% { transform: translateX(0) scale(0.85); opacity: 0; }
    12% { opacity: 1; transform: translateX(0) scale(1.05); }
    88% { opacity: 1; }
    100% { transform: translateX(var(--ch-fly-distance, 80px)) scale(1); opacity: 0; }
}
.card-celebration--pop {
    animation: ch-card-pop 0.9s ease-out forwards;
}
@keyframes ch-card-pop {
    0% { transform: scale(0.4) translateY(6px); opacity: 0; }
    35% { transform: scale(1.3) translateY(-4px); opacity: 1; }
    60% { transform: scale(1) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(-10px); opacity: 0; }
}

.fun-banner {
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ch-orange-dark);
    background: var(--ch-cream);
    border-bottom: 1px solid var(--ch-border);
    padding: 5px 16px;
}
body.kitchen-mode .fun-banner {
    color: #FFE4C8;
    background: #3A2115;
    border-bottom-color: #6B4530;
}
@media print {
    .fun-banner, .confetti-layer { display: none !important; }
}

/* ---------------------------------------------------------------------
   Undo toast (status-change buttons wait UNDO_WINDOW_MS before actually
   calling the server - see showUndoToast() in app.js)
   --------------------------------------------------------------------- */
.toast--undo {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    padding-bottom: 15px;
}
.toast__message { flex: 1; }
.toast__undo-btn {
    background: #fff;
    color: var(--ch-orange-dark);
    border: none;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.toast__undo-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.65);
    transition: width linear;
}

/* ---------------------------------------------------------------------
   Bulk-select action bar
   --------------------------------------------------------------------- */
/* Both .bulk-bar and .modal-overlay set an unconditional `display`, which
   (same author-stylesheet specificity as the browser's default
   `[hidden]{display:none}` rule) would otherwise win and show them even
   while `hidden` is set - same fix as .order-card[hidden] above. */
.bulk-bar[hidden] { display: none; }
.modal-overlay[hidden] { display: none; }

.bulk-bar {
    position: sticky;
    top: calc(var(--ch-header-h) + var(--ch-tabs-h) + 58px);
    z-index: 45;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: var(--ch-orange-dark);
    color: #fff;
    padding: 10px 16px;
    margin: 0 16px 10px;
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
}
.bulk-bar__count { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.bulk-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-bar .action-btn { padding: 7px 14px; font-size: 12.5px; }
.bulk-bar__shop-select {
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.bulk-bar__shop-select option { color: #1a1a1a; }
.bulk-bar .btn-ghost { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5); color: #fff; }

/* ---------------------------------------------------------------------
   Bake List modal
   --------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 26, 14, 0.55);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal {
    background: #fff;
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ch-border);
}
.modal__header h2 { font-size: 17px; color: var(--ch-orange-dark); }
.modal__body { padding: 16px 20px; overflow-y: auto; }
.modal__subtitle { font-size: 12.5px; color: var(--ch-gray); margin-bottom: 10px; }
.modal__footer { padding: 12px 20px; border-top: 1px solid var(--ch-border); text-align: right; }
.bake-list__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bake-list__table th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ch-gray);
    padding: 6px 8px;
    border-bottom: 2px solid var(--ch-border);
}
.bake-list__table td { padding: 8px; border-bottom: 1px solid var(--ch-border); vertical-align: top; }
.bake-list__qty { font-weight: 700; color: var(--ch-orange-dark); }
.bake-list__shops { color: var(--ch-gray); font-size: 12px; }
body.kitchen-mode .modal { background: #2A1B0E; color: #FFF4EA; }
body.kitchen-mode .modal__header,
body.kitchen-mode .modal__footer { border-color: #6B4530; }
body.kitchen-mode .bake-list__table th,
body.kitchen-mode .bake-list__table td { border-color: #6B4530; }
body.kitchen-mode .bake-list__shops { color: #C9A98A; }

@media print {
    .bulk-bar, .modal-overlay .modal__footer, #bakeListClose { display: none !important; }
    body.printing-bake-list .app-header,
    body.printing-bake-list .tabs,
    body.printing-bake-list .shop-breakdown,
    body.printing-bake-list .filter-bar,
    body.printing-bake-list .summary-cards,
    body.printing-bake-list .content,
    body.printing-bake-list .fun-banner,
    body.printing-bake-list .connection-banner { display: none !important; }
    body.printing-bake-list .modal-overlay,
    body.printing-bake-list .modal-overlay * {
        visibility: visible;
    }
    body.printing-bake-list .modal-overlay {
        position: static;
        background: none;
        padding: 0;
    }
    body.printing-bake-list .modal {
        box-shadow: none;
        max-width: 100%;
        max-height: none;
    }
}

/* =========================================================================
   Login page (login.php)
   ========================================================================= */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    background: var(--ch-white);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    border: 1px solid var(--ch-border);
    padding: 32px 28px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}
.login-card__logo { height: 52px; margin: 0 auto 4px; display: block; }
.login-card h1 { font-size: 20px; margin: 0; color: var(--ch-brown); }
.login-card__hint { margin: 0; font-size: 13px; color: var(--ch-gray); line-height: 1.4; }
.login-card__error {
    background: #FDECEC;
    color: var(--ch-red);
    border: 1px solid #F4C7C7;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    text-align: left;
}
.login-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ch-brown);
    text-align: left;
}
.login-card input {
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--ch-border);
    font-family: inherit;
}
.login-card input:focus { outline: 2px solid var(--ch-orange); outline-offset: 1px; }
.login-card__submit { margin-top: 6px; padding: 11px 18px; font-size: 14px; }

/* =========================================================================
   Header user chip + employee-of-the-day banner + leaderboard/my-stats
   panels (index.php + assets/app.js)
   ========================================================================= */
.user-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ch-cream);
    border: 1px solid var(--ch-border);
    border-radius: 18px;
    padding: 4px 12px 4px 4px;
    font-size: 12px;
}
.user-chip__avatar {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--ch-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10.5px;
}
.user-chip__name { font-weight: 600; color: var(--ch-brown); }
.user-chip__role {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ch-gray);
}
.user-chip a { color: var(--ch-orange-dark); text-decoration: none; font-weight: 600; }
.user-chip a:hover { text-decoration: underline; }
.user-chip__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ch-orange-dark);
    font-weight: 600;
    cursor: pointer;
}
.user-chip__link:hover { text-decoration: underline; }

.employee-of-day {
    display: none;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #FFF4EA, #FFE7CE);
    border: 1px solid #F4D8B0;
    border-radius: var(--ch-radius);
    padding: 7px 14px;
    margin: 8px 16px 0;
    font-size: 12px;
    color: var(--ch-brown);
}
.employee-of-day.is-visible { display: flex; }
.employee-of-day__trophy { font-size: 17px; }
.employee-of-day__name { font-weight: 700; }

.leaderboard-panel { min-width: 320px; max-width: 420px; }
.leaderboard-panel__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.leaderboard-panel__tabs button {
    flex: 1;
    border: 1px solid var(--ch-border);
    background: var(--ch-cream);
    color: var(--ch-brown);
    border-radius: 8px;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.leaderboard-panel__tabs button.is-active {
    background: var(--ch-orange);
    color: #fff;
    border-color: var(--ch-orange);
}
/* The Staff/Shops view toggle and the Points/On-Time % sort toggle sit
   underneath the main range tabs - same look, slightly smaller so the
   Today/Week/Month row above stays the visual anchor. */
.leaderboard-panel__tabs--sub {
    margin-bottom: 10px;
}
.leaderboard-panel__tabs--sub button {
    padding: 5px 0;
    font-size: 11px;
}
/* Same fix as .order-card[hidden]/.bulk-bar[hidden]/.modal-overlay[hidden]
   elsewhere in this file: .leaderboard-panel__tabs sets its own
   `display: flex` at the same specificity as the browser's built-in
   `[hidden] { display: none }` rule, which lets the flex rule win and the
   toggle stay visible even while [hidden] is set (e.g. the On-Time %
   sort toggle when the Shops view is active). */
.leaderboard-panel__tabs--sub[hidden] { display: none; }
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid var(--ch-border);
    font-size: 13px;
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row__rank {
    width: 22px;
    text-align: center;
    font-weight: 700;
    color: var(--ch-gray);
}
.leaderboard-row--1 .leaderboard-row__rank { color: #D4A017; }
.leaderboard-row--2 .leaderboard-row__rank { color: #9AA0A6; }
.leaderboard-row--3 .leaderboard-row__rank { color: #B4713A; }
.leaderboard-row__name { flex: 1; font-weight: 600; color: var(--ch-brown); }
.leaderboard-row__meta { font-size: 11px; color: var(--ch-gray); }
.leaderboard-row__points { font-weight: 700; color: var(--ch-orange-dark); }
.leaderboard-empty { padding: 18px 6px; text-align: center; color: var(--ch-gray); font-size: 13px; }

/* Employee of the Month spotlight card - shown above the ranked list on
   the leaderboard's "This Month" tab only (see renderEmployeeOfMonthCard
   in app.js). */
.employee-of-month-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FFF6E5, #FFE7B8);
    border: 1px solid #EFCB7A;
    border-radius: var(--ch-radius);
    padding: 14px;
    margin-bottom: 14px;
}
.employee-of-month-card__crown { font-size: 30px; line-height: 1; }
.employee-of-month-card__body { flex: 1; min-width: 0; }
.employee-of-month-card__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9A7217;
}
.employee-of-month-card__name { font-size: 16px; font-weight: 700; color: var(--ch-brown); }
.employee-of-month-card__meta { font-size: 12px; color: var(--ch-gray); }
.btn-whatsapp {
    display: inline-block;
    flex-shrink: 0;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}
.btn-whatsapp:hover { background: #1DA851; }

.my-stats-chip {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--ch-orange-dark);
    font-weight: 600;
    padding: 6px 10px;
}
.my-stats-panel { min-width: 260px; }
.my-stats-panel__rank {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ch-cream);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.my-stats-panel__rank-emoji { font-size: 26px; line-height: 1; }
.my-stats-panel__rank-text { display: flex; flex-direction: column; }
.my-stats-panel__rank-label { font-weight: 700; color: var(--ch-orange-dark); font-size: 14px; }
.my-stats-panel__rank-sub { font-size: 11px; color: var(--ch-gray); }
body.kitchen-mode .my-stats-panel__rank { background: #3A2717; }
.my-stats-panel__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--ch-border);
    font-size: 13px;
}
.my-stats-panel__row:last-child { border-bottom: none; }
.my-stats-panel__label { color: var(--ch-gray); }
.my-stats-panel__value { font-weight: 700; color: var(--ch-brown); }

.my-stats-panel__section-title {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ch-gray);
}

/* Badge grid inside My Stats - earned badges are full color, locked ones
   dimmed so there's always a next one to aim for (see renderBadgesGrid()
   in app.js). */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--ch-cream);
    border: 1px solid var(--ch-border);
    text-align: center;
}
.badge-tile__emoji { font-size: 22px; }
.badge-tile__label { font-size: 10px; font-weight: 600; color: var(--ch-brown); line-height: 1.2; }
.badge-tile--locked { opacity: .35; filter: grayscale(1); }

.recent-kudos { display: flex; flex-direction: column; gap: 8px; }
.recent-kudos__item {
    background: var(--ch-cream);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
}
.recent-kudos__message { display: block; color: var(--ch-brown); }
.recent-kudos__from { display: block; margin-top: 2px; color: var(--ch-gray); font-size: 11px; }

/* Owner Insights modal */
.insights-panel { min-width: 320px; max-width: 640px; }
.insights-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.insights-headline__stat {
    flex: 1 1 130px;
    background: var(--ch-cream);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.insights-headline__value { display: block; font-size: 18px; font-weight: 700; color: var(--ch-orange-dark); }
.insights-headline__label { display: block; font-size: 11px; color: var(--ch-gray); margin-top: 2px; }
.insights-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.insights-bar-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.insights-bar-row__label { color: var(--ch-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-bar-row__track { background: var(--ch-border); border-radius: 6px; height: 10px; overflow: hidden; }
.insights-bar-row__fill { background: var(--ch-orange); height: 100%; border-radius: 6px; }
.insights-bar-row__value { white-space: nowrap; color: var(--ch-brown); font-weight: 600; }
body.kitchen-mode .insights-headline__stat { background: #3A2717; }
body.kitchen-mode .insights-bar-row__track { background: #6B4530; }

/* Give Kudos modal */
.kudos-panel { min-width: 300px; max-width: 380px; }
.kudos-panel .modal__body { display: flex; flex-direction: column; gap: 6px; }
.kudos-panel label { font-size: 12px; font-weight: 600; color: var(--ch-gray); margin-top: 8px; }
.kudos-panel select,
.kudos-panel textarea,
.kudos-panel input {
    width: 100%;
    border: 1px solid var(--ch-border);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
    resize: vertical;
}
.kudos-panel__context {
    margin: 0;
    font-size: 12px;
    color: var(--ch-gray);
    background: var(--ch-cream);
    border-radius: 8px;
    padding: 6px 10px;
}
.kudos-panel__error {
    font-size: 12px;
    color: #B3261E;
    background: #FDECEA;
    border-radius: 8px;
    padding: 6px 10px;
}
/* "Send anonymously" checkbox - overrides the generic .kudos-panel input
   rule above (width:100%/border/padding), which is meant for the text
   inputs/textarea, not a checkbox. */
.kudos-panel__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ch-brown);
    margin-top: 2px;
    cursor: pointer;
}
.kudos-panel__checkbox-label input[type="checkbox"] {
    width: auto;
    border: none;
    padding: 0;
    box-sizing: content-box;
    accent-color: var(--ch-orange);
    cursor: pointer;
}

/* =========================================================================
   Manage Users page (users.php)
   ========================================================================= */
.users-page {
    max-width: 780px;
    margin: 24px auto;
    padding: 0 16px 40px;
}
.users-page h1 { color: var(--ch-brown); }
.users-page__back { font-size: 13px; color: var(--ch-orange-dark); text-decoration: none; font-weight: 600; }
.users-card {
    background: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius);
    box-shadow: var(--ch-shadow);
    padding: 20px;
    margin-top: 16px;
}
.users-card h2 { margin-top: 0; font-size: 15px; color: var(--ch-brown); }
.users-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.users-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ch-brown); }
.users-form input, .users-form select {
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--ch-border);
    font-family: inherit;
}
.users-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.users-table th, .users-table td {
    text-align: left;
    padding: 9px 8px;
    border-bottom: 1px solid var(--ch-border);
    font-size: 13px;
}
.users-table th { color: var(--ch-gray); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.users-table tr.is-inactive { opacity: .5; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.pill--admin { background: #FFE7CE; color: var(--ch-orange-dark); }
.pill--staff { background: #EAF2FC; color: var(--ch-blue); }
.pill--inactive { background: #F0DCC9; color: var(--ch-gray); }
.users-page__notice {
    background: #E9F7EF;
    color: var(--ch-green);
    border: 1px solid #C6EAD4;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 12px;
}
.users-page__error {
    background: #FDECEC;
    color: var(--ch-red);
    border: 1px solid #F4C7C7;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 12px;
}

/* ---------------------------------------------------------------------
   Raise Hand - order-card icon (icon-btn--help-active) and the shared
   "N orders need help" badge in the stats strip (see toggleRaiseHand()/
   renderHelpBadge() in app.js). Both pulse in the same red so a flagged
   order is impossible to miss at a glance, whether you're looking at the
   card itself or just the header.
   --------------------------------------------------------------------- */
.icon-btn--help-active {
    background: var(--ch-red);
    border-color: var(--ch-red);
    color: #fff;
    animation: ch-help-pulse 1.6s ease-in-out infinite;
}
.icon-btn--help-active:hover { color: #fff; border-color: var(--ch-red); }
@keyframes ch-help-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, .45); }
    50% { box-shadow: 0 0 0 5px rgba(214, 69, 69, 0); }
}
.help-badge {
    color: #fff;
    background: var(--ch-red);
    border-color: var(--ch-red);
    cursor: pointer;
    font: inherit;
    animation: ch-help-pulse 1.6s ease-in-out infinite;
}
.help-badge:hover { opacity: .9; }
body.kitchen-mode .help-badge { background: #B3352E; border-color: #FF7A6E; color: #FFE4E0; }

/* Overdue-order alert badge - same pill shape/pulse as .help-badge, just a
   distinct color so it reads as its own thing (a slot that's been missed,
   not a co-worker asking for help) at a glance. */
.overdue-alert-badge {
    color: #fff;
    background: var(--ch-orange-dark);
    border-color: var(--ch-orange-dark);
    cursor: pointer;
    font: inherit;
    animation: ch-help-pulse 1.6s ease-in-out infinite;
}
.overdue-alert-badge:hover { opacity: .9; }
body.kitchen-mode .overdue-alert-badge { background: #B3352E; border-color: #FF7A6E; color: #FFE4E0; }

/* "Not assigned to a shop" badge - same pill/pulse as the two above, but a
   distinct blue so it reads as its own kind of alert (a routing gap, not a
   missed time window or a co-worker asking for help). */
.unassigned-shop-badge {
    color: #fff;
    background: var(--ch-blue);
    border-color: var(--ch-blue);
    cursor: pointer;
    font: inherit;
    animation: ch-help-pulse 1.6s ease-in-out infinite;
}
.unassigned-shop-badge:hover { opacity: .9; }
body.kitchen-mode .unassigned-shop-badge { background: #1F5FA8; border-color: #6FB3FF; color: #E4F1FF; }

/* Past-orders-still-pending badge - same pill/pulse as the three above,
   a distinct plum so it reads as its own kind of alert (a backlog that's
   been sitting a while, not today's help/overdue/routing issues). This
   one is view-independent - see cakehut_past_pending_orders() - so it can
   be showing while every order visible on screen right now looks fine. */
.past-pending-badge {
    color: #fff;
    background: #7B4FA0;
    border-color: #7B4FA0;
    cursor: pointer;
    font: inherit;
    animation: ch-help-pulse 1.6s ease-in-out infinite;
}
.past-pending-badge:hover { opacity: .9; }
body.kitchen-mode .past-pending-badge { background: #5E3A80; border-color: #C9A3EC; color: #F3E8FF; }
.overdue-alert-mute {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--ch-gray);
}

/* "Needs a Hand" modal - the badge's dropdown list of every currently-open
   request, mirroring .leaderboard-row's layout. */
.help-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid var(--ch-border);
    font-size: 13px;
}
.help-request-row:last-child { border-bottom: none; }
.help-request-row__info { color: var(--ch-brown); }

/* ---------------------------------------------------------------------
   Announcement reactions - a quick 👍/❤️/😂 tap under the banner message
   (see renderAnnouncementReactions() in app.js). is-active marks whichever
   one (if any) this person picked, so it's obvious what tapping it again
   would undo.
   --------------------------------------------------------------------- */
.announcement-banner__reactions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.announcement-banner__reaction {
    border: 1px solid transparent;
    background: rgba(46, 127, 214, .08);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.announcement-banner__reaction:hover { background: rgba(46, 127, 214, .16); }
.announcement-banner__reaction.is-active {
    background: var(--ch-blue);
    border-color: var(--ch-blue);
}
.announcement-banner__reaction-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--ch-blue);
}
.announcement-banner__reaction.is-active .announcement-banner__reaction-count { color: #fff; }
body.kitchen-mode .announcement-banner__reaction { background: rgba(255, 255, 255, .1); }

/* "Past Announcements" history list (announcementHistoryModal /
   renderAnnouncementHistoryList() in app.js) - every logged-in staff
   member gets the last 5 messages with reaction counts, same as the live
   banner; an admin additionally sees .announcement-history__who lines
   naming exactly who reacted, which only render when the API actually
   included that detail (admins only - see cakehut_recent_announcements()). */
.announcement-history__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--ch-border);
}
.announcement-history__item:last-child { border-bottom: none; }
.announcement-history__meta {
    font-size: 11px;
    font-weight: 600;
    color: var(--ch-gray);
    margin-bottom: 3px;
}
.announcement-history__message {
    font-size: 13.5px;
    white-space: pre-wrap;
    margin-bottom: 6px;
}
.announcement-history__reactions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.announcement-history__reaction {
    background: rgba(46, 127, 214, .08);
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 12px;
}
.announcement-history__reactions--none {
    font-size: 11.5px;
    color: var(--ch-gray);
    font-style: italic;
}
.announcement-history__who {
    font-size: 11.5px;
    color: var(--ch-gray);
    margin-top: 4px;
}
.announcement-history__who span { margin-right: 3px; }
body.kitchen-mode .announcement-history__reaction { background: rgba(255, 255, 255, .1); }

/* Admin Activity Log list (activityLogModal / renderActivityLogBody() in
   app.js) - same simple stacked-rows shape as .announcement-history__item
   above, just meta line + one detail line instead of a message body. */
.activity-log__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--ch-border);
}
.activity-log__item:last-child { border-bottom: none; }
.activity-log__meta {
    font-size: 11px;
    font-weight: 600;
    color: var(--ch-gray);
    margin-bottom: 3px;
}
.activity-log__details {
    font-size: 13px;
}

/* Point Deductions report (negativePointsModal / renderNegativePointsBody()
   in app.js) - reuses .activity-log__item for each individual deduction,
   just grouped under a day heading with that day's running total. */
.negative-points__day {
    margin-bottom: 18px;
}
.negative-points__day:last-child {
    margin-bottom: 0;
}
.negative-points__day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--ch-border);
    font-weight: 800;
    font-size: 14px;
    color: var(--ch-brown);
}
.negative-points__day-total {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ch-red);
}
.negative-points__month-total {
    display: flex;
    justify-content: space-between;
    background: var(--ch-cream);
    border: 1px solid var(--ch-border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--ch-brown);
}
.negative-points__month-total strong { color: var(--ch-red); }

/* Shared "pick a past month" <select> - the Leaderboard modal's Month tab
   and the Deductions modal (populateMonthPicker() in app.js). Styled like
   the leaderboard tabs/pills above rather than a bare native dropdown, so
   it reads as part of the same control row instead of a stray form field. */
.month-picker {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid var(--ch-border);
    background: var(--ch-cream);
    color: var(--ch-brown);
    border-radius: 8px;
    padding: 7px 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Staff poll - the vote-here banner (same stacked container/visual shell
   as .announcement-banner, just tinted green instead of blue so the two
   are easy to tell apart at a glance) and the live-results bar chart it
   shares with the admin's manage-poll modal (see pollResultsHtml() in
   app.js).
   --------------------------------------------------------------------- */
.poll-banner {
    background: #EAF7EE;
    border-left-color: var(--ch-green);
}
.poll-banner .announcement-banner__meta { color: var(--ch-green); }
.poll-banner__body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.poll-banner__option-btn {
    border: 1px solid var(--ch-green);
    background: #fff;
    color: var(--ch-brown);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.poll-banner__option-btn:hover { background: var(--ch-green); color: #fff; }
.poll-banner__result { font-size: 12.5px; }
.poll-banner__result-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    color: var(--ch-brown);
}
.poll-banner__result--mine .poll-banner__result-label span:first-child::after {
    content: ' ✓';
    color: var(--ch-green);
    font-weight: 700;
}
.poll-banner__bar {
    background: var(--ch-cream);
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
}
.poll-banner__bar-fill {
    background: var(--ch-green);
    height: 100%;
    border-radius: 20px;
}
body.kitchen-mode .poll-banner { background: #16321F; }
body.kitchen-mode .poll-banner__option-btn { background: #2A1B0E; border-color: var(--ch-green); color: #FFF4EA; }
body.kitchen-mode .poll-banner__bar { background: #3A2717; }

/* Poll admin modal (#pollAdminModal) - reuses .kudos-panel's input styling
   for the question/option fields, this just adds the vertical gap between
   four bare <input>s that have no <label> of their own between them to
   pick up .kudos-panel label's margin-top. */
#pollAdminForm input + input { margin-top: 6px; }