/* ==========================================================================
   Staff / Backoffice Notion-style reskin - scoped additive layer.
   Loaded alongside staff-dashboard.css / app.css; never renames JS-hooked
   classes. All hooks (dashboard-section ids, call-card, order-card,
   table-card, cc-*, tab-badge, tt-table, tt-icon-rail, ...) keep working;
   the `.notion-*` / `.staff-notion-*` classes below only add flat Notion
   tokens (1px border, 8px radius, 44px rows, tab board).

   Mobile-first: base = phones (bottom tab nav + drawer stay); the Room
   board stays single-column TABS at every width. Dark theme comes from the
   --notion-* tokens in tokens.css (html[data-bs-theme="dark"]).
   ========================================================================== */

/* ---- Staff Room board: single-column TABS at every width ----
   Calls / Orders / Tables switch via the existing tab nav
   (.staff-nav-tab[data-section] + dashboard.js switchSection).
   Only .dashboard-section.active is visible — mirrors the base
   mobile tab behavior in staff-dashboard.css. No side-by-side
   board on md+; no hiding of the bottom tab nav. */
.staff-notion-page {
    padding-block: clamp(0.5rem, 2vw, 1.25rem);
}

.staff-notion-board {
    display: block;
}

.staff-notion-page .staff-notion-board .dashboard-section {
    display: none;
}

.staff-notion-page .staff-notion-board .dashboard-section.active {
    display: block;
}

/* Column header with count badge (badges are server-rendered; the live
   tab-badge counts in the mobile bottom nav stay the JS source of truth).
   Glow-up: hairline + 3rem bronze accent, display-font title (same pattern
   as .kuka-list__header). */
.staff-notion-page .staff-notion-col-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-space-2);
    padding: var(--tt-space-2) 0 var(--tt-space-3);
    margin-bottom: var(--tt-space-4);
    border-bottom: 1px solid var(--tt-color-border);
}

.staff-notion-page .staff-notion-col-head::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -1px;
    width: 3rem;
    height: 3px;
    border-radius: var(--tt-radius-pill);
    background-color: var(--kuka-bronze-500, var(--tt-color-accent));
}

.staff-notion-page .staff-notion-col-head .cc-section-title {
    font-family: var(--kuka-font-display, var(--tt-font-family));
    font-size: var(--tt-font-size-2xl);
}

.staff-notion-page .staff-notion-col-head .cc-section-title__icon {
    color: var(--kuka-bronze-700, var(--tt-color-accent));
}

html[data-bs-theme="dark"] .staff-notion-page .staff-notion-col-head .cc-section-title__icon {
    color: var(--kuka-bronze-300, var(--tt-color-accent));
}

.staff-notion-page .staff-notion-col-head .cc-tables-toolbar {
    margin-inline-start: auto;
}

/* Count: navy tile numerals, tabular so live updates don't jitter */
.staff-notion-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--tt-space-2);
    border-radius: var(--tt-radius-pill);
    background-color: var(--tt-color-surface-sunken);
    border: 1px solid var(--tt-color-border);
    color: var(--tt-color-text);
    font-size: var(--tt-font-size-sm);
    font-weight: var(--tt-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.staff-notion-count--alert {
    background-color: var(--tt-color-danger);
    border-color: var(--tt-color-danger);
    color: var(--tt-color-danger-contrast);
}

.staff-notion-col-cards {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-3);
    min-width: 0;
}

/* ---- Calls card inline row: table name + bell badge + Attended inline ----
   Server markup nests the attend button inside .call-card-header; the
   .attend-btn hook, data attrs and aria-labels stay untouched. Button
   shrinks to auto width pinned right via margin-inline-start. */
.staff-notion-page .call-card-header--inline {
    display: flex;
    align-items: center;
    gap: var(--tt-space-2);
    margin-bottom: 0;
}

.staff-notion-page .call-card-header--inline .table-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-notion-page .call-card-header--inline .call-badge {
    flex-shrink: 0;
}

.staff-notion-page .call-card-header--inline .attend-btn {
    width: auto;
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* ---- Flat Notion cards (additive: keep call-card / order-card / table-card) ---- */
.notion-card {
    background-color: var(--notion-card-bg);
    border: 1px solid var(--notion-border);
    border-radius: var(--notion-radius);
    box-shadow: var(--notion-shadow);
}

/* Pills reuse the tt-pill system on top of notion tint backgrounds */
.notion-pill--pending {
    background-color: var(--notion-pill-pending-bg);
}

.notion-pill--ready {
    background-color: var(--notion-pill-ready-bg);
}

.notion-pill--done {
    background-color: var(--notion-pill-done-bg);
}

.notion-pill--danger {
    background-color: var(--notion-pill-danger-bg);
}

/* Thin progress bar for station readiness (additive, no JS hook) */
.notion-progress {
    height: 0.375rem;
    border-radius: var(--tt-radius-pill);
    background-color: var(--notion-sidebar-active-bg);
    overflow: hidden;
}

.notion-progress__bar {
    height: 100%;
    border-radius: inherit;
    background-color: var(--tt-color-primary);
    transition: width 0.2s ease;
}

/* ---- Notion tables (additive on tt-table markup contract) ---- */
.notion-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tt-space-2);
    margin-bottom: var(--tt-space-4);
}

.notion-toolbar__search {
    flex: 1 1 12rem;
    min-height: var(--notion-row-height);
}

.notion-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-space-2);
    margin-inline-start: auto;
}

