/* PICT ERP — light theme.
   Data-dense business UI: fixed sidebar, sticky toolbars, tabular numerals. */

:root {
  --bg:        #f2f5f8;
  --surface:   #ffffff;
  --surface-2: #f7f9fb;
  --sidebar:   #ffffff;
  --ink:       #17222e;
  --ink-2:     #56687a;
  --ink-3:     #8697a6;
  --line:      #dde4ea;
  --line-2:    #eceff3;
  --accent:    #0b62b5;
  --accent-2:  #e8f1fa;
  --accent-3:  #cfe3f6;
  --pos:       #0a7048;
  --pos-bg:    #e3f4ec;
  --neg:       #b3372a;
  --neg-bg:    #fdecea;
  --warn:      #96650d;
  --warn-bg:   #fdf2dc;
  --info-bg:   #e8f1fa;
  --radius:    6px;
  --shadow:    0 1px 2px rgba(20,35,50,.06), 0 1px 3px rgba(20,35,50,.04);
  --shadow-lg: 0 8px 28px rgba(20,35,50,.16);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 13px/1.5 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-3); }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: 224px 1fr; height: 100vh; }
.app.no-nav { grid-template-columns: 1fr; }

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.brand {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.brand span { display: block; font-size: 10px; color: var(--ink-3); margin-top: 7px;
              letter-spacing: .7px; text-transform: uppercase; font-weight: 600; }

/* The supplied PICT-Logo.png is a 2000x2000 canvas with the wordmark occupying
   only x 58..1943, y 700..1274. Rather than ship a re-encoded (and visibly
   re-sampled) copy, crop to that box here — the maths below is derived from
   those measured bounds, so the original file stays pixel-exact. */
.logo-mark {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1886 / 575;
  width: 100%;
}
.logo-mark img {
  position: absolute;
  width: 106.045%;      /* 2000 / 1886  */
  left: -3.075%;        /*  -58 / 1886  */
  top: -121.74%;        /* -700 / 1886, expressed against the container height */
  display: block;
}
.brand .logo-mark { width: 148px; }

.nav { padding: 6px 0 24px; flex: 1; }
.nav-group > h2 {
  margin: 0; padding: 12px 16px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3);
}
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 16px; color: var(--ink-2); text-decoration: none;
  font-size: 12.5px; border-left: 2px solid transparent;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a.active {
  background: var(--accent-2); border-left-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.nav a .ic { width: 15px; text-align: center; opacity: .8; font-size: 12px; }

.main { display: flex; flex-direction: column; overflow: hidden; position: relative; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; height: 52px; flex: 0 0 52px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar h2 { margin: 0; font-size: 15px; font-weight: 640; }
.topbar .spacer { flex: 1; }
.topbar .meta { font-size: 11.5px; color: var(--ink-3); }

/* thin progress bar for background refreshes — no content flash */
.progress {
  position: absolute; top: 52px; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 30; opacity: 0;
  transition: width .2s ease, opacity .2s;
}
.progress.on { opacity: 1; width: 70%; transition: width 1.4s cubic-bezier(.1,.7,.3,1); }
.progress.done { width: 100%; opacity: 0; transition: width .15s, opacity .3s .15s; }

.content { flex: 1; overflow-y: auto; padding: 18px; }
.route { display: none; }
.route.active { display: block; }

.who {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.who .av {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 650;
}
.who .nm { font-size: 12px; font-weight: 600; line-height: 1.25; }
.who .rl { font-size: 10.5px; color: var(--ink-3); }

/* ---------- controls ---------- */
select, input[type=text], input[type=date], input[type=number],
input[type=search], input[type=password], input[type=email], textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 5px 8px; min-width: 0; width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--accent-3); outline-offset: -1px; border-color: var(--accent);
}
textarea { resize: vertical; min-height: 58px; }
label.fld { display: flex; flex-direction: column; gap: 3px; font-size: 11px;
            color: var(--ink-2); font-weight: 500; }
label.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; }
label.chk input { width: auto; }

