/* Admin and platform console. Hotel brand colours arrive as CSS custom
   properties from BrandingService; these are the fallbacks. */
:root {
    --brand-primary: #7A4B2A;
    --brand-on-primary: #FFFFFF;
    --brand-secondary: #B5793F;
    --brand-on-secondary: #111111;
    --brand-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
}

body.console,
body.console-guest {
    font-family: var(--brand-font);
    background: #F5F3F0;
}

.console-navbar {
    background: var(--brand-primary);
}

.console-navbar .navbar-brand,
.console-navbar .nav-link,
.console-navbar .navbar-text {
    color: var(--brand-on-primary);
}

.console-navbar .nav-link.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .35em;
}

.btn-brand {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--brand-on-secondary);
}

/* Mixed-direction values (codes, ids, numbers) keep their own direction. */
.bidi-isolate {
    unicode-bidi: isolate;
}

/* Inline style attributes are blocked by the CSP, so widths live here. */
.console-narrow {
    max-width: 36rem;
}

.swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .25rem;
    vertical-align: middle;
}

.swatch-primary { background: var(--brand-primary); }
.swatch-secondary { background: var(--brand-secondary); }

/* ---- Guest app (phone) ---- */
body.guest-app {
    font-family: var(--brand-font);
    background: #FAF8F5;
    padding-bottom: 4.5rem; /* room for the bottom bar */
}

.guest-header {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
}

.guest-main {
    max-width: 44rem;
}

.guest-bottom-bar {
    background: var(--brand-primary);
    padding-block: .5rem;
}

.guest-beacon {
    background: #198754;
    color: #FFFFFF;
    animation: guest-pulse 1.6s ease-in-out infinite;
}

.guest-dnd {
    background: #B02A37;
    color: #FFFFFF;
}

@keyframes guest-pulse {
    50% { background: #146C43; }
}

@media (prefers-reduced-motion: reduce) {
    .guest-beacon,
    .assist-beacon { animation: none; }
}

/* The two big Assist controls: red DND, green Need Assistance (§10), always icon + text. */
.assist-control {
    min-height: 8rem;
    font-size: 1.35rem;
    font-weight: 600;
    border-radius: 1rem;
}

.assist-beacon {
    border: 6px solid #198754;
    border-radius: 1rem;
    animation: assist-ring 1.6s ease-in-out infinite;
}

@keyframes assist-ring {
    50% { border-color: #75B798; }
}

.guest-tab {
    color: var(--brand-on-primary);
    text-decoration: none;
    padding: .4rem .6rem;
    border-radius: 999px;
    font-weight: 500;
}

.guest-tab.active {
    background: var(--brand-secondary);
    color: var(--brand-on-secondary);
}

.guest-item-card {
    text-decoration: none;
    color: inherit;
}

.guest-item-card:focus-visible,
.guest-item-card:hover {
    background: rgba(0, 0, 0, .03);
}

.guest-category-chips {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.guest-qty {
    width: 4.5rem;
}

.order-progress .step {
    flex: 1;
    text-align: center;
    font-size: .8rem;
    padding: .35rem .2rem;
    border-bottom: 3px solid #DDD;
}

.order-progress .step.done {
    border-color: var(--brand-primary);
    font-weight: 600;
}

/* ---- Kitchen display: large type, high contrast, usable with wet hands ---- */
.kds-board {
    font-size: 1.05rem;
}

.kds-column {
    min-height: 60vh;
    background: rgba(0, 0, 0, .03);
    border-radius: .5rem;
    padding: .5rem;
}

.kds-ticket {
    border-width: 2px;
}

.kds-ticket.kds-overdue {
    border-color: #B02A37;
    box-shadow: 0 0 0 2px #B02A37;
}

.kds-ticket .kds-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1.15rem;
}

.kds-ticket .kds-line {
    font-size: 1.1rem;
}

.kds-note {
    background: #FFF3CD;
    border-inline-start: 4px solid #B58105;
    padding: .15rem .4rem;
}

.kds-action {
    min-height: 3rem;
    font-size: 1.05rem;
}

.audit-json {
    max-width: 32rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .8rem;
}

/* Support session: unmistakable, and the same in every hotel's brand colours. */
.support-banner {
    background: #ffc107;
    color: #212529;
    padding: .5rem 0;
    font-size: .9rem;
    border-bottom: 2px solid #212529;
}

.support-banner-reason {
    opacity: .85;
}