:root{
  --ink:#18181B;
  --muted:#71717A;
  --faint:#A1A1AA;
  --paper:#FAFAF9;
  --line:#E4E4E7;
  --surface:#FFFFFF;
  --surface-hover:#F4F4F5;

  --color-primary:#006FF0;
  --color-primary-dark:#0053B8;
  --color-magenta:#D0006F;
  --color-magenta-dark:#A0005A;
  --color-orange:#FFB81C;
  --color-orange-dark:#C98600;
  --color-orange-darker:#966400;
  --color-green:#47D7AC;
  --color-green-dark:#1EAE81;
  --color-green-darker:#17835F;

  --accent:var(--color-primary);
  --accent-dark:var(--color-primary-dark);
  --accent-soft:#E6F1FE;
  --danger:var(--color-magenta-dark);
  --danger-soft:#FBE6E6;
  --success:var(--color-green-darker);
  --success-soft:#E7FBF5;
  --overlay:rgba(24,24,27,0.45);

  color-scheme:light;
}

/* ============================================================
   Dark theme — toggled from the sidebar, persisted in localStorage
   ('theme'), applied before first paint by the inline script in
   layouts/main.php.
   ============================================================ */
:root[data-theme="dark"]{
  --ink:#F4F4F5;
  --muted:#A1A1AA;
  --faint:#71717A;
  --paper:#0F0F11;
  --line:#2E2E33;
  --surface:#18181B;
  --surface-hover:#27272A;

  --accent-dark:#3B8EF5;
  --accent-soft:#102A4C;
  --danger:#E64A8F;
  --danger-soft:#3A1426;
  --success:var(--color-green);
  --success-soft:#0F2E24;
  --overlay:rgba(0,0,0,0.6);

  color-scheme:dark;
}

/* Tailwind utilities hardcoded in views — remap to theme surfaces. */
:root[data-theme="dark"] .bg-white{ background-color:var(--surface); }
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .bg-gray-100{ background-color:var(--surface-hover); }
:root[data-theme="dark"] .hover\:bg-white:hover{ background-color:var(--surface); }
:root[data-theme="dark"] .hover\:bg-gray-50:hover,
:root[data-theme="dark"] .hover\:bg-gray-100:hover,
:root[data-theme="dark"] .hover\:bg-black\/5:hover{ background-color:var(--surface-hover); }
:root[data-theme="dark"] .shadow-xl{ box-shadow:0 20px 50px rgba(0,0,0,.6); }

/* ============================================================
   Sidebar — collapsible to an icon rail. State lives in
   localStorage ('sidebarCollapsed') and is applied as the
   .sidebar-collapsed class on <html> before first paint.
   ============================================================ */
.app-sidebar{ width:16rem; background:var(--surface); border-color:var(--line); overflow-x:hidden; }
.app-sidebar.sidebar-animate{ transition:width .2s ease; }
.app-sidebar .nav-label{ white-space:nowrap; }
.sidebar-icon-btn{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:2rem; height:2rem; border-radius:.375rem; color:var(--muted);
  transition:background-color .15s ease, color .15s ease;
}
.sidebar-icon-btn:hover{ background:var(--surface-hover); color:var(--ink); }
.sidebar-collapse-icon{ transition:transform .2s ease; }

.sidebar-collapsed .app-sidebar{ width:4.5rem; }
.sidebar-collapsed .app-sidebar .nav-label,
.sidebar-collapsed .app-sidebar .nav-dropdown-chevron,
.sidebar-collapsed .app-sidebar .nav-submenu,
.sidebar-collapsed .app-sidebar .brand-full{ display:none; }
.sidebar-collapsed .app-sidebar .brand-short{ display:inline; }
.sidebar-collapsed .app-sidebar .sidebar-header{ flex-direction:column; gap:.75rem; padding-left:0; padding-right:0; }
.sidebar-collapsed .app-sidebar .nav-item{ justify-content:center; padding-left:0; padding-right:0; }
.sidebar-collapsed .sidebar-collapse-icon{ transform:rotate(180deg); }
.app-sidebar .brand-short{ display:none; }

