/* base.css — shared reset + design tokens for OrderOtto (no external deps). */

/* ---------------------------------------------------------------------------
   Design tokens — SINGLE SOURCE OF TRUTH for every OrderOtto surface that links
   this file (admin, waiter, guest, and enrollment). The admin view used to fork this whole :root with
   colliding values; that fork is gone. Brand: emerald is the anchor, the
   landing's gold (#e8b44a) is the accent. Button *fills* use the -strong steps
   so white text clears WCAG AA (emerald #10b981 filled = 2.54:1 FAIL; emerald
   #047857 filled = 5.48:1 PASS). Keep #10b981 for text/glow/nav-active only.
   The landing page is intentionally self-contained and does NOT read these.
   --------------------------------------------------------------------------- */
:root {
    /* Backgrounds & surfaces */
    --color-bg: #0b0e14;
    --color-sidebar-bg: #11141d;
    --color-surface: #181c26;
    --color-surface-2: #222836;
    --color-surface-3: #2d3445;
    --color-text: #f3f4f6;
    --color-text-dim: #9ca3af;
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-hover: rgba(255, 255, 255, 0.15);

    /* Brand — emerald anchor */
    --color-primary: #10b981;          /* text / glow / nav-active (7.6:1 on --color-bg) */
    --color-primary-strong: #047857;   /* button fills — white text = 5.48:1 (AA) */
    --color-primary-hover: #0a7d5c;    /* fill hover — brighter yet white = 5.12:1 (AA) */
    --color-primary-dim: #059669;      /* mid emerald — white text is only 3.77:1, so
                                          use for borders/glow, NOT filled white text */
    --color-primary-glow: rgba(16, 185, 129, 0.12);

    /* Danger */
    --color-danger: #ef4444;           /* text / outline (do NOT fill white on this: 3.76:1) */
    --color-danger-strong: #b91c1c;    /* button fills — white text = 6.47:1 (AA) */
    --color-danger-dim: #dc2626;       /* hover step — white = 4.79:1 */
    --color-danger-glow: rgba(239, 68, 68, 0.1);

    /* Warn (fiscal) + gold brand accent + functional blue */
    --color-warn: #e0b23c;
    --color-warn-glow: rgba(224, 178, 60, 0.12);
    --color-accent: #e8b44a;           /* landing gold — brand accent (10:1 on bg) */
    --color-accent-glow: rgba(232, 180, 74, 0.14);
    --color-info: #3b82f6;             /* functional interactive blue (focus, info) */
    --color-info-glow: rgba(59, 130, 246, 0.15);

    /* Status palette — text + tint bg + border */
    --status-success: #34d399;
    --status-success-bg: rgba(16, 185, 129, 0.12);
    --status-success-border: rgba(16, 185, 129, 0.2);
    --status-warn: #e0b23c;
    --status-warn-bg: rgba(224, 178, 60, 0.12);
    --status-warn-border: rgba(224, 178, 60, 0.25);
    --status-danger: #f87171;
    --status-danger-bg: rgba(239, 68, 68, 0.1);
    --status-danger-border: rgba(239, 68, 68, 0.2);
    --status-info: #60a5fa;
    --status-info-bg: rgba(59, 130, 246, 0.1);
    --status-info-border: rgba(59, 130, 246, 0.2);
    --status-neutral: #9ca3af;
    --status-neutral-bg: rgba(156, 163, 175, 0.1);
    --status-neutral-border: rgba(156, 163, 175, 0.2);

    /* Radii */
    --radius: 10px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Type scale (7 steps) */
    --text-xs: 0.72rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.65rem;
    --text-2xl: 2rem;

    /* Fonts — system stack ('Inter' was referenced by admin but never bundled) */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.4em;
    font-weight: 600;
}

button {
    font-family: inherit;
    cursor: pointer;
}

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

/* One quiet, touch-friendly scrollbar treatment across Admin, Waiter, Guest,
   enrollment, and every shared dialog. Firefox uses the standard properties;
   Chromium/WebKit use the pseudo-elements below. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface-3) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    min-height: 44px;
    background: var(--color-surface-3);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-dim);
    background-clip: padding-box;
}

a {
    color: var(--color-info);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.6em 1em;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.15s ease, transform 0.05s ease;
}

.btn:hover {
    background: #2c313c;
}

.btn:active {
    transform: translateY(1px);
}

/* Keyboard focus ring — mouse clicks stay clean (:focus-visible), but tab/enter
   users get a clear, high-contrast target on every shared button. */
.btn:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Button fills use the -strong steps so white text clears WCAG AA. */
.btn-primary {
    background: var(--color-primary-strong);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-danger {
    background: var(--color-danger-strong);
    color: #fff;
}

.btn-danger:hover {
    background: var(--color-danger-dim);
}

/* Status badge — shared pill. Shell here; semantic tints map onto the status
   palette so admin's reservation badges and any app badge stay in sync. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-success {
    background: var(--status-success-bg);
    color: var(--status-success);
    border-color: var(--status-success-border);
}

.badge-warn {
    background: var(--status-warn-bg);
    color: var(--status-warn);
    border-color: var(--status-warn-border);
}

.badge-danger {
    background: var(--status-danger-bg);
    color: var(--status-danger);
    border-color: var(--status-danger-border);
}

.badge-info {
    background: var(--status-info-bg);
    color: var(--status-info);
    border-color: var(--status-info-border);
}

.badge-neutral {
    background: var(--status-neutral-bg);
    color: var(--status-neutral);
    border-color: var(--status-neutral-border);
}

.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
}

.row {
    display: flex;
    gap: 0.75rem;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.spacer {
    flex: 1;
}

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

.mono {
    font-family: var(--font-mono);
}

/* Utility: hide elements that are not yet localized. */
[data-i18n]:empty::before {
    content: attr(data-i18n);
    color: var(--color-text-dim);
    font-size: 0.8em;
}
/* ---------------------------------------------------------------------------
   Gate: nothing of the application is shown until the device is enrolled AND a
   user is signed in.

   The gates are overlays appended to <body> at runtime, so before this the whole
   app shell had already been painted and simply sat behind a translucent panel:
   the waiter POS showed its table picker, search bar and Pay button to an
   unenrolled tablet, and /admin/ showed the full navigation and dashboard behind
   the login box. Readable layout is not a data leak — the API refuses every call
   without a session — but it advertises the structure of the system to anyone who
   opens the URL, and it looks broken.

   `app-gated` is set in the HTML itself so it applies on first paint, with no
   flash of content before the scripts run, and is removed only once the gate has
   actually passed. Elements marked data-gate (the overlays themselves) stay
   visible, since they are direct children of <body> too.
   --------------------------------------------------------------------------- */
body.app-gated > *:not([data-gate]) {
    visibility: hidden !important;
}