/* ════════════════════════════════════════════════════════════════
   Anna Invoices — styles.css
   Design system: IN-RIGA / Dark Archery ("paper, ink, one orange") — the SAME
   design family Shooting Bills uses. The token blocks (:root + [data-theme="dark"])
   and the component classes below are mirrored from the Dark Archery design system
   (as adopted in C:/WebDesign/SS-BB-report/app/styles.css). App-layout + invoice-form
   styles at the bottom are authored for the Anna Invoices shell.

   STANDING RULE: the token blocks and the mirrored component classes are a VERBATIM
   copy of the shared design system. Do NOT hand-edit token values or component rules
   here — if the design system changes, re-mirror from its source. New app-specific
   styles go in the "App layout" section at the bottom, never interleaved with the
   mirrored block.
   ════════════════════════════════════════════════════════════════ */

/* ── Design tokens — light (default) ── */
:root{
  --paper:#f4efe6; --paper-2:#ebe5d8; --paper-3:#e1dac9;
  --ink:#0e0e0c; --ink-soft:#1a1814;
  --orange:#ff4612; --orange-soft:#ff461215;
  --line:#0e0e0c1f; --line-strong:#0e0e0c; --muted:#0e0e0c88; --muted-2:#0e0e0c66;
  --good:#2a8a3e; --bad:#c4321a; --warn:#d99100; --info:#1a4cf2;
  --font-sans:'Archivo',-apple-system,sans-serif;
  --font-display:'Archivo',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
}
/* ── Design tokens — dark overrides ── */
[data-theme="dark"]{
  --paper:#14130f; --paper-2:#1d1c17; --paper-3:#26241e;
  --ink:#f4efe6; --ink-soft:#e6dfd0;
  --orange:#ff5a2a; --orange-soft:#ff5a2a1f;
  --line:#f4efe61f; --line-strong:#f4efe6; --muted:#f4efe688; --muted-2:#f4efe666;
  --good:#5fc777; --bad:#ee6a55; --warn:#f0b13d; --info:#6a8af7;
}

/* ── Base / reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
a{color:inherit}

/* ── Doc mark (Anna Invoices brand glyph — an invoice analogue of the SB bullseye).
      A small dark rounded square with an orange corner fold, used in the brand + toggle. ── */
.doc-mark{width:22px;height:22px;border-radius:5px;border:2px solid var(--ink);position:relative;flex-shrink:0;background:var(--paper)}
.doc-mark::before{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;background:var(--orange);border-bottom-left-radius:3px}
.doc-mark::after{content:"";position:absolute;left:4px;right:8px;bottom:5px;height:2px;background:var(--ink);box-shadow:0 -4px 0 var(--ink)}
.doc-mark.sm{width:16px;height:16px;border-radius:4px}
.doc-mark.sm::before{width:6px;height:6px}
.doc-mark.sm::after{left:3px;right:6px;bottom:3px;box-shadow:0 -3px 0 var(--ink)}

/* ── Theme toggle ── */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:7px 13px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;cursor:pointer}
.theme-toggle:hover{background:var(--paper-2)}

/* ════ COMPONENT STYLES (mirrored from the shared Dark Archery design system) ════ */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;border:1.5px solid var(--ink);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .05s,background .1s}
.btn:hover{background:var(--paper-2)}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);color:var(--paper)}.btn.primary:hover{background:var(--ink-soft)}
.btn.accent{background:var(--orange);border-color:var(--orange);color:#fff}.btn.accent:hover{background:#e63d0e}
[data-theme="dark"] .btn.accent:hover{background:#ff7045}
.btn.danger{background:var(--paper);border-color:var(--bad);color:var(--bad)}.btn.danger:hover{background:#c4321a08}
.btn.danger.solid{background:var(--bad);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink)}.btn.ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn.sm{padding:6px 12px;font-size:10px}
.btn:disabled,.btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.card-soft{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-head{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-head .title{font-size:13px;font-weight:600;letter-spacing:-0.005em}
.card-body{padding:18px}
.card-head .eyebrow{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted)}

/* Inputs */
.input{width:100%;padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--r-md);background:var(--paper);font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.textarea{width:100%;padding:10px 14px;border:1.5px solid var(--ink);border-radius:var(--r-md);background:var(--paper);font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--ink);resize:vertical;min-height:80px}
.field-label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:6px}

/* Empty state */
.empty{border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper);padding:36px;text-align:center}
.empty .eb{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted-2);margin-bottom:8px}
.empty .bd{font-size:12px;color:var(--muted);line-height:1.55}

/* ════ App layout (Anna Invoices shell — authored, not mirrored) ════ */
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 28px;border-bottom:1.5px solid var(--ink);background:var(--paper)}
.app-brand{display:flex;align-items:center;gap:12px;min-width:0}
.app-title{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-0.02em;line-height:1}
.app-title .ac{color:var(--orange)}
.app-eyebrow{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);margin-top:4px}
.app-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.app-main{padding:32px 28px 80px;max-width:1180px;margin:0 auto}
.view{display:none}
.view.active{display:block}

/* ── Two-column app layout (M09): left history sidebar + invoice area ── */
.app-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.app-layout{grid-template-columns:1fr}}

