/* ============================================================================
   PALOPAY — SHARED COMPONENTS  (redesign 2026)
   Reads tokens.css. Plain CSS, no framework. One button language, one table
   style, one set of form controls — collapses the 4 button languages / 7
   greens / 176 hexes of the current app into a single coherent system.
   ============================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--claret); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--claret); outline-offset: 1px; }

/* ===========================  APP BAR  ================================== */
.appbar {
  height: var(--bar-h);
  background: var(--grad-brand);
  color: var(--bone);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-6);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.appbar .brand { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.01em; }
.appbar .brand .glyph { color: var(--bone); opacity: .92; display: inline-flex; }
.appbar .wordmark { font-weight: 800; letter-spacing: -.02em; }
.appbar .wordmark .dot { color: var(--claret-300); }
.appbar .spacer { flex: 1; }
.appbar nav { display: flex; align-items: center; gap: var(--s-2); }
.appbar nav a, .appbar nav button {
  color: var(--bone); background: color-mix(in srgb, var(--bone) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bone) 18%, transparent);
  border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fs-sm); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font);
}
.appbar nav a:hover, .appbar nav button:hover { background: color-mix(in srgb, var(--bone) 20%, transparent); text-decoration: none; }

/* ===========================  STAGING BANNER  ========================== */
.staging-banner {
  background: var(--warning-bg); color: var(--warning-tx);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: 5px var(--s-4);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
}
.staging-banner .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); display: inline-block; }

/* ===========================  LAYOUT  ================================== */
.page { max-width: var(--maxw); margin: 0 auto; padding: var(--s-6); }
.page.narrow { max-width: var(--maxw-narrow); }

/* ===========================  CARD  ==================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s-4);
}
.card-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.card-head .t { font-size: var(--fs-h2); font-weight: 700; color: var(--claret); display: flex; align-items: center; gap: var(--s-2); letter-spacing: -.01em; }
.card-head .icon { color: var(--claret); display: inline-flex; }
.card-head .spacer { flex: 1; }
.card-body { padding: var(--s-5); }
.card-body.tight { padding: var(--s-3) var(--s-5); }

/* ===========================  BUTTONS  ================================= */
.btn {
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s;
  line-height: 1;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--claret); color: var(--bone); }
