/* =========================================================================
   PlayTime Manager — design system
   Mobile-first. Every breakpoint is min-width, so phones get the cheapest
   layout and larger screens progressively add columns.
   ========================================================================= */

:root {
    /* Surfaces */
    --bg: #080b12;
    --bg-soft: #0c1119;
    --surface: #111823;
    --surface-2: #161f2c;
    --surface-3: #1c2736;
    --border: #22304260;
    --border-strong: #2c3d52;

    /* Text */
    --text: #e8eef7;
    --text-muted: #93a2b8;
    --text-dim: #64748b;

    /* Brand + semantics */
    --brand: #22c55e;
    --brand-soft: #22c55e1f;
    --brand-strong: #16a34a;
    --info: #38bdf8;
    --info-soft: #38bdf81f;
    --warn: #f59e0b;
    --warn-soft: #f59e0b1f;
    --danger: #f43f5e;
    --danger-soft: #f43f5e1f;
    --violet: #a78bfa;

    /* Chart marks. Validated against the panel surface (#111823) for the dark
       lightness band, chroma floor, protan/deutan separation and 3:1 contrast
       — do not "brighten" these to match the UI accents above, which sit above
       the band and fail the check. The three categorical slots are assigned in
       this fixed order and never cycled. */
    --chart-1: #16a34a;   /* Naqd  */
    --chart-2: #0284c7;   /* Karta */
    --chart-3: #d97706;   /* Qarz  */
    --chart-bar: #22c55e; /* the single-series hue: length carries the value */
    --chart-track: #1c2736;
    --chart-axis: #64748b;

    /* Shape */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-full: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px #0006;
    --shadow-md: 0 8px 24px -12px #000c;
    --shadow-lg: 0 24px 60px -24px #000e;

    /* Rhythm */
    --gap: 14px;
    --pad-page: 16px;
    --topbar-h: 60px;
    --tabbar-h: 62px;

    --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, "Roboto Mono", monospace;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    color-scheme: dark;
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100dvh;
    background:
        radial-gradient(1100px 620px at 82% -12%, #16324a55, transparent 62%),
        radial-gradient(900px 520px at 6% 0%, #1c3b2a4d, transparent 58%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.015em;
}

p { margin: 0; }

a {
    color: inherit;
    text-decoration: none;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

::selection { background: var(--brand-soft); }

/* The `hidden` attribute must win over every layout rule below.
   Almost everything here sets `display` on a class (`.btn`, `.card-rows`,
   `.extras-list`…), and an author rule beats the UA's `[hidden]{display:none}`
   on specificity alone — so `element.hidden = true` silently did nothing and a
   dashboard with a full shelf still announced "0 ta tovar kam qoldiqda".
   One `!important` here instead of a per-class `[hidden]` patch each time,
   because the next component to gain a `display` rule would break again. */
[hidden] { display: none !important; }

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

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--brand);
    color: #04120a;
    border-radius: var(--r-sm);
    font-weight: 600;
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: calc(var(--safe-top) + 10px); }

/* --------------------------------------------------------------- topbar -- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(var(--topbar-h) + var(--safe-top));
    padding: var(--safe-top) var(--pad-page) 0;
    background: #0a0f18e0;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

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

.brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--brand), #0ea5e9);
    color: #041206;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 6px 18px -8px var(--brand);
}

.brand-text { min-width: 0; }

.brand-text strong {
    display: block;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.brand-text small {
    display: block;
    font-size: 10.5px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-spacer { flex: 1; }

.topbar-nav {
    display: none;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
}

.topbar-nav a {
    padding: 7px 15px;
    border-radius: var(--r-full);
    font-size: 13.5px;
    font-weight: 550;
    color: var(--text-muted);
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.topbar-nav a:hover { color: var(--text); background: var(--surface-2); }
.topbar-nav a.active { color: #04120a; background: var(--brand); }

/* Tenant switcher — global superadmin only, so it is never in an operator's
 * way. Sits with the clock in the topbar's right-hand cluster. */
.org-switch select {
    padding: 7px 12px;
    max-width: 190px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
}
.org-switch select:disabled { opacity: 0.6; }

.clock {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Connection state pill: the single source of truth for "is this live?" */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.live-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--text-dim);
    transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.live-pill[data-state="live"] { color: var(--brand); border-color: #22c55e40; }
.live-pill[data-state="live"] .live-dot {
    background: var(--brand);
    box-shadow: 0 0 0 0 #22c55e80;
    animation: pulse-ring 2.2s infinite;
}
.live-pill[data-state="connecting"] { color: var(--warn); border-color: #f59e0b40; }
.live-pill[data-state="connecting"] .live-dot { background: var(--warn); animation: blink 1s infinite; }
.live-pill[data-state="offline"] { color: var(--danger); border-color: #f43f5e40; }
.live-pill[data-state="offline"] .live-dot { background: var(--danger); }
.live-pill .live-text { display: none; }

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 #22c55e66; }
    70%  { box-shadow: 0 0 0 7px #22c55e00; }
    100% { box-shadow: 0 0 0 0 #22c55e00; }
}
@keyframes blink { 50% { opacity: 0.3; } }

.icon-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-button:hover { background: var(--surface-2); color: var(--text); }

/* ----------------------------------------------------------------- page -- */

.page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px var(--pad-page) calc(var(--tabbar-h) + var(--safe-bottom) + 26px);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.eyebrow {
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.page-head h1 {
    font-size: clamp(21px, 5vw, 30px);
}

.page-sub {
    color: var(--text-muted);
    font-size: 13.5px;
    margin-top: 4px;
}

section + section { margin-top: 20px; }

/* ------------------------------------------------------------ chip rail -- */

/* Horizontal scroller for category tabs; avoids wrapping on narrow phones. */
.chip-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-inline: calc(var(--pad-page) * -1);
    padding-inline: var(--pad-page);
    scroll-snap-type: x proximity;
}
.chip-rail::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 550;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: all 0.15s var(--ease);
    cursor: pointer;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.active {
    background: linear-gradient(140deg, var(--brand), var(--brand-strong));
    border-color: transparent;
    color: #04120a;
    font-weight: 650;
    box-shadow: 0 8px 20px -12px var(--brand);
}
.chip .chip-count {
    padding: 1px 7px;
    border-radius: var(--r-full);
    background: #ffffff14;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.chip.active .chip-count { background: #04120a26; }

/* ---------------------------------------------------------------- stats -- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}

.stat {
    position: relative;
    padding: 14px 15px;
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    overflow: hidden;
}

.stat::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent, var(--brand));
    opacity: 0.85;
}

.stat[data-accent="info"]  { --accent: var(--info); }
.stat[data-accent="warn"]  { --accent: var(--warn); }
.stat[data-accent="danger"]{ --accent: var(--danger); }

.stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.stat-value {
    margin-top: 6px;
    font-size: clamp(19px, 5vw, 26px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
    word-break: break-word;
}

.stat-value .unit {
    font-size: 0.5em;
    font-weight: 550;
    color: var(--text-dim);
    margin-left: 3px;
}

.stat-foot {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* ------------------------------------------------------------ unit card -- */

.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: var(--gap);
}

.unit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--r-xl);
    background: linear-gradient(165deg, var(--surface-2), var(--surface) 60%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.unit-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tone, var(--text-dim));
    opacity: 0.9;
}

.unit-card.status-active {
    --tone: var(--brand);
    border-color: #22c55e33;
    background:
        radial-gradient(420px 180px at 100% 0%, #22c55e14, transparent 70%),
        linear-gradient(165deg, var(--surface-2), var(--surface) 60%);
}
.unit-card.status-available { --tone: #3f5670; }
.unit-card.status-payment_pending { --tone: var(--warn); border-color: #f59e0b33; }
.unit-card.status-cleaning { --tone: var(--info); }
.unit-card.status-disabled { --tone: var(--danger); opacity: 0.7; }

@media (hover: hover) {
    .unit-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
}

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

.card-title {
    font-size: 16.5px;
    font-weight: 680;
    letter-spacing: -0.01em;
}

.card-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-dim);
}

.pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-full);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #ffffff0d;
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-active .pill { background: var(--brand-soft); color: var(--brand); border-color: #22c55e33; }
.status-payment_pending .pill { background: var(--warn-soft); color: var(--warn); border-color: #f59e0b33; }
.status-disabled .pill { background: var(--danger-soft); color: var(--danger); border-color: #f43f5e33; }

/* The timer is the thing operators read from across the room. */
.timer-block {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: #05080dbf;
    border: 1px solid var(--border);
}

.timer {
    font-family: var(--mono);
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    transition: color 0.25s var(--ease);
}

.status-active .timer { color: var(--brand); text-shadow: 0 0 26px #22c55e40; }

.timer-caption {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.card-rows {
    display: grid;
    gap: 7px;
    margin: 0;
}

.card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.card-row dt { color: var(--text-dim); }

.card-row dd {
    margin: 0;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.card-row.amount dd { color: var(--brand); font-size: 15px; }
.status-available .card-row.amount dd { color: var(--text-dim); }

/* Extra/add-on services attached to the running session (drinks, snacks...). */
.extras-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.extras-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    background: #ffffff08;
    font-size: 12.5px;
    color: var(--text-muted);
}

.extras-list .extra-info { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.extras-list .extra-name { font-weight: 600; color: var(--text); }
.extras-list .extra-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Kitchen fulfilment state — only shown while it isn't DELIVERED, since that
 * is indistinguishable from "no kitchen involved" and would just be noise. */
.extras-list .extra-status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--r-full);
    background: var(--warn-soft);
    color: var(--warn);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.extras-list .extra-buttons { display: flex; align-items: center; gap: 2px; flex: none; }

.extras-list [data-remove-extra],
.extras-list [data-deliver-extra] {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.extras-list [data-remove-extra]:hover { background: var(--danger-soft); color: var(--danger); }
.extras-list [data-deliver-extra] { background: var(--brand-soft); color: var(--brand); }
.extras-list [data-deliver-extra]:hover { background: var(--brand); color: #04120a; }

.extra-btn {
    width: 100%;
    min-height: 38px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 620;
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.extra-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.extra-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: auto;
    padding-top: 3px;
}

/* --------------------------------------------------------------- button -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px; /* comfortable touch target */
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-3);
    color: var(--text);
    font-size: 14px;
    font-weight: 620;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s var(--ease), filter 0.15s var(--ease), background 0.15s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) { transform: scale(0.975); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn-start {
    background: linear-gradient(140deg, var(--brand), var(--brand-strong));
    color: #04120a;
    box-shadow: 0 10px 24px -14px var(--brand);
}
.btn-start:hover:not(:disabled) { filter: brightness(1.08); }

.btn-stop {
    background: linear-gradient(140deg, #fb7185, var(--danger));
    color: #2b0410;
    box-shadow: 0 10px 24px -14px var(--danger);
}
.btn-stop:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-muted);
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn-soft { background: var(--surface-2); border-color: var(--border); }
.btn-soft:hover:not(:disabled) { background: var(--surface-3); }

.btn-danger-soft {
    background: var(--danger-soft);
    color: #fda4af;
    border-color: #f43f5e33;
}

.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

.btn.is-busy {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.btn.is-busy::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff55;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- panels -- */

.panel {
    padding: 16px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-head h2 {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-title h2 {
    font-size: 15.5px;
    font-weight: 650;
}

.count-badge {
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- form -- */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.field > span,
.field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="email"],
input:not([type]),
select,
textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg-soft);
    color: var(--text);
    font-size: 15px; /* >=16px avoids iOS zoom; 15 + max-zoom meta is fine */
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    appearance: none;
}

textarea { min-height: 84px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

input::placeholder, textarea::placeholder { color: #4a5a70; }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
    cursor: pointer;
}

select option { background: var(--surface-2); color: var(--text); }

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* WebKit draws its own dark-on-dark clear button inside a search field. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: var(--text-dim);
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--text); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 12px;
    align-items: end;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ---------------------------------------------------------------- modal -- */

dialog.sheet {
    width: min(460px, 100%);
    max-height: 92dvh;
    padding: 0;
    border: none;
    color: var(--text);
    background: transparent;
    overflow: visible;
}

dialog.sheet::backdrop {
    background: #03060bd0;
    backdrop-filter: blur(6px);
}

.sheet-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    padding-bottom: calc(20px + var(--safe-bottom));
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    max-height: 92dvh;
    overflow-y: auto;
}

.sheet-grip {
    display: none;
    width: 40px;
    height: 4px;
    margin: -6px auto 2px;
    border-radius: var(--r-full);
    background: var(--border-strong);
}

.sheet-title { font-size: 18px; }

.sheet-note {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--info-soft);
    border: 1px solid #38bdf826;
    color: #bae6fd;
    font-size: 12.5px;
    line-height: 1.45;
}

.sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 2px;
}

/* Payment method picker: big tap targets instead of a <select>. */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.choice {
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 12px 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg-soft);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s var(--ease);
}

.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-icon { font-size: 19px; }
.choice .choice-label { font-size: 12.5px; font-weight: 600; }

.choice:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
}
.choice:has(input[value="DEBT"]:checked) {
    border-color: var(--warn);
    background: var(--warn-soft);
    color: var(--warn);
}

/* ---------------------------------------------------------------- table -- */

.table-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    white-space: nowrap;
}

thead th {
    position: sticky;
    top: 0;
    padding: 12px 14px;
    background: var(--surface-2);
    text-align: left;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-strong);
}

tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #ffffff05; }
tbody td.strong { color: var(--text); font-weight: 600; }
tbody td.num { font-variant-numeric: tabular-nums; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.03em;
}
.badge-debt { background: var(--warn-soft); color: var(--warn); }
.badge-paid { background: var(--brand-soft); color: var(--brand); }
.badge-muted { background: #ffffff0d; color: var(--text-dim); }

/* Mobile history: cards instead of a squeezed table. */
.record-list { display: grid; gap: 10px; }

.record {
    padding: 13px 14px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
}

.record-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.record-title { font-size: 14.5px; font-weight: 650; }
.record-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    font-size: 12.5px;
}

.record-grid span { color: var(--text-dim); }
.record-grid b { font-weight: 620; font-variant-numeric: tabular-nums; }

.record-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------- leaderboard -- */

.leader-list { display: grid; gap: 8px; }

.leader-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.leader-rank {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--surface-3);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.leader-row:nth-child(1) .leader-rank { background: #f59e0b26; color: var(--warn); }
.leader-row:nth-child(2) .leader-rank { background: #94a3b826; color: #cbd5e1; }
.leader-row:nth-child(3) .leader-rank { background: #b4530926; color: #fdba74; }

.leader-body { flex: 1; min-width: 0; }
.leader-name {
    font-size: 13.5px;
    font-weight: 620;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leader-meta { font-size: 11.5px; color: var(--text-dim); }
.leader-amount {
    font-size: 13px;
    font-weight: 680;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ----------------------------------------------------------- empty/misc -- */

.empty {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 44px 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    text-align: center;
    color: var(--text-dim);
}

.empty-icon { font-size: 30px; opacity: 0.65; }
.empty strong { color: var(--text-muted); font-weight: 620; }
.empty p { font-size: 13px; max-width: 320px; }

/* ------------------------------------------------------- club chooser -- */

.choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--gap);
    margin-top: 18px;
}

.choose-card {
    display: grid;
    gap: 6px;
    padding: 20px 18px;
    text-align: left;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--surface-2), var(--surface));
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}

.choose-card:hover,
.choose-card:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.choose-card:active { transform: scale(0.99); }

.choose-name { font-size: 16px; font-weight: 700; }
.choose-meta { font-size: 12px; color: var(--text-dim); }

/* ---------------------------------------------------------- danger zone -- */

/* Fenced off visually because everything inside is irreversible, unlike the
   soft deletes the rest of the app uses. */
.danger-zone {
    margin-top: 14px;
    padding: 12px;
    border: 1px dashed var(--danger);
    border-radius: var(--r-md);
    background: var(--danger-soft);
}

.danger-zone-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--danger);
    margin-bottom: 6px;
}

/* --------------------------------------------------------------- sales -- */

/* Counter-sale catalog: a tap target per service, sized so a tablet at the bar
   can be worked with a thumb — the same 44px-ish rhythm .btn uses. */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 10px;
}

.service-tile {
    display: grid;
    gap: 3px;
    padding: 12px;
    min-height: 76px;
    text-align: left;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg-soft);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}

