/* ==========================================================================
   Chai365 — shared stylesheet (OPS + POS)

   This file began as the production stylesheet captured from
   chai365.sinope.in/assets/style.css and keeps every rule that was already
   there, so the look of the existing OPS pages does not shift. Everything
   below the "OPS components" banner is new, added by the POS merge.

   Font stack note: Source Sans 3 is loaded from Google Fonts, but the counter
   must degrade gracefully if that request is slow or blocked, so a full
   system stack is declared alongside it.
   ========================================================================== */

:root {
    --paper: #faf7f2;
    --card: #ffffff;
    --ink: #1a1a1a;
    --muted: #777;
    --line: #eeeeee;
    --brand: #b3541e;
    --brand-dark: #8f4218;
    --green: #1e7a34;
    --green-soft: #dff5e1;
    --amber: #d98e1f;
    --amber-soft: #fbefd9;
    --red: #c0392b;
    --red-soft: #fdecea;
    --radius: 12px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    background: var(--paper);
    color: var(--ink);
}

/* Dashboard override */
body.dashboard { max-width: 800px; }
body.wide      { max-width: 1000px; }
body.narrow    { max-width: 380px; margin-top: 8vh; }

h1 { font-size: 22px; margin-bottom: 4px; font-weight: 700; }
h2 { font-size: 16px; color: var(--brand); margin-top: 28px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.sub { color: #555; font-size: 14px; margin-bottom: 20px; }
.muted { color: var(--muted); font-size: 14px; }
.center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }
a { color: var(--brand); }

/* Branding */
.logo-container { text-align: center; margin-bottom: 20px; }
.logo-container a { display: inline-block; }
.brand-logo { max-width: 120px; height: auto; }

/* Forms & Inputs */
fieldset { border: none; margin-bottom: 20px; padding: 0; }
legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--brand); }
label { display: block; font-size: 14px; margin: 10px 0 4px; font-weight: 600; }
input[type=text], input[type=number], input[type=password], input[type=date],
input[type=search], select, textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(179, 84, 30, 0.2);
}
input[type=checkbox], input[type=radio] { width: auto; padding: 0; }

/* Buttons — one system, so a button always means the same thing.
 *
 * Base: every <button> is a primary action. `.btn` gives an <a> the same shape,
 * which is how navigation-by-button is done here (an <a> for a link, a <button>
 * for something that changes data — that distinction was blurred before).
 *
 *   default / .btn-primary   the action the page is for (save, submit, log in)
 *   .btn-secondary           a safe alternative (cancel, back, export, refresh)
 *   .btn-danger              destructive: delete, archive, cancel an order
 *   .btn-ghost               low-emphasis, in a row of other buttons
 *   .btn-small / .btn-inline size and width modifiers; they compose with any colour
 *   .btn-block               full width, for a form whose only control is a button
 */
