/* =====================================================================
   Polcas Agritrade Corp - Trading System
   Carries over the original design language (green, light, card-based) with
   the same tokens, spacing and component shapes, so the app stays familiar.
   ===================================================================== */

/* Theme is chosen explicitly by the user and stored per device; the OS
   preference is not consulted, so the app never changes appearance on its own
   halfway through someone's shift. */
:root {
  --green-900:#14532d; --green-800:#166534; --green-700:#15803d;
  --green-100:#dcfce7; --green-50:#f0fdf4;
  --bg:#f4f6f4; --surface:#ffffff; --card:#ffffff;
  --text-1:#1f2937; --text-2:#6b7280; --text-3:#9ca3af;
  --border:#e5e7eb; --border-light:#f3f4f6;
  --hover:#f3f4f6; --row-hover:#fafafa; --thead-bg:#f9fafb; --thead-fg:#6b7280;
  --status-ok:#16a34a; --status-warn:#d97706;
  --status-err:#dc2626; --status-info:#2563eb;
  --tooltip-bg:#1f2937; --tooltip-fg:#ffffff;
  --accent:var(--green-800); --accent-hover:var(--green-900);
  --on-accent:#ffffff;
  --soft-err-bg:#fef2f2; --soft-err-bd:#fecaca;
  --soft-info-bg:#eff6ff; --soft-info-bd:#bfdbfe; --soft-info-fg:#1e40af;
  --focus-ring:rgba(22,101,52,.12);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  /* badge pairs: background / foreground */
  --b-pending-bg:#fef3c7; --b-pending-fg:#92400e;
  --b-ok-bg:#dcfce7;      --b-ok-fg:#166534;
  --b-err-bg:#fee2e2;     --b-err-fg:#991b1b;
  --b-open-bg:#dbeafe;    --b-open-fg:#1e40af;
  --b-partial-bg:#ffedd5; --b-partial-fg:#9a3412;
  --b-transit-bg:#e0f2fe; --b-transit-fg:#0c4a6e;
  --b-hold-bg:#f3f4f6;    --b-hold-fg:#374151;
  --b-trans-bg:#ede9fe;   --b-trans-fg:#5b21b6;
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-lg:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --sidebar:240px; --sidebar-c:64px; --topbar:60px;
  --ease:200ms ease;
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

:root[data-theme="dark"] {
  --green-100:#14532d; --green-50:#052e16;
  --bg:#0f1512; --surface:#161d19; --card:#161d19;
  --text-1:#e7ecea; --text-2:#9aa8a2; --text-3:#6e7d77;
  --border:#27322d; --border-light:#1e2723;
  --hover:#1e2723; --row-hover:#1b241f; --thead-bg:#1b241f; --thead-fg:#9aa8a2;
  --status-ok:#4ade80; --status-warn:#fbbf24;
  --status-err:#f87171; --status-info:#60a5fa;
  --tooltip-bg:#e7ecea; --tooltip-fg:#0f1512;
  --accent:#22c55e; --accent-hover:#16a34a; --on-accent:#052e16;
  --soft-err-bg:#2a1416; --soft-err-bd:#5c2327;
  --soft-info-bg:#11202f; --soft-info-bd:#1e3a5f; --soft-info-fg:#93c5fd;
  --focus-ring:rgba(34,197,94,.2);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239aa8a2'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  --b-pending-bg:#3a2c0b; --b-pending-fg:#fcd34d;
  --b-ok-bg:#0d2c1a;      --b-ok-fg:#6ee7a8;
  --b-err-bg:#331416;     --b-err-fg:#fca5a5;
  --b-open-bg:#12243d;    --b-open-fg:#93c5fd;
  --b-partial-bg:#35210f; --b-partial-fg:#fdba74;
  --b-transit-bg:#0c2739; --b-transit-fg:#7dd3fc;
  --b-hold-bg:#242e29;    --b-hold-fg:#c2cdc8;
  --b-trans-bg:#241b3d;   --b-trans-fg:#c4b5fd;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --sh-lg:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.35);
  color-scheme: dark;   /* native scrollbars and the date picker follow suit */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);font-size:14px;color:var(--text-1);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;}
[hidden]{display:none !important;}

/* ── LOGIN / SETUP ─────────────────────────────────────── */
.centre-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px;}
.lc{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px;width:100%;max-width:400px;box-shadow:var(--sh-lg);}
.lc.wide{max-width:520px;}
.lc-logo{width:44px;height:44px;background:var(--accent);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.lc-logo svg{width:22px;height:22px;color:var(--on-accent);}
.lc h1{font-size:21px;font-weight:700;color:var(--text-1);margin-bottom:3px;}
.lc .lc-sub{font-size:13px;color:var(--text-2);margin-bottom:28px;}
.lf{margin-bottom:14px;}
.lf label{display:block;font-size:12.5px;font-weight:600;color:var(--text-1);margin-bottom:5px;}
.lf input{width:100%;height:42px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-md);font-size:14px;font-family:var(--font);background:var(--surface);color:var(--text-1);outline:none;transition:border-color var(--ease),box-shadow var(--ease);}
.lf input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
.lc-btn{width:100%;height:42px;background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--r-md);font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:background var(--ease);margin-top:6px;}
.lc-btn:hover{background:var(--accent-hover);}
.lc-btn:disabled{opacity:.6;cursor:not-allowed;}
/* "Remember me" row: a real checkbox, so the whole line is clickable. */
.checkline{display:flex;align-items:center;gap:9px;margin:4px 0 8px;cursor:pointer;
  font-size:12.5px;font-weight:500;color:var(--text-2);user-select:none;}