/* ── History sidebar (M09 — authored) ── */
.history-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;position:sticky;top:88px}
.history-head{margin-bottom:12px}
.history-title{font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--ink)}
.history-sub{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);margin-top:3px}
.history-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.history-empty{font-family:var(--font-mono);font-size:11px;color:var(--muted);padding:10px 2px;line-height:1.5}
.history-row{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);padding:10px 12px}
.history-row-label{font-family:var(--font-mono);font-size:11px;color:var(--ink);line-height:1.45;word-break:break-word}
.history-row-actions{display:flex;flex-wrap:wrap;gap:6px}

/* ── Invoice form (authored) ── */
.invoice-card{margin-bottom:18px}
.invoice-form{display:flex;flex-direction:column;gap:16px}
.form-row{display:flex;flex-direction:column}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.invoice-form-actions{display:flex;justify-content:flex-end}
.invoice-result{margin-top:0}

/* ── Live total readout (rendered into #invoice-result by app.js) ── */
.live-total{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2);padding:18px 20px}
.live-total .lt-head{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted-2);margin-bottom:10px}
.live-total .lt-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:baseline}
.live-total .lt-metric{display:flex;flex-direction:column;gap:4px}
.live-total .lt-k{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.live-total .lt-v{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--ink)}
.live-total .lt-v.accent{color:var(--orange)}

/* ── Toast (authored; NOT the mirrored SB design-system toast). Error = .bad. ── */
.toast{display:flex;gap:10px;border:1px solid var(--line);border-left:3px solid var(--good);border-radius:var(--r-md);background:var(--paper-2);padding:12px 14px;margin-bottom:14px}
.toast.bad{border-left-color:var(--bad)}
.toast .tt{font-size:12px;font-weight:600;color:var(--ink)}
.toast.bad .tt{color:var(--bad)}
.toast .ts{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5;word-break:break-word}

/* ── Themed date/month picker (M08 — authored; replaces the native calendar/spinner) ── */
/* A .dp-field wraps a hidden canonical input + a visible display input + a trigger
   button; app.js reads the hidden #invoice-date / #work-month exactly as before. */
.dp-field{position:relative;display:flex;align-items:stretch}
.dp-field .input{padding-right:40px}                 /* room for the trigger icon */
.dp-field .input.is-invalid{border-color:var(--bad);box-shadow:0 0 0 3px #ee6a5522}
/* Trigger button — a calendar glyph drawn in currentColor, sized to sit inside the input. */
.dp-trigger{position:absolute;top:0;right:0;height:100%;width:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--ink);padding:0}
.dp-trigger:hover{color:var(--orange)}
.dp-trigger:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:var(--r-md)}
.dp-trigger svg{width:18px;height:18px;display:block}
/* The calendar icon strokes use currentColor, so it is INK (near-white in dark theme,
   near-black in light) and turns accent-orange on hover — clearly visible on the dark
   input, unlike the old invisible native icon. */

/* Popup — dark, in-theme, floating below the field. */
.dp-popup{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:248px;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:var(--r-md);box-shadow:0 12px 30px #0e0e0c40;padding:10px}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dp-title{font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink)}
.dp-nav{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-size:15px;line-height:1;cursor:pointer;padding:0}
.dp-nav:hover{border-color:var(--orange);color:var(--orange)}

/* Day grid (date picker) — 7 columns. */
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted-2);text-align:center;padding:4px 0}
.dp-cell{font-family:var(--font-mono);font-size:12px;color:var(--ink);background:transparent;border:none;border-radius:var(--r-sm);height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dp-empty{cursor:default}
.dp-day:hover,.dp-month:hover{background:var(--paper-3)}
.dp-cell.is-today{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.dp-cell.is-selected{background:var(--orange);color:#fff}
.dp-cell.is-selected:hover{background:var(--orange)}

/* Month grid (work-month picker) — 3 columns of month buttons. */
.dp-month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dp-month{height:38px;font-size:11px;text-transform:uppercase;letter-spacing:0.04em}

/* Hide any residual native calendar/spinner UI if a browser ever shows one on these
   fields (belt-and-braces — the inputs are type=hidden/text so this is defensive). */
.dp-field input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
.dp-field input::-webkit-inner-spin-button,
.dp-field input::-webkit-clear-button{display:none;-webkit-appearance:none}

/* ════ Sign-in page (M10 — authored; served by the proxy's signInPage()) ════ */
/* A centered, full-height themed card + a brand header mirroring the app .app-brand.
   The proxy inline page uses these classes; they are PUBLIC (styles.css is served to
   logged-out users via the M10 gate allowlist), so the login screen renders in-theme. */
.signin-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px 20px}
.signin-brand{display:flex;align-items:center;gap:12px}
.signin-brand .signin-title{font-family:var(--font-display);font-weight:900;font-size:24px;letter-spacing:-0.02em;line-height:1}
.signin-brand .signin-title .ac{color:var(--orange)}
.signin-brand .signin-eyebrow{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);margin-top:4px}
.signin-card{width:100%;max-width:420px}

/* ── Theme-toggle Lucide icons (M10 — authored). The button inlines BOTH the sun and
      moon Lucide SVGs; CSS shows exactly one per [data-theme] (no JS icon-swap ->
      flicker-free, pre-paint-safe). Dark mode shows the SUN (offering "Light mode"),
      light mode shows the MOON (offering "Dark mode"). Icons inherit currentColor so
      they match the toggle text (near-white on dark, near-black on light). ── */
.theme-toggle .ti{width:16px;height:16px;display:block;flex-shrink:0;color:currentColor}
[data-theme="dark"] .theme-toggle .ti-moon{display:none}
[data-theme="light"] .theme-toggle .ti-sun{display:none}