/* public/app.css — Epic 11 design system.
   Loaded on every page after the Tailwind Play CDN. Theme tokens are CSS
   custom properties. The theme is a hard light/dark choice: a tiny <head>
   script sets <html data-theme="light|dark"> from localStorage, or from the
   device's prefers-color-scheme on the first visit; after that it's whatever
   the header toggle last set. Semantic component classes (.card, .btn-*,
   .input, .badge-*, .flash-*, .nav-link, .tab, …) are built on the tokens so
   pages stay theme-aware for free. Tailwind still owns pure layout. No build
   step. */

/* ---------- tokens: light ---------- */
:root {
  color-scheme: light;

  --canvas:      #f7f6f2;
  --surface:     #ffffff;
  --surface-2:   #f1efe9;
  --line:        #e4e1da;
  --fg:          #1b1a17;
  --fg-muted:    #736d64;

  --accent:      #0d7a6f;
  --accent-fg:   #ffffff;
  --accent-weak: #d0f2ec;
  --accent-line: #7fd6cb;

  --warn:        #b45309;
  --warn-weak:   #fdeecd;
  --danger:      #c02626;
  --danger-weak: #fbe1e1;
  --ok:          #167a3c;
  --ok-weak:     #d7f2df;
  --info:        #1d68c4;
  --info-weak:   #dbeafe;

  /* coloured header band */
  --header-bg:      #0d7a6f;
  --header-fg:      #ffffff;
  --header-dim:     rgba(255, 255, 255, .74);
  --header-active:  rgba(255, 255, 255, .18);
  --header-hover:   rgba(255, 255, 255, .10);
  --header-line:    rgba(255, 255, 255, .16);

  /* per-location hues */
  --loc-fridge:  #0d7a6f;
  --loc-freezer: #1d68c4;
  --loc-pantry:  #a5610b;

  /* per-category hues (inventory stripe / dot) */
  --cat-sky:    #0284c7;
  --cat-cyan:   #0891b2;
  --cat-rose:   #be123c;
  --cat-green:  #15803d;
  --cat-amber:  #b45309;
  --cat-tan:    #a16207;
  --cat-orange: #c2410c;
  --cat-brown:  #92600f;
  --cat-slate:  #475569;
  --cat-pink:   #be185d;
  --cat-lime:   #4d7c0f;
  --cat-violet: #7c3aed;

  --shadow: 0 1px 2px rgba(24, 22, 18, .05), 0 8px 22px -10px rgba(24, 22, 18, .14);
  --radius: 1rem;
}

/* ---------- tokens: dark (set by <html data-theme="dark">) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:      #0e1110;
  --surface:     #171b1a;
  --surface-2:   #212725;
  --line:        #2e3533;
  --fg:          #eae8e3;
  --fg-muted:    #a8a29a;

  --accent:      #2fd6c1;
  --accent-fg:   #062521;
  --accent-weak: #123f3a;
  --accent-line: #1f6b62;

  --warn:        #fbbf24;
  --warn-weak:   #3c2b0b;
  --danger:      #f87171;
  --danger-weak: #3d1414;
  --ok:          #4ade80;
  --ok-weak:     #0f2e1c;
  --info:        #60a5fa;
  --info-weak:   #10233f;

  --header-bg:     #0c3b36;
  --header-fg:     #dcf5f0;
  --header-dim:    rgba(220, 245, 240, .66);
  --header-active: rgba(220, 245, 240, .16);
  --header-hover:  rgba(220, 245, 240, .08);
  --header-line:   rgba(220, 245, 240, .12);

  --loc-fridge:  #2fd6c1;
  --loc-freezer: #60a5fa;
  --loc-pantry:  #eab308;

  --cat-sky:    #38bdf8;
  --cat-cyan:   #22d3ee;
  --cat-rose:   #fb7185;
  --cat-green:  #4ade80;
  --cat-amber:  #fbbf24;
  --cat-tan:    #eab308;
  --cat-orange: #fb923c;
  --cat-brown:  #d1a054;
  --cat-slate:  #94a3b8;
  --cat-pink:   #f472b6;
  --cat-lime:   #a3e635;
  --cat-violet: #a78bfa;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -12px rgba(0, 0, 0, .6);
}

html, body { overflow-x: clip; }   /* belt-and-braces: nothing scrolls the page sideways */
body {
  background: var(--canvas);
  color: var(--fg);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;       /* long unbroken strings wrap instead of widening the page */
}
*, ::before, ::after { border-color: var(--line); }

/* one consistent keyboard-focus ring for every interactive element */
:where(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: .4rem;
}
.app-header :where(a, button):focus-visible { outline-color: var(--header-fg); }

/* ---------- coloured app header ---------- */
.app-header { background: var(--header-bg); color: var(--header-fg); border-bottom: 1px solid var(--header-line); }
/* framed lockup so the brand reads apart from the nav tiles */
.wordmark {
  color: var(--header-fg); font-weight: 700; font-size: .95rem;
  text-decoration: none; letter-spacing: -.015em;
  border: 1px solid var(--header-line); border-radius: .55rem;
  padding: .3rem .55rem; background: var(--header-hover);
}
.wordmark:hover { border-color: var(--header-fg); }
@media (max-width: 639px) { .wordmark { padding: .3rem; } }