button {
  font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #fff; border: 1px solid transparent;
  border-radius: var(--radius); padding: 6px 13px;
}
button:hover { background: #0a558f; }
button.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.ghost:hover { background: var(--surface-2); }
button.danger { background: var(--neg); }
button.danger:hover { background: #93291e; }
button.link { background: none; color: var(--accent); border: none; padding: 2px 4px; text-decoration: underline; }
button.link:hover { background: none; color: #0a558f; }
button.sm { padding: 3px 9px; font-size: 11.5px; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Links that present as buttons (printable documents open in a new tab). */
a.btnlink {
  display: inline-block; font: inherit; font-weight: 550; text-decoration: none;
  border-radius: var(--radius); padding: 6px 13px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid transparent;
}
a.btnlink:hover { background: #0a558f; color: #fff; }
a.btnlink.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
a.btnlink.ghost:hover { background: var(--surface-2); color: var(--ink); }
a.btnlink.sm { padding: 3px 9px; font-size: 11.5px; }

.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; min-width: 180px; }
.toolbar .spacer { flex: 1; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow);
}
.card > header {
  padding: 11px 14px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.card > header h3 { margin: 0; font-size: 13px; font-weight: 640; }
.card > header .sub { font-size: 11.5px; color: var(--ink-3); }
.card > header .spacer { flex: 1; }
.card .body { padding: 14px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.kpi .k { font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
          color: var(--ink-3); font-weight: 650; }
.kpi .v { font-size: 20px; font-weight: 650; margin-top: 5px;
          font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.kpi .s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1150px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { padding: 7px 11px; text-align: left; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface); color: var(--ink-2);
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
tbody tr:hover { background: var(--surface-2); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
                 font-family: var(--mono); font-size: 12px; }
td.mono { font-family: var(--mono); font-size: 12px; }
tfoot td { font-weight: 650; border-top: 2px solid var(--line); background: var(--surface-2); }
.muted { color: var(--ink-3); }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.indent { padding-left: 28px !important; }

.pill { display: inline-block; padding: 1.5px 7px; border-radius: 10px;
        font-size: 10.5px; font-weight: 650; letter-spacing: .3px;
        background: var(--line-2); color: var(--ink-2); }
.pill.ok, .pill.COLLECTED, .pill.PAID, .pill.APPROVED, .pill.ACTIVE-asset { background: var(--pos-bg); color: var(--pos); }
.pill.warn, .pill.ACTIVE, .pill.OPEN, .pill.PARTIAL, .pill.DRAFT { background: var(--warn-bg); color: var(--warn); }
.pill.bad, .pill.VOID, .pill.CANCELLED { background: var(--line-2); color: var(--ink-3); }
.pill.info, .pill.CREDIT, .pill.BILLED, .pill.RECEIVED { background: var(--info-bg); color: var(--accent); }
.pill.DISPOSED { background: var(--line-2); color: var(--ink-3); }

.pager { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
         font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line-2); }
.pager .spacer { flex: 1; }

/* ---------- charts ---------- */
.chart { width: 100%; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart text { fill: var(--ink-3); font-size: 10px; font-family: var(--sans); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .area { fill: var(--accent); opacity: .09; }
.chart .dot { fill: var(--accent); }

.bar-row { display: grid; grid-template-columns: 148px 1fr 100px; gap: 10px;
           align-items: center; padding: 4px 0; font-size: 12px; }
.bar-row .track { background: var(--line-2); border-radius: 3px; height: 15px; overflow: hidden; }
.bar-row .fill { background: var(--accent); height: 100%; border-radius: 3px; }
.bar-row .fill.neg { background: var(--neg); }
.bar-row .val { text-align: right; font-family: var(--mono); font-size: 11.5px;
                font-variant-numeric: tabular-nums; }

/* ---------- drawer ---------- */
.drawer-bg { position: fixed; inset: 0; background: rgba(20,35,50,.34); display: none; z-index: 40; }
.drawer-bg.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 94vw);
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .16s ease-out;
  z-index: 41; display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer > header { display: flex; align-items: center; gap: 12px;
                   padding: 13px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.drawer > header h3 { margin: 0; font-size: 14px; font-weight: 640; }
.drawer > header .spacer { flex: 1; }
.drawer .dbody { flex: 1; overflow-y: auto; padding: 16px 18px; }
.x { background: none; border: none; color: var(--ink-2); font-size: 20px; line-height: 1; padding: 0 4px; }
.x:hover { color: var(--ink); background: none; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; font-size: 12.5px; }
dl.kv dt { color: var(--ink-3); }
dl.kv dd { margin: 0; font-weight: 550; }

/* ---------- messages ---------- */
.empty { padding: 34px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
.err  { padding: 10px 13px; background: var(--neg-bg); color: #8c2c22;
        border: 1px solid #f3c8c2; border-radius: var(--radius); margin-bottom: 12px; font-size: 12.5px; }
.ok   { padding: 10px 13px; background: var(--pos-bg); color: #0a5f3e;
        border: 1px solid #b5e0cd; border-radius: var(--radius); margin-bottom: 12px; font-size: 12.5px; }
.note { padding: 10px 13px; background: var(--info-bg); color: #0a4f8f;
        border: 1px solid var(--accent-3); border-radius: var(--radius); margin-bottom: 12px; font-size: 12.5px; }
.spinner { padding: 30px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 11px; }
.form-grid .wide { grid-column: 1 / -1; }

/* ---------- login ---------- */
/* Sign-in. min-height rather than height so a soft keyboard on a phone cannot
   crop the form, and a side gutter so the card never touches the screen edge. */
.login-wrap {
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); padding: 24px 16px;
}
.login {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 28px 26px; box-shadow: var(--shadow-lg);
  text-align: center;
}
.login h1 { margin: 0 0 3px; font-size: 18px; font-weight: 660; }
.login .sub { color: var(--ink-3); font-size: 12.5px; margin-bottom: 22px; }
/* The mark is a fixed-ratio crop of the full logo, so it needs the width set
   and the margin doing the centring — not text-align, which cannot centre a
   block element. */
.login .logo-mark { width: 172px; max-width: 70%; margin: 0 auto 18px; }
/* Labels and fields read left-to-right even though the card is centred. */
.login label { margin-bottom: 12px; text-align: left; }
.login button { width: 100%; margin-top: 6px; padding: 10px; }
.login .note, .login .err, .login .ok { text-align: left; }

/* ---------- collapsing the menu ---------- */

/* Hamburger. Three bars that become a cross while the drawer is open, so the
   same control obviously closes what it opened. */
.navtoggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 0 7px; margin-right: 10px;
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; flex: 0 0 auto;
}
.navtoggle span {
  display: block; height: 2px; width: 100%; background: var(--ink-2, #43596E);
  border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
}
.navtoggle:hover { border-color: var(--accent); }
.navtoggle:hover span { background: var(--accent); }

/* Desktop: collapsing simply removes the column. */
.app.nav-collapsed { grid-template-columns: 1fr; }
.app.nav-collapsed .sidebar { display: none; }

/* Dim the page behind the drawer. Only ever used at phone width. */
.navscrim {
  position: fixed; inset: 0; background: rgba(14, 35, 56, .42);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 39;
}
body.nav-open .navscrim { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .navtoggle span, .navscrim, .sidebar { transition: none !important; }
}

/* ---------- narrow screens ---------- */
/* Below ~900px the fixed sidebar costs more than it gives, so the shell stacks
   and the navigation becomes a single horizontal strip. */
@media (max-width: 900px) {
  /* A single column with the menu off to one side, rather than a horizontal
     strip of 36 links that has to be scrolled sideways to reach anything past
     the first four. The menu slides over the page and keeps its grouping,
     which is how it is actually navigable on a phone. */
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; height: 100dvh; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 272px; max-width: 84vw;
    z-index: 40; border-right: 1px solid var(--line); border-bottom: none;
    display: flex; flex-direction: column; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 28px rgba(14, 35, 56, .18);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  /* The desktop collapse must not also hide it on a phone — here the drawer
     state is what decides, and it starts closed. */
  .app.nav-collapsed .sidebar { display: flex; }

  .brand { padding: 14px 16px; }
  .brand .logo-mark { width: 118px; }
  .nav { padding: 6px 0; display: block; overflow: visible; }
  .nav-group > h2 { display: block; }
  .nav a { padding: 11px 16px; font-size: 13.5px; white-space: normal; }
  .who { padding: 12px 16px; }
  .topbar { padding: 0 12px; }
  .topbar { padding: 0 12px; }
  .topbar .meta { display: none; }
  .content { padding: 12px; }
  .progress { top: auto; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .kpi .v { font-size: 18px; }
}

/* ---------- misc ---------- */
.line-editor td { padding: 4px 6px; }
.line-editor input, .line-editor select { padding: 4px 6px; font-size: 12px; }
.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  background: var(--ink); color: #fff; padding: 10px 15px; border-radius: var(--radius);
  font-size: 12.5px; box-shadow: var(--shadow-lg); max-width: 420px;
}
.toast.bad { background: var(--neg); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs button {
  background: none; color: var(--ink-2); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 7px 13px; font-size: 12.5px; font-weight: 550;
}
.tabs button:hover { background: var(--surface-2); color: var(--ink); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }

/* Editorial warning inside the user manual. Same weight as an error message,
   but not an error — it is advice, and a screen sweep should not read it as a
   failure. */
.callout-warn {
  background: var(--bad-2, #FAE9E0);
  border-left: 3px solid var(--bad, #A93C0B);
  color: var(--ink);
  padding: 11px 14px;
  border-radius: var(--radius, 6px);
  font-size: 14px;
}

/* ---------- export menu ---------- */
.exportmenu { position: relative; display: inline-block; }
.exportmenu-list {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 30;
  min-width: 168px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 4px; display: flex; flex-direction: column;
}
.exportmenu-list[hidden] { display: none; }
.exportmenu-item {
  padding: 8px 11px; font-size: 13px; color: var(--ink); text-decoration: none;
  border-radius: 4px; white-space: nowrap;
}
.exportmenu-item:hover { background: var(--accent-2, var(--surface-2)); color: var(--accent); }

/* ---------- display density ---------- */
/*
 * Three sizes, chosen from the toolbar and remembered per browser.
 *
 * Implemented with `zoom` rather than `transform: scale()` because zoom
 * reflows the layout: at 85% a wide table genuinely fits more columns on the
 * screen, which is the point. A transform would only shrink the picture and
 * leave the same columns cut off, and would break the sticky table headers
 * and the fixed drawer as well.
 *
 * The sidebar keeps its own scale so the menu stays readable while the data
 * area tightens — shrinking navigation text buys nothing.
 */
.app                  { zoom: 1; }
body.density-compact  .app { zoom: 0.9; }
body.density-tight    .app { zoom: 0.8; }

/* Claw back a little more room in the data area at the tighter settings,
   where the padding is what wastes the width rather than the type. */
body.density-compact th, body.density-compact td { padding: 6px 9px; }
body.density-tight   th, body.density-tight   td { padding: 5px 7px; }
body.density-tight   table { font-size: 12px; }

.density {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-right: 8px; flex: 0 0 auto;
}
.density button {
  background: transparent; border: 0; border-right: 1px solid var(--line);
  padding: 5px 9px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--ink-3); cursor: pointer; line-height: 1.2;
}
.density button:last-child { border-right: 0; }
.density button:hover { color: var(--accent); background: var(--accent-2); }
.density button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-3); cursor: pointer; margin-bottom: -1px;
}
.tab:hover { color: var(--accent); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- type-ahead picker ---------- */
.picker { position: relative; }
.picker input { width: 100%; }
.picker-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 40;
  max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 3px;
}
.picker-list[hidden] { display: none; }
.picker-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: 7px 10px; font: inherit; font-size: 12.5px; color: var(--ink);
  border-radius: 4px; cursor: pointer;
}
.picker-item:hover { background: var(--accent-2); color: var(--accent); }
.picker-empty { padding: 8px 10px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- collapsible entry form ---------- */
/* Forms start closed: an entry form open on every visit costs a page of
   scrolling and, when it has to load pickers, real time. */
.entry > summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font-weight: 650; font-size: 13.5px; color: var(--accent);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px;
}
.entry > summary::-webkit-details-marker { display: none; }
.entry > summary::before { content: '+ '; font-weight: 700; }
.entry[open] > summary::before { content: '− '; }
.entry > summary:hover { border-color: var(--accent); background: var(--accent-2); }