.service-tile:hover,
.service-tile:focus-visible {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.service-tile:active { transform: scale(0.98); }

/* The tile is the submit action here, so it needs the same in-flight lockout
   .btn gets — without it an impatient double tap bills the drink twice. */
.service-tile.is-busy {
    pointer-events: none;
    opacity: 0.55;
    border-color: var(--brand);
}

.service-name { font-size: 13.5px; font-weight: 650; }
.service-price { font-size: 13px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.service-meta { font-size: 11px; color: var(--text-dim); }

/* An add-on running out is worth seeing *before* it is sold, so the stock line
   on the tile carries the warning rather than a separate badge. */
.service-meta[data-low="1"] { color: var(--warn); font-weight: 650; }

/* Quantity first, then one tap on a service tile adds it — so the stepper has
   to be thumb-sized on the tablet at the bar, not a spinner in a text field. */
.qty-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg-soft);
}

.qty-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: auto;
}

.qty-btn {
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.qty-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.qty-btn:active:not(:disabled) { transform: scale(0.94); }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qty-value {
    min-width: 2.2em;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- kitchen -- */

.kitchen-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--gap);
    align-items: start;
}

.kitchen-column {
    padding: 14px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
}

.kitchen-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.kitchen-column-head h2 { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }

.kitchen-cards { display: grid; gap: 10px; min-height: 40px; }