.nav { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { display: none; }
.app-header .nav-link {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .5rem .65rem; border-radius: .6rem; font-size: .875rem; font-weight: 500;
  color: var(--header-dim); text-decoration: none;
}
.app-header .nav-link:hover { color: var(--header-fg); background: var(--header-hover); }
.app-header .nav-link.is-active { color: var(--header-fg); background: var(--header-active); font-weight: 600; }
.header-btn { color: var(--header-dim); border-radius: .6rem; padding: .4rem; display: inline-flex; align-items: center; }
.header-btn:hover { color: var(--header-fg); background: var(--header-hover); }
.header-btn.is-active { color: var(--header-fg); background: var(--header-active); }
@media (max-width: 639px) { .nav-label { display: none; } .app-header .nav-link { padding: .5rem; } }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 1rem; }
@media (min-width: 640px) { .card-pad { padding: 1.25rem; } }
.card-accent { border-left: 4px solid var(--stripe, var(--accent)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1rem; border-radius: .7rem; font-size: .875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  min-height: 2.75rem; transition: filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { filter: brightness(.93); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary   { background: var(--accent); color: var(--accent-fg); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.btn-primary:hover   { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--accent-line); }
.btn-ghost   { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover   { color: var(--fg); background: var(--surface-2); }
.btn-danger  { background: transparent; color: var(--danger); }
.btn-danger:hover  { background: var(--danger-weak); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { filter: brightness(1.08); }
.btn-sm { padding: .4rem .6rem; min-height: 2.25rem; font-size: .8rem; border-radius: .55rem; gap: .3rem; }
.btn-block { width: 100%; }

/* ---------- forms ---------- */
.input, .select, textarea.input {
  width: 100%; padding: .6rem .75rem; border-radius: .6rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  font-size: .9rem; min-height: 2.75rem;
}
textarea.input { min-height: 4rem; }
.input::placeholder, textarea.input::placeholder { color: var(--fg-muted); }
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}
.field > .label { display: block; font-size: .8rem; font-weight: 600; color: var(--fg-muted); margin-bottom: .3rem; }
.help { font-size: .75rem; color: var(--fg-muted); margin-top: .3rem; }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .6rem; border-radius: .6rem; font-size: .85rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip:active { filter: brightness(.95); }
.chip-on { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--fg-muted); }
.badge-ok     { background: var(--ok-weak);     color: var(--ok); }
.badge-warn   { background: var(--warn-weak);   color: var(--warn); }
.badge-danger { background: var(--danger-weak); color: var(--danger); }
.badge-info   { background: var(--info-weak);   color: var(--info); }

/* ---------- flash ---------- */
.flash { border-radius: .7rem; padding: .75rem 1rem; font-size: .875rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-muted); }
.flash-ok    { background: var(--ok-weak);     color: var(--ok);     border-color: transparent; }
.flash-error { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.flash-warn  { background: var(--warn-weak);   color: var(--warn);   border-color: transparent; }
.flash-info  { background: var(--info-weak);   color: var(--info);   border-color: transparent; }

/* ---------- misc ---------- */
.section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.section-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; background: var(--stripe, var(--accent)); }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--fg-muted); font-size: .9rem; }
.empty-state-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px;
  background: var(--surface-2); color: var(--fg-muted); margin-bottom: .75rem;
}
.link { color: var(--accent); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }
.divide-line > * + * { border-top: 1px solid var(--line); }

/* ---------- tabs (location bar) ---------- */
.tabs { display: flex; gap: .1rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  white-space: nowrap; padding: .55rem .8rem; font-size: .875rem; font-weight: 600;
  color: var(--fg-muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; text-decoration: none;
}
.tab:hover { color: var(--fg); }
.tab.is-active { color: var(--hue, var(--accent)); border-bottom-color: var(--hue, var(--accent)); }

/* bigger tap targets on touch devices (P5) */
@media (pointer: coarse) {
  .btn-sm { min-height: 2.5rem; }
  .chip   { min-height: 2.4rem; }
  .tab    { padding-top: .7rem; padding-bottom: .7rem; }
  .link   { padding: .1rem 0; }
}

/* ---------- Flatpickr: styled from tokens, so it tracks light & dark ---------- */
.flatpickr-calendar { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--fg); }
.flatpickr-months, .flatpickr-weekdays, span.flatpickr-weekday { background: var(--surface); color: var(--fg-muted); fill: var(--fg-muted); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { color: var(--fg); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--fg-muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-day { color: var(--fg); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.flatpickr-day.today { border-color: var(--accent); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--fg-muted); opacity: .45; }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); }

/* app.css loads after the Tailwind CDN, so a bare `.select { width: 100% }`
   would beat Tailwind's own width utilities. Re-assert the common ones here
   so `class="select w-auto"` etc. still work. */
.w-auto { width: auto; }
.w-full { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}