.btn-primary:hover { background: var(--claret-700); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: color-mix(in srgb, var(--success) 86%, #000); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--claret); color: var(--claret); }
.btn-quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn-quiet:hover { color: var(--claret); background: var(--surface-2); }
.btn-danger { background: var(--danger-bg); color: var(--danger-tx); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.btn-sm { padding: 5px 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg { padding: 11px 20px; font-size: var(--fs-base); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }

/* dashed add-row affordance */
.btn-add {
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: color .12s, border-color .12s, background .12s;
}
.btn-add:hover { color: var(--claret); border-color: var(--claret); background: color-mix(in srgb, var(--claret) 5%, var(--surface)); }
.btn-add svg { width: 14px; height: 14px; }

/* ===========================  FORM CONTROLS  ========================== */
.input, select.input, textarea.input {
  font-family: var(--font); font-size: var(--fs-base); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 7px 9px; width: 100%; transition: border-color .12s, box-shadow .12s;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--claret); box-shadow: 0 0 0 3px color-mix(in srgb, var(--claret) 14%, transparent); }
.input:disabled { background: var(--surface-2); color: var(--muted); }
textarea.input { resize: vertical; line-height: var(--lh-base); }
select.input {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23827066' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.input.is-invalid { border-color: var(--danger); background: var(--danger-bg); }
.req { color: var(--danger); font-weight: 700; }

/* dense 2-col label grid (the crew-estimate header pattern) */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2) var(--s-6); }
.field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: var(--s-2); }
.field.span-2 { grid-column: 1 / -1; grid-template-columns: 116px 1fr; }
.field > label { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.field.top > label { align-self: start; padding-top: 7px; }

/* ===========================  EDITABLE TABLE  ========================= */
.etable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.etable thead th {
  background: var(--surface-2); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.etable th.num, .etable td.num { text-align: right; }
.etable th.center, .etable td.center { text-align: center; }
.etable tbody td { padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.etable tbody tr:hover td { background: color-mix(in srgb, var(--claret) 3%, var(--surface)); }
.etable .cell-input {
  font-family: var(--font); font-size: var(--fs-base); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 5px 6px; width: 100%; min-width: 0; transition: border-color .12s, background .12s;
}
.etable td .flex .cell-input { flex: 1 1 auto; }
.etable .cell-input:hover { border-color: var(--line); }
.etable .cell-input:focus { outline: none; border-color: var(--claret); background: var(--surface); box-shadow: 0 0 0 2px color-mix(in srgb, var(--claret) 12%, transparent); }
.etable .cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.etable select.cell-input { appearance: none; cursor: pointer; padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23827066' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; }
.etable .computed { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--ink); padding-right: 8px; }
.etable .computed.muted { color: var(--muted); }
.etable .code-chip {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 2px 6px; white-space: nowrap; cursor: default;
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; box-sizing: border-box;
}
.col-grip { width: 22px; color: var(--faint); cursor: grab; text-align: center; }
.col-qty { width: 62px; } .col-rate { width: 104px; } .col-total { width: 104px; }
.col-act { width: 96px; }

/* row action cluster (compact, reveals on hover) */
.row-act { display: flex; align-items: center; gap: 3px; justify-content: flex-end; opacity: .35; transition: opacity .12s; }
tr:hover .row-act { opacity: 1; }
.iconbtn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; }
.iconbtn:hover { border-color: var(--line-strong); color: var(--ink); }
.iconbtn.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-bg); }
.iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.iconbtn:disabled:hover { border-color: transparent; color: var(--muted); background: transparent; }
.iconbtn svg { width: 14px; height: 14px; }
/* PaloPay Mode badge reads as an interactive control */
.badge.pp-mode { cursor: pointer; }
.badge.pp-mode:hover { filter: brightness(.97); box-shadow: 0 0 0 2px color-mix(in srgb, var(--claret) 18%, transparent); }

/* per-row rule pills: PF / Super / WC */
.rule-pills { display: inline-flex; gap: 3px; }
.rule-pill {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .02em; padding: 2px 6px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--muted);
  background: var(--surface); cursor: pointer; user-select: none; line-height: 1.4;
}
.rule-pill[aria-pressed="true"] { background: var(--claret); border-color: var(--claret); color: var(--bone); }
.rule-pill.off { text-decoration: line-through; opacity: .55; }
/* Locked/non-interactive pill (e.g. rollover Work Cover — never applies, cannot be toggled on). */
.rule-pill:disabled, .rule-pill.locked { cursor: not-allowed; opacity: .38; }
/* ASF add-action pill — a clear, clickable button (NOT a toggle). Soft claret tint so it
   reads as actionable, fills on hover. Distinct from the faint PF/Super/WC toggle look. */
.rule-pill[data-asf] { background: color-mix(in srgb, var(--claret) 12%, var(--surface)); border-color: color-mix(in srgb, var(--claret) 45%, var(--line-strong)); color: var(--claret); font-weight: 800; }
.rule-pill[data-asf]:hover { background: var(--claret); border-color: var(--claret); color: var(--bone); }

/* type-ahead "add item" ghost row */
.ghost {
  font-family: var(--font); font-size: var(--fs-base); color: var(--ink);
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 7px 10px; width: 100%; display: block;
}
.ghost::placeholder { color: var(--muted); }
.ghost:focus { outline: none; border-style: solid; border-color: var(--claret); box-shadow: 0 0 0 2px color-mix(in srgb, var(--claret) 12%, transparent); }

/* ===========================  AUTOCOMPLETE  =========================== */
.ac-wrap { position: relative; }
.ac-menu {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: var(--z-dropdown);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop); max-height: 280px; overflow-y: auto; display: none;
}
.ac-menu.open { display: block; }
.ac-item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-3); align-items: center;
  padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.hl { background: color-mix(in srgb, var(--claret) 6%, var(--surface)); }
.ac-item .c { font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); }
.ac-item .d { font-size: var(--fs-base); }
.ac-item .p { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); }
.ac-item mark { background: color-mix(in srgb, var(--warning) 30%, var(--surface)); color: inherit; border-radius: 2px; }
.ac-item.custom { background: var(--surface-2); }
.ac-item.custom .d { font-weight: 700; color: var(--claret); }

