/* ============================================================
   Ace In Gears — design system
   Modern-minimalist shell with light/dark themes and gradients.
   ============================================================ */

:root {
  --ace-bg: #f5f7fb;
  --ace-surface: #ffffff;
  --ace-surface-2: #eef2f9;
  --ace-text: #0f172a;
  --ace-muted: #5b6b84;
  --ace-border: #cbd5e1;
  --ace-border-strong: #94a3b8;
  --ace-primary: #2563eb;
  --ace-primary-strong: #1d4ed8;
  --ace-primary-soft: #dbeafe;
  --ace-table-head-bg: #dbe3ef;
  --ace-table-head-text: #1e293b;
  --ace-table-hover-bg: color-mix(in srgb, var(--ace-primary) 10%, transparent);
  --ace-table-striped-bg: color-mix(in srgb, var(--ace-surface-2) 70%, transparent);
  --ace-navy: #0f172a;
  --ace-accent: #0ea5e9;
  --ace-success: #16a34a;
  --ace-warning: #d97706;
  --ace-danger: #dc2626;
  --ace-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --ace-shadow-md: 0 10px 24px rgba(15, 23, 42, .08);
  --ace-radius: 12px;
  --ace-radius-sm: 8px;
  --ace-gradient-brand: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
  --ace-gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --ace-gradient-soft: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  --ace-navbar: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);

  /* Typography scale — adjustable from the Typography Designer page. Each rule below
     reads its size from one of these variables (with a fallback matching the default). */
  --ace-font-page-title: 1.35rem;
  --ace-font-page-subtitle: .88rem;
  --ace-font-section: 1rem;
  --ace-font-card-header: 1rem;
  --ace-font-table-head: .8rem;
  --ace-font-table-cell: .76rem;
  --ace-font-label: .82rem;
  --ace-font-input: .7rem;
  --ace-font-button: .82rem;
  --ace-font-nav: 1rem;
}