.checkline input[type="checkbox"]{width:16px;height:16px;margin:0;flex-shrink:0;
  accent-color:var(--accent);cursor:pointer;-webkit-appearance:auto;appearance:auto;}
.alert-err{background:var(--soft-err-bg);border:1px solid var(--soft-err-bd);color:var(--status-err);border-radius:var(--r-md);padding:10px 12px;font-size:13px;margin-bottom:14px;}
.alert-info{background:var(--soft-info-bg);border:1px solid var(--soft-info-bd);color:var(--soft-info-fg);border-radius:var(--r-md);padding:10px 12px;font-size:12.5px;margin-bottom:14px;}

/* ── APP SHELL ─────────────────────────────────────────── */
.shell{display:flex;height:100vh;overflow:hidden;}

.sidebar{width:var(--sidebar);background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width var(--ease);overflow:hidden;position:relative;z-index:200;}
.sidebar.collapsed{width:var(--sidebar-c);}
.sb-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--border-light);min-height:var(--topbar);flex-shrink:0;}
.sb-logo{width:32px;height:32px;background:var(--accent);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-logo svg{width:17px;height:17px;color:var(--on-accent);}
.sb-brand{min-width:165px;overflow:hidden;}
.sb-brand .bn{font-size:13px;font-weight:700;color:var(--text-1);white-space:nowrap;line-height:1.25;}
.sb-brand .bs{font-size:11px;color:var(--text-3);white-space:nowrap;margin-top:2px;}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 8px;}
.sb-nav::-webkit-scrollbar{width:3px;}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.nav-group{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-3);padding:12px 10px 4px;white-space:nowrap;transition:opacity var(--ease);}
.sidebar.collapsed .nav-group{opacity:0;pointer-events:none;}
.navBtn{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:none;border-radius:var(--r-md);color:var(--text-2);font-size:13.5px;font-family:var(--font);font-weight:500;cursor:pointer;text-align:left;transition:background var(--ease),color var(--ease);white-space:nowrap;position:relative;min-width:0;}
.navBtn:hover{background:var(--hover);color:var(--text-1);}
.navBtn.active{background:var(--accent);color:var(--on-accent);font-weight:600;}
.navBtn.active .nav-icon svg{stroke:var(--on-accent);}
.nav-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.nav-icon svg{width:17px;height:17px;}
.nav-label{overflow:hidden;text-overflow:ellipsis;transition:opacity var(--ease),max-width var(--ease);}
.sidebar.collapsed .nav-label{opacity:0;max-width:0;pointer-events:none;}
.sidebar.collapsed .navBtn::after{content:attr(title);position:absolute;left:calc(var(--sidebar-c) - 6px);top:50%;transform:translateY(-50%);background:var(--tooltip-bg);color:var(--tooltip-fg);padding:5px 10px;border-radius:var(--r-sm);font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--ease);z-index:1000;}
.sidebar.collapsed .navBtn:hover::after{opacity:1;}
.sb-foot{border-top:1px solid var(--border-light);padding:8px;flex-shrink:0;display:flex;gap:6px;}
.sb-act-btn{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;padding:8px 6px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);color:var(--text-2);font-size:12px;font-family:var(--font);cursor:pointer;transition:background var(--ease),color var(--ease);}
.sb-act-btn:hover{background:var(--hover);color:var(--text-1);}
.sb-act-btn .btn-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-act-btn .nav-icon{width:16px;height:16px;}
.sidebar.collapsed .sb-foot{flex-direction:column;}
.sidebar.collapsed .btn-lbl{display:none;}
.sidebar.collapsed .sb-act-btn{padding:8px 0;}
#sidebarOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;}
#sidebarOverlay.open{display:block;}

