/*
 * theme.css — Rail (table-order floor tool). Terminal mood: dark console,
 * monospace, hairline boxes. Status is carried by colour: free = accent
 * green, seated = warning amber, billed = danger coral — the same three
 * tokens the badges and alerts use, reused as the tile stripe.
 */

:root {
  color-scheme: dark;
  --canvas: #14181a;
  --surface: #2c2f31;
  --surface-2: #363a3d;
  --border: #3a3e41;
  --border-strong: #52575a;
  --ink: #ecefe9;
  --muted: #a1a4a1;

  --accent: #21a366;
  --accent-hover: #29b874;
  --accent-ink: #08130d;
  --accent-text: #4ade94;
  --accent-strong: #43b17d;
  --accent-soft: #17261e;
  --accent-border: #2f5443;

  --success: #2fae6d;
  --success-ink: #08130d;
  --success-soft: #16261d;
  --success-strong: #6fe3a7;

  --warning: #e2a63b;
  --warning-ink: #241905;
  --warning-soft: #3a2a10;
  --warning-strong: #f6c874;

  --danger: #e2665c;
  --danger-ink: #230807;
  --danger-soft: #3a1613;
  --danger-strong: #f2988f;

  --chart-1: #21a366;
  --chart-2: #4ade94;
  --chart-3: #e2a63b;
  --chart-4: #e2665c;
  --chart-5: #7fb3d5;
  --chart-6: #b48ee0;

  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.02em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 0 0 1px var(--border-strong);
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f2f4f1;
  --surface: #ffffff;
  --surface-2: #eaeeea;
  --border: #dbe0db;
  --border-strong: #b9c2b8;
  --ink: #10181a;
  --muted: #5c6360;

  --accent: #1a7d4b;
  --accent-hover: #125f3c;
  --accent-ink: #ffffff;
  --accent-text: #157a49;
  --accent-strong: #146b3f;
  --accent-soft: #e3f3ea;
  --accent-border: #b9ddc7;

  --success: #1a7d4b;
  --success-ink: #ffffff;
  --success-soft: #e3f3ea;
  --success-strong: #146b3f;

  --warning: #b5790a;
  --warning-ink: #ffffff;
  --warning-soft: #fbead0;
  --warning-strong: #8a5c05;

  --danger: #c23f34;
  --danger-ink: #ffffff;
  --danger-soft: #fbe4e1;
  --danger-strong: #9c2f26;

  --chart-1: #1f8f57;
  --chart-2: #157a49;
  --chart-3: #b5790a;
  --chart-4: #c23f34;
  --chart-5: #3d7ea6;
  --chart-6: #7c5cb0;
}

/*
 * app.css — Rail's own screens: the top strip + tab bar shell, the tables
 * floor grid, the kitchen ticket rail, and the PIN keypad. Tokens only.
 * Motion is "none" per the brief: nothing animates on load. The one motion
 * this file writes is a colour transition on a table's status stripe, which
 * fires only when a tile's own status actually changes.
 */

/* ---- Shell: top strip + tab bar ---------------------------------------- */
.topbar {
  @apply sticky top-0 z-30 flex h-12 items-center justify-between gap-3 border-b border-border bg-surface px-4;
}
.topbar-brand {
  @apply flex items-center gap-2 text-sm font-bold tracking-tight text-ink;
  font-family: var(--font-display);
}
.topbar-actions { @apply flex items-center gap-1; }
.topbar-who {
  @apply mr-1 hidden items-center gap-1 text-xs text-muted sm:inline-flex;
  font-family: var(--font-mono);
}
.topbar-role { @apply text-muted; }
.topbar-role::before { content: " · "; }

.tabbar {
  @apply fixed inset-x-0 bottom-0 z-30 flex h-16 border-t border-border bg-surface
    md:static md:h-11 md:border-b md:border-t-0;
}
.tabbar-link {
  @apply flex flex-1 flex-col items-center justify-center gap-0.5 text-[0.6875rem] text-muted no-underline
    transition-colors duration-150 md:flex-row md:gap-2 md:text-sm;
  font-family: var(--font-mono);
}
.tabbar-link .icon { @apply size-5 md:size-4; }
.tabbar-link:hover { @apply text-ink; }
.tabbar-link.is-active { @apply text-accent-text; }

.rail-main { @apply pb-20 md:pb-0; }

/* ---- Tables floor ------------------------------------------------------- */
.floor-grid { @apply grid grid-cols-4 gap-2.5 p-4 sm:gap-3 sm:p-6; }

.table-tile {
  @apply relative flex aspect-square flex-col justify-between border border-border bg-surface p-2.5 text-left
    no-underline transition-colors duration-150 sm:p-3;
  border-radius: var(--radius-card);
  border-left-width: 4px;
  border-left-color: var(--tile-stripe, var(--border-strong));
  transition-property: border-left-color, background-color;
}
.table-tile:hover { @apply bg-surface-2; }
.table-tile[data-status="free"] { --tile-stripe: var(--accent); }
.table-tile[data-status="seated"] { --tile-stripe: var(--warning); }
.table-tile[data-status="billed"] { --tile-stripe: var(--danger); }