[data-bs-theme="dark"] {
  --ace-bg: #0a1120;
  --ace-surface: #111c30;
  --ace-surface-2: #16233b;
  --ace-text: #e6edf7;
  --ace-muted: #a7b6ce;
  --ace-border: #33435f;
  --ace-border-strong: #4a5d7e;
  --ace-primary: #3b82f6;
  --ace-primary-strong: #60a5fa;
  --ace-primary-soft: #1e293b;
  --ace-table-head-bg: #1e2c47;
  --ace-table-head-text: #dbe4f0;
  --ace-table-hover-bg: color-mix(in srgb, var(--ace-primary) 16%, transparent);
  --ace-table-striped-bg: color-mix(in srgb, #ffffff 4%, transparent);
  --ace-navy: #0a1120;
  --ace-accent: #38bdf8;
  --ace-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ace-shadow-md: 0 12px 28px rgba(0, 0, 0, .45);
  --ace-gradient-brand: linear-gradient(135deg, #0a1120 0%, #132a52 55%, #1d4ed8 100%);
  --ace-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --ace-gradient-soft: linear-gradient(135deg, #0e1830 0%, #111c30 100%);
  --ace-navbar: linear-gradient(135deg, #0a1120 0%, #132a52 100%);
}

html {
  position: relative;
  min-height: 100%;
  font-size: 20px;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--ace-bg);
  color: var(--ace-text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--ace-primary);
  text-decoration: none;
}

a:hover {
  color: var(--ace-primary-strong);
  text-decoration: underline;
}

.text-muted {
  color: var(--ace-muted) !important;
}

/* Keep Bootstrap colour utilities theme-aware so they stay legible in dark mode. */
.text-primary {
  color: var(--ace-primary) !important;
}

.text-success {
  color: var(--ace-success) !important;
}

.text-warning {
  color: var(--ace-warning) !important;
}

.text-danger {
  color: var(--ace-danger) !important;
}

/* ---------- Navbar ---------- */
.app-navbar {
  background: var(--ace-navbar);
  border-bottom: 1px solid var(--ace-border);
  box-shadow: var(--ace-shadow-sm);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .95rem;
}

.app-brand .brand-text {
  color: var(--ace-text);
}

.app-navbar .navbar-toggler {
  border-color: var(--ace-border-strong);
}

.app-navbar .nav-link {
  color: var(--ace-text);
  font-weight: 500;
  font-size: var(--ace-font-nav, 1rem);
  border-radius: var(--ace-radius-sm);
  padding: .5rem .85rem;
}

/* The default hamburger icon is dark; invert it on the dark navbar. */
[data-bs-theme="dark"] .app-navbar .navbar-toggler-icon {
  filter: invert(1) brightness(1.8);
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  background: var(--ace-surface-2);
  color: var(--ace-primary-strong);
  text-decoration: none;
}

/* The layout keeps Bootstrap's .navbar-light only for its toggler icon, but that class
   hard-codes near-black link colours and out-specifies .app-navbar .nav-link, so the nav
   text stayed black in dark mode. Re-assert the theme colours at a higher specificity. */
.app-navbar.navbar-light .navbar-nav .nav-link,
.app-navbar.navbar-light .navbar-nav .nav-link.active,
.app-navbar.navbar-light .navbar-nav .nav-link.show,
.app-navbar.navbar-light .navbar-nav .nav-link.disabled,
.app-navbar.navbar-light .navbar-brand,
.app-navbar.navbar-light .navbar-text {
  color: var(--ace-text);
}

.app-navbar.navbar-light .navbar-nav .nav-link:hover,
.app-navbar.navbar-light .navbar-nav .nav-link:focus {
  color: var(--ace-primary-strong);
  background: var(--ace-surface-2);
}

.app-navbar.navbar-light .navbar-brand:hover,
.app-navbar.navbar-light .navbar-brand:focus {
  color: var(--ace-text);
}

/* Wider spacing and visible separators between top-level nav items (desktop only). */
@media (min-width: 992px) {
  .app-navbar .navbar-nav.me-auto {
    gap: .35rem;
  }

  .app-navbar .navbar-nav.me-auto > .nav-item + .nav-item {
    border-left: 1px solid var(--ace-border);
    padding-left: .35rem;
  }
}

.app-navbar .dropdown-menu {
  background: var(--ace-surface);
  border: 1px solid var(--ace-border-strong);
  border-radius: var(--ace-radius-sm);
  box-shadow: var(--ace-shadow-md);
  padding: .35rem;
  color: var(--ace-text);
}

.app-navbar .dropdown-item {
  color: var(--ace-text);
  border-radius: 6px;
  padding: .45rem .65rem;
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus,
.app-navbar .dropdown-item.active {
  background: var(--ace-surface-2);
  color: var(--ace-primary-strong);
}

.app-navbar .dropdown-divider {
  border-color: var(--ace-border);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--ace-surface-2);
  border: 1px solid var(--ace-border);
  font-size: .82rem;
  font-weight: 600;
}

.user-chip .level-dot {
  color: var(--ace-primary);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--ace-border);
  background: var(--ace-surface);
  color: var(--ace-text);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--ace-shadow-sm);
  color: var(--ace-primary-strong);
}

/* ---------- Layout ---------- */
.page-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--ace-radius);
  background: var(--ace-gradient-soft);
  border: 1px solid var(--ace-border);
  margin-bottom: 1.25rem;
}

.page-header h1 {
  font-size: var(--ace-font-page-title, 1.35rem);
  font-weight: 700;
  margin: 0;
}

.page-header .subtitle {
  color: var(--ace-muted);
  margin: .25rem 0 0;
  font-size: var(--ace-font-page-subtitle, .88rem);
}

/* ---------- Cards & forms ---------- */
.card {
  background: var(--ace-surface);
  border: 1px solid var(--ace-border);
  border-radius: var(--ace-radius);
  box-shadow: var(--ace-shadow-sm);
}

.card-header {
  background: var(--ace-surface-2);
  border-bottom: 1px solid var(--ace-border);
  font-weight: 600;
  font-size: var(--ace-font-card-header, 1rem);
  border-top-left-radius: var(--ace-radius);
  border-top-right-radius: var(--ace-radius);
}

.filter-card .card-body {
  padding: 1rem 1.15rem;
}