.kitchen-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.kitchen-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.kitchen-card-title { font-size: 13.5px; font-weight: 620; color: var(--text); }
.kitchen-card-wait {
    flex: none;
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.kitchen-card-meta { font-size: 12px; color: var(--text-muted); }

.kitchen-card .btn { margin-top: 4px; }

.alert {
    padding: 11px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    border: 1px solid transparent;
}
.alert-error { background: var(--danger-soft); border-color: #f43f5e33; color: #fda4af; }
.alert-info { background: var(--info-soft); border-color: #38bdf833; color: #bae6fd; }
.alert-success { background: var(--brand-soft); border-color: #22c55e33; color: #86efac; }

.code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    border-radius: var(--r-md);
    background: var(--bg-soft);
    border: 1px dashed var(--border-strong);
    font-family: var(--mono);
    font-size: 17px;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.strong { color: var(--text); font-weight: 600; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.stack { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* --------------------------------------------------------------- tabbar -- */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding-bottom: var(--safe-bottom);
    background: #0a0f18f2;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--border);
}

.tab {
    display: grid;
    place-items: center;
    gap: 3px;
    height: var(--tabbar-h);
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.tab svg { width: 21px; height: 21px; stroke-width: 1.9; }
.tab.active { color: var(--brand); }
.tab:active { color: var(--text); }

/* ---------------------------------------------------------------- toast -- */

.toast-host {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px);
    z-index: 120;
    display: grid;
    gap: 8px;
    width: min(420px, calc(100vw - 24px));
    transform: translateX(-50%);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--r-md);
    background: #131c28f5;
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    font-size: 13.5px;
    animation: toast-in 0.24s var(--ease);
}

.toast.leaving { animation: toast-out 0.2s var(--ease) forwards; }
.toast-icon { flex: none; font-size: 15px; }
.toast.error { border-color: #f43f5e4d; }
.toast.error .toast-icon { color: var(--danger); }
.toast.success .toast-icon { color: var(--brand); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* ---------------------------------------------------------------- login -- */

.auth-shell {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 24px 18px calc(24px + var(--safe-bottom));
}

.auth-card {
    width: min(400px, 100%);
    display: grid;
    gap: 16px;
    padding: 28px 24px;
    border-radius: var(--r-xl);
    background: linear-gradient(165deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
}

.auth-brand { display: grid; justify-items: center; gap: 10px; text-align: center; }
.auth-brand .brand-mark { width: 52px; height: 52px; border-radius: 16px; font-size: 24px; }
.auth-brand h1 { font-size: 22px; letter-spacing: 0.1em; }
.auth-brand p { font-size: 13px; color: var(--text-dim); }

/* ------------------------------------------------------------- miniapp -- */

/* Inside Telegram the client already draws a header, so ours is redundant. */
body.is-miniapp .topbar { display: none; }
body.is-miniapp .page { padding-top: calc(var(--safe-top) + 12px); }
body.is-miniapp .miniapp-bar { display: flex; }

.miniapp-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------- breakpoints -- */

@media (min-width: 480px) {
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sheet-actions { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 700px) {
    :root { --pad-page: 22px; --gap: 16px; }
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .live-pill .live-text { display: inline; }
    .clock { display: inline-flex; }
    .record-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    :root { --pad-page: 28px; --topbar-h: 66px; }
    .topbar-nav { display: flex; }
    .tabbar { display: none; }
    .page { padding-bottom: 42px; }
    .toast-host { bottom: 22px; }
    .dashboard-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 20px;
        align-items: start;
    }
    .dashboard-columns > aside { position: sticky; top: calc(var(--topbar-h) + 18px); }
}

@media (min-width: 1280px) {
    .unit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}

/* Phone-sized viewports get a true bottom sheet. */
@media (max-width: 599px) {
    dialog.sheet {
        width: 100%;
        max-width: none;
        margin: auto auto 0;
        animation: sheet-up 0.26s var(--ease);
    }
    .sheet-body {
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        border-bottom: none;
    }
    .sheet-grip { display: block; }
    @keyframes sheet-up { from { transform: translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .topbar, .tabbar, .toast-host, .card-actions, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .table-card, table, thead th, tbody td { background: #fff !important; color: #000 !important; }
}

/* Table vs. card list: exactly one of the two history layouts is ever shown. */
[data-mobile-only] { display: grid; }
[data-desktop-only] { display: none; }

@media (min-width: 900px) {
    [data-mobile-only] { display: none; }
    [data-desktop-only] { display: block; }
}


/* ======================================================================= */
/* Analytics                                                               */
/* ======================================================================= */

.analytics-columns { display: grid; gap: var(--gap); margin-top: 20px; }

.chart-panel { display: grid; gap: 14px; align-content: start; }
.chart-panel .panel-head { margin-bottom: 0; }

.chart-empty {
    padding: 22px 4px;
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
}

.filter-bar .chip-rail { margin: 0; }
.filter-bar .chip { font: inherit; cursor: pointer; }

/* Sort switch: a segmented control that posts the page's own filters back. */
.seg-control {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-full);
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.seg-control button {
    flex: 1;
    min-width: 92px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.seg-control button:hover { color: var(--text); }
.seg-control button.active { background: var(--surface-2); color: var(--text); }

/* ------------------------------------------------------------ rank list -- */

.rank-list { display: grid; gap: 12px; list-style: none; }

.rank-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
}

.rank-index {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rank-row:nth-child(1) .rank-index { background: #f59e0b26; color: var(--warn); }
.rank-row:nth-child(2) .rank-index { background: #94a3b826; color: #cbd5e1; }
.rank-row:nth-child(3) .rank-index { background: #b4530926; color: #fdba74; }

.rank-body { min-width: 0; display: grid; gap: 4px; }

.rank-name {
    font-size: 13.5px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-meta {
    font-size: 11.5px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Thin mark, 4px rounded data-end, square where it meets the baseline. */
.rank-track {
    height: 8px;
    margin-top: 2px;
    border-radius: 0 4px 4px 0;
    background: var(--chart-track);
    overflow: hidden;
}

.rank-fill {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--chart-bar);
}

/* Values wear text tokens, never the mark's colour. */
.rank-value {
    text-align: right;
    font-size: 13.5px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rank-value small {
    display: block;
    margin-top: 1px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-dim);
}

/* ---------------------------------------------------------- column chart -- */

.col-chart { display: grid; gap: 6px; }

.col-plot {
    display: flex;
    align-items: flex-end;
    gap: 2px;                      /* the surface gap between adjacent marks */
    height: 156px;
    padding-top: 18px;             /* headroom for the peak's direct label */
    border-bottom: 1px solid var(--border);
}

.col-plot-sm { height: 112px; }

.col {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 24px;               /* cap the mark; the slot's leftover is air */
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-inline: auto;
}

.col-fill {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;    /* rounded data-end, square at the baseline */
    background: var(--chart-track);
}

.col.is-peak .col-fill { background: var(--chart-bar); }
.col:not(.is-peak) .col-fill { background: color-mix(in oklab, var(--chart-bar) 55%, var(--chart-track)); }

.col-cap {
    position: absolute;
    bottom: 100%;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 650;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.col-axis {
    display: flex;
    gap: 2px;
    font-size: 10px;
    color: var(--chart-axis);
    font-variant-numeric: tabular-nums;
}

.col-tick {
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

/* ------------------------------------------------------------ payment mix -- */

.mix-bar {
    display: flex;
    gap: 2px;                      /* surface gap, not a stroke */
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--chart-track);
}

.mix-seg { display: block; min-width: 4px; }
.mix-seg[data-method="CASH"] { background: var(--chart-1); }
.mix-seg[data-method="CARD"] { background: var(--chart-2); }
.mix-seg[data-method="DEBT"] { background: var(--chart-3); }

.mix-legend { display: grid; gap: 9px; list-style: none; }

.mix-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    font-size: 13px;
}

.mix-key { width: 10px; height: 10px; border-radius: 3px; background: var(--chart-track); }
.mix-key[data-method="CASH"] { background: var(--chart-1); }
.mix-key[data-method="CARD"] { background: var(--chart-2); }
.mix-key[data-method="DEBT"] { background: var(--chart-3); }

.mix-name { color: var(--text-muted); }

.mix-value {
    text-align: right;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mix-value small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-dim); }

/* Hue is never the only channel: in forced-colors and print the legend text,
   the values and the tick labels still carry every number. */
@media (forced-colors: active) {
    .rank-fill, .col-fill, .mix-seg { forced-color-adjust: none; border: 1px solid CanvasText; }
    .mix-seg[data-method="CARD"] { background: transparent; }
    .mix-seg[data-method="DEBT"] { background: Highlight; }
}

/* ======================================================================= */
/* Staff accounts                                                          */
/* ======================================================================= */

.staff-list { display: grid; gap: 10px; }

.staff-card {
    display: grid;
    gap: 11px;
    padding: 15px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.staff-card[data-inactive="1"] { opacity: 0.55; }

.staff-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.staff-name { font-size: 14.5px; font-weight: 650; }
.staff-sub { margin-top: 2px; font-size: 12px; color: var(--text-dim); }

.floor-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.floor-tag {
    padding: 3px 9px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 8px;
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    font-size: 13px;
    cursor: pointer;
}

.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.check:has(input:checked) { border-color: #22c55e4d; background: var(--brand-soft); }

/* The two bands, under the rate they qualify, on a table card. */
.rate-band {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.01em;
}
.rate-band:empty { display: none; }

/* A free table's plan list ("2 pultli 20 000 · 3 pultli 30 000") — below the
   card's summary rate, above the extras button. */
.variant-list {
    margin: -4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ------------------------------------------------- time-of-day pricing -- */

/* Collapsed unless the table already uses it: four extra inputs are noise on
   a settings page for a club that charges one rate all day. */
.time-pricing {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-soft);
}

.time-pricing > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    border-radius: var(--r-md);
}

.time-pricing > summary::-webkit-details-marker { display: none; }
.time-pricing[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; }

.time-pricing .pill-on { color: var(--brand); border-color: #22c55e4d; background: var(--brand-soft); }
.time-pricing .pill-on::before { background: var(--brand); }
.time-pricing .pill-off::before { background: var(--text-dim); }

.time-pricing > form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.time-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 10px;
}

/* Dimmed, never hidden: switching the toggle off must leave the hours on
   screen, because the server keeps them and the operator needs to see that
   they are still there. */
.time-pricing > form.is-off .time-pricing-grid { opacity: 0.55; }

/* ------------------------------------------------------ tariff variants -- */

/* One block per priced plan. A plain table has exactly one and this looks
   identical to the single price field it always had; a room with several
   plans stacks one block per plan, each with its own name/price/time-pricing
   and a delete button once there is more than one to delete down from. */
.tariff-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tariff-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tariff-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tariff-row-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

/* Collapsed by default — adding a plan is an occasional action, not
   something a table's settings card should lead with. */
.tariff-add {
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    padding: 2px 12px;
}

.tariff-add > summary {
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    list-style: none;
}

.tariff-add > summary::-webkit-details-marker { display: none; }

.tariff-add > form { padding: 4px 0 10px; }

@media (min-width: 960px) {
    .analytics-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}