/* Crewbook Lite — local modern workspace. Screen-only; report printing is unchanged. */

/* ---- Light (default) ---- */
:root {
  color-scheme:light;
  --bg:#f5f4f0; --surface:#fff; --surface2:#f7f7f4; --surface-2:#f7f7f4; --surface3:#eeeee8;
  --field:#fbfcf9; --hover:#f5f5ef;
  --text:#242b29; --text-strong:#292d25; --muted:#69716d; --muted2:#626c65; --muted3:#899087;
  --border:#e1e4dd; --border2:#dde2d9; --border3:#ccd5c3;
  --accent:#805000; --accent2:#28634d; --budget:#a06a06; --danger:#b83535; --focus:#b47712;
  --brand:#edb644; --brand-hover:#e5ac37; --brand-border:#dfaa39; --brand-ink:#302914;
  --brand-mark:#efb642; --brand-mark-ink:#25291f;
  --amber-soft:#f7edda; --amber-soft-border:#e8dbbf; --amber-soft-ink:#6f4c10;
  --amber-panel:#f6f0e0; --amber-panel-ink:#52492e;
  --amber-chip:#f5f3eb; --amber-chip-border:#e9dfc7; --amber-chip-ink:#7a673b;
  --amber-strong-border:#d8c695; --bar:#d7a135; --eyebrow:#887042; --spent:#a35a18;
  --green-ink:#27603f; --green-soft:#eaf3ed; --green-border:#d1e5d7;
  --chip:#edf0e8; --chip-border:#dbe0d2; --chip-ink:#37452f;
  --badge:#f1f3ee; --badge-ink:#64725d; --add-ink:#526847;
  --info-ink:#345d88; --info-bg:#edf3fa; --info-border:#d9e5f3;
  --danger-ink:#983e3e; --danger-bg:#faeeee; --danger-border:#efd9d9;
  --radius:16px; --shadow:0 3px 12px rgba(32,46,36,.035);
}

/* ---- Dark ---- */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#090d14; --surface:#121925; --surface2:#192334; --surface-2:#192334; --surface3:#202c40;
    --field:#0f1622; --hover:#1b2536;
    --text:#e8edf5; --text-strong:#f6f9fd; --muted:#94a3b8; --muted2:#a7b4c6; --muted3:#7d8b9e;
    --border:rgba(148,163,184,.16); --border2:rgba(148,163,184,.24); --border3:rgba(148,163,184,.32);
    --accent:#e6b866; --accent2:#5fd0a0; --budget:#d9a63a; --danger:#f26d6d; --focus:#e0b45c;
    --brand:#edb644; --brand-hover:#f2c264; --brand-border:#c9992f; --brand-ink:#241d0c;
    --brand-mark:#efb642; --brand-mark-ink:#25291f;
    --amber-soft:#2e2513; --amber-soft-border:#473919; --amber-soft-ink:#f0c96f;
    --amber-panel:#2b2415; --amber-panel-ink:#ecd5a4;
    --amber-chip:#2a2415; --amber-chip-border:#463b20; --amber-chip-ink:#dcc189;
    --amber-strong-border:#5c4a22; --bar:#d7a135; --eyebrow:#c4a668; --spent:#e08a4a;
    --green-ink:#7ee0ae; --green-soft:#12291f; --green-border:#1f4636;
    --chip:#1a2a20; --chip-border:#2a4234; --chip-ink:#a3dcba;
    --badge:#1a2431; --badge-ink:#a1b2a8; --add-ink:#8fd0aa;
    --info-ink:#8fc4f5; --info-bg:#12253a; --info-border:#1e3d5c;
    --danger-ink:#f59a9a; --danger-bg:#2c1618; --danger-border:#4a2326;
    --shadow:0 3px 14px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#090d14; --surface:#121925; --surface2:#192334; --surface-2:#192334; --surface3:#202c40;
  --field:#0f1622; --hover:#1b2536;
  --text:#e8edf5; --text-strong:#f6f9fd; --muted:#94a3b8; --muted2:#a7b4c6; --muted3:#7d8b9e;
  --border:rgba(148,163,184,.16); --border2:rgba(148,163,184,.24); --border3:rgba(148,163,184,.32);
  --accent:#e6b866; --accent2:#5fd0a0; --budget:#d9a63a; --danger:#f26d6d; --focus:#e0b45c;
  --brand:#edb644; --brand-hover:#f2c264; --brand-border:#c9992f; --brand-ink:#241d0c;
  --brand-mark:#efb642; --brand-mark-ink:#25291f;
  --amber-soft:#2e2513; --amber-soft-border:#473919; --amber-soft-ink:#f0c96f;
  --amber-panel:#2b2415; --amber-panel-ink:#ecd5a4;
  --amber-chip:#2a2415; --amber-chip-border:#463b20; --amber-chip-ink:#dcc189;
  --amber-strong-border:#5c4a22; --bar:#d7a135; --eyebrow:#c4a668; --spent:#e08a4a;
  --green-ink:#7ee0ae; --green-soft:#12291f; --green-border:#1f4636;
  --chip:#1a2a20; --chip-border:#2a4234; --chip-ink:#a3dcba;
  --badge:#1a2431; --badge-ink:#a1b2a8; --add-ink:#8fd0aa;
  --info-ink:#8fc4f5; --info-bg:#12253a; --info-border:#1e3d5c;
  --danger-ink:#f59a9a; --danger-bg:#2c1618; --danger-border:#4a2326;
  --shadow:0 3px 14px rgba(0,0,0,.45);
}

