/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/*
 * The sign-up's venue steps (2026-10-14): branches, hours, tables, menu, profile, staff, payments, selling.
 * Phone-first: one column, 48px controls, cards that stack. Tokens are next.css's (--n-*); light only.
 */

.rail { margin-bottom: .4rem; }
.saved { min-height: 1.2em; margin: 0 0 1rem; font-size: .8rem; color: var(--n-muted); }
.saved.is-err { color: var(--n-crit); }

.linkish, .ghost, .skip, .mini {
  min-height: 44px; padding: .5rem 1rem; border-radius: var(--n-r-field);
  border: 1px solid var(--n-line); background: #fff; color: var(--n-cobalt);
  font: 600 .92rem var(--n-font); cursor: pointer;
}
.linkish { border: 0; background: none; padding-inline: 0; align-self: flex-start; text-decoration: underline; text-underline-offset: 3px; }
.mini { min-height: 44px; padding: .35rem .8rem; font-size: .85rem; }
.mini.danger, .ghost.danger { color: var(--n-crit); }
.ghost:hover, .mini:hover { border-color: var(--n-cobalt-line); }
.controls .skip { min-height: 50px; color: var(--n-body); }
.controls .skip[hidden] { display: none; }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.row-btns .btn { flex: 0 1 auto; min-height: 48px; }
.busy { min-height: 1.2em; margin: 0; font-size: .9rem; color: var(--n-cobalt); }
.code-input { font-size: 1.6rem; letter-spacing: .5rem; text-align: center; max-width: 14rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- cards */
.cards { display: flex; flex-direction: column; gap: 1rem; }
.card {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1rem; border: 1px solid var(--n-line); border-radius: var(--n-r-card); background: #fff;
}
.card > h3 { margin: 0; font: 600 1.02rem var(--n-font); color: var(--n-ink); }
.card .sub { margin: -.5rem 0 0; font-size: .85rem; color: var(--n-muted); }
fieldset.card { margin: 0; min-width: 0; }
.card input, .card select, .card textarea { min-width: 0; max-width: 100%; }
fieldset.card > legend { padding: 0 .3rem; font: 600 1.02rem var(--n-font); color: var(--n-ink); }

/* ---------------------------------------------------------------- hours */
.week { display: grid; gap: .45rem; }
.day {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; align-items: center;
}
.day .open { display: flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; color: var(--n-ink); min-height: 44px; cursor: pointer; }
.day .open input { width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; accent-color: var(--n-cobalt); }
.day input[type="time"] { min-height: 44px; min-width: 0; width: 100%; padding: 8px 6px; direction: ltr; text-align: center; font-size: 15px; }
.day.is-closed input[type="time"] { opacity: .45; }
.day .closed { grid-column: 2 / -1; color: var(--n-muted); font-size: .88rem; }
@media (max-width: 380px) { .day { grid-template-columns: 4.9rem minmax(0, 1fr) minmax(0, 1fr); } .card { padding: .8rem; } }

/* ------------------------------------------------------------- tables */
.area { display: grid; grid-template-columns: 1fr 7rem; gap: .5rem; align-items: end; padding: .7rem; border: 1px dashed var(--n-line); border-radius: var(--n-r-field); }
.area .field { margin: 0; }
.area .wide { grid-column: 1 / -1; }
.area .mini { justify-self: start; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* --------------------------------------------------------------- menu */
.note-warn {
  padding: .8rem 1rem; border-radius: var(--n-r-field); border: 1px solid #F1D9A8; border-inline-start: 3px solid var(--n-warn);
  background: var(--n-warn-bg); color: var(--n-ink-2); font-size: .92rem; line-height: 1.55;
}
.note-warn b { color: var(--n-ink); }
.menu-in { display: flex; flex-direction: column; gap: .8rem; padding: 1rem; border: 1px solid var(--n-line); border-radius: var(--n-r-card); background: var(--n-card); }
.menu-in input[type="file"] { padding: 10px; }
.menu-count { margin: .2rem 0 0; font-weight: 600; color: var(--n-ink); }
.dishes { display: flex; flex-direction: column; gap: .7rem; }
.dish { border: 1px solid var(--n-line); border-radius: var(--n-r-card); background: #fff; }
.dish.is-ok { border-color: #BFE3D3; }
.dish-head { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; }
.dish-head .t { flex: 1 1 auto; min-width: 0; }
.dish-head .t b { display: block; font: 600 1rem var(--n-font); color: var(--n-ink); overflow-wrap: anywhere; }
.dish-head .t span { display: block; font-size: .84rem; color: var(--n-muted); overflow-wrap: anywhere; }
.dish-head .badge { flex: 0 0 auto; font-size: .78rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
.badge.ok { background: var(--n-ok-bg); color: var(--n-ok); }
.badge.todo { background: var(--n-warn-bg); color: var(--n-warn); }
.dish-head img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.dish-body { display: flex; flex-direction: column; gap: .8rem; padding: 0 .9rem .9rem; }
.dish-body[hidden] { display: none; }
.dish .nums { grid-template-columns: 1fr 1fr; }
.tags { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
/* poster.css makes every fieldset a column; the chips are a row that wraps (one chip per line ran the length of a phone). */
.tags legend { padding: 0; margin-bottom: .4rem; font: 500 13.5px var(--n-font); color: var(--n-ink); }
.tag { position: relative; display: inline-flex; }
.tag input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.tag span {
  display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--n-line); background: #fff; color: var(--n-body); font-size: .88rem; font-weight: 600; cursor: pointer;
}
.tag input:checked + span { background: var(--n-cobalt); border-color: var(--n-cobalt); color: #fff; }
.tag input:focus-visible + span { outline: 2px solid var(--n-cobalt); outline-offset: 2px; }
.flags { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.flags .check { margin: 0; }
.dish-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dish-foot .btn { min-height: 48px; }
.dish-foot .spacer { flex: 1 1 auto; }
.photo-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }

/* -------------------------------------------------------- profile chips */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips button {
  min-height: 44px; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--n-line);
  background: #fff; color: var(--n-body); font: 600 .88rem var(--n-font); cursor: pointer;
}
.chips button[aria-pressed="true"] { background: var(--n-cobalt); border-color: var(--n-cobalt); color: #fff; }
.vp { display: flex; flex-direction: column; gap: .9rem; }
.vp .label { font: 500 13.5px var(--n-font); color: var(--n-ink); }
details.more { border: 1px solid var(--n-line); border-radius: var(--n-r-card); background: #fff; padding: .2rem 1rem; margin-top: 1rem; }
details.more > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--n-cobalt); }
details.more[open] > summary { margin-bottom: .6rem; }
details.more .card { border: 0; padding: 0 0 1rem; }

/* ---------------------------------------------------------------- staff */
.person { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .7rem; border: 1px dashed var(--n-line); border-radius: var(--n-r-field); }
.person .wide { grid-column: 1 / -1; }
.person .mini { justify-self: start; }
@media (max-width: 480px) { .person { grid-template-columns: 1fr; } }
.people { display: flex; flex-direction: column; gap: .5rem; }
.people-h { margin: 0; font: 600 .95rem var(--n-font); color: var(--n-ink); }

/* ------------------------------------------------------------- payments */
.pay-choice { margin-bottom: .2rem; }
.prov .proven { color: var(--n-ok); font-weight: 700; }
.prov .unproven { color: var(--n-warn); }
.pay-status { padding: .7rem .9rem; border-radius: var(--n-r-field); font-size: .92rem; }
.pay-status.ok { background: var(--n-ok-bg); color: var(--n-ok); }
.pay-status.warn { background: var(--n-warn-bg); color: var(--n-ink-2); }

/* -------------------------------------------------------------- selling */
.pairs { display: flex; flex-direction: column; gap: .5rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }
@media (max-width: 480px) { .pair { grid-template-columns: 1fr; } }
.switch-row { display: flex; align-items: flex-start; gap: .7rem; }

/* --------------------------------------------------------------- review */
.gaps { margin: 0; padding: .8rem 1rem; list-style: none; border-radius: var(--n-r-field); background: var(--n-warn-bg); }
.gaps li { padding: .25rem 0; font-size: .92rem; color: var(--n-ink-2); }
.gaps li button { margin-inline-start: .4rem; }
.gaps-ok { margin: 0; padding: .8rem 1rem; border-radius: var(--n-r-field); background: var(--n-ok-bg); color: var(--n-ok); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .tag span, .chips button { transition: none; }
}

/* "Let the AI choose" (2026-10-14): the add and AI buttons side by side, and the AI's note. */
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.hint.bad { color: var(--n-crit); }

/* Approve every dish at once (2026-10-14), with the allergen warning first. */
.approve-all { margin-top: 1rem; display: grid; gap: .5rem; }
.approve-warn { border: 1px solid var(--n-warn); background: var(--n-warn-bg); color: var(--n-ink, inherit); border-radius: 12px; padding: .8rem 1rem; }
.approve-warn p { margin: 0 0 .5rem; }

/* The agreement is read to its end before it can be accepted (2026-10-14). */
.agree-gate { margin: .4rem 0 0; font-size: .9rem; color: var(--n-warn); }
.agree-gate.is-done { color: var(--n-ok); }
.check input:disabled + span { opacity: .6; }

/* The place step (2026-10-17): four short questions on one page. */
.place-h { font-size: 1.05rem; margin: 1.6rem 0 .35rem; }
.place-h:first-of-type { margin-top: .8rem; }
.place-h .opt { margin-inline-start: .5rem; font-size: .8rem; font-weight: 500; color: var(--n-muted, #6B7590); }