.table-tile-num { font-family: var(--font-display); @apply text-xl font-bold leading-none text-ink sm:text-2xl; }
.table-tile-status { font-family: var(--font-mono); @apply text-[0.625rem] text-muted sm:text-xs; }
.table-tile-time {
  font-family: var(--font-mono);
  @apply text-right text-[0.6875rem] tabular-nums text-muted sm:text-xs;
}
.table-tile[data-status="free"] .table-tile-status { color: var(--accent-text); }
.table-tile[data-status="seated"] .table-tile-status { color: var(--warning-strong); }
.table-tile[data-status="billed"] .table-tile-status { color: var(--danger-strong); }

/* ---- Kitchen pass -------------------------------------------------------- */
.ticket-rail { @apply flex flex-col; }
.ticket-row {
  @apply flex items-center gap-3 border-b border-border px-4 py-3 sm:gap-4 sm:px-6;
}
.ticket-table {
  font-family: var(--font-display);
  @apply grid size-10 shrink-0 place-items-center rounded-[4px] border border-border-strong text-sm font-bold text-ink;
}
.ticket-body { @apply min-w-0 flex-1; }
.ticket-item { @apply truncate text-sm font-semibold text-ink; }
.ticket-note { @apply truncate text-xs text-muted; }
.ticket-qty { font-family: var(--font-mono); @apply shrink-0 text-sm tabular-nums text-muted; }
.ticket-time {
  font-family: var(--font-mono);
  @apply hidden shrink-0 text-right text-sm tabular-nums text-muted sm:block;
}
.ticket-time.is-late { color: var(--danger-strong); }

/* ---- PIN login ------------------------------------------------------------ */
.login-shell { @apply mx-auto flex min-h-screen w-full max-w-sm flex-col justify-center gap-8 px-6 py-10; }
.login-brand {
  font-family: var(--font-display);
  @apply flex items-center justify-center gap-2 text-lg font-bold tracking-tight text-ink;
}
.name-list { @apply flex flex-wrap justify-center gap-2; }
.name-chip {
  font-family: var(--font-mono);
  @apply cursor-pointer border border-border-strong bg-surface px-4 py-2 text-sm text-ink transition-colors duration-150;
  border-radius: var(--radius-card);
}
.name-chip:hover { @apply border-ink; }
.name-chip[aria-pressed="true"] { @apply border-accent-border bg-accent-soft text-accent-strong; }

.pin-dots { @apply flex items-center justify-center gap-3; }
.pin-dot { @apply size-3 rounded-full border border-border-strong bg-transparent transition-colors duration-150; }
.pin-dot.is-filled { @apply border-accent bg-accent; }

.keypad { @apply mx-auto grid w-full max-w-[18rem] grid-cols-3 gap-3; }
.keypad button {
  font-family: var(--font-display);
  @apply flex aspect-square items-center justify-center border border-border-strong bg-surface text-xl font-semibold
    text-ink transition-colors duration-150;
  border-radius: var(--radius-card);
}
.keypad button:hover { @apply border-ink bg-surface-2; }
.keypad button:active { @apply bg-surface-2; }
.keypad button[data-key="clear"] { @apply text-muted; }

/* ---- Order builder --------------------------------------------------------- */
.order-total-bar {
  @apply sticky top-12 z-20 flex items-center justify-between gap-3 border-b border-border bg-surface px-4 py-3 sm:px-6;
}
.order-total-figure { font-family: var(--font-display); @apply text-2xl font-bold tabular-nums text-ink; }

.line-row { @apply flex items-center gap-3 border-b border-border px-4 py-3 sm:px-6; }
.line-name { @apply truncate text-sm font-medium text-ink; }
.line-price { font-family: var(--font-mono); @apply shrink-0 text-sm tabular-nums text-muted; }
.qty-stepper { @apply flex shrink-0 items-center gap-2; }
.qty-stepper button {
  @apply grid size-7 place-items-center border border-border-strong bg-surface text-ink transition-colors duration-150;
  border-radius: var(--radius-btn);
}
.qty-stepper button:hover { @apply border-ink bg-surface-2; }
.qty-value { font-family: var(--font-mono); @apply w-5 text-center text-sm tabular-nums; }

.menu-row { @apply flex items-center justify-between gap-3 border-b border-border px-4 py-3 sm:px-6; }
.menu-row-name { @apply text-sm font-medium text-ink; }
.menu-row-price { font-family: var(--font-mono); @apply text-sm tabular-nums text-muted; }

/* ---- Daily sales ------------------------------------------------------------ */
.sales-total { font-family: var(--font-display); @apply text-5xl font-bold tabular-nums text-ink sm:text-6xl; }
.sales-total-wrap { @apply flex flex-col items-start gap-1 px-4 py-8 sm:px-6; }