/* ==========================================================================
   components.css — shared building blocks used by Collections, Payments, Inventory (and later tabs):
   sections, form card + fields, segmented radios, quantity grid, live total / payout preview, balance stats,
   tables, status chips, row actions (pencil / trash), empty states, delete modal.

   Colours come from the :root tokens in style.css. The --c-* aliases below carry fallbacks, so this file also
   works on its own if style.css is ever replaced with a different one.
   ========================================================================== */

:root {
  --c-wine: var(--wine, #5b1a2c);
  --c-wine-dark: var(--wine-dark, #431320);
  --c-wine-tint: var(--wine-tint, #f4e9ec);
  --c-brass: var(--brass, #b08a4a);
  --c-brass-tint: var(--brass-tint, #f6efe1);
  --c-surface: var(--surface, #ffffff);
  --c-tint: var(--tint, #f8f4ef);
  --c-ink: var(--ink, #2b2523);
  --c-muted: var(--muted, #6f6560);
  --c-line: var(--line, #e4dcd2);
  --c-ok: var(--ok, #1f6b3a);
  --c-ok-tint: var(--ok-tint, #e5f2e9);
  --c-warn: var(--warn, #8a5a00);
  --c-warn-tint: var(--warn-tint, #fbf0d6);
  --c-danger: var(--danger, #9b2c2c);
  --c-danger-tint: var(--danger-tint, #fbe9e9);
  --c-radius: var(--radius, 12px);
  --c-serif: var(--font-serif, Georgia, "Times New Roman", serif);
}

/* ---------- Layout helpers ---------- */
.section { margin-top: 30px; }
.section:first-of-type { margin-top: 0; }
.section > h2 { margin-bottom: .6em; }
.section-lede { color: var(--c-muted); margin: -.2em 0 14px; max-width: 70ch; }
.hint { color: var(--c-muted); font-size: .88rem; margin: 0; }
.muted { color: var(--c-muted); }
.req { color: var(--c-wine); font-weight: 700; }
.no-js-only { display: block; }
.js .no-js-only { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--c-brass); background: var(--c-tint); }
.btn-primary { background: var(--c-wine); border-color: var(--c-wine); color: #fff; }
.btn-primary:hover { background: var(--c-wine-dark); border-color: var(--c-wine-dark); }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #7d2020; border-color: #7d2020; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.btn-onwine { background: transparent; border-color: rgba(255,255,255,.4); color: #f8f1e8; }
.btn-onwine:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Form card + fields ---------- */
.form-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 22px 24px; box-shadow: 0 1px 2px rgba(43,37,35,.04); }
.form-card.is-editing { border-color: var(--c-brass); box-shadow: 0 0 0 3px var(--c-brass-tint); }
.form-card > h2 { margin-bottom: .9em; }
.form-card.is-editing > h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--c-brass); }
.form-card + .form-card { margin-top: 16px; }
.form-divider { border: 0; border-top: 1px solid var(--c-line); margin: 20px 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-block { margin-top: 22px; }
.form-block > h3 { margin-bottom: .5em; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .label { font-weight: 600; font-size: .92rem; }
.field-wide { grid-column: 1 / -1; }

input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="tel"], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid #cfc4b8; border-radius: 10px; background: #fff; color: var(--c-ink);
  font: inherit; font-size: 1rem;   /* 16px stops iOS zooming into the field */
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--c-brass-tint); border-color: var(--c-brass); }
select:disabled, input:disabled { background: var(--c-tint); color: var(--c-muted); cursor: not-allowed; }
input[type="number"] { font-variant-numeric: tabular-nums; }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- Segmented radios (method, status, movement type) ---------- */
.seg { display: flex; gap: 0; border: 1px solid #cfc4b8; border-radius: 10px; overflow: hidden; background: #fff; }
.seg-opt { position: relative; flex: 1 1 0; min-width: 0; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 42px; padding: 6px 12px; font-weight: 600; font-size: .95rem; color: var(--c-ink); }
.seg-opt + .seg-opt span { border-left: 1px solid #cfc4b8; }
.seg-opt input:checked + span { background: var(--c-wine); color: #fff; }
.seg-opt input:focus-visible + span { outline: 3px solid var(--c-brass); outline-offset: -3px; }

/* ---------- Quantity grid (cork types / glass types) ---------- */
.qty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.qty-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-tint); }
.qty-item label { font-weight: 600; overflow-wrap: anywhere; }
.qty-price { font-size: .82rem; color: var(--c-muted); }
.qty-price.is-low { color: var(--c-warn); font-weight: 600; }

/* ---------- Live total / payout preview ---------- */
.live-total {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  margin-top: 20px; padding: 14px 18px;
  background: var(--c-brass-tint); border: 1px solid #e6d6b4; border-left: 5px solid var(--c-brass); border-radius: 10px;
}
.live-total .label { font-weight: 700; }
.live-total .amount { font-family: var(--c-serif); font-size: 1.7rem; font-weight: 700; color: var(--c-wine-dark); font-variant-numeric: tabular-nums; }
.live-total .amount small { font-size: .9rem; font-weight: 600; color: var(--c-muted); }

.preview-pair { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.preview-pair .amount { font-size: 1.45rem; }
.preview-pair .label { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }

.inline-warn { display: flex; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--c-warn-tint); border: 1px solid #ecd49a; color: #6b4600; font-size: .92rem; }
.inline-warn[hidden] { display: none; }

/* ---------- Waiter balance stats (Payments) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 6px; }
.stat { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-tint); }
.stat .stat-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); font-weight: 700; }
.stat .stat-value { display: block; margin-top: 2px; font-family: var(--c-serif); font-size: 1.45rem; font-weight: 700; color: var(--c-wine-dark); font-variant-numeric: tabular-nums; }
.stat .stat-value small { font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.stat-main { background: var(--c-wine); border-color: var(--c-wine); }
.stat-main .stat-label, .stat-main .stat-value, .stat-main .stat-value small { color: #f8f1e8; }
.stat-main.is-negative { background: var(--c-danger); border-color: var(--c-danger); }

/* "Paying: Waiter - Restaurant" summary and the GET picker */
.payee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--c-brass-tint); border: 1px solid #e6d6b4; }
.payee .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); font-weight: 700; }
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 18px; align-items: end; }
.picker .btn { align-self: end; }
.picker.is-auto .autosubmit-btn { display: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); }
table { width: 100%; border-collapse: collapse; }
.table-wrap table { min-width: 640px; }
.table-wrap table.table-wide { min-width: 1040px; }
th, td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-line); }
thead th { background: var(--c-tint); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfaf7; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
tr.is-editing, tr.is-editing:hover { background: var(--c-brass-tint); }
tr.is-locked td { color: var(--c-muted); }
.row-note { display: block; margin-top: 2px; font-size: .82rem; color: var(--c-muted); max-width: 32ch; overflow-wrap: anywhere; }
tfoot td { font-weight: 700; background: var(--c-tint); }

.item-list { display: flex; flex-wrap: wrap; gap: 6px; }
.item-pill { display: inline-block; padding: 2px 9px; border-radius: 8px; background: var(--c-tint); border: 1px solid var(--c-line); font-size: .85rem; white-space: nowrap; }
.item-pill b { font-variant-numeric: tabular-nums; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; background: var(--c-tint); color: var(--c-ink); border: 1px solid var(--c-line); }
.chip .icon { width: 14px; height: 14px; }
.chip-paid { background: var(--c-ok-tint); color: var(--c-ok); border-color: #b7dcc3; }
.chip-pending { background: var(--c-warn-tint); color: var(--c-warn); border-color: #ecd49a; }
.chip-delivered { background: var(--c-wine-tint); color: var(--c-wine); border-color: #e3c9d0; }
.chip-returned { background: var(--c-brass-tint); color: #6e5424; border-color: #e6d6b4; }
.chip-muted { background: #f1eeea; color: var(--c-muted); }
.chip-danger { background: var(--c-danger-tint); color: var(--c-danger); border-color: #efc3c3; }

/* ---------- Row actions: pencil + trash, 44px touch targets ---------- */
.row-actions { display: inline-flex; align-items: center; gap: 2px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--c-wine); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--c-wine-tint); }
.icon-btn-danger { color: var(--c-danger); }
.icon-btn-danger:hover { background: var(--c-danger-tint); }
.icon-btn[aria-disabled="true"], .icon-btn:disabled { opacity: .3; pointer-events: none; }
.countdown { min-width: 38px; padding: 2px 8px; border-radius: 999px; background: var(--c-warn-tint); color: var(--c-warn); font-size: .78rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Empty state ---------- */
.empty { padding: 28px 20px; text-align: center; border: 1px dashed #cfc4b8; border-radius: var(--c-radius); background: var(--c-tint); color: var(--c-muted); }
.empty strong { display: block; margin-bottom: 4px; font-family: var(--c-serif); font-size: 1.1rem; color: var(--c-wine-dark); }
.empty .btn { margin-top: 14px; }

/* ---------- Delete modal ---------- */
dialog.modal { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; background: #fff; color: var(--c-ink); box-shadow: 0 20px 60px rgba(30,12,18,.35); }
dialog.modal::backdrop { background: rgba(30,12,18,.55); }
.modal-body { padding: 24px 24px 8px; }
.modal-body h2 { margin-bottom: .5em; }
.modal-warn { font-weight: 600; color: #7a2020; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px 24px 22px; }

/* ---------- Filter bar (list filters; GET form, works without JS) ---------- */
.filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; align-items: end; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-tint); }
.filter-bar .field > label { font-size: .85rem; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Form error summary + busy button ---------- */
.form-errors { margin: 0 0 18px; padding: 12px 16px; border: 1px solid #efc3c3; border-left: 5px solid var(--c-danger); border-radius: 10px; background: var(--c-danger-tint); color: #7a2020; }
.form-errors[hidden] { display: none; }
.form-errors strong { display: block; margin-bottom: 2px; }
.form-errors ul { margin: 4px 0 0; padding-left: 20px; }
.field.has-error > label { color: var(--c-danger); }
.field.has-error select, .field.has-error input { border-color: var(--c-danger); }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; pointer-events: none; }

/* ---------- Inventory summary + stock overview ---------- */
.stat-row-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat .stat-value .unit { font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.table-wrap table.table-stock { min-width: 560px; }
td.is-negative { color: var(--c-danger); font-weight: 700; }
td.is-zero { color: var(--c-muted); }
.stock-flag { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.stock-warn { margin: 0 0 12px; }


/* ---------- Section tabs (Management, Finance, Reports, Notifications): rounded buttons like the sidebar ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.subnav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid #e3c9d0; background: var(--c-wine-tint); color: var(--c-wine-dark); font-weight: 600; text-decoration: none; white-space: nowrap; }
.subnav-link:hover { border-color: var(--c-wine); background: #efdce1; }
.subnav-link.active { background: var(--c-wine); border-color: var(--c-wine); color: #fff; }
/* Second level (e.g. Balances / Payment history / Tax, or "By waiter / restaurant / region"): smaller, outlined in brass */
.subnav-sm { margin-top: -10px; gap: 6px; }
.subnav-sm .subnav-link { min-height: 40px; padding: 0 14px; font-size: .92rem; border-color: #e6d6b4; background: #fff; color: var(--c-ink); }
.subnav-sm .subnav-link:hover { border-color: var(--c-brass); background: var(--c-brass-tint); }
.subnav-sm .subnav-link.active { background: var(--c-brass-tint); border-color: var(--c-brass); color: var(--c-wine-dark); box-shadow: inset 0 0 0 1px var(--c-brass); }
.qty-group { margin: 14px 0 8px; font-family: var(--c-serif); font-size: 1rem; color: var(--c-wine-dark); }
.qty-group:first-of-type { margin-top: 4px; }
tr.col-groups th { text-align: center; border-bottom: 1px solid var(--c-line); color: var(--c-wine-dark); }
tr.col-groups td { background: var(--c-tint); }
.chart { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); }
.chart figcaption { margin-bottom: 10px; font-family: var(--c-serif); font-weight: 600; color: var(--c-wine-dark); }
.chart-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chart-rows li { display: grid; grid-template-columns: minmax(90px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.chart-track { height: 14px; border-radius: 999px; background: var(--c-tint); overflow: hidden; }
.chart-bar { display: block; height: 100%; border-radius: 999px; background: var(--c-wine); }
.chart-bar.is-negative { background: var(--c-danger); }
.chart-value { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.chart-value.is-negative { color: var(--c-danger); }
.chart-value small { color: var(--c-muted); font-weight: 600; }
@media print { .chart-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.headline { margin: 0 0 22px; padding: 18px 22px; border-radius: var(--c-radius); background: var(--c-wine); color: #f8f1e8; }
.headline span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #e6cfa8; }
.headline strong { font-family: var(--c-serif); font-size: 2rem; font-variant-numeric: tabular-nums; }
td.col-desc { min-width: 340px; }
tr.subtotal td { font-weight: 700; background: var(--c-tint); }
.sort-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; text-decoration: none; }
thead th:has(.sort-link) { padding-top: 0; padding-bottom: 0; }
.sort-link:hover, .sort-link.active { color: var(--c-wine); }
.access { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.access > legend { padding: 0; font-family: var(--c-serif); font-weight: 600; font-size: 1.05rem; color: var(--c-wine-dark); }
.access-region { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-tint); }
.access-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--c-wine); }
.check-strong { font-weight: 700; }
.tile-count { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--c-brass-tint); color: #6e5424; font-size: .8rem; font-weight: 700; }

/* ---------- Mobile: single column forms, full-width buttons, comfy tables ---------- */
@media (max-width: 640px) {
  .form-card { padding: 16px; }
  .form-grid, .form-grid-2, .picker { grid-template-columns: minmax(0, 1fr); }
  .qty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-actions .btn { flex: 1 1 100%; }
  .live-total .amount { font-size: 1.45rem; }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .stat .stat-value { margin: 0; }
  th, td { padding: 10px 10px; }
  .modal-actions .btn { flex: 1 1 100%; }
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .filter-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) { .qty-grid { grid-template-columns: minmax(0, 1fr); } }

@media print {
  .form-card, dialog.modal, .subnav, .filter-bar { display: none !important; }
  .table-wrap { border: 0; overflow: visible; }
}