button, .btn {
    width: 100%;
    padding: 16px;
    min-height: 48px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-family: inherit;
    font-weight: 700;
    margin-top: 10px;
    cursor: pointer;
    text-align: center;
}
button:hover, .btn:hover { background: var(--brand-dark); }
button:disabled, button[disabled] { background: #b9c7be; color: #f4f4f4; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid #ddd;
}
.btn-secondary:hover { background: #f4f1ec; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #a1301f; }
.btn-ghost { background: transparent; color: var(--brand); border: 1px dashed var(--brand); }
.btn-ghost:hover { background: var(--amber-soft); }
.btn-save { background: var(--brand); color: #fff; }
.btn-archive { background: var(--red-soft); color: var(--red); }
.btn-add { background: var(--green-soft); border: 1px dashed #2e8b45; color: var(--ink); }
.btn-inline { width: auto; display: inline-block; margin: 0; }
.btn-small { width: auto; padding: 10px 16px; min-height: 0; font-size: 14px; }
.btn-block { width: 100%; display: block; }

/* Inside a row of actions a button is never full width: a row of full-width
   buttons is the layout bug this rule exists to prevent. */
.row button, .row .btn,
.link-actions button, .link-actions .btn,
.actions button, .actions .btn {
    width: auto;
    min-height: 0;
    padding: 10px 16px;
    font-size: 14px;
    margin-top: 0;
}

/* Alerts & Badges */
.banner { background: var(--green-soft); color: var(--green); padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.banner.warning { background: var(--red-soft); color: var(--red); }
.banner.info { background: var(--amber-soft); color: #8a5a0c; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.ok { background: var(--green-soft); color: var(--green); }
.warn { background: var(--red-soft); color: var(--red); }
.error-text { color: var(--red); font-size: 14px; margin-top: 8px; font-weight: 600; }

/* Utilities */
.row { display: flex; gap: 10px; }
.row > div { flex: 1; }
.row.wrap { flex-wrap: wrap; }
.logout { float: right; font-size: 14px; color: var(--muted); text-decoration: none; font-weight: 600; }
.spacer { flex: 1; }
.stack > * + * { margin-top: 10px; }

/* Tables (Owner side) */
table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border-radius: 8px; overflow: hidden; margin-top: 10px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
th { background: #f2ede6; font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total-row td { font-weight: 700; background: #faf7f2; }

/* ==========================================================================
   OPS components (added by the POS merge)
   ========================================================================== */

.page-title { margin-bottom: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.card > h2:first-child { margin-top: 0; }

/* Nav */
.nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
    border: none;
}
.nav-btn {
    flex: 1 1 130px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    text-align: center;
}
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(179, 84, 30, 0.14); border-color: var(--brand); color: var(--brand); }
.nav-btn.active { border-color: var(--brand); color: var(--brand); background: #fdf6f1; }
.nav-btn span { font-size: 1.15em; }
.nav-btn.logout-btn { flex: 0 0 auto; color: var(--muted); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 15px; margin-bottom: 24px; }
.kpi-card { background: #fff; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); text-align: center; }
.kpi-card .kpi-label { font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kpi-card .kpi-value { font-size: 24px; font-weight: 800; color: var(--brand); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi-card.good .kpi-value { color: var(--green); }
.kpi-card.bad  .kpi-value { color: var(--red); }

/* Two-column section */
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 700px) { .section-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   The Menu page (admin)
   A category with its picture, its dishes, and the editing controls folded away
   so the page reads as a menu rather than as a form.
   --------------------------------------------------------------------------- */
.cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cat-head h2 { margin: 0; }
.cat-pic {
    width: 56px; height: 56px; flex: 0 0 auto;
    border-radius: 12px; object-fit: cover; background: var(--amber-soft);
    border: 1px solid var(--line);
}
.cat-pic-none {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: var(--brand);
}
.cat-title { min-width: 0; }
.cat-title .muted { display: block; }

.tick { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; }
.tick input { width: auto; }

.add-item-form { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.add-item-form .row > div { min-width: 0; }

.cat-edit { margin-top: 14px; }
.cat-edit > summary {
    cursor: pointer; font-weight: 600; color: var(--brand); padding: 8px 0;
}
.cat-edit form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* A button beside a form's inputs should not stretch to the full width. */
.row .btn, .row button { width: auto; margin-top: 0; }
.row input, .row select { margin-top: 0; }

/* Accordion (items / manager form) */
.category { margin-bottom: 8px; }
.category-header {
    display: flex; justify-content: space-between; align-items: center;
    background: #e9e3d9; padding: 12px 14px; border-radius: 8px; cursor: pointer;
    font-weight: 700; font-size: 15px; color: var(--ink); margin-top: 12px;
}
.category-body { display: none; padding: 8px 0; }
.category-body.open { display: block; }

.item-row { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.item-top { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 10px; }
.item-name { font-weight: 700; font-size: 15px; }
.item-meta { color: var(--muted); font-size: 13px; }
.edit-form, .add-form { display: none; margin-top: 12px; border-top: 1px solid #f0f0f0; padding-top: 12px; }
.edit-form.open, .add-form.open { display: block; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot.red { background: var(--red); }
.dot.amber { background: var(--amber); }
.dot.green { background: #2e8b45; }
details.archived { margin-top: 24px; }
details.archived summary { color: var(--muted); font-size: 14px; cursor: pointer; font-weight: 600; }

/* Small inline forms that must not inherit full-width buttons */
.inline-form { display: inline; }
.inline-form button { width: auto; display: inline-block; padding: 8px 14px; min-height: 0; font-size: 13px; margin: 0; border-radius: 8px; }
.link-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.link-actions form { margin: 0; }

/* Radio group */
.radio-group { display: flex; gap: 20px; margin-top: 6px; flex-wrap: wrap; }
/*
 * min-height matters here: these are tapped on a phone, mid-shift, often with one
 * hand. A native radio is about 13px, so without padding the label around it is a
 * 20px-tall target. The label is the real tap area, so it gets a comfortable one.
 * tests/browser/ops.browser.spec.mjs asserts this at phone width.
 */
.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin: 0;
    font-weight: 400;
    min-height: 40px;
    padding: 6px 4px;
}
.radio-group input[type=radio] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }

/* Search */
input.search { margin-bottom: 16px; }