.form-label {
  font-weight: 700;
  font-size: var(--ace-font-label, .82rem);
  color: var(--ace-text);
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.form-check-label {
  color: var(--ace-text);
  font-size: .72rem;
}

.form-control,
.form-select {
  background: var(--ace-surface);
  border-color: var(--ace-border-strong);
  color: var(--ace-text);
  border-radius: var(--ace-radius-sm);
  /* Field values sit smaller than their labels/indicators for visual hierarchy. */
  font-size: var(--ace-font-input, .7rem);
}

.form-control::placeholder {
  color: var(--ace-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ace-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ace-primary) 20%, transparent);
}

/* The native date/time picker icon is black by default; invert it for dark mode. */
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  cursor: pointer;
}

/* ---------- Buttons ---------- */
/* The app's 20px root made the default (1rem) buttons oversized; normalise them to a
   Bootstrap-like size and pin the padding in rem so it scales with the button text only. */
.btn {
  border-radius: var(--ace-radius-sm);
  font-weight: 600;
  font-size: var(--ace-font-button, .82rem);
  line-height: 1.25;
  padding: .3rem .7rem;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Keep the Bootstrap size variants meaningful after the base .btn sizing above. */
.btn.btn-sm {
  font-size: .72rem;
  padding: .22rem .5rem;
}

.btn.btn-lg {
  font-size: 1rem;
  padding: .5rem 1rem;
}

/* Extra-small button for dense table cells (Paid / Pending / Confirm). */
.btn-xs {
  font-size: .58rem;
  line-height: 1.2;
  padding: .12rem .4rem;
  border-radius: 6px;
}

.btn-primary {
  background: var(--ace-gradient-primary);
  border: none;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ace-gradient-primary);
  filter: brightness(1.05);
  color: #fff;
}

.btn-outline-secondary {
  background: var(--ace-surface);
  color: var(--ace-text);
  border: 1px solid var(--ace-border-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--ace-primary-soft);
  color: var(--ace-primary-strong);
  border-color: var(--ace-primary);
}

.btn-outline-secondary:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ace-primary) 20%, transparent);
}

.btn-success {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: none;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, var(--ace-warning));
  border: none;
  color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
  background: linear-gradient(135deg, #f59e0b, var(--ace-warning));
  filter: brightness(1.05);
  color: #fff;
}

.btn-link {
  color: var(--ace-primary);
  font-weight: 600;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--ace-primary-strong);
}

/* ---------- Tables ---------- */
/* Theme the grid lines. Bootstrap sets .table{border-color:#dee2e6} and its reboot makes the
   rows/sections inherit it, so .table-bordered row lines stayed near-white in dark mode.
   Match the iChamp order-list lines (var(--ace-border)). */
.table,
.table > :not(caption) > *,
.table-bordered > :not(caption) > * {
  border-color: var(--ace-border);
}

.table {
  color: var(--ace-text);
  /* Theme-aware overrides for Bootstrap 5.1's hardcoded (light-only) table variables. */
  --bs-table-color: var(--ace-text);
  --bs-table-bg: transparent;
  --bs-table-hover-color: var(--ace-text);
  --bs-table-hover-bg: var(--ace-table-hover-bg);
  --bs-table-striped-color: var(--ace-text);
  --bs-table-striped-bg: var(--ace-table-striped-bg);
  --bs-table-active-color: var(--ace-text);
  --bs-table-active-bg: var(--ace-table-hover-bg);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  background: transparent;
  color: inherit;
  border-color: var(--ace-border);
  padding: .4rem .45rem;
  overflow-wrap: anywhere;
}

.table-sm > :not(caption) > * > * {
  padding: .25rem .3rem;
}