.right-col{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{height:var(--topbar);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:14px;flex-shrink:0;z-index:100;}
.topbar-toggle{width:36px;height:36px;border:none;background:none;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background var(--ease);flex-shrink:0;}
.topbar-toggle:hover{background:var(--border-light);}
.topbar-crumb{flex:1;display:flex;align-items:baseline;gap:0;min-width:0;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.tb-user{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--r-md);cursor:pointer;border:1px solid var(--border);transition:background var(--ease);}
.tb-user:hover{background:var(--border-light);}
.tb-ava{width:26px;height:26px;background:var(--green-100);color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.tb-user-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.tb-name{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-role{font-size:10.5px;color:var(--text-3);white-space:nowrap;}

/* position:relative so a table can measure its own offset against this box --
   see fitTableHeights(), which is what actually freezes the headings. */
.main{flex:1;overflow-y:auto;padding:28px 32px;background:var(--bg);position:relative;}

/* ── PAGES / CARDS ─────────────────────────────────────── */
.page{display:none;}
.page.active{display:block;}
.page>h2{font-size:22px;font-weight:700;color:var(--text-1);line-height:1.3;margin-bottom:3px;}
.page>.desc{font-size:13px;color:var(--text-2);margin-bottom:22px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;margin-bottom:20px;box-shadow:var(--sh-sm);}
.card-title{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-light);}
.section{border-top:1px solid var(--border-light);margin:4px 0 16px;padding-top:16px;}
.section-title{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:12px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}

/* ── FORMS ─────────────────────────────────────────────── */
label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px;letter-spacing:.2px;}
label .hint{font-weight:400;color:var(--text-3);}
input,select,textarea{width:100%;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-md);font-size:13.5px;font-family:var(--font);color:var(--text-1);background:var(--surface);transition:border-color var(--ease),box-shadow var(--ease);outline:none;-webkit-appearance:none;appearance:none;}
select{background-image:var(--arrow);background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px;cursor:pointer;}
textarea{height:auto;padding:10px 12px;resize:vertical;}
select[multiple]{height:100px;background-image:none;padding:8px;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
input[readonly],input[readonly]:focus{background:var(--border-light);border-color:var(--border);box-shadow:none;cursor:default;color:var(--text-2);}
/* Figures line up on the right, in a box as much as in a column: a typed
   amount ([data-num]) and a computed one (.num-out) both read down their
   decimal point. Tabular figures so the digits sit in fixed columns and the
   number does not shuffle sideways as it is typed. */
input[data-num],input.num-out{text-align:right;font-variant-numeric:tabular-nums;}
/* ── SEARCHABLE MULTI-SELECT ───────────────────────────── */
/* Replaces a <select multiple> with a searchable list of tickboxes. The select
   is still there holding the value -- clipped out of sight rather than hidden,
   so the review step still finds it. */
.multiselect{position:relative;}
.ms-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  clip-path:inset(50%);overflow:hidden;}
.ms-field{width:100%;height:42px;padding:0 34px 0 12px;text-align:left;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  font-size:13.5px;font-family:var(--font);color:var(--text-3);cursor:pointer;
  display:flex;align-items:center;transition:border-color var(--ease),box-shadow var(--ease);}
.ms-field.chosen{color:var(--text-1);}
.ms-field:hover:not(:disabled){border-color:var(--text-3);}
/* Locked, the same way a readonly input reads locked. */
.ms-field:disabled{background:var(--border-light);cursor:default;color:var(--text-2);}
.ms-field:disabled .ms-caret{opacity:.4;}
.ms-field[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
.ms-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;background:var(--arrow) no-repeat center/16px;pointer-events:none;}

/* Fixed and parked on <body> while open. The modal body scrolls, and anything
   positioned inside it is clipped at its edge -- which is exactly where this
   list would open from. Placed against the field's own rectangle instead, so it
   is never cut off and can flip above the field when the room is below. */
.ms-panel{position:fixed;z-index:1200;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 14px 38px rgba(0,0,0,.28);padding:8px;}
.ms-search{height:36px;margin-bottom:6px;flex-shrink:0;}
.ms-list{flex:1;min-height:0;overflow-y:auto;}
.ms-opt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-sm);
  font-size:13.5px;color:var(--text-1);cursor:pointer;}
.ms-opt:hover{background:var(--border-light);}
.ms-opt[hidden]{display:none;}
.ms-tick{flex-shrink:0;width:16px;height:16px;border:1.5px solid var(--border);
  border-radius:4px;background:var(--surface);position:relative;}
.ms-opt.on .ms-tick{background:var(--accent);border-color:var(--accent);}
.ms-opt.on .ms-tick::after{content:"";position:absolute;left:4.5px;top:1px;
  width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.ms-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* One choice at a time: no tickbox, so the current one is marked by weight. */
.ms-panel.ss .ms-opt{gap:0;}
.ms-panel.ss .ms-opt.on{background:var(--border-light);font-weight:600;color:var(--accent);}
.ms-none{padding:14px 8px;text-align:center;font-size:12.5px;color:var(--text-3);}
.ms-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding-top:7px;border-top:1px solid var(--border-light);flex-shrink:0;}
.ms-count{font-size:12px;color:var(--text-3);}
.ms-clear{border:none;background:none;padding:2px 4px;font-size:12px;font-family:var(--font);
  color:var(--accent);cursor:pointer;border-radius:var(--r-sm);}
.ms-clear:hover{background:var(--border-light);}

/* The choices written out, each droppable on its own. Scrolls rather than
   growing, so a long list cannot push the rest of the form off the screen. */
.ms-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;
  min-height:42px;max-height:110px;overflow-y:auto;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);}
.ms-chips-empty{font-size:12.5px;color:var(--text-3);align-self:center;}
.ms-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:3px 4px 3px 9px;border-radius:999px;font-size:12.5px;
  background:var(--soft-ok-bg,var(--border-light));color:var(--text-1);
  border:1px solid var(--border);}