/* Theme toggle (sidebar) */
.btn-theme { font-size:13px; }
.btn-theme .theme-on { display:none; }
:root[data-theme="dark"] .btn-theme .theme-on { display:inline; }
:root[data-theme="dark"] .btn-theme .theme-off { display:none; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .btn-theme .theme-on { display:inline; }
  :root:not([data-theme="light"]) .btn-theme .theme-off { display:none; }
}
body { padding:calc(40px + env(safe-area-inset-top)) calc(40px + env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom)) calc(278px + env(safe-area-inset-left)); line-height:1.5; letter-spacing:-.012em; }
body::before { display:none; }
button,input,textarea,select { font-family:inherit; }
button { transition:background .15s,border-color .15s; }
button:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
input:focus,textarea:focus,select:focus { outline:2px solid var(--focus)!important; outline-offset:2px; box-shadow:none!important; }
input::placeholder,textarea::placeholder { color:var(--muted3); opacity:1; }
.app-topbar { position:fixed; inset:0 auto 0 0; width:238px; max-width:none; margin:0; padding:calc(32px + env(safe-area-inset-top)) 20px 32px calc(20px + env(safe-area-inset-left)); background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:36px; overflow-y:auto; z-index:10; }
header { gap:10px; align-items:center; }
.brand-mark { width:39px;height:43px;flex-basis:39px; border:0;border-radius:11px;background:var(--brand-mark);color:var(--brand-mark-ink);box-shadow:none;font-size:16px; }
.brand-kicker { font-size:9px;letter-spacing:.09em;color:var(--muted);margin-bottom:6px; }
header h1 { font-size:21px;letter-spacing:-.055em;white-space:nowrap; }
.lite-label { font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted); }
header p { font-size:10px!important; }
.job-toolbar-wrap { width:100%; }
.job-toolbar { display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0; }
.job-toolbar::before { content:'WORKSPACE';font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--muted3);padding:0 12px 8px; }
.job-toolbar .btn-toolbar { min-height:46px;justify-content:flex-start;width:100%;padding:11px 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted2);box-shadow:none;font-size:14px;font-weight:600;order:initial; }
.job-toolbar .btn-toolbar:hover { background:var(--hover);color:var(--text);transform:none;box-shadow:none; }
.job-toolbar .btn-nav-active { background:var(--amber-soft);border-color:var(--amber-soft);color:var(--amber-soft-ink); }
.job-toolbar .btn-new { border-color:var(--border);background:var(--surface);margin-top:10px;color:var(--text); }
.job-toolbar .btn-save { background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand-border);justify-content:center;box-shadow:none; }
.job-toolbar .btn-save:hover { background:var(--brand-hover);box-shadow:none; }
.job-toolbar .btn-signout { margin-top:28px; }
.job-toolbar .job-status { white-space:normal;flex-wrap:wrap;width:100%;margin:0;padding:10px;font-size:12px;border:0;background:var(--surface2);order:10; }
.workspace-page,.quote-workspace { max-width:1480px;width:100%;padding:0;margin:0 auto; }
.workspace-hero,.quote-hero { align-items:center;margin-bottom:30px;gap:20px; }
.workspace-eyebrow { color:var(--eyebrow);font-size:10px;letter-spacing:.15em;font-weight:750;margin-bottom:10px; }
.workspace-hero h2,.quote-hero h2 { font-size:clamp(28px,2.7vw,39px);font-weight:650;letter-spacing:-.045em;line-height:1.18;margin-bottom:10px; }
.workspace-hero p,.quote-hero p { font-size:15px;line-height:1.6; }
.quote-back { font-size:13px;padding-bottom:24px; }
.quote-btn { min-height:43px;border-radius:8px;padding:10px 15px;font-size:13px;font-weight:650;box-shadow:none; }
.quote-btn.primary { background:var(--brand);border-color:var(--brand-border);color:var(--brand-ink); }
.quote-btn.success { background:var(--green-soft);color:var(--green-ink);border-color:var(--green-border); }
.quote-btn:hover { background:var(--hover);border-color:var(--border3); }
.quote-btn.primary:hover { background:var(--brand-hover); }
.workspace-stats { gap:18px;margin-bottom:28px; }
.workspace-stat { background:var(--surface);padding:24px;border-radius:14px;box-shadow:var(--shadow); }
.workspace-stat span { font-size:11px;letter-spacing:.07em; }
.workspace-stat strong { font-size:clamp(22px,2.1vw,30px);font-weight:650;letter-spacing:-.04em;margin-top:16px;overflow-wrap:anywhere; }
.workspace-stat.accent { background:var(--chip);border-color:var(--chip-border); }
.records-toolbar { padding:22px 24px;gap:18px;flex-wrap:wrap; }
.records-toolbar h3 { font-size:17px; }
.records-search { min-height:43px;background:var(--field);font-size:14px; }
.filter-chip { padding:9px 13px;font-size:12px;border-radius:7px; }
.filter-chip.active { background:var(--chip);border-color:var(--chip-border);color:var(--chip-ink); }
.record-row { padding:22px 24px; }
.record-row:hover { background:var(--hover); }
.record-primary strong { font-size:15px;font-weight:650; }
.record-primary small,.record-secondary,.record-date { font-size:13px; }
.record-value { font-size:16px; }
.record-empty { padding:70px 24px;line-height:1.8; }
.status-badge { font-size:11px;padding:5px 10px;background:var(--badge);color:var(--badge-ink); }
.status-badge.accepted { color:var(--green-ink);background:var(--green-soft);border-color:var(--green-border); }
.status-badge.sent,.status-badge.viewed { color:var(--info-ink);background:var(--info-bg);border-color:var(--info-border); }
.status-badge.declined,.status-badge.expired { color:var(--danger-ink);background:var(--danger-bg);border-color:var(--danger-border); }
.quote-layout { grid-template-columns:minmax(0,1fr) 320px;gap:24px; }
.quote-layout aside { position:sticky;top:30px; }
.quote-card { padding:26px; }
.quote-card+.quote-card { margin-top:24px; }
.quote-card-head { margin-bottom:22px; }
.quote-card-head h3 { font-size:17px;font-weight:650;letter-spacing:-.02em; }
.quote-fields { gap:20px; }
.quote-field { gap:8px; }
.quote-field label { font-size:12px;text-transform:none;letter-spacing:0;color:var(--muted2); }
.quote-field input,.quote-field textarea,.quote-field select { background:var(--field);border-color:var(--border2);font-size:15px;padding:12px 13px;min-height:46px; }
.quote-field textarea { min-height:105px; }
.quote-status { background:var(--amber-chip);color:var(--amber-chip-ink);padding:7px 13px;font-size:12px; }
.quote-items-head { font-size:10px;letter-spacing:.06em; }
.quote-item { padding:15px 0; }
.quote-item input,.quote-item select { background:var(--field);min-height:43px;font-size:13px;padding:9px 7px; }
.quote-line-total { font-size:13px; }
.quote-add { background:var(--field);border-color:var(--border3);color:var(--add-ink);padding:13px;font-size:13px; }
.quote-summary-row { font-size:14px;padding:14px 0; }
.quote-summary-row input { background:var(--field);min-height:39px; }
.quote-summary-row.grand { background:var(--amber-panel);margin:20px -10px 0;padding:20px 10px;border-radius:10px;flex-wrap:wrap; }
.quote-summary-row.grand label { color:var(--amber-panel-ink); }
.quote-summary-row.grand strong { font-size:28px;color:var(--text-strong);letter-spacing:-.05em; }
.quote-next-step { border-top:1px solid var(--border);margin-top:25px;padding-top:24px; }
.quote-next-step p { font-size:13px;color:var(--muted);margin:8px 0 16px; }
.quote-next-step button { display:block;width:100%;margin-top:9px; }
.quote-next-step small { display:block;font-size:11px;color:var(--muted);line-height:1.6;margin-top:15px; }
.container { max-width:1150px;gap:24px; }
.card,.job-info-card,.petty { background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow); }
.card::after { display:none; }
.card input,.card textarea,.job-info-card input { background:var(--field);color:var(--text);font-size:15px; }
.petty-stat { background:var(--surface2); }
.petty-budget-row { background:var(--amber-chip);border-color:var(--amber-chip-border); }
.petty-budget-row input[type="number"] { background:var(--surface);color:var(--text-strong);min-height:44px;border-color:var(--amber-strong-border); }
.stat-spent { color:var(--spent); }
.stat-remaining { color:var(--accent2); }
.total-row.grand .total-value { background:none;color:var(--accent2);-webkit-text-fill-color:var(--accent2); }
.carry-btn-primary { background:var(--brand);color:var(--brand-ink);box-shadow:none; }
.petty-bar-bg { background:var(--surface3); }
.petty-bar-fill { background:var(--bar);box-shadow:none; }
.subtotal-badge { background:var(--chip);color:var(--chip-ink);border:1px solid var(--chip-border); }
.history-panel,.share-modal { background:var(--surface); }
.history-item { background:var(--surface2); }
@media(min-width:901px) and (max-width:1250px) {
  body { padding:calc(30px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(50px + env(safe-area-inset-bottom)) calc(238px + env(safe-area-inset-left)); }
  .app-topbar { width:214px;padding:28px 16px; }
  .quote-layout { grid-template-columns:minmax(0,1fr) 280px;gap:18px; }
  .quote-card { padding:20px; }
  .quote-items-head { display:none; }
  .quote-item { grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr) minmax(0,1fr) 34px; }
  .quote-item .quote-description { grid-column:1/-1; }
  .record-row { grid-template-columns:minmax(0,1fr) 100px 100px 20px; }
  .record-secondary { display:none; }
}
@media(max-width:900px) {
  body { padding:calc(24px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left)); }
  .app-topbar { position:static;width:100%;padding:0 0 22px;background:transparent;border:0;gap:20px;overflow:visible;margin-bottom:18px; }
  header { width:100%; }
  .job-toolbar { flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:8px; }
  .job-toolbar::before { display:none; }
  .job-toolbar .btn-toolbar { flex:0 0 auto;width:auto;justify-content:center;padding:10px 14px;min-height:43px;margin:0;background:var(--surface);border-color:var(--border); }
  .job-toolbar .btn-save { background:var(--brand);border-color:var(--brand-border); }
  .job-toolbar .btn-nav-active { background:var(--amber-soft);border-color:var(--amber-soft-border);color:var(--amber-soft-ink); }
  .quote-layout { grid-template-columns:minmax(0,1fr); }
  .quote-layout aside { position:static; }
  .workspace-hero,.quote-hero { align-items:flex-start; }
  .quote-hero-actions { justify-content:flex-start; }
}
@media(max-width:600px) {
  body { padding:calc(20px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
  .job-toolbar { display:flex; }
  .job-toolbar .btn-toolbar { font-size:12px;padding:9px 12px; }
  .job-toolbar .btn-signout { width:40px; }
  .workspace-stat { padding:18px; }
  .workspace-stat strong { font-size:25px; }
  .workspace-stats { gap:12px; }
  .workspace-page,.quote-workspace { padding:0; }
  .quote-card { padding:18px; }
  .quote-fields { grid-template-columns:minmax(0,1fr); }
  .quote-field input,.quote-field textarea,.quote-item input,.quote-item select { font-size:16px; }
  .quote-item { gap:8px; }
  .records-toolbar,.record-row { padding:18px; }
  .record-primary strong { font-size:14px; }
  .records-controls { width:100%; }
  .records-search { width:100%;min-width:0; }
  .quote-items-head { display:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important;animation:none!important;scroll-behavior:auto!important; } }


/* Language pill: pinned top-right, present on every screen of the app. */
.lang-pill { position:fixed; z-index:50; top:calc(14px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--surface); box-shadow:var(--shadow); }
.lang-pill-btn { border:0; border-radius:999px; padding:8px 14px; background:transparent; color:var(--muted2); font-size:12px; font-weight:800; letter-spacing:.05em; line-height:1; cursor:pointer; transition:background .15s,color .15s; }
.lang-pill-btn:hover { color:var(--text); }
:root[data-lang="es"] .lang-pill-btn[data-lang-set="es"],
:root[data-lang="en"] .lang-pill-btn[data-lang-set="en"] { background:var(--brand); color:var(--brand-ink); }
@media (max-width:900px) { .lang-pill { top:calc(10px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); } .lang-pill-btn { padding:6px 11px; font-size:11px; } }

/* Quote buttons carry the same inline SVG icons as the job action bar. */
.quote-btn, .quote-add { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.quote-btn svg, .quote-add svg { flex:0 0 auto; }

/* iOS/WebKit date inputs: the native control has an intrinsic minimum width that
   width:100% cannot shrink, so it overflows its grid cell, and iOS centres the
   value text. Both make "Valid until" sit out of line with every other field.
   Does not reproduce in Chrome. */
.quote-field input[type="date"] {
  -webkit-appearance:none; appearance:none;
  width:100%; min-width:0; max-width:100%;
  text-align:left;
}
.quote-field input[type="date"]::-webkit-date-and-time-value { text-align:left; margin:0; }
.quote-field input[type="date"]::-webkit-calendar-picker-indicator { margin-inline-start:auto; padding-inline-start:8px; }

/* "Mt2" reads too small at the 10px header size, and it is the column the
   quote is actually built from - give it more weight than its neighbours. */
.quote-items-head .col-mt2 { font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:none; color:var(--text); }
.quote-item input.qty-input { font-size:15px; font-weight:700; text-align:right; }
.quote-item input.qty-input::placeholder { font-size:13px; font-weight:600; opacity:1; }

/* The line total is typed, not derived - style the input like the figure it replaced. */
.quote-item input.total-input { text-align:right; font-weight:800; font-size:14px; background:var(--field); }
.quote-item input.total-input::placeholder { font-weight:600; color:var(--muted3); opacity:1; }