.table thead th {
  background: var(--ace-table-head-bg);
  color: var(--ace-table-head-text);
  /* Header text is noticeably larger than the cell content (item: header visibility). */
  font-size: var(--ace-font-table-head, .8rem);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
  white-space: normal;
  /* Wrap on word boundaries only, so narrow columns don't break mid-word. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.15;
  vertical-align: middle;
  /* Headers sit slightly taller than the text height for a clear band. */
  padding: .7rem .3rem;
  border-bottom: 2px solid var(--ace-border-strong);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Bootstrap 5.1 hardcodes .table-light to a light surface; make it theme-aware. */
.table-light {
  --bs-table-bg: var(--ace-surface-2);
  --bs-table-striped-bg: var(--ace-surface-2);
  --bs-table-striped-color: var(--ace-text);
  --bs-table-active-bg: var(--ace-surface-2);
  --bs-table-active-color: var(--ace-text);
  --bs-table-hover-bg: var(--ace-table-hover-bg);
  --bs-table-hover-color: var(--ace-text);
  color: var(--ace-text);
  border-color: var(--ace-border);
}

/* Apply the themed band background (out-specifies the transparent cell rule above). */
.table .table-light > * > * {
  background: var(--ace-surface-2);
  color: var(--ace-text);
}

/* Keep section-band rows (e.g. credit-report month headers) above the stripe. */
.table-striped > tbody > tr.table-light > * {
  background: var(--ace-surface-2);
  --bs-table-accent-bg: transparent;
}

/* Column-line variant (opt-in) — kept available for the chosen table style. */
.table-lines > :not(caption) > * > * {
  border-right: 1px solid var(--ace-border);
}

.table-lines > :not(caption) > * > *:last-child {
  border-right: none;
}

.table td {
  /* Align cell text to the top so multi-line cells line up cleanly. */
  vertical-align: top;
  font-size: var(--ace-font-table-cell, .76rem);
}

/* Order Auto Update and Pending Receiving are dense grids that keep the original (smaller)
   table type; every other table uses the larger default above. */
.table-compact thead th {
  font-size: .78rem;
}

.table-compact td {
  font-size: .66rem;
}

/* Receiving Summary nested per-invoice table: distinct light-green header so it
   reads as a child of the main table instead of blending into it. */
.receiving-subtable thead th {
  background: #d7f3dd;
  color: #14532d;
  border-bottom: 2px solid #86efac;
}

[data-bs-theme="dark"] .receiving-subtable thead th {
  background: #14532d;
  color: #dcfce7;
  border-bottom-color: #16a34a;
}

/* Month-end report header rows: light-green band (matches the Receiving Summary nested
   table) with cell-sized, bold text instead of the larger uppercase header style. */
.month-end-report .month-end-head > th {
  background: #d7f3dd;
  color: #14532d;
  border-bottom: 2px solid #86efac;
  font-size: var(--ace-font-table-cell, .76rem);
  font-weight: 700;
  text-transform: none;
  box-shadow: none;
}

[data-bs-theme="dark"] .month-end-report .month-end-head > th {
  background: #14532d;
  color: #dcfce7;
  border-bottom-color: #16a34a;
}

/* The themed cell rule forces a transparent background, which erases Bootstrap's
   contextual row classes (they only set --bs-table-bg). Paint overdue rows
   explicitly so the red highlight actually shows. */
.table > tbody > tr.table-danger > *,
.table-striped > tbody > tr.table-danger > * {
  background: color-mix(in srgb, var(--ace-danger) 16%, var(--ace-surface));
  --bs-table-accent-bg: transparent;
  color: var(--ace-text);
  border-color: var(--ace-border);
}

[data-bs-theme="dark"] .table > tbody > tr.table-danger > *,
[data-bs-theme="dark"] .table-striped > tbody > tr.table-danger > * {
  background: color-mix(in srgb, var(--ace-danger) 34%, var(--ace-surface));
}

.table-scroll {
  overflow: auto;
  max-height: var(--ace-table-max-height, calc(100vh - 140px));
  border-radius: var(--ace-radius);
  border: 1px solid var(--ace-border);
  background: var(--ace-surface);
}

/* Month-end reports are narrow three/four-column tables; cap them so they don't
   stretch across a widescreen. */
.month-end-report {
  max-width: 960px;
}

/* Narrow report wrapper: keeps a wide report table from stretching across the screen. */
.report-narrow {
  max-width: 1150px;
}

/* ---------- iChamp Order List: tuned fixed layout ----------
   Sizes/widths were chosen interactively with the former temporary tweaker and are now
   baked in. Column widths live in the <colgroup> in Views/Orders/Index.cshtml. */
#ichampOrderTable {
  table-layout: fixed;
  width: 100%;
}

