/* ==========================================================================
   CheckBackTap — Base Design System
   Rule: strict black-and-white, high contrast. No gray fills, no gray text.
   Every surface is pure white (#FFFFFF) or pure black (#000000).
   The only other colors are functional: green = done/available,
   red = alert/overdue, and they are always paired with an icon + text label
   so meaning is never carried by color alone.
   Buttons and tap targets are large — built for a server moving fast with
   a phone in one hand, not a person sitting at a desk.
   ========================================================================== */

:root {
  --black: #000000;
  --white: #ffffff;

  /* Functional colors — used sparingly, always with icon + text */
  --green: #0a8a2e;
  --green-dark: #065c1e;
  --red: #c81e1e;
  --red-dark: #8f1414;
  --amber: #b56a00;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Touch targets — nothing tappable is smaller than this */
  --tap-min: 64px;
  --tap-large: 96px;

  /* Type scale */
  --font-size-sm: 16px;
  --font-size-base: 18px;
  --font-size-lg: 24px;
  --font-size-xl: 32px;
  --font-size-2xl: 48px;
  --font-size-3xl: 64px;

  --border-width: 3px;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3) 0;
  font-weight: 800;
  color: var(--black);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

p {
  margin: 0 0 var(--space-3) 0;
  color: var(--black);
}

a {
  color: var(--black);
  text-decoration: underline;
}

/* --------------------------------------------------------------------
   Buttons — large, high contrast, no gray states.
   Primary: black fill / white text. Inverted on press, not grayed.
   -------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 700;
  border: var(--border-width) solid var(--black);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn:active {
  background: var(--white);
  color: var(--black);
}

.btn-outline {
  background: var(--white);
  color: var(--black);
  border: var(--border-width) solid var(--black);
}

.btn-outline:active {
  background: var(--black);
  color: var(--white);
}

.btn-large {
  min-height: var(--tap-large);
  font-size: var(--font-size-xl);
  width: 100%;
}

/* Functional buttons — the check / go actions on the tap screen */
.btn-check {
  background: var(--green);
  border-color: var(--green-dark);
  color: var(--white);
}
.btn-check:active {
  background: var(--green-dark);
}

.btn-alert {
  background: var(--red);
  border-color: var(--red-dark);
  color: var(--white);
}
.btn-alert:active {
  background: var(--red-dark);
}

/* --------------------------------------------------------------------
   Status pills / badges — icon + text + color, never color alone.
   -------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--black);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

.badge-ok {
  border-color: var(--green-dark);
  color: var(--green-dark);
}

.badge-alert {
  border-color: var(--red-dark);
  color: var(--red-dark);
}

.badge-wait {
  border-color: var(--amber);
  color: var(--amber);
}

/* --------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------- */

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.row {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  align-items: center;
}

.card {
  border: var(--border-width) solid var(--black);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--white);
}

.divider {
  border: none;
  border-top: var(--border-width) solid var(--black);
  margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------
   Forms — large fields, black border, no gray placeholder tricks.
   -------------------------------------------------------------------- */

input,
select,
textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  border: var(--border-width) solid var(--black);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  font-family: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--black);
  opacity: 0.55;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------
   The tap screen — text upside down for the customer's view, right
   side up for the server holding the phone toward themselves.
   -------------------------------------------------------------------- */

.tap-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--white);
}

.tap-screen-customer-label {
  transform: rotate(180deg);
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: 900;
  letter-spacing: 2px;
}

.tap-screen-server-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tap-screen-confirmed {
  background: var(--green);
  color: var(--white);
}

.tap-screen-confirmed .tap-screen-customer-label {
  color: var(--white);
}