.ms-chip-x{border:none;background:none;cursor:pointer;color:var(--text-3);
  font-size:15px;line-height:1;padding:0;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ms-chip-x:hover{background:var(--soft-err-bd,var(--border));color:var(--status-err,var(--text-1));}

/* ── DATE FIELDS (MM/DD/YYYY) ──────────────────────────── */
/* Masked text input plus a button that opens the browser's own picker. Native
   <input type="date"> is avoided because it renders in the browser's locale. */
.datefield{position:relative;display:block;}
.datefield input{padding-right:38px;font-variant-numeric:tabular-nums;}
.date-btn{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:28px;height:28px;border:none;background:none;border-radius:var(--r-sm);
  cursor:pointer;color:var(--text-3);display:flex;align-items:center;justify-content:center;
  transition:background var(--ease),color var(--ease);}
.date-btn:hover{background:var(--border-light);color:var(--text-1);}
/* The shared proxy is present for showPicker() but never seen. */
.date-picker-proxy{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;}
input.invalid,select.invalid{border-color:var(--status-err);box-shadow:0 0 0 3px rgba(220,38,38,.1);}
.field-note{font-size:11.5px;color:var(--text-2);margin-top:5px;}
.field-note.warn{color:var(--status-warn);}
.add-new-wrap{margin-top:6px;}
.add-new-wrap input{height:38px;}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border-radius:var(--r-md);font-size:13.5px;font-weight:600;font-family:var(--font);cursor:pointer;border:none;transition:background var(--ease),transform var(--ease);white-space:nowrap;background:var(--accent);color:var(--on-accent);margin-top:4px;}
.btn:hover:not(:disabled){background:var(--accent-hover);}
.btn:active:not(:disabled){transform:scale(.98);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn.secondary{background:var(--surface);color:var(--text-1);border:1px solid var(--border);margin-left:8px;}
.btn.secondary:hover:not(:disabled){background:var(--border-light);}
.btn.small{height:32px;padding:0 14px;font-size:12px;margin-top:0;}
.btn.danger{background:var(--status-err);}
.btn.danger:hover:not(:disabled){filter:brightness(.9);}
.btn-row{display:flex;align-items:center;flex-wrap:wrap;gap:0;}

/* ── TABLES ────────────────────────────────────────────── */
/* The wrapper scrolls, not the page, so the sticky heading below has something
   to stick to. Its height is set by fitTableHeights(); this is the floor for
   the moment before that runs, and for tables inside a modal, which are bounded
   by the modal body instead. */
.tableWrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:auto;box-shadow:var(--sh-sm);}
.modal-body .tableWrap{max-height:320px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{background:var(--thead-bg);color:var(--thead-fg);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.45px;padding:11px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--border-light);color:var(--text-1);vertical-align:middle;font-variant-numeric:tabular-nums;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--row-hover);}
td.num,th.num{text-align:right;}
.empty-state{padding:44px 24px;text-align:center;color:var(--text-3);}
.empty-state svg{display:block;margin:0 auto 10px;opacity:.35;}

/* A second horizontal scrollbar above the headings.
   The wide tables run to 30 columns; reaching the bar under the last row meant
   scrolling to the bottom of the page first just to scroll sideways. It scrolls
   the same element, and hides itself when there is nothing to scroll. */
.scroll-top{overflow-x:auto;overflow-y:hidden;background:var(--card);
  border:1px solid var(--border);border-bottom:none;
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-sm);}
.scroll-top > div{height:1px;}
.tableWrap.has-top-scroll{border-top-left-radius:0;border-top-right-radius:0;}

/* With a bar above the headings, the native one under the last row is a second
   copy of the same control -- and the copy you cannot reach without scrolling
   to the bottom of the table first. Only the scrollbar goes: the element still
   scrolls sideways, by the bar above, by shift-wheel and by trackpad.
   Naming any ::-webkit-scrollbar part opts the element out of the platform
   scrollbar entirely, so the vertical one has to be drawn back in here or it
   would vanish along with it. */
.tableWrap::-webkit-scrollbar{width:11px;height:0;}
.tableWrap::-webkit-scrollbar-track{background:transparent;}
.tableWrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;
  border:3px solid var(--card);background-clip:padding-box;}
.tableWrap::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box;}

/* Clicking a row opens the whole record, so it has to look clickable. The
   Actions cell keeps the default cursor: its buttons do something else. */
table[data-detail] tbody tr{cursor:pointer;}
table[data-detail] tbody tr td.col-act,
table[data-detail] tbody tr:has(.empty-state){cursor:default;}

/* Toolbar above a table: search + paging */
.table-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.table-toolbar input[type="search"]{height:38px;max-width:280px;}
.table-toolbar .spacer{flex:1;}
.rowcount{font-size:12.5px;color:var(--text-2);white-space:nowrap;}
.pager{display:flex;align-items:center;gap:6px;}
.pager button{height:32px;min-width:32px;padding:0 10px;border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);cursor:pointer;font-size:12.5px;font-family:var(--font);color:var(--text-1);}
.pager button:hover:not(:disabled){background:var(--border-light);}
.pager button:disabled{opacity:.45;cursor:not-allowed;}