#ichampOrderList thead th {
  font-size: .64rem;
  padding: .45rem 6px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.15;
  vertical-align: middle;
}

#ichampOrderList tbody td {
  font-size: .66rem;
  padding: 6px;
}

#ichampOrderList .btn {
  font-size: .58rem;
  line-height: 1.2;
  padding: .12rem .4rem;
}

/* Purchase-order documents: centered, print-friendly document block.
   Always rendered on a light "paper" surface so the on-screen preview matches the
   printed / PDF output regardless of the app theme. */
.po-doc {
  max-width: 1000px;
  margin: 0 auto;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 2rem 2.25rem;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
}

/* Logo spans the full document width (banner) at the top. */
.po-doc .po-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.25rem;
}

.po-doc .po-title {
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 1.25rem;
}

.po-doc .po-address-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 1.25rem;
}

.po-doc .po-address-table td {
  border: none;
  vertical-align: top;
  padding: .1rem 0;
}

.po-doc .po-address-table td.po-addr-vendor { width: 40%; }
.po-doc .po-address-table td.po-addr-ship { width: 40%; }

.po-doc .po-address-table td.po-addr-shiplabel {
  width: 20%;
  text-align: right;
  font-weight: 600;
  color: #475569;
  padding-right: .75rem;
}

.po-doc .po-field { margin: 0 0 .15rem; }
.po-doc .po-field-label { font-weight: 600; color: #475569; }

.po-doc .po-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 1rem;
}

.po-doc .po-items-table th,
.po-doc .po-items-table td {
  border: 1px solid #94a3b8;
  padding: .35rem .5rem;
  vertical-align: middle;
}

.po-doc .po-items-table thead th {
  background: #0f172a;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.po-doc .po-items-table .text-center { text-align: center; }
.po-doc .po-items-table .numeric { text-align: right; }
.po-doc .po-desc { text-align: left; white-space: normal; word-break: break-word; }

.po-doc .po-fee-row td { background: #f1f5f9; font-weight: 600; }

.po-doc .po-total-row td {
  background: #e2e8f0;
  font-weight: 700;
  border-top: 2px solid #0f172a;
}

.po-doc .po-confirm { text-align: center; margin-top: 1.25rem; }

.po-doc .badge-cancel {
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: 10px;
  vertical-align: middle;
}

/* Fee delete modal: selectable fee rows. */
.po-fee-option {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .55rem .75rem;
  border: 1px solid var(--ace-border);
  border-radius: var(--ace-radius-sm);
  cursor: pointer;
}

.po-fee-option:hover {
  background: var(--ace-surface-2);
}

/* Fee / send actions in a compact grid (no inline inputs). */
.po-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .6rem;
  max-width: 720px;
  align-items: center;
}

/* Print: keep a comfortable margin between the document and the page edges. */
@page {
  size: A4;
  margin: 12mm 14mm;
}

@media print {
  .no-print {
    display: none !important;
  }

  .po-doc {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    margin: 0;
    padding: 0 6mm;
    font-size: 12px;
  }
}

/* Shipment / ACE invoice table: legible text because the table is compact. */
.table-shipment td {
  font-size: .78rem;
}

.table-shipment thead th {
  font-size: .82rem;
}

/* Reusable CSS-grid form layout so fields stay a sensible width instead of
   stretching across the page. Use alongside .card-body. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .85rem 1rem;
  max-width: 1100px;
  align-items: start;
}

.form-grid > * {
  min-width: 0;
}

.form-grid .span-2 {
  grid-column: span 2;
}

.form-grid .span-3 {
  grid-column: span 3;
}

.form-grid .span-full {
  grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid .span-2,
  .form-grid .span-3 {
    grid-column: auto;
  }
}

/* All Bootstrap "row g-3" forms/filters become a compact CSS grid so inputs keep a
   sensible width instead of stretching across the page. The legacy col-* widths are
   neutralised; col-12 spans the full grid width. */
.row.g-3 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .85rem 1rem;
  max-width: 1100px;
  margin-left: 0;
  margin-right: 0;
}