table.notion-table {
    background-color: var(--notion-card-bg);
    border: 1px solid var(--notion-border);
    border-radius: var(--notion-radius);
    box-shadow: var(--notion-shadow);
}

@media (min-width: 768px) {
    table.notion-table th,
    table.notion-table td {
        min-height: var(--notion-row-height);
        padding-top: var(--tt-space-2);
        padding-bottom: var(--tt-space-2);
        border-block-end-color: var(--notion-border);
    }

    table.notion-table thead th {
        background-color: transparent;
        border-block-end: 1px solid var(--notion-border);
    }

    table.notion-table tbody tr:hover td {
        background-color: var(--notion-muted-bg);
    }
}

/* ---- Notion doc page (Backoffice Edit detail sections) ---- */
.notion-page {
    padding-block: clamp(0.5rem, 2vw, 1.25rem);
}

.notion-doc {
    max-width: 56rem;
}

.notion-doc__crumb {
    margin-bottom: var(--tt-space-3);
}

.notion-doc__title {
    margin: 0 0 var(--tt-space-1);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: var(--tt-font-weight-bold);
    letter-spacing: -0.01em;
}

.notion-doc__subtitle {
    margin: 0 0 var(--tt-space-5);
    color: var(--notion-muted);
    font-size: var(--tt-font-size-sm);
}

.notion-section-card {
    background-color: var(--notion-card-bg);
    border: 1px solid var(--notion-border);
    border-radius: var(--notion-radius);
    box-shadow: var(--notion-shadow);
    padding: clamp(1rem, 3vw, 1.5rem);
}

.notion-section-card__title {
    display: flex;
    align-items: center;
    gap: var(--tt-space-2);
    margin: 0 0 var(--tt-space-3);
    padding-bottom: var(--tt-space-3);
    border-bottom: 1px solid var(--notion-border);
    font-size: var(--tt-font-size-lg);
    font-weight: var(--tt-font-weight-semibold);
}

/* ---- Staff card surfaces (glow-up: hairline cards, bronze hover accent) ----
   Ancestor-scoped (NOT per-card classes) so SignalR/JS-generated nodes
   (buildCallCard / buildOrderCard templates) look identical to the
   server-rendered ones. Covers Room, Kitchen and Bar pages. Status stripes
   (inline-start border) and urgency states live in staff-dashboard.css. */
.staff-notion-page .call-card,
.staff-notion-page .order-card,
.staff-notion-page .table-card,
.staff-notion-page .staff-today-closes,
.staff-notion-page .station-next-strip:has(*) {
    background-color: var(--tt-color-surface);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow-sm);
}

/* Pending/active cards keep the hairline border; their status is carried by
   the inline-start stripe + chip, not a full primary outline. */
.staff-notion-page .order-card.status-pending:not(.is-delayed),
.staff-notion-page .table-card--active {
    border-color: var(--tt-color-border);
}

.staff-notion-page .table-card .table-card-header {
    background-color: var(--tt-color-surface-sunken);
    border-bottom-color: var(--tt-color-border);
}

.staff-notion-page .order-card .items-list {
    background-color: var(--tt-color-surface-sunken);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-md);
}

.staff-notion-page .order-items-list {
    border-color: var(--tt-color-border);
    border-radius: var(--tt-radius-md);
}

.staff-notion-page .order-item-row {
    border-top-color: var(--tt-color-border);
    min-height: var(--tt-touch-target-min);
}

/* Pill tints follow the Notion palette; solid paid + danger text stay */
.staff-notion-page .cc-status-chip--pending {
    background-color: var(--notion-pill-pending-bg);
}

.staff-notion-page .cc-status-chip--ready {
    background-color: var(--notion-pill-ready-bg);
}

.staff-notion-page .cc-status-chip--delivered {
    background-color: var(--notion-pill-done-bg);
}

.staff-notion-page .cc-status-chip--urgent {
    background-color: var(--notion-pill-danger-bg);
}

.staff-notion-page .next-chip,
.staff-notion-page .station-next-chip,
.staff-notion-page .station-next-badge {
    background-color: var(--notion-pill-ready-bg);
}

/* Station pages: column count is owned by staff-dashboard.css (#station-orders-list). */

/* ---- Orders-B: demote Cancel to a quiet text-button ----
   ONE primary full-width Mark Delivered button stays on top; Cancel sits
   below it as a quiet secondary text-button (still a real button: same
   .cancel-order-btn hook, data-order-id, handler + confirm dialog).
   Scoped to .staff-notion-page so it also demotes SignalR/JS-generated
   `.cancel-order-btn.cc-btn--danger` nodes (dashboard.js buildOrderCard)
   without touching the JS contract. Per-line Deliver buttons and Ready
   pills are untouched. */
.staff-notion-page .order-card .order-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-2);
}

.staff-notion-page .order-card .mark-delivered-btn {
    width: 100%;
}

.staff-notion-page .order-card .cancel-order-btn {
    width: 100%;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--tt-color-text-muted);
    font-weight: var(--tt-font-weight-medium);
}

.staff-notion-page .order-card .cancel-order-btn:hover:not(:disabled) {
    background-color: var(--notion-sidebar-active-bg);
    border-color: transparent;
    color: var(--tt-color-danger);
    filter: none;
}

.staff-notion-page .order-card .cancel-order-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.15rem var(--tt-color-surface), 0 0 0 0.35rem var(--tt-color-focus-ring);
}