/* ── BADGES ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--b-hold-bg);color:var(--b-hold-fg);}
.badge.pending{background:var(--b-pending-bg);color:var(--b-pending-fg);}
.badge.approved,.badge.delivered,.badge.completed{background:var(--b-ok-bg);color:var(--b-ok-fg);}
.badge.rejected,.badge.cancelled{background:var(--b-err-bg);color:var(--b-err-fg);}
.badge.open{background:var(--b-open-bg);color:var(--b-open-fg);}
.badge.partial{background:var(--b-partial-bg);color:var(--b-partial-fg);}
.badge.intransit{background:var(--b-transit-bg);color:var(--b-transit-fg);}
.badge.onhold{background:var(--b-hold-bg);color:var(--b-hold-fg);}
.badge.transferred{background:var(--b-trans-bg);color:var(--b-trans-fg);}

/* ── KPI CARDS ─────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 22px;box-shadow:var(--sh-sm);}
.kpi-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:8px;}
/* The size here is the MAXIMUM. fitKpiValues() steps it down when the figure
   is too long for its card -- ₱1,374,657,759.57 needs roughly half the room of
   "522", and no amount of CSS can see how long a number is. nowrap so a figure
   never breaks across lines, and hidden so scrollWidth reports the overflow
   honestly for the measurement. */
.kpi-value{font-size:30px;font-weight:700;color:var(--text-1);line-height:1.05;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.kpi-value.sm{font-size:22px;}
.kpi-sub{font-size:12px;color:var(--text-2);margin-top:6px;}

.totalsBar{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.totalsBar .stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 20px;font-size:12.5px;color:var(--text-2);min-width:155px;}
.totalsBar .stat b{display:block;font-size:21px;font-weight:700;color:var(--text-1);margin-top:4px;font-variant-numeric:tabular-nums;}

/* ── TOAST / MODAL ─────────────────────────────────────── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--tooltip-bg);color:var(--tooltip-fg);padding:12px 20px;border-radius:var(--r-lg);font-size:13.5px;font-weight:500;z-index:9999;box-shadow:var(--sh-lg);max-width:360px;}
.toast.err{background:var(--status-err);color:#fff;}
.toast.ok{background:var(--green-700);color:#fff;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(2px);padding:20px;}
.modal-overlay.open{display:flex;}

/* The box is a column so the body scrolls while the header and the action bar
   stay put -- the Sales Order form is far taller than a laptop screen. */
.modal-box{background:var(--card);border-radius:var(--r-xl);width:100%;max-width:420px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);border:1px solid var(--border);
  display:flex;flex-direction:column;max-height:calc(100vh - 40px);}
.modal-box.lg{max-width:760px;}
.modal-box.xl{max-width:1000px;}

.modal-head{display:flex;align-items:flex-start;gap:12px;padding:22px 28px 16px;
  border-bottom:1px solid var(--border-light);flex-shrink:0;}
.modal-head .mh-text{flex:1;min-width:0;}
.modal-head h3{font-size:17px;font-weight:700;color:var(--text-1);}
.modal-head .mh-sub{font-size:12.5px;color:var(--text-2);margin-top:2px;}
.modal-close{width:32px;height:32px;border:none;background:none;border-radius:var(--r-md);
  cursor:pointer;color:var(--text-2);font-size:22px;line-height:1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background var(--ease);}
.modal-close:hover{background:var(--border-light);color:var(--text-1);}

.modal-body{padding:20px 28px;overflow-y:auto;flex:1;}
.modal-body .grid2,.modal-body .grid3,.modal-body .grid4{margin-bottom:16px;}
.modal-body .grid3:last-child,.modal-body .grid2:last-child{margin-bottom:0;}
.modal-body .section{margin:16px 0 0;padding-top:16px;}
.modal-body p{font-size:13px;color:var(--text-2);margin-bottom:16px;}

.modal-actions{display:flex;gap:8px;padding:16px 28px 22px;border-top:1px solid var(--border-light);flex-shrink:0;}
.modal-actions .btn{margin-top:0;}
.modal-actions .btn.secondary{margin-left:0;}
.modal-actions .spacer{flex:1;}

/* The change-PIN dialog is a plain stack of fields, not a grid form. */
.modal-body.simple input{margin-bottom:14px;}
.modal-body.simple input:last-child{margin-bottom:0;}

/* ── SEGMENTED CONTROL ─────────────────────────────────── */
.seg{display:inline-flex;background:var(--border-light);border:1px solid var(--border);
  border-radius:var(--r-md);padding:3px;gap:2px;flex-shrink:0;}
.seg-btn{height:30px;padding:0 14px;border:none;background:none;border-radius:var(--r-sm);
  cursor:pointer;font-size:12.5px;font-weight:600;font-family:var(--font);color:var(--text-2);
  white-space:nowrap;transition:background var(--ease),color var(--ease);}
.seg-btn:hover{color:var(--text-1);}
.seg-btn.active{background:var(--card);color:var(--accent);box-shadow:var(--sh-sm);}
/* The count each tab stands for, set apart from its name. */
.seg-btn .seg-n{margin-left:7px;padding:1px 7px;border-radius:999px;font-size:11px;
  font-weight:700;background:var(--border-light);color:var(--text-2);}
.seg-btn.active .seg-n{background:var(--soft-ok-bg,var(--border-light));color:var(--accent);}
/* A status nothing is at keeps its tab -- "none were rejected" is an answer --
   but says so rather than inviting a click that shows an empty table. */
.seg-btn.empty{opacity:.5;}

/* Growth figures read at a glance: green ahead, red behind. */
.delta.up{color:var(--status-ok);font-weight:600;}
.delta.down{color:var(--status-err);font-weight:600;}
.delta.flat{color:var(--text-3);}
/* Marks a figure resting on partial gross-profit data. */
.cov-warn{color:var(--status-warn);cursor:help;}
tr.pf-sel td{background:var(--green-100);}
tr.pf-sel td.col-act{background:var(--green-100);}

