/* Longlim BMS demo — component styles (Tailwind CDN handles utilities) */
:root {
  --brand: #f59e0b;        /* amber-500 */
  --brand-dark: #d97706;
  --ink: #0f172a;
  --sidebar: #0f172a;
}
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

/* Sidebar */
.sidebar { background: var(--sidebar); position: sticky; top: 0; height: 100vh; }
.nav-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; color: #cbd5e1; margin-bottom: 2px; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-active { background: var(--brand); color: #0f172a; font-weight: 600; }
.nav-active:hover { background: var(--brand); color: #0f172a; }
.nav-ai { color: #fcd34d; font-weight: 600; }
.nav-group { padding: .9rem .75rem .35rem; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #64748b; font-weight: 700; }
.topbar { position: sticky; top: 0; z-index: 20; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 600; font-size: .875rem;
  padding: .55rem 1rem; border-radius: .5rem; border: 1px solid transparent; cursor: pointer; transition: all .12s; text-decoration: none; }
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.btn-primary { background: var(--brand); color: #0f172a; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { background: #fff; color: #334155; border-color: #e2e8f0; }
.btn-ghost:hover { background: #f8fafc; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Cards / layout */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.card-pad { padding: 1.25rem; }
.card-title { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.card-sub { font-size: .78rem; color: #64748b; }

/* KPI tiles */
.kpi-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.kpi-label { font-size: .75rem; color: #64748b; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b;
  padding: .6rem .75rem; border-bottom: 1px solid #e2e8f0; background: #f8fafc; white-space: nowrap; }
.table td { padding: .6rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.table tr:hover td { background: #f8fafc; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .18rem .55rem;
  border-radius: 999px; white-space: nowrap; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-purple { background: #ede9fe; color: #5b21b6; }

/* Forms */
.label { display: block; font-size: .8rem; font-weight: 600; color: #334155; margin-bottom: .3rem; }
.input, select.input, textarea.input { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .55rem .75rem;
  font-size: .875rem; background: #fff; outline: none; transition: border .12s, box-shadow .12s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

/* Public forms hero */
.hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #92400e 130%); color: #fff; }

/* misc */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.empty { text-align: center; color: #94a3b8; padding: 2.5rem 1rem; font-size: .9rem; }

/* small screens: sidebar stacks into a wrap bar instead of overflowing */
@media (max-width: 700px) {
  .sidebar { position: static; width: 100%; height: auto; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .nav-group { width: 100%; padding-top: .6rem; }
}

/* ===== v2 financials additions (financials UI agent) — additions only ===== */

/* Active-company scope bar (03 §6 — financial data is single-company) */
.scope-bar { background:#fff; border:1px solid #e2e8f0; border-radius:.75rem; padding:.55rem .9rem; }

/* Shared type-ahead dropdown (GET /api/ac) */
.ac-wrap { position: relative; }
.ac-menu { position:absolute; top:calc(100% + 2px); left:0; right:0; background:#fff;
  border:1px solid #cbd5e1; border-radius:.5rem; box-shadow:0 10px 28px rgba(15,23,42,.14);
  z-index:40; max-height:16rem; overflow:auto; }
.ac-menu.hidden { display:none; }
.ac-item { padding:.5rem .75rem; font-size:.85rem; cursor:pointer; border-bottom:1px solid #f1f5f9; }
.ac-item:last-child { border-bottom:none; }
.ac-item:hover { background:#fef3c7; }
.ac-sub { font-size:.72rem; color:#64748b; margin-left:.35rem; }

/* Print documents (invoice + statement) — screen chrome drops, document fills the page */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  body { background: #fff !important; }
  main.p-6 { padding: 0 !important; }
  .card.doc { border: none !important; box-shadow: none !important; padding: 0 !important; max-width: none !important; }
  .card.doc .card-pad { border: none; box-shadow: none; }
  .table th, .table td { border-bottom: 1px solid #e2e8f0 !important; }
  .table tr:hover td { background: transparent !important; }
  .page-break { page-break-before: always; }
  @page { margin: 14mm; }
}

/* ==========================================================================
   APPENDED — receipts stage (F2). Extend-only: nothing above is rewritten.
   1) type-ahead rows under the receipt customer picker;
   2) PRINT styles for the document views (receipt now; invoice + statement
      reuse the same .doc-sheet / .no-print / .print-only hooks).
   ========================================================================== */
.ac-row + .ac-row { border-top: 1px solid #f1f5f9; }
.doc-sheet { max-width: 60rem; }
.print-only { display: none; }

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .no-print, footer { display: none !important; }
  .print-only { display: block; }
  main { padding: 0 !important; }
  .card { border: none; box-shadow: none; }
  .doc-sheet { max-width: 100%; padding: 0; }
  .table th, .table td { padding: .35rem .5rem; }
  a[href] { text-decoration: none; color: inherit; }
}

/* ==========================================================================
   APPENDED — responsive floor (journey 7: no horizontal scroll at 375px).
   The shell is a fixed 240px sidebar + flex-1 main column; on phones that
   starves the content (240px of 375px). Stack the sidebar ABOVE the content on
   narrow screens — the same fallback views/dashboard.ejs carried locally, now
   global so every register benefits. Wide tables scroll INSIDE their
   overflow-x-auto cards instead of stretching the document.
   ========================================================================== */
@media (max-width: 640px) {
  body > div.flex { flex-direction: column; }
  .sidebar { position: static !important; width: 100% !important; height: auto !important; }
  .topbar { flex-wrap: wrap; row-gap: .4rem; }
}

/* ==========================================================================
   APPENDED — search stage (N2 global search · N3 saved views · N4 combobox ·
   N6 CSV export). Extend-only: nothing above is rewritten.
   ========================================================================== */

/* Top-bar global search (partials/head.ejs) — sits in the sticky topbar */
.topbar-search .input { width: 15.5rem; padding: .35rem .6rem; font-size: .82rem; }
@media (max-width: 900px) { .topbar-search .input { width: 10rem; } }
@media (max-width: 640px) { .topbar-search { display: none; } /* page-level box on /search carries it */ }

/* Combobox keyboard-highlight state (ac.js adds .ac-active to the focused row;
   :hover keeps the mouse parity) + the explicit empty/no-match rows */
.ac-item.ac-active, .ac-item.ac-active:hover { background: #fef3c7; }
.ac-empty { padding: .5rem .75rem; font-size: .78rem; color: #94a3b8; }

/* Register toolbar: Export CSV + saved-view chips + the save form */
.list-tools { margin-top: .75rem; }
.view-chip { display: inline-flex; align-items: center; gap: .25rem; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 999px; padding: .12rem .2rem .12rem .7rem; font-size: .78rem; }
.view-chip > a { font-weight: 600; color: #334155; text-decoration: none; white-space: nowrap; }
.view-chip > a:hover { color: var(--brand-dark); text-decoration: underline; }
.view-chip form { display: inline-flex; }
.view-chip-x { border: none; background: transparent; color: #64748b; font-size: .9rem; line-height: 1;
  padding: .1rem .35rem; border-radius: 999px; cursor: pointer; }
.view-chip-x:hover { background: #fee2e2; color: #b91c1c; }
.view-save .input { font-size: .8rem; }

/* ==========================================================================
   APPENDED — UX + print refinement sweep (Phase 4 UX stage). Extend-only:
   nothing above is rewritten. Sections:
   1) :focus-visible — keyboard focus is ALWAYS visible (keyboard/focus (e)).
   2) .empty-state — the shared 0-rows register state (views/shared/empty-state.ejs).
   3) CONTRAST fixes (a11y (f), WCAG AA 4.5:1 on text pairs):
      .empty / .ac-empty          #94a3b8→#475569 (2.9:1 → 7.5:1 on white)
      .view-chip-x (above)        #94a3b8→#64748b (2.9:1 → 4.8:1 on white)
      .nav-group (below)          #64748b→#94a3b8 (3.7:1 → 7.0:1 on the slate-900 sidebar)
      .btn-primary:hover          keeps DARK text — #fff on amber-600 was 3.2:1
      (.nav-group is re-declared here because section 1 of this file owns it;
       the later rule wins the cascade — the earlier value is intentionally
       superseded, not edited in place.)
   4) PRINT (a): generic document hygiene — repeated <thead>, rows never split
      across pages, headings never orphaned at a page foot — plus the printable
      DISPATCH BOARD (per-date crew sheet) and the print-clean credit-note
      register.
   ========================================================================== */

/* 1) Keyboard focus (e). Amber-800 on white ≈ 5:1; text inputs keep their
   existing amber ring (.input:focus) and drop the double outline. */
:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }
.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible { outline: none; }
.btn:focus-visible { outline-offset: 2px; }

/* 2) Shared empty state (b) */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: #475569; }
.empty-state .empty-icon { font-size: 1.7rem; line-height: 1; margin-bottom: .5rem; }
.empty-state .empty-text { font-size: .9rem; margin-bottom: .75rem; }
.empty-state .empty-extra { font-size: .75rem; color: #64748b; margin-top: .6rem; }

/* 3) Contrast fixes (f) */
.nav-group { color: #94a3b8; }
.btn-primary:hover { background: var(--brand-dark); color: #0f172a; }
.empty { color: #475569; }
.ac-empty { color: #64748b; }

/* 4) PRINT (a) — screen-only block for the dispatch sheet */
.print-board { display: none; }
.print-hint { font-size: .72rem; color: #64748b; }

@media print {
  /* Generic document hygiene: column heads repeat on every page, a row never
     splits, a heading never sits alone at the bottom of a page. */
  thead { display: table-header-group; }
  .table tr { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, .card-title { break-after: avoid; }
  .card { break-inside: auto; }        /* long doc cards MAY flow across pages */
  .avoid-break { break-inside: avoid; page-break-inside: avoid; }

  /* Dispatch board (per-date crew sheet) — screen board drops, sheet prints.
     One board URL = one date = one sheet (use ‹ › to move days before printing). */
  .print-board { display: block; }
  .print-board .crew-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
  .print-board .crew-table th { text-align: left; border-bottom: 2px solid #0f172a; padding: .3rem .45rem; }
  .print-board .crew-table td { border-bottom: 1px solid #cbd5e1; padding: .3rem .45rem; vertical-align: top; }
  .print-board .crew-block { break-inside: avoid; page-break-inside: avoid; margin-top: .9rem; }
  .print-board .unassigned { color: #64748b; }

  /* Credit-note register: prints as a clean statement of corrections on file —
     filter form, pagination and void buttons are screen affordances. */
}