.row.g-3 > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
}

/* Only fields that are full-width at every breakpoint span the whole grid. */
.row.g-3 > .col-12:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) {
  grid-column: 1 / -1;
}

.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nowrap {
  white-space: nowrap;
}

/* Receiving Summary: give each ACE PO group breathing room between parent rows. */
.table .receiving-group > td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.table tbody .receiving-group + .receiving-group > td {
  border-top: 2px solid var(--ace-border-strong);
}

/* ---------- Badges / states ---------- */
.badge-cancel {
  background: var(--ace-danger);
  color: #fff;
}

.badge-ok {
  background: var(--ace-success);
  color: #fff;
}

.badge-warn {
  background: var(--ace-warning);
  color: #fff;
}

.badge-soft {
  background: var(--ace-primary-soft);
  color: var(--ace-primary-strong);
}

.badge-lg {
  font-size: .85rem;
  padding: .4rem .65rem;
  line-height: 1;
  vertical-align: middle;
}

/* Reconcile column (legacy goReconcile.asp): a check icon once reconciled,
   otherwise a "**" action link. */
.reconcile-ok {
  color: var(--ace-text);
  font-size: 1.05rem;
  font-weight: 700;
}

.reconcile-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ace-primary);
  font-weight: 700;
  cursor: pointer;
}

.reconcile-link:hover {
  text-decoration: underline;
}

.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--ace-muted);
  border: 1px dashed var(--ace-border);
  border-radius: var(--ace-radius);
  background: var(--ace-surface);
}

.alert {
  border-radius: var(--ace-radius-sm);
  border: 1px solid var(--ace-border);
}

.alert-info {
  background: var(--ace-primary-soft);
  color: var(--ace-primary-strong);
}

.detail-grid {
  display: grid;
  /* Fixed four-up layout, capped so the fields don't stretch across a widescreen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem 1rem;
  max-width: 1100px;
}

@media (max-width: 991.98px) {
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.detail-grid .field label {
  display: block;
  font-size: var(--ace-font-label, .76rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ace-text);
  font-weight: 400;
  margin-bottom: .2rem;
}

/* Give each summary value a grounded, read-only "field" surface so values no
   longer float against the card background. */
.detail-grid .field .value {
  font-weight: 600;
  font-size: var(--ace-font-input, .7rem);
  word-break: break-word;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 2.4rem;
  padding: .4rem .6rem;
  background: var(--ace-surface-2);
  border: 1px solid var(--ace-border);
  border-radius: var(--ace-radius-sm);
}

.detail-grid .field .value .form-select {
  background-color: transparent;
  border: 0;
  padding: 0 1.6rem 0 0;
  font-weight: 600;
  font-size: .7rem;
  color: var(--ace-text);
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.75rem 0 .75rem;
}

.section-title h2 {
  font-size: var(--ace-font-section, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0;
  color: var(--ace-text);
}

/* ---------- Login ---------- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--ace-gradient-brand);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--ace-surface);
  border-radius: 18px;
  box-shadow: var(--ace-shadow-md);
  padding: 2.25rem 2rem;
}

.login-card h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}

.login-card .subtitle {
  color: var(--ace-muted);
  font-size: .88rem;
  margin-bottom: 1.5rem;
}

/* ---------- Typeahead ---------- */
.ace-typeahead {
  position: relative;
}

.ace-typeahead-menu {
  position: absolute;
  z-index: 1050;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  display: none;
  margin-top: .15rem;
  background: var(--ace-surface);
  border: 1px solid var(--ace-border);
  border-radius: var(--ace-radius-sm);
  box-shadow: var(--ace-shadow-md);
}

.ace-typeahead-menu .list-group-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ace-text);
}

.ace-typeahead-menu .list-group-item:hover,
.ace-typeahead-menu .list-group-item-action:focus {
  background: var(--ace-table-hover-bg);
}

/* ---------- Utilities ---------- */
.stack-sm > * + * {
  margin-top: .5rem;
}