/* ── TOPBAR ICON CONTROLS ──────────────────────────────── */
.tb-icon{width:34px;height:34px;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--r-md);cursor:pointer;color:var(--text-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ease),color var(--ease);}
.tb-icon:hover{background:var(--hover);color:var(--text-1);}
.tb-icon svg{width:17px;height:17px;}
.tb-icon.on{background:var(--green-100);color:var(--accent);border-color:var(--accent);}
/* One button, two glyphs: the moon offers night mode, the sun offers day. */
.ic-sun{display:none;}
:root[data-theme="dark"] .ic-sun{display:block;}
:root[data-theme="dark"] .ic-moon{display:none;}

.tb-zoom{position:relative;}
.zoom-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-lg);
  padding:4px;z-index:400;min-width:96px;}
.zoom-menu button{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;height:30px;padding:0 10px;border:none;background:none;border-radius:var(--r-sm);
  cursor:pointer;font-size:12.5px;font-family:var(--font);color:var(--text-1);
  font-variant-numeric:tabular-nums;}
.zoom-menu button:hover{background:var(--hover);}
.zoom-menu button.sel{color:var(--accent);font-weight:700;}
.zoom-menu button.sel::after{content:"✓";}

/* ── ROW ACTIONS ───────────────────────────────────────── */
/* Actions are the last column, and pinned to the right edge so they stay
   reachable on tables up to 21 columns wide without scrolling back. */
.col-act{width:1%;position:sticky;right:0;z-index:5;}
th.col-act{background:var(--thead-bg);z-index:11;}
td.col-act{white-space:nowrap;background:var(--card);text-align:right;
  box-shadow:-1px 0 0 var(--border-light);}
tbody tr:hover td.col-act{background:var(--row-hover);}
.row-act{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:26px;margin-left:4px;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--r-sm);cursor:pointer;
  color:var(--text-2);padding:0;
  transition:background var(--ease),color var(--ease),border-color var(--ease);}
.row-act svg{width:14px;height:14px;}
.row-act:hover{background:var(--border-light);color:var(--text-1);}
.row-act.del:hover{background:var(--soft-err-bg);border-color:var(--soft-err-bd);color:var(--status-err);}
.row-act:disabled{opacity:.45;cursor:not-allowed;}
.lock-note{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:26px;color:var(--status-warn);}
.lock-note svg{width:15px;height:15px;}

/* ── SIDEBAR BADGE ─────────────────────────────────────── */
.nav-badge{margin-left:auto;background:var(--status-err);color:#fff;border-radius:20px;
  min-width:19px;height:19px;padding:0 6px;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.navBtn.active .nav-badge{background:var(--on-accent);color:var(--accent);}
.sidebar.collapsed .nav-badge{display:none;}

/* ── CHANGE REQUESTS ───────────────────────────────────── */
.record-preview{background:var(--border-light);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:16px;font-size:12.5px;
  color:var(--text-1);line-height:1.7;}
.record-preview .rp-label{color:var(--text-2);margin-right:6px;}
.record-preview b{font-weight:600;}
.diff-old{color:var(--status-err);text-decoration:line-through;}
.diff-new{color:var(--green-700);font-weight:600;}
.badge.edit{background:var(--b-open-bg);color:var(--b-open-fg);}
.badge.delete{background:var(--b-err-bg);color:var(--b-err-fg);}

/* ── PAGE HEADER ───────────────────────────────────────── */
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.page-head .spacer{flex:1;}
.page-head .ph-text{flex:1;min-width:220px;}
.page-head h2{font-size:22px;font-weight:700;color:var(--text-1);line-height:1.3;margin-bottom:3px;}
.page-head .desc{font-size:13px;color:var(--text-2);margin:0;}
.page-head .btn{margin-top:0;flex-shrink:0;}

/* ── MISC ──────────────────────────────────────────────── */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;opacity:.7;border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-row td{text-align:center;color:var(--text-3);padding:32px;}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1100px){.grid4{grid-template-columns:1fr 1fr;}}
@media(max-width:960px){.grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){
  .sidebar{position:fixed;top:0;left:0;height:100%;width:var(--sidebar);transform:translateX(-100%);transition:transform var(--ease);}
  .sidebar.open{transform:translateX(0);}
  .sidebar.collapsed{width:var(--sidebar);transform:translateX(-100%);}
  .main{padding:16px;}
  .grid3,.grid2,.grid4{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .topbar{padding:0 16px;}
  .tb-user-text{display:none;}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr;}
  .main{padding:12px;}
  .totalsBar{flex-direction:column;}
}

/* Company vs individual name fields swap in place. */
.party-individual[hidden],.party-company[hidden]{display:none !important;}

/* ── REPORTS TABS ──────────────────────────────────────── */
/* Performance, Sales Report and Purchase Report share one page. */
.rp-tabs{margin-bottom:20px;}
.report-panel[hidden]{display:none !important;}
/* The panels keep their own page-head for the grain toggle, but the page
   already carries the heading, so the inner one only holds controls. */
