/* The operator console, on Odsi's own palette.
 *
 * Values match tokens.css in the odsi-site repo, which in turn came from the app's theme.css.
 * Kept deliberately small: the shared component set is ODSI-34/35, and this is one form and
 * one table. When those land, this file goes and the real tokens come in. */

:root {
  --ground: #FCFAF5;
  --surface: #FFFFFF;
  --ink: #2A241D;
  --ink-soft: #5F564C;
  --ink-mute: #8A6F52;
  --rule: #EFE3D7;
  --blue: #71AAF5;
  --blue-ink: #2A5A9E;
  --pink-ink: #C4457E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #18191A; --surface: #242526; --ink: #E4E6EA;
    --ink-soft: #B1B3B7; --ink-mute: #8A8D91; --rule: #3A3B3C;
    --blue-ink: #8CBBF8; --pink-ink: #F08CBD;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: Quicksand, ui-rounded, system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.narrow { max-width: 380px; }

h1 { font-weight: 700; font-size: 30px; margin: 0 0 6px; }
.sub { color: var(--ink-mute); margin: 0 0 32px; }

label { display: block; font-size: 13px; color: var(--blue-ink); font-weight: 600; margin-bottom: 4px; }
input {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

button {
  width: 100%; font: inherit; font-weight: 700; font-size: 15px;
  color: #fff; background: var(--blue); border: 0;
  border-radius: 14px; padding: 13px; cursor: pointer;
}
button:hover { background: #5B92D9; }

.error {
  background: #FDEDF4; color: var(--pink-ink); border: 1.5px solid var(--pink-ink);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 20px; font-size: 14px;
}
.note { color: var(--ink-mute); font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 8px 0 28px; }
.stat { background: var(--surface); border: 1.5px solid var(--rule); border-radius: 16px; padding: 18px 20px; }
.stat .n { font-size: 32px; font-weight: 700; line-height: 1.1; display: block; }
.stat .k { font-size: 13px; color: var(--ink-mute); }
.stat.zero .n { color: var(--pink-ink); }

.bar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; }
.bar form { margin: 0; }
.bar button { width: auto; background: none; color: var(--ink-mute); font-weight: 600; font-size: 14px; padding: 6px 0; }
.bar button:hover { background: none; color: var(--pink-ink); text-decoration: underline; }

/* ---- ODSI-8: chefs and menus ---- */

a { color: var(--blue-ink); }
.back { display: inline-block; font-size: 14px; margin-bottom: 18px; text-decoration: none; }
.back:hover { text-decoration: underline; }

.card { background: var(--surface); border: 1.5px solid var(--rule); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.card h2 { font-size: 19px; margin: 0 0 4px; }
.card .meta { color: var(--ink-mute); font-size: 14px; margin: 0; }

.chef-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.chef-row:hover { border-color: var(--blue); }

.pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.live { background: #EAF4EC; color: #3F7D4E; }
.pill.draft { background: #FBF1DE; color: #7A4A12; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field-error { color: var(--pink-ink); font-size: 13px; margin: -12px 0 14px; }
.hint { color: var(--ink-mute); font-size: 13px; margin: -12px 0 16px; }

.inline { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.inline input { margin-bottom: 0; }
.inline input.grow { flex: 1 1 160px; }
.inline input.short { flex: 0 0 110px; }
.inline button { width: auto; padding: 12px 18px; }

.dish { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dish:last-of-type { border-bottom: 0; }
.dish .d { color: var(--ink-mute); font-size: 13px; }
.dish .p { font-weight: 700; white-space: nowrap; }
.dish form { margin: 0; }
.dish form button { width: auto; background: none; color: var(--ink-mute); padding: 2px 6px; font-size: 13px; }
.dish form button:hover { background: none; color: var(--pink-ink); }
.opts { font-size: 13px; color: var(--ink-mute); margin: 2px 0 0; }

table.hours { width: 100%; border-collapse: collapse; }
table.hours td { padding: 4px 6px 4px 0; }
table.hours td:first-child { color: var(--ink-mute); font-size: 14px; width: 110px; }
table.hours input { margin-bottom: 0; }

h2.section { font-size: 20px; margin: 32px 0 12px; }