.placeholder-link {
  color: var(--ace-muted);
  pointer-events: none;
}

/* ---------- Home dashboard ---------- */
/* Cards flow left-to-right and stretch to fill each line to the edge before wrapping to the
   next line, so there is never unused space at the end of a row. */
.home-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.home-card-slot {
  flex: 1 1 24rem;
  min-width: 0;
  display: flex;
}

.home-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-card > .card-body {
  flex: 1 1 auto;
  padding: 1.6rem 2rem;
  min-height: 10.5rem;
  display: flex;
  flex-direction: column;
}

.home-card .card-title {
  margin-bottom: .75rem;
}

.home-card .card-body > .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- Table Designer ---------- */
.td-block {
  margin-bottom: 2rem;
}

.td-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .35rem;
}

.td-wrap {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--ace-border);
  border-radius: var(--ace-radius);
  background: var(--ace-surface);
}

.td-table {
  margin-bottom: 0;
}

.td-table th,
.td-table td {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.td-col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 6;
}

.td-row-resizer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  cursor: row-resize;
  z-index: 6;
}

.td-col-resizer:hover,
.td-row-resizer:hover {
  background: color-mix(in srgb, var(--ace-primary) 45%, transparent);
}

/* ---------- Typography Designer ---------- */
.font-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: .75rem 1.25rem;
  max-width: 1200px;
}

.font-control {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .6rem .75rem;
  border: 1px solid var(--ace-border);
  border-radius: var(--ace-radius-sm);
  background: var(--ace-surface);
}

.font-control-info {
  display: flex;
  flex-direction: column;
}

.font-control-info label {
  font-weight: 700;
  font-size: .82rem;
  margin: 0;
}

.font-control-inputs {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.font-control-inputs input[type="range"] {
  flex: 1;
  min-width: 90px;
}

.font-control-inputs input[type="number"] {
  width: 5.5rem;
}

.font-preview {
  max-width: 1100px;
}

/* ---------- Phone / tablet navbar ---------- */
@media (max-width: 991.98px) {
  .app-navbar .navbar-collapse {
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    padding: .25rem .15rem .75rem;
  }

  .app-navbar .navbar-nav {
    width: 100%;
  }

  .app-navbar .nav-link {
    padding: .55rem .65rem;
  }

  /* Render dropdowns inline so long menus never spill off a narrow screen. */
  .app-navbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin: 0 0 .25rem;
    border: 0;
    box-shadow: none;
    background: var(--ace-surface-2);
  }

  .app-navbar .dropdown-item {
    padding-left: 1.5rem;
  }

  .app-navbar .navbar-collapse .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap;
    margin-top: .5rem;
  }
}

@media (max-width: 575.98px) {
  .page-wrapper {
    padding: 1rem .75rem 3rem;
  }

  .table thead th {
    padding: .55rem .35rem;
  }

  .table > :not(caption) > * > * {
    padding: .35rem .35rem;
  }
}

/* ---------- Date fields ----------
   Chromium renders <input type="date"> in its own locale (e.g. MM/DD/YYYY) and ignores lang, so
   site.js keeps the native control (ISO value/submission unchanged) but draws the value as
   DD/MM/YYYY in an overlay that mirrors the field's font and colours, and opens the picker on
   click. The native text is hidden by site.js (not CSS) so the overlay can read its colour. */
.ace-date-field {
  position: relative;
  display: block;
}

.ace-date-field > input[type="date"]::-webkit-datetime-edit,
.ace-date-field > input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.ace-date-field > input[type="date"]::-webkit-datetime-edit-text,
.ace-date-field > input[type="date"]::-webkit-datetime-edit-month-field,
.ace-date-field > input[type="date"]::-webkit-datetime-edit-day-field,
.ace-date-field > input[type="date"]::-webkit-datetime-edit-year-field {
  color: transparent;
}

.ace-date-display {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--ace-text);
  white-space: nowrap;
}

/* Chromium draws the empty "mm/dd/yyyy" placeholder in grey text. */
.ace-date-display.is-empty {
  color: var(--ace-muted);
}