.report-panel > .page-head{margin-bottom:18px;}
.report-panel > .page-head .desc{margin:0;}
@media(max-width:768px){
  .rp-tabs{width:100%;overflow-x:auto;}
  .rp-tabs .seg-btn{flex:1;padding:0 10px;}
}

/* A change decided by the person who raised it — Admin only, and flagged so
   it can be found in the audit trail. */
.badge.selfapproved{background:var(--b-pending-bg);color:var(--b-pending-fg);
  font-size:10px;padding:1px 7px;margin-left:5px;}

/* ── BREADCRUMB CARRIES TITLE + DESCRIPTION ────────────── */
/* The screen name and its one-line explanation live only here now, freeing
   two lines of vertical space on every page for the data itself. */
#topbarTitle{font-size:19px;font-weight:700;letter-spacing:.5px;color:var(--text-1);white-space:nowrap;line-height:1.2;}
.crumb-desc{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;padding-left:12px;margin-left:4px;
  border-left:1px solid var(--border);align-self:center;}
.topbar-crumb{min-width:0;}
.panel-desc{font-size:12.5px;color:var(--text-2);margin-bottom:16px;}
/* A page-head with nothing but its action button pushes it to the right. */
.page-head{justify-content:flex-end;}
.page-head .ph-text{margin-right:auto;}
@media(max-width:960px){ .crumb-desc{display:none;} }

/* ── REVIEW BEFORE SAVE ────────────────────────────────── */
/* The first submit shows back what was typed; only Confirm writes it. */
.modal-form[hidden],.modal-review[hidden]{display:none !important;}
/* Only the chosen outcome's fields are shown when posting a delivery. */
.dp-part[hidden]{display:none !important;}
.review-lead{font-size:13px;color:var(--text-2);margin-bottom:16px;}
.review-list{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:0;
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;}
.review-list > div{display:contents;}
.review-list dt{padding:9px 14px;background:var(--thead-bg);color:var(--text-2);
  font-size:12px;font-weight:600;border-bottom:1px solid var(--border-light);}
.review-list dd{padding:9px 14px;color:var(--text-1);font-size:13px;
  border-bottom:1px solid var(--border-light);font-variant-numeric:tabular-nums;
  word-break:break-word;}
.review-list > div:last-child dt,.review-list > div:last-child dd{border-bottom:none;}
/* Several picks on one line. Boxed rather than comma-separated: "Acosta, Delma"
   already contains a comma, so a joined line reads as twice as many people. */
.rv-list{display:flex;flex-wrap:wrap;gap:6px;}
.rv-item{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;
  background:var(--border-light);border:1px solid var(--border);color:var(--text-1);}

/* The row-detail modal reuses the review list at a slightly larger size: it is
   read rather than checked at a glance, and for the widest tables it is the
   only place some of these figures are legible at all. The medium weight on the
   value does more for legibility here than extra size would. */
#rd_body dt{font-size:12px;padding:11px 15px;}
#rd_body dd{font-size:14px;padding:11px 15px;font-weight:500;}
#rd_body dd .badge{font-size:12px;padding:3px 10px;}

/* What the record IS -- date, product, who it is with -- three across at the
   top, because those read as a group rather than as a list. The build-up
   underneath stays one field per line, since that is a column of figures. */
.rd-head{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;}
.rd-head > div{background:var(--card);padding:11px 15px;
  display:flex;flex-direction:column;gap:3px;min-width:0;}
.rd-k{font-size:12px;font-weight:600;color:var(--text-2);}
.rd-v{font-size:14px;font-weight:500;color:var(--text-1);word-break:break-word;}
/* Figures line up on the right, the same way they do in the table itself. */
#rd_body dd.num{text-align:right;}
/* How it was decided -- sign-off, status, remarks -- closes the record the same
   way the top block opens it. */
.rd-tail{margin-bottom:0;margin-top:16px;}
/* A last field left over on its own row fills that row rather than sitting in a
   third of it beside empty space. Comments and Remarks always land here, and
   they are the fields that most want the width anyway. */
.rd-head > div:last-child:nth-child(3n+1){grid-column:1/-1;}
.rd-head > div:last-child:nth-child(3n+2){grid-column:span 2;}
/* .review-list sets display:grid, which would otherwise beat the hidden attribute. */
.rd-head[hidden],#rd_body[hidden]{display:none;}
@media (max-width:640px){
  .rd-head{grid-template-columns:repeat(2,1fr);}
  /* Two across changes which field is the odd one out, so the rule is restated. */
  .rd-head > div:last-child{grid-column:auto;}
  .rd-head > div:last-child:nth-child(2n+1){grid-column:1/-1;}
}
/* The record's own actions, offered again where the record is being read. */
#rd_actions{flex-wrap:wrap;gap:10px;}
#rd_actions .lock-note{display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--text-2);}
#rd_actions .lock-note svg{width:16px;height:16px;}

/* ── THE PRINTED INTERNAL P.O. ─────────────────────────── */
/* A paper document, so it is styled in black on white and in points, and it
   deliberately ignores the app's theme -- a dark-mode print would be a page of
   toner. Hidden on screen; on paper it is the only thing there. */