/* Theme toggle shows the icon for the theme you'd switch TO. */
.theme-icon-sun{ display:none; }
:root[data-theme="dark"] .theme-icon-sun{ display:block; }
:root[data-theme="dark"] .theme-icon-moon{ display:none; }

body{ font-family:'Inter', ui-sans-serif, system-ui; background:var(--paper); color:var(--ink); }
.display{ font-family:'Space Grotesk', ui-sans-serif, system-ui; }
.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
::selection{ background:var(--accent-soft); }
.ledger-row{ border-bottom:1px solid var(--line); }
.ledger-row:hover{ background:var(--accent-soft); }
.idx-col{ color:var(--faint); font-size:11px; }

.btn-outline{
  border-color:var(--line);
  color:var(--muted);
  transition:border-color .15s ease, color .15s ease;
}
.btn-outline:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent-dark);
}

.text-accent{ color:var(--accent-dark); }
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   Module page shell — page container + header row, used by every
   admin/maintenance view (catalog, freight, po-consolidation, ...)
   ============================================================ */
.page-container{ max-width:100%; margin-left:auto; margin-right:auto; padding:2.5rem 1.5rem; }
@media (min-width:640px){ .page-container{ padding-left:2.5rem; padding-right:2.5rem; } }

.page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }

.page-title{ font-family:'Space Grotesk', ui-sans-serif, system-ui; font-size:1.5rem; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
@media (min-width:640px){ .page-title{ font-size:1.875rem; } }

.page-subtitle{ font-size:.875rem; margin-top:.25rem; color:var(--muted); }

/* ============================================================
   Upload widget — "Choose spreadsheet" + "Upload & replace",
   same shape used by catalog-maintenance, freight-maintenance,
   and asset-tagging. Pair with a <form data-upload-url="...">.
   ============================================================ */
.upload-widget{
  display:flex; align-items:center; gap:.625rem; flex-shrink:0;
}
.upload-widget-label{
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  border:1px solid var(--line); border-radius:.5rem;
  background:var(--surface); padding:.5rem .75rem;
  font-size:.875rem; font-weight:500; color:var(--ink);
  transition:background-color .15s ease;
}
.upload-widget-label:hover{ background:var(--surface-hover); }
.upload-widget-label svg{ color:var(--muted); flex-shrink:0; }
.upload-widget-btn{
  display:flex; align-items:center; gap:.5rem;
  border-radius:.5rem; padding:.5rem 1rem;
  font-size:.875rem; font-weight:500; color:#fff; background:var(--accent);
  transition:background-color .15s ease;
}
.upload-widget-btn:hover{ background:var(--accent-dark); }
.upload-widget-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* PO Consolidation upload: chosen file name truncates; validation errors list one per line. */
.po-upload-form .po-file-name{ max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-widget-btn:disabled:hover{ background:var(--accent); }
.po-upload-status-message{ font-weight:500; }
.po-upload-status-errors:empty{ display:none; }
.po-upload-status-errors{ margin-top:.5rem; padding-left:1.25rem; list-style:disc; max-height:16rem; overflow-y:auto; }
.po-upload-status-errors li + li{ margin-top:.25rem; }

/* ============================================================
   Table card — the bordered table wrapper used everywhere data
   gets listed (catalog, freight, assets, users, orders...).
   ============================================================ */
.table-card{ overflow-x:auto; border:1px solid var(--line); border-radius:.5rem; background:var(--surface); }
.data-table{ width:100%; font-size:.875rem; border-collapse:collapse; }
.data-table thead tr{ text-align:left; border-bottom:1px solid var(--line); }
.data-table th{
  font-weight:500; text-transform:uppercase; letter-spacing:.03em;
  padding:.75rem .75rem; font-size:.75rem; color:var(--muted);
}
.data-table th:first-child, .data-table td:first-child{ padding-left:1rem; }
.data-table td{ padding:.75rem; }
.data-table tbody tr{ border-top:1px solid var(--line); }
.data-table .table-empty{ padding:1.5rem 1rem; text-align:center; font-size:.875rem; color:var(--muted); }

/* ============================================================
   Tabs — sub-navigation within a single page (e.g. PO Consolidation's
   Combined / Sales / INH / LGS / Billing panels).
   ============================================================ */
.tab-bar{ display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem; }
.tab-btn{
  padding:.6rem 1rem; font-size:.875rem; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease;
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ color:var(--accent-dark); border-bottom-color:var(--accent); }
.tab-panel.hidden{ display:none; }

/* ============================================================
   Status banner — result of an upload/save action.
   ============================================================ */
.status-banner{ margin-bottom:1.5rem; border-radius:.375rem; padding:.75rem 1rem; font-size:.875rem; }
.status-banner.hidden{ display:none; }
.status-banner.success{ background:var(--success-soft); color:var(--success); }
.status-banner.error{ background:var(--danger-soft); color:var(--danger); }

/* ============================================================
   Shared text/border/background helpers — pulls repeated inline
   `style="color:var(--...)"` / `border-color:var(--line)` etc.
   out of purchase-orders.js (and any other module) into classes.
   ============================================================ */
.text-muted{ color:var(--muted); }
.text-faint{ color:var(--faint); }
.border-line{ border-color:var(--line); }
.divider-line{ background:var(--line); }
.divider-top{ border-top:1px solid var(--line); }
.divider-bottom{ border-bottom:1px solid var(--line); }
.bg-paper{ background:var(--paper); }

/* Small square/circle icon chip, e.g. section headings in the
   PO detail modal (Billing, Shipping, Custom properties...). */
.icon-badge{
  width:2rem; height:2rem; border-radius:.5rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* Status dropdown used on order rows / the PO detail modal.
   Colors are set inline per-status (dynamic), shape lives here. */
.status-select{
  appearance:none; border:none; outline:none;
  font-size:.875rem; font-weight:600;
  padding:.5rem 2.25rem .5rem 1.75rem;
  border-radius:.375rem;
}
.status-select:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

/* ============================================================
   Small square icon button — row actions (View Details, Export)
   and, now, the PO details modal's pagination controls. Moved
   here from po_consolidation_combined.php's own <style> block
   so it's reusable instead of page-scoped.
   ============================================================ */
.po-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink); cursor:pointer;
  transition:background-color .15s;
}
.po-icon-btn:hover{ background:var(--line); }
.po-icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
.po-icon-btn:disabled:hover{ background:var(--surface); }

/* ============================================================
   PO details modal (Combined tab's "View Details") — header,
   search/filter/sort controls, and footer/pagination.
   ============================================================ */
.po-details-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--line);
}
.po-details-header-main{ display:flex; align-items:flex-start; gap:.875rem; }
.po-details-title{ font-size:1.25rem; font-weight:600; margin:0; }
.po-details-subtitle{ font-size:.8125rem; color:var(--muted); margin:.25rem 0 0; }
.po-details-header-actions{ display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

.po-details-export-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:#fff; font-size:.875rem; font-weight:500;
  padding:.6rem 1.1rem; border-radius:.5rem; text-decoration:none;
  transition:background-color .15s ease;
}
.po-details-export-btn:hover{ background:var(--accent-dark); }