/* ===========================  SECTION BAND  ========================== */
.section { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s-3); box-shadow: var(--shadow-card); overflow: hidden; }
.section-head { display: flex; align-items: center; gap: var(--s-3); padding: 9px var(--s-4); cursor: pointer; user-select: none; background: linear-gradient(var(--surface-2), var(--surface)); border-bottom: 1px solid var(--line); }
.section.collapsed .section-head { border-bottom-color: transparent; }
.section-head .ico { color: var(--claret); display: inline-flex; }
.section-head .name { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; }
.section-head .count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 9px; }
.section-head .spacer { flex: 1; }
.section-head .sub { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--claret); font-size: var(--fs-base); }
.section-head .chev { color: var(--muted); transition: transform .15s; display: inline-flex; }
.section.collapsed .chev { transform: rotate(-90deg); }
.section-body { padding: 0; }
.section.collapsed .section-body { display: none; }
/* Auto-growing Type/Description cells (Kate 20 Jul): JS sets the height; no manual
   resize handle, no inner scrollbar — the row just gets taller with the text. */
.etable textarea.cell-input { resize: none; overflow: hidden; line-height: 1.35; min-height: 24px; display: block; width: 100%; font: inherit; }
.section-foot { display: flex; align-items: center; gap: var(--s-3); padding: 8px var(--s-4); border-top: 1px solid var(--line); background: var(--surface-2); }
.section-foot .spacer { flex: 1; }
.section-foot .sub-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 700; }
.section-foot .sub-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

/* section enable chips (replaces the 9-checkbox builder) */
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.add-chip { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .12s, border-color .12s; }
.add-chip:hover { color: var(--claret); border-color: var(--claret); }
.add-chip svg { width: 13px; height: 13px; }
.add-chip.on { color: var(--claret); border-style: solid; border-color: var(--claret); background: color-mix(in srgb, var(--claret) 6%, var(--surface)); }

/* ===========================  TOTALS STACK  ========================== */
.totals { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: var(--s-4) var(--s-5); }
.totals .row { display: flex; justify-content: space-between; gap: var(--s-6); min-width: 320px; font-size: var(--fs-base); }
.totals .row .l { color: var(--muted); font-weight: 700; }
.totals .row .v { font-variant-numeric: tabular-nums; font-weight: 700; }
.totals .row.grand { font-size: var(--fs-display); color: var(--claret); border-top: 1.5px solid var(--ink); padding-top: 7px; margin-top: 4px; }
.totals .row.grand .l { color: var(--ink); align-self: center; }

/* ===========================  STICKY TOTALS BAR  ===================== */
.sticky-bar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  background: var(--surface); border-top: 2px solid var(--claret);
  box-shadow: 0 -6px 20px rgba(31,14,14,.10);
  display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--s-6); height: var(--sticky-h);
}
.sticky-bar .figs { display: flex; align-items: baseline; gap: var(--s-5); }
.sticky-bar .fig { display: flex; flex-direction: column; line-height: 1.1; }
.sticky-bar .fig .k { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sticky-bar .fig .val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-base); }
.sticky-bar .fig.grand .val { font-size: var(--fs-h1); color: var(--claret); }
.sticky-bar .spacer { flex: 1; }
.sticky-bar .status { font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.sticky-bar .status.ok { color: var(--success); }
.sticky-bar .actions { display: flex; align-items: center; gap: var(--s-2); }

/* ===========================  BADGES / STATUS  ====================== */
.badge { font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px; }
.badge.draft    { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-strong); }
.badge.review   { background: var(--info-bg); color: var(--info-tx); }
.badge.approved { background: var(--success-bg); color: var(--success-tx); }
.badge.rejected { background: var(--danger-bg); color: var(--danger-tx); }
.badge.signed   { background: color-mix(in srgb, var(--claret) 10%, var(--surface)); color: var(--claret); }

/* mode banner (creation / client review / admin review) */
.mode-banner { display: flex; align-items: center; gap: var(--s-3); padding: 8px var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--s-3); border: 1px solid; }
.mode-banner.admin { background: var(--warning-bg); color: var(--warning-tx); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.mode-banner.client { background: var(--info-bg); color: var(--info-tx); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.mode-banner .spacer { flex: 1; }

/* dropzone (casting quote) — collapsed by default to one chip's worth */
.dropzone { display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px var(--s-4); border: 1px dashed color-mix(in srgb, var(--claret) 35%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--claret) 3%, var(--surface)); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.dropzone:hover { border-color: var(--claret); color: var(--claret); }
.attach-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px; border-radius: var(--r-sm); background: var(--success-bg); color: var(--success-tx); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); font-size: var(--fs-sm); font-weight: 700; }

/* tooltip helper */
.hint { color: var(--faint); font-size: var(--fs-sm); }
.note { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-base); }

/* utility */
.muted { color: var(--muted); } .faint { color: var(--faint); }
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.spacer { flex: 1; }