#printArea{display:none;}
@media print{
  body > *{display:none !important;}
  body > #printArea{display:block !important;}
  @page{size:A4 portrait;margin:12mm;}
}
.po-doc{color:#000;background:#fff;font-family:"Times New Roman",Times,serif;font-size:9pt;}
.po-doc h1{text-align:center;font-size:16pt;font-weight:700;margin-bottom:10pt;}
.po-doc table{width:100%;border-collapse:collapse;}
.po-doc .po-top{display:flex;align-items:flex-start;gap:12pt;margin-bottom:10pt;}
/* The seal is a circle, so it is shown as one -- no frame, no box, nothing
   square about it. object-fit keeps it round whatever the file's proportions. */
.po-doc .po-logo{width:60pt;height:60pt;flex-shrink:0;object-fit:contain;
  border:none;background:none;border-radius:50%;}
.po-doc .po-org{flex:1;font-size:11pt;line-height:1.35;}
.po-doc .po-meta{width:180pt;}
.po-doc .po-meta th,.po-doc .po-meta td{border:1px solid #000;padding:3pt 6pt;text-align:center;}
.po-doc .po-parties{display:flex;gap:12pt;margin-bottom:12pt;}
.po-doc .po-party{flex:1;border:1px solid #000;}
.po-doc .po-party .po-party-h{border-bottom:1px solid #000;padding:3pt 6pt;font-size:8.5pt;}
.po-doc .po-party .po-party-b{padding:6pt;min-height:60pt;line-height:1.35;}
.po-doc .po-terms{width:220pt;margin-left:auto;margin-bottom:0;}
.po-doc .po-terms th,.po-doc .po-terms td{border:1px solid #000;padding:3pt 6pt;text-align:center;}
.po-doc .po-lines th{border:1px solid #000;padding:3pt 6pt;text-align:center;font-weight:700;}
.po-doc .po-lines td{border:1px solid #000;padding:4pt 6pt;vertical-align:top;}
.po-doc .po-lines td.r{text-align:right;}
.po-doc .po-lines .po-fill td{height:200pt;}
.po-doc .po-foot{display:flex;gap:12pt;margin-top:10pt;align-items:flex-start;}
.po-doc .po-legal{flex:1;border:1px solid #000;padding:5pt;font-size:6.5pt;
  line-height:1.25;display:flex;gap:8pt;}
.po-doc .po-sign{width:250pt;}
.po-doc .po-total{width:100%;border:1px solid #000;margin-bottom:8pt;}
.po-doc .po-total td{border:1px solid #000;padding:5pt 8pt;font-weight:700;font-size:11pt;}
.po-doc .po-total td.r{text-align:right;}
.po-doc .po-names{font-size:8pt;line-height:1.7;}

/* ── USER MANUAL ───────────────────────────────────────── */
/* Contents beside the page, both scrolling on their own, so moving between
   sections never loses your place in the list. */
.manual{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start;}
.manual-nav{position:sticky;top:0;max-height:calc(100vh - 150px);overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:10px;box-shadow:var(--sh-sm);}
.man-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-3);padding:12px 10px 4px;}
.man-link{display:block;width:100%;text-align:left;border:none;background:none;
  padding:8px 10px;border-radius:var(--r-md);font-size:13px;font-family:var(--font);
  color:var(--text-2);cursor:pointer;line-height:1.35;}
.man-link:hover{background:var(--hover);color:var(--text-1);}
.man-link.active{background:var(--green-100);color:var(--accent);font-weight:600;}
.manual-body{min-width:0;}
.manual-body input[type="search"]{max-width:340px;margin-bottom:16px;}
.man-article{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:26px 30px;box-shadow:var(--sh-sm);max-width:820px;}
.man-article h2{font-size:20px;font-weight:700;color:var(--text-1);margin-bottom:14px;}
.man-article p{font-size:14px;color:var(--text-1);line-height:1.65;margin-bottom:14px;}
.man-article code{background:var(--border-light);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px;font-size:12.5px;font-family:ui-monospace,Menlo,Consolas,monospace;}
.man-steps{margin:0 0 16px 20px;padding:0;}
.man-steps li{font-size:14px;color:var(--text-1);line-height:1.6;margin-bottom:7px;padding-left:4px;}
.man-note{background:var(--soft-info-bg);border:1px solid var(--soft-info-bd);
  color:var(--soft-info-fg);border-radius:var(--r-md);padding:11px 14px;
  font-size:13px;line-height:1.55;margin-bottom:16px;}
.man-table{overflow-x:auto;margin-bottom:16px;border:1px solid var(--border);
  border-radius:var(--r-md);}
.man-table table{width:100%;border-collapse:collapse;font-size:13px;}
.man-table th{background:var(--thead-bg);color:var(--thead-fg);text-align:left;
  padding:8px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;}
.man-table td{padding:9px 12px;border-top:1px solid var(--border-light);
  color:var(--text-1);vertical-align:top;}
@media (max-width:900px){
  .manual{grid-template-columns:1fr;}
  .manual-nav{position:static;max-height:none;}
}

/* The preview holds the print document at roughly its paper proportions, on
   white, whatever theme the app is in -- the sheet does not have a dark mode. */
.po-preview{background:#fff;padding:16px 20px;border:1px solid var(--border);
  border-radius:var(--r-md);overflow-x:auto;}
.po-preview .po-doc{min-width:640px;}