.po-details-close-btn{
  border:none; background:none; font-size:1.5rem; line-height:1; cursor:pointer;
  color:var(--faint); padding:.25rem;
}
.po-details-close-btn:hover{ color:var(--muted); }

.po-details-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  padding:1rem 1.5rem; border-bottom:1px solid var(--line);
}
.po-details-search-wrap{ position:relative; flex:1 1 260px; min-width:220px; }
.po-details-search-wrap svg{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.po-details-search-wrap input{
  width:100%; font-size:.875rem; padding:.6rem .75rem .6rem 2.25rem;
  border:1px solid var(--line); border-radius:.5rem; outline:none;
  background:var(--surface); color:var(--ink);
}
.po-details-search-wrap input:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

.po-details-controls select{
  font-size:.875rem; padding:.6rem 2rem .6rem .875rem; border:1px solid var(--line);
  border-radius:.5rem; background:var(--surface); color:var(--ink); outline:none;
  appearance:none; flex-shrink:0;
}
.po-details-controls select:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

.po-details-body{ padding:1.25rem 1.5rem; overflow:auto; flex:1; }

.po-details-footer{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.5rem; border-top:1px solid var(--line); font-size:.8125rem; color:var(--muted);
}
.po-details-pagination{ display:flex; align-items:center; gap:.5rem; }
.po-details-page-num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; border:1px solid var(--accent); border-radius:.375rem;
  color:var(--accent-dark); font-weight:600; font-size:.8125rem;
}

/* ============================================================
   Accounting page additions — append to App.css. Everything else
   on the page (upload-widget, table-card/data-table, status-banner,
   po-icon-btn, po-details-* modal chrome) reuses existing classes.
   ============================================================ */

/* Filter bar above the main table — same visual language as the
   PO details modal's search/filter/sort row (.po-details-controls),
   just not nested inside a modal. */
.filters-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-bottom:1rem;
}
.filters-search-wrap{ position:relative; flex:1 1 260px; min-width:220px; }
.filters-search-wrap svg{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.filters-search-wrap input{
  width:100%; font-size:.875rem; padding:.6rem .75rem .6rem 2.25rem;
  border:1px solid var(--line); border-radius:.5rem; outline:none;
  background:var(--surface); color:var(--ink);
}
.filters-search-wrap input:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

.filters-bar select{
  font-size:.875rem; padding:.6rem 2rem .6rem .875rem; border:1px solid var(--line);
  border-radius:.5rem; background:var(--surface); color:var(--ink); outline:none;
  appearance:none; flex-shrink:0;
}
.filters-bar select:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

/* Footer row under the main table (page count + pagination) — same
   shape as the PO details modal's footer, without the modal border. */
.acc-footer{ border-top:none; padding:1rem 0; }

/* Invoice Upload modal's form fields. */
.acc-field{ display:flex; flex-direction:column; gap:.375rem; font-size:.8125rem; font-weight:500; color:var(--ink); }
.acc-field input, .acc-field select{
  font-size:.875rem; padding:.55rem .75rem; border:1px solid var(--line);
  border-radius:.5rem; outline:none; background:var(--surface); color:var(--ink);
}
.acc-field input:focus-visible, .acc-field select:focus-visible{ box-shadow:0 0 0 2px var(--accent); }

/* Accounting main table's Attachment column — one download link per
   attached PDF, stacked when a PO has more than one. */
.acc-attachment-list{ display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; }
.acc-attachment-item{ display:flex; align-items:center; gap:.375rem; }
.acc-attachment-link{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.8125rem;
  color:var(--accent-dark); text-decoration:none;
}
.acc-attachment-link:hover{ text-decoration:underline; }

/* Small "view in browser" icon riding alongside a download link —
   used both in the main listing and inside the attachments modal.
   Opens the shared same-tab PDF preview modal instead of a new tab. */
.acc-attachment-view-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--faint); flex-shrink:0;
  border:none; background:none; padding:0; cursor:pointer;
  transition:color .15s ease;
}
.acc-attachment-view-btn:hover{ color:var(--accent-dark); }

/* ============================================================
   Attachments modal (opened from the main listing's action column) —
   list of existing files with inline edit/deactivate, plus the
   add-new-attachment form and a separate edit sub-view.
   ============================================================ */
.acc-modal-section-title{
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); margin:0 0 .625rem;
}
.acc-modal-attachment-list{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.acc-modal-empty{ font-size:.8125rem; color:var(--muted); margin:0 0 1.25rem; }
.acc-modal-attachment-item{
  display:flex; align-items:center; gap:.625rem;
  border:1px solid var(--line); border-radius:.5rem; padding:.5rem .625rem;
}
.acc-modal-attachment-filename{
  flex:1; min-width:0; font-size:.75rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acc-modal-attachment-actions{ display:flex; align-items:center; gap:.375rem; flex-shrink:0; }

.acc-attachment-action-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:none; background:none; padding:0;
  color:var(--faint); cursor:pointer; flex-shrink:0;
  transition:color .15s ease;
}
.acc-attachment-action-btn:hover{ color:var(--muted); }
.acc-remove-attachment-btn:hover{ color:var(--danger); }
.acc-attachment-action-btn:disabled{ opacity:.4; cursor:not-allowed; }
/* ============================================================
   End-of-Life (EOL) items — Catalog Maintenance rows and the
   PO detail modal's line items.
   ============================================================ */
tr.eol-row{ background:var(--danger-soft); box-shadow:inset 3px 0 0 var(--danger); }
.eol-badge{
  display:inline-block; padding:.125rem .5rem; border-radius:999px;
  font-size:.6875rem; font-weight:600; letter-spacing:.03em;
  color:#fff; background:var(--danger);
}

/* ============================================================
   Logistics page additions — append to App.css. Everything else on
   the page reuses existing classes (page-container, page-header,
   filters-bar, table-card, data-table, po-icon-btn, po-details-*).
   ============================================================ */

/* Inline editors inside the table rows */
.lg-input{
  font-size:.8125rem; padding:.4rem .5rem; border:1px solid var(--line);
  border-radius:.375rem; outline:none; background:var(--surface); color:var(--ink);
}
.lg-input:focus-visible{ box-shadow:0 0 0 2px var(--accent); }
.lg-input:disabled{ opacity:.6; cursor:not-allowed; }
.lg-input-remarks{ width:16rem; min-height:4.5rem; resize:vertical; line-height:1.4; font-family:inherit; display:block; }

.lg-address{
  max-width:15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.75rem; color:var(--muted);
}

.lg-save-btn{
  background:var(--accent); color:#fff; font-size:.75rem; font-weight:500;
  padding:.4rem .85rem; border-radius:.375rem; border:none; cursor:pointer;
  transition:background-color .15s ease;
}
.lg-save-btn:hover:not(:disabled){ background:var(--accent-dark); }
.lg-save-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Status pill: overall PO status (Submitted / Processing / Partially Shipped / Shipped / Cancelled) */
.lg-status{ display:inline-block; padding:.25rem .65rem; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.lg-status-submitted{ background:var(--surface-hover); color:var(--muted); }
.lg-status-processing{ background:var(--accent-soft); color:var(--accent-dark); }
.lg-status-partially-shipped{ background:#FFF4DA; color:#966400; }
.lg-status-shipped{ background:var(--success-soft); color:var(--success); }
.lg-status-cancelled{ background:var(--danger-soft); color:var(--danger); }

/* Change-history modal */
.lg-modal-backdrop{
  position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  padding:1rem; background:var(--overlay);
}
.lg-modal-backdrop.open{ display:flex; }
.lg-modal-panel{
  background:var(--surface); border-radius:.5rem; box-shadow:0 20px 40px rgba(0,0,0,.25);
  width:100%; max-width:42rem; max-height:85vh; overflow-y:auto;
}
.lg-history-table{ width:100%; text-align:left; font-size:.75rem; border-collapse:collapse; }
.lg-history-table th{
  padding:.5rem .75rem .5rem 0; font-weight:500; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted);
}
.lg-history-table td{ padding:.5rem .75rem .5rem 0; border-top:1px solid var(--line); vertical-align:top; }
.lg-history-change{ white-space:pre-wrap; word-break:break-word; }