/* Component Library & Shared UI Tokens — Workshop Fuel Tracker */

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* The rule (ported from RHD_IMS buttonStyles): geometry communicates nothing.  */
/* Buttons in one group share a size; fill and colour carry the hierarchy.      */
/* `btn-solid` is reserved for the single commit action of a screen or dialog. */
/*   Sizes: .btn (44px) · .btn-lg (48px commit) · .btn-icon (44px square)      */
/*          · .btn-icon-dense (32px, desktop table rows only)                  */
/*   Tones: .btn-solid · .btn-soft · .btn-outline · .btn-ghost · .btn-success   */
/*          · .btn-danger · .btn-danger-solid                                   */
/* Deprecated aliases kept until Phases 4-7 migrate their pages:               */
/*   .btn-primary = solid, .btn-secondary = outline, .btn-ok = success,        */
/*   .btn-sm = compact 36px toolbar size.                                      */
/* -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--card);
  color: var(--text);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  text-decoration: none;
}

.btn i, .btn svg {
  width: 16px;
  font-size: 15px;
  flex-shrink: 0;
  text-align: center;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Sizes */
.btn-lg { min-height: 48px; padding: 12px 20px; font-size: 15px; }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

.btn-icon, .btn-icon-dense {
  padding: 0;
  gap: 0;
  flex-shrink: 0;
}
.btn-icon { width: 44px; height: 44px; }
.btn-icon-dense { width: 32px; height: 32px; min-height: 32px; border-radius: var(--radius-sm); }
.btn-icon-dense i { font-size: 13px; }

/* Tones */
.btn-solid, .btn-primary {
  background: var(--fill-brand);
  border-color: var(--fill-brand);
  color: #ffffff;
  box-shadow: var(--shadow-xs);
}
.btn-solid:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background: var(--fill-brand-hover);
  border-color: var(--fill-brand-hover);
}

.btn-soft {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand);
}
.btn-soft:hover:not(:disabled) { background: var(--brand-100); }

.btn-outline, .btn-secondary {
  background: var(--card);
  border-color: var(--line);
  color: var(--text-2);
}
.btn-outline:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background: var(--brand-50);
  border-color: var(--brand);
  color: var(--brand);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-2);
  color: var(--text);
}

.btn-success, .btn-ok {
  background: var(--fill-ok);
  border-color: var(--fill-ok);
  color: #ffffff;
}
.btn-success:hover:not(:disabled), .btn-ok:hover:not(:disabled) { filter: brightness(0.92); }

.btn-danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--fill-danger);
  border-color: var(--fill-danger);
  color: #ffffff;
}

.btn-danger-solid {
  background: var(--fill-danger);
  border-color: var(--fill-danger);
  color: #ffffff;
}
.btn-danger-solid:hover:not(:disabled) { filter: brightness(0.92); }

/* Paired actions stack full-width on phones (same size, so the pair still reads as one). */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 520px) {
  .btn-group.stack-mobile { flex-direction: column-reverse; align-items: stretch; }
  .btn-group.stack-mobile > .btn { width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Cards & Containers                                                         */
/* -------------------------------------------------------------------------- */
.card {
  background: var(--glass-bg);
  /* Its own stacking context, as the blur it replaced made it: a filter's date-range panel
     (z-index 60) stays under the sticky topbar (50). The blur only ever blurred the plain
     gradient, so the card looks the same without its per-frame cost. */
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  margin-bottom: 20px;
}

.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border-subtle);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.card-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text);
}

.card-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 1px;
}

.card-body {
  padding: 18px;
}

.card-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  .card-head {
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .card-actions {
    margin-left: 0;
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .card-actions .btn {
    flex: 1;
    min-height: 42px;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 10px;
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* -------------------------------------------------------------------------- */
/* KPI Metric Cards & Grid                                                    */
/* -------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 17px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.kpi::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
  background: var(--brand);
}

.kpi.k2::after { background: var(--teal); }
.kpi.k3::after { background: var(--warn); }
.kpi.k4::after { background: var(--purple); }
.kpi.k5::after { background: var(--info); }
.kpi.k6::after { background: var(--pink); }
.kpi.k7::after { background: var(--ok); }
.kpi.k8::after { background: var(--danger); }

.kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.kpi-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 15px;
}

.kpi-icon.teal { background: var(--teal-bg); color: var(--teal); }
.kpi-icon.warn { background: var(--warn-bg); color: var(--warn); }
.kpi-icon.purple { background: var(--purple-bg); color: var(--purple); }
.kpi-icon.pink { background: var(--pink-bg); color: var(--pink); }
.kpi-icon.ok { background: var(--ok-bg); color: var(--ok); }
.kpi-icon.brown { background: var(--brown-bg); color: var(--brown); }

.kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.9px;
  margin-top: 6px;
  line-height: 1.15;
  color: var(--text);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.kpi-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.kpi-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------- */
/* Forms & Form Fields                                                        */
/* -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-bottom: 14px;
}

/* -------------------------------------------------------------------------- */
/* Filter & Search Toolbar                                                    */
/* -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar .field {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .toolbar .field {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    margin-bottom: 0;
  }

  .toolbar input,
  .toolbar select,
  .toolbar .btn {
    width: 100% !important;
    min-height: 42px;
    border-radius: 10px;
  }
}

.field label, .form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.field .hint {
  font-weight: 400;
  /* Guidance text needs 4.5:1; --muted-2 (about 3:1) is for icons and borders. */
  color: var(--muted);
  font-size: 11.5px;
}

input[type=text],
input[type=number],
input[type=date],
input[type=month],
input[type=tel],
input[type=email],
input[type=password],
select,
textarea,
.form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--field-border);
  border-radius: 9px;
  /* background-color, not the shorthand: the shorthand would erase the select chevron. */
  background-color: var(--field-bg);
  color: var(--text);
  outline: none;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  min-height: 40px;
}

/* A currency or unit inside a field (৳ before an amount, L after a quantity), so the box itself says
   what to type. */
.input-adorn { position: relative; display: block; }
.input-adorn .adorn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  pointer-events: none;
}
.input-adorn .adorn-start { left: 13px; }
.input-adorn .adorn-end { right: 14px; }
.input-adorn.has-start .form-control { padding-left: 32px; }
.input-adorn.has-end .form-control { padding-right: 48px; }
/* No step arrows: they would sit between the number and its unit, and amounts are typed. */
.input-adorn input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.input-adorn input[type=number]::-webkit-inner-spin-button,
.input-adorn input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

input:hover:not(:disabled):not([readonly]):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
.form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--field-border-hover);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--brand);
  background-color: var(--card);
  box-shadow: var(--focus-ring);
}

/* Read-only and not-yet-available fields drop the well, so the eye goes to fields it can use. */
input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--bg-2);
  border-color: var(--line-3);
  color: var(--muted);
  cursor: not-allowed;
}

input:disabled,
select:disabled,
textarea:disabled {
  border-style: dashed;
}

/* The chevron is what tells a dropdown apart from a text box. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 36px !important;
  cursor: pointer;
}


textarea {
  resize: vertical;
  min-height: 76px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }

@media(max-width: 640px) {
  .form-grid, .form-grid.g3 { grid-template-columns: 1fr; }
  .form-grid .span-2, .form-grid .span-3 { grid-column: span 1; }
}

.person-picker {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.person-picker select { flex: 1; }
.person-picker .btn { flex-shrink: 0; min-height: 40px; padding: 0 14px; }

/* -------------------------------------------------------------------------- */
/* Badges & Status Pills                                                      */
/* -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tones come from lib/domain.js META maps; every tone used there is defined here. */
.badge-ok, .b-active, .b-cng { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); }
.badge-warn, .b-pending, .b-diesel { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
.badge-danger, .b-rejected, .b-brake { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.badge-info, .b-octane, .b-hydraulic { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); }
.badge-purple, .b-testing { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }
.badge-teal, .b-coolant { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-bg); }
.badge-pink, .b-reversal { background: var(--pink-bg); color: var(--pink); border: 1px solid var(--pink-bg); }
.badge-brown, .b-lubricant { background: var(--brown-bg); color: var(--brown); border: 1px solid var(--brown-bg); }
.badge-neutral, .b-neutral { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line); }
.badge-muted, .b-reversed { background: var(--bg-2); color: var(--muted); border: 1px dashed var(--muted-2); }

/* -------------------------------------------------------------------------- */
/* Rate Cards (Fluid Types Catalog)                                           */
/* -------------------------------------------------------------------------- */
.rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.rate-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rate-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.rate-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
}

.rate-card.cat-Fuel::before { background: #d97706; }
.rate-card.cat-Lubricant::before { background: #92400e; }
.rate-card.cat-Hydraulic::before { background: #1a6fc4; }
.rate-card.cat-Coolant::before { background: #0d9488; }
.rate-card.cat-Brake::before { background: #b3261e; }
.rate-card.cat-Other::before { background: #63748a; }

.rate-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.rate-card-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  margin-top: 10px;
  color: var(--text);
}

.rate-card-value small {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.rate-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
}

.rate-card-actions {
  margin-top: 14px;
  display: flex;
  gap: 6px;
}

/* -------------------------------------------------------------------------- */
/* Issuance Stepped Wizard Layout                                             */
/* -------------------------------------------------------------------------- */
.entry-step {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
  position: relative;
  transition: all 0.15s ease;
}

/* Natural descending stacking context ladder: earlier cards stack on top of later cards */
.entry-step[data-step="1"] { z-index: 30; }
.entry-step[data-step="2"] { z-index: 25; }
.entry-step[data-step="3"] { z-index: 20; }
.entry-step[data-step="4"] { z-index: 15; }
.entry-step[data-step="5"] { z-index: 10; }
.entry-step[data-step="6"] { z-index: 5; }

/* The step being used rises above the other steps (max 30) so its dropdowns overlap the cards
   below, but stays under the sticky page header (.topbar, 50) when the page scrolls. */
.entry-step:focus-within,
.entry-step.combobox-active {
  z-index: 40 !important;
}

.entry-step.done {
  border-color: var(--ok-border);
  background: linear-gradient(180deg, var(--ok-bg) 0%, var(--card) 60%);
}

.entry-step-num {
  position: absolute;
  top: -14px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--fill-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(26, 111, 196, 0.35);
}

.entry-step.done .entry-step-num {
  background: var(--fill-ok);
  box-shadow: 0 4px 10px rgba(15, 123, 83, 0.35);
}

.entry-step-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
  padding-left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.entry-step-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
  background: var(--info-bg);
  border-left: 3px solid var(--info);
  padding: 8px 12px;
  border-radius: 6px;
}

.purpose-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.purpose-btn {
  padding: 14px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  transition: all 0.15s ease;
  color: var(--text-2);
}

.purpose-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-50);
}

.purpose-btn.on {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.13);
}

.purpose-btn svg, .purpose-btn i {
  font-size: 20px;
}

.purpose-btn small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* Slip Receipt Live Preview */
.slip-preview {
  background: linear-gradient(135deg, #eaf2fb, #ffffff);
  border: 2px dashed var(--brand);
  border-radius: 12px;
  padding: 16px;
  margin-top: 18px;
  margin-bottom: 18px;
}

[data-theme="dark"] .slip-preview {
  background: linear-gradient(135deg, #0f2440, #16263c);
}

.slip-preview .sp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
}

.slip-preview .sp-row .k {
  color: var(--muted);
  font-weight: 600;
}

.slip-preview .sp-row .v {
  font-weight: 700;
}

.slip-preview .sp-row.total {
  border-top: 2px dashed var(--brand);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 20px;
  font-weight: 900;
  color: var(--brand);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
}

.big-submit {
  width: 100%;
  height: 52px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 12px;
}

/* -------------------------------------------------------------------------- */
/* Approval Cards & Risk Notices                                              */
/* -------------------------------------------------------------------------- */
.approval-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--card);
  margin-bottom: 12px;
  box-shadow: var(--shadow-xs);
}

.approval-card.pending {
  border-left: 4px solid var(--warn);
}

.approval-card .ac-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line-2);
}

.approval-card .ac-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.approval-card .ac-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.approval-card .ac-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.approval-card .ac-item .l {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.approval-card .ac-item .v {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 3px;
}

.approval-card .ac-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.risk-notice {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.risk-notice b {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11.5px;
  display: block;
  margin-bottom: 4px;
}

/* -------------------------------------------------------------------------- */
/* Tables & Mobile Responsive Transformations                                 */
/* -------------------------------------------------------------------------- */
.table-wrap, .table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: 0 0 var(--radius) var(--radius);
}

table, .table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 13.5px;
}

thead th, .table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-2);
  text-align: left;
  padding: 11px 15px;
  font-weight: 700;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td, .table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  color: var(--text);
}

tbody tr:last-child td, .table tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover, .table tbody tr:hover {
  background: var(--card-2);
}

.td-strong { font-weight: 700; color: var(--text); }
.td-mono { font-family: var(--font-mono); font-size: 12.5px; }
/* Slip numbers and other codes read as one token, never split across lines. */
.td-nowrap { white-space: nowrap; }

/* Laptop and small-desktop widths: tighter cells, and row buttons that carry a .btn-label
   collapse to their icon (the label stays for screen readers, the title for the pointer), so
   wide lists fit their card instead of scrolling sideways. Phones (card layout) keep both. */
@media (min-width: 961px) and (max-width: 1440px) {
  .table th, .table td { padding-left: 10px; padding-right: 10px; }
  .row-actions .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
.td-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.td-right { text-align: right; }
.td-actions { text-align: right; white-space: nowrap; }

/* Responsive Card Flip Table (up to 960px: phones and portrait or small landscape tablets,
   where a full-width list has more columns than room) */
@media (max-width: 960px) {
  .table-wrap {
    overflow-x: visible;
    border-radius: 0;
    padding: 10px;
    background: var(--bg-2);
  }
  .table-wrap table, .table-responsive table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .table-wrap thead, .table-responsive thead {
    display: none;
  }
  .table-wrap tbody, .table-responsive tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .table-wrap tbody tr, .table-responsive tbody tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: var(--shadow-xs);
  }
  .table-wrap tbody td, .table-responsive tbody td {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--line-2);
    text-align: right;
    align-items: center;
    font-size: 13px;
  }
  .table-wrap tbody td:last-child, .table-responsive tbody td:last-child {
    border-bottom: 0;
  }
  .table-wrap tbody td::before, .table-responsive tbody td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: left;
    white-space: nowrap;
  }
  .table-wrap tbody td.td-actions, .table-responsive tbody td.td-actions {
    display: flex !important;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 10px !important;
    margin-top: 4px;
    border-top: 1px solid var(--line-2);
    border-bottom: 0 !important;
  }
  .table-wrap tbody td.td-actions::before, .table-responsive tbody td.td-actions::before {
    content: none;
  }
  /* Badges keep their own width at the right of the card row instead of filling it. */
  .table-wrap tbody td > .badge, .table-wrap tbody td > .badge-stack { justify-self: end; }
  /* Card rows right-align their values; a slip's product list follows. */
  .table-wrap tbody td .slip-products li { justify-content: flex-end; }
  /* A second line (model, designation, note) sits under its value, not under the label. */
  .table-wrap tbody td > .td-sub { grid-column: 2; }
  /* On the narrowest phones (folded ones), long one-line values such as timestamps may wrap
     rather than push the card past the screen edge. */
  @media (max-width: 360px) {
    .table-wrap tbody td { grid-template-columns: minmax(72px, auto) minmax(0, 1fr); overflow-wrap: anywhere; }
    .table-wrap tbody td.td-nowrap { white-space: normal; }
  }
  /* Several row buttons wrap inside the card rather than spilling past its left edge. */
  .table-wrap tbody td.td-actions .row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Centered empty state and loading spinners on mobile card tables */
  .table-wrap tbody td[colspan],
  .table-responsive tbody td[colspan],
  .table-wrap tbody td:has(.empty-state),
  .table-wrap tbody td:has(.spinner) {
    display: block !important;
    text-align: center !important;
    border-bottom: none !important;
    padding: 24px 12px !important;
  }
  .table-wrap tbody td[colspan]::before,
  .table-responsive tbody td[colspan]::before {
    content: none !important;
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Pagination Box Component                                                   */
/* -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--card-2, rgba(255, 255, 255, 0.4));
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  gap: 14px;
  flex-wrap: wrap;
}

[data-theme="dark"] .pagination {
  background: rgba(15, 23, 42, 0.4);
  border-top-color: var(--line);
}

.pagination-info strong { color: var(--text); }
.pg-total { font-size: 13px; color: var(--muted); font-weight: 500; min-width: 28px; }

.pagination-info {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.pagination-page-size label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.pg-size-select {
  height: 36px;
  padding: 0 28px 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--card) var(--select-chevron) no-repeat right 8px center/14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-xs);
}

.pg-size-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.15);
}

[data-theme="dark"] .pg-size-select {
  background-color: rgba(15, 23, 42, 0.7);
  border-color: var(--line);
  color: #f1f5f9;
}

.pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: var(--shadow-xs);
}

.pg-btn:hover:not(:disabled) {
  background: var(--fill-brand);
  color: #ffffff;
  border-color: var(--fill-brand);
  box-shadow: 0 4px 12px rgba(26, 111, 196, 0.35);
  transform: translateY(-1px);
}

.pg-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.pg-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
  background: transparent;
  border-color: var(--line-2, var(--line));
}

.pg-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 800;
  font-size: 13.5px;
  border: 1px solid rgba(26, 111, 196, 0.25);
}

[data-theme="dark"] .pg-current {
  background: rgba(26, 111, 196, 0.2);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
}

@media (max-width: 640px) {
  .pagination {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    gap: 12px;
    text-align: center;
  }

  .pagination-info strong { color: var(--text); }
.pg-total { font-size: 13px; color: var(--muted); font-weight: 500; min-width: 28px; }

.pagination-info {
    order: 2;
    font-size: 12px;
    justify-content: center;
  }

  .pagination-page-size {
    order: 3;
    font-size: 12px;
    justify-content: center;
  }

  .pagination-controls {
    order: 1;
    gap: 10px;
    width: 100%;
    justify-content: center;
  }

  .pg-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    font-size: 15px;
    border-radius: 10px;
  }

  .pg-current {
    min-width: 42px;
    height: 42px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* -------------------------------------------------------------------------- */
/* Modals & Dialogs                                                           */
/* -------------------------------------------------------------------------- */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal-root[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 69, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
  z-index: 1;
}

.modal {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line);
  width: 100%;
  max-width: 580px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  border: 1px solid var(--line);
  z-index: 2;
  margin: auto;
}

.modal.modal-lg { max-width: 840px; }
.modal.modal-sm { max-width: 440px; }

.modal-head {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.modal-head h3 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.modal-head .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line-2);
  background: var(--card-2);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.icon-btn {
  margin-left: auto;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 20px;
  display: grid;
  place-items: center;
}

.icon-btn:hover {
  background: var(--bg-2);
  color: var(--text);
}

/* -------------------------------------------------------------------------- */
/* Toast Notification System                                                  */
/* -------------------------------------------------------------------------- */
#toast-root {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 560px);
  pointer-events: none;
}

@media (max-width: 768px) {
  #toast-root { bottom: calc(var(--bottombar-height) + 16px); }
}

.toast {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast i { flex-shrink: 0; font-size: 16px; }
.toast-message { flex: 1; }

.toast-success i { color: #4ade80; }
.toast-info i { color: #93c5fd; }
.toast-warning { background: #92400e; }
.toast-warning i { color: #fde68a; }
.toast-error { background: var(--fill-danger); }
.toast-error i { color: #ffffff; }

[data-theme="dark"] .toast-success, [data-theme="dark"] .toast-info { background: #1e3a5f; }

/* -------------------------------------------------------------------------- */
/* Spinners & Key-Value Lists                                                 */
/* -------------------------------------------------------------------------- */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 16px auto;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
  margin: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.kv-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}

.kv-row:last-child {
  border-bottom: 0;
}

.kv-row .k {
  color: var(--muted);
  font-weight: 500;
}

.kv-row .v {
  font-weight: 600;
  text-align: right;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 12px;
}

.info-item {
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 11px 13px;
}

.info-item .l {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.info-item .v {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 3px;
  word-break: break-word;
}

/* -------------------------------------------------------------------------- */
/* Directory Profiles & Grid Cards (Officers, Drivers)                        */
/* -------------------------------------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 16px;
}

.mini-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
}

.mini-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  border-color: var(--brand);
}

.mc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mc-title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.25;
}

.mc-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.mc-info {
  border-top: 1px solid var(--line-2, var(--line));
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.mc-info .iv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}

.mc-info .iv span {
  color: var(--muted);
}

.mc-info .iv b {
  font-weight: 600;
  color: var(--text);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  flex-shrink: 0;
}

.avatar.av-1 { background: linear-gradient(135deg, #1a6fc4, #0b2545); }
.avatar.av-2 { background: linear-gradient(135deg, #0d9488, #115e59); }
.avatar.av-3 { background: linear-gradient(135deg, #d97706, #92400e); }
.avatar.av-4 { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.avatar.av-5 { background: linear-gradient(135deg, #be185d, #9d174d); }
.avatar.av-6 { background: linear-gradient(135deg, #0284c7, #0369a1); }

/* -------------------------------------------------------------------------- */
/* Stat Strip (Reports, Approvals)                                            */
/* -------------------------------------------------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stat-strip .s {
  background: var(--glass-bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.stat-strip .s b {
  font-size: 22px;
  font-weight: 800;
  display: block;
  color: var(--brand);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.8px;
  line-height: 1.1;
}

.stat-strip .s span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 4px;
  display: block;
}

/* -------------------------------------------------------------------------- */
/* Searchable Vehicle Combobox Picker                                         */
/* -------------------------------------------------------------------------- */
.vehicle-picker-combobox {
  position: relative;
  width: 100%;
  z-index: 100;
}

.vehicle-picker-combobox.open {
  z-index: 120;
}

.vehicle-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.24), 0 4px 14px rgba(15, 23, 42, 0.1);
  display: flex;
  flex-direction: column;
}

.vs-header {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}

.vs-item {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-2, var(--line));
  cursor: pointer;
  transition: background 0.15s ease;
}

.vs-item:last-child {
  border-bottom: none;
}

.vs-item:hover,
.vs-item.selected {
  background: var(--brand-50);
}

[data-theme="dark"] .vs-item:hover,
[data-theme="dark"] .vs-item.selected {
  background: rgba(26, 111, 196, 0.25);
}

.vs-item .reg {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text);
  font-size: 13.5px;
}

.vs-item .model {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.vs-item .pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--brand-50);
  color: var(--brand);
  white-space: nowrap;
}

[data-theme="dark"] .vs-item .pill {
  background: rgba(74, 158, 240, 0.2);
  color: var(--brand);
}

.vs-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* -------------------------------------------------------------------------- */
/* Date Range & Presets Toolbar (Issuances Ledger)                             */
/* -------------------------------------------------------------------------- */
.date-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card-2);
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--line);
  margin-top: 10px;
}

.date-range-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.date-range-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.date-inputs-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.date-input {
  border: none;
  background: transparent;
  height: 28px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  padding: 0 2px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

.date-sep {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.date-presets-pillgroup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-wrap: wrap;
}

.preset-pill {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.preset-pill:hover {
  background: var(--brand-50);
  color: var(--brand);
}

.preset-pill.active {
  background: var(--fill-brand) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(26, 111, 196, 0.35);
}

.preset-pill.preset-clear {
  color: var(--danger);
}

.preset-pill.preset-clear:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

@media (max-width: 640px) {
  .date-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .date-range-group {
    width: 100%;
    justify-content: space-between;
  }
  .date-inputs-inline {
    width: 100%;
    justify-content: space-between;
  }
  .date-presets-pillgroup {
    width: 100%;
    justify-content: space-between;
  }
  .preset-pill {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 5px 4px;
    font-size: 11px;
  }
}

/* List tables (components/table_head.js): sortable headers, the phone "Sort by" select and SL */
.th-sort {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.th-sort:hover { color: var(--brand); }
.th-sort i { color: var(--muted-2); font-size: 11px; }
th[aria-sort="ascending"] .th-sort i, th[aria-sort="descending"] .th-sort i { color: var(--brand); }
.th-sort:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

.td-sl {
  width: 1%;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
th.td-sl abbr { text-decoration: none; cursor: help; }

/* Card layouts (up to 960px) have no header row, so they sort from a select instead. */
.table-sort-mobile { display: none; }

@media (max-width: 960px) {
  .table-sort-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    gap: 10px;
    padding: 10px 10px 0;
    background: var(--bg-2);
  }
  .table-sort-mobile label { margin: 0; white-space: nowrap; }
  .table-sort-mobile select { flex: 1; min-width: 0; }
  .table-wrap tbody td.td-sl {
    display: block;
    width: auto;
    text-align: left;
    padding: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 0;
  }
  .table-wrap tbody td.td-sl::before { margin-right: 6px; }
}



/* -------------------------------------------------------------------------- */
/* Page wrappers, banners, section heads and avatar colours                   */
/* -------------------------------------------------------------------------- */
.page-container { min-width: 0; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info);
  font-size: 13.5px;
  line-height: 1.5;
}
.alert i { margin-top: 2px; flex-shrink: 0; }
.alert-danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.alert-warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.alert-ok { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }

.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
}
/* The heading wraps on narrow screens instead of pushing the page sideways. */
.section-head h2 { font-size: 14px; font-weight: 700; min-width: 0; }
.section-head .line { flex: 1; min-width: 24px; height: 1px; background: var(--line); }

/* Status / delete decision dialog (components/status_modal.js) */
.decision-intro { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.decision-choices { display: flex; flex-direction: column; gap: 12px; }
.decision-choices[hidden], .decision-confirm[hidden] { display: none; }
.decision-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.decision-card:hover { background: var(--bg-2); }
.decision-card.is-destructive { border-style: dashed; border-color: var(--danger); }
.decision-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.decision-icon.is-danger { background: var(--danger-bg); color: var(--danger); }
.decision-icon.is-ok { background: var(--ok-bg); color: var(--ok); }
.decision-text { flex: 1; min-width: 0; }
.decision-title { font-weight: 700; font-size: 14px; color: var(--text); }
.is-destructive .decision-title { color: var(--danger); }
.decision-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.decision-card .btn { flex-shrink: 0; white-space: nowrap; }
.decision-confirm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
}
.decision-warning { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--text); font-size: 13px; }
.decision-warning i { color: var(--danger); margin-top: 2px; }
.decision-confirm .btn-group { justify-content: flex-end; }

@media (max-width: 480px) {
  .decision-card { flex-wrap: wrap; }
  .decision-card .btn { width: 100%; }
}

.avatar.av-blue { background: linear-gradient(135deg, #1a6fc4, #0b2545); }
.avatar.av-indigo { background: linear-gradient(135deg, #4f46e5, #312e81); }
.avatar.av-teal { background: linear-gradient(135deg, #0f766e, #115e59); }
.avatar.av-green { background: linear-gradient(135deg, #15803d, #14532d); }
.avatar.av-amber { background: linear-gradient(135deg, #b45309, #92400e); }
.avatar.av-purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.avatar.av-pink { background: linear-gradient(135deg, #be185d, #9d174d); }
.avatar.av-red { background: linear-gradient(135deg, #dc2626, #7f1d1d); }

/* Centered status panels (404, empty pages) and single-column forms */
.empty-panel {
  max-width: 560px;
  margin: 24px auto;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.empty-panel-icon { font-size: 36px; color: var(--muted-2); }
.empty-panel p { max-width: 420px; }
.narrow-card { max-width: 520px; margin: 0 auto; }
.form-stack { display: flex; flex-direction: column; gap: 16px; }
/* The stack's gap spaces its fields; their own margin would double it */
.form-stack > .field { margin-bottom: 0; }
.form-error { margin: 0; color: var(--danger); font-size: 13px; }
.form-error:empty { display: none; }
.btn-spinner { width: 14px; height: 14px; border-width: 2px; }
body.modal-open { overflow: hidden; }

/* -------------------------------------------------------------------------- */
/* Filters, segmented controls, stat tiles, charts and bar lists              */
/* -------------------------------------------------------------------------- */
/* !important: a visually hidden <input> must not pick up the form-field width and padding. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-note { color: var(--muted); font-size: 13.5px; padding: 18px 4px; text-align: center; }

/* One row above the content it scopes. */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
}
.custom-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); }
.custom-range .form-control { width: auto; min-height: 36px; }
.filter-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }

.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  max-width: 100%;
  overflow-x: auto;
}
.segment {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.segment:hover { color: var(--text); }
.segment[aria-checked="true"] {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.segment:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.stat-tile.is-link { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.stat-tile.is-link:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.stat-tile.is-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
  font-size: 14px;
}
/* Stat values use proportional figures (tabular digits look loose at display size). */
.stat-value {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}
.stat-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.delta-chip { font-weight: 600; color: var(--text-2); }

.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-2), var(--line-2), var(--bg-2));
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.skeleton-value { width: 60%; height: 30px; }
.skeleton-line { width: 80%; height: 12px; margin-top: 4px; }
.skeleton-chart { width: 100%; height: 240px; }
.skeleton-block { width: 100%; height: 160px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .sidebar, .overlay { transition: none; } }

/* Refetch keeps the frame: previous figures dim instead of flashing skeletons. */
.is-refreshing { opacity: 0.55; transition: opacity 0.15s ease; pointer-events: none; }

.line-chart-mount { position: relative; width: 100%; }
.line-chart { display: block; width: 100%; height: auto; overflow: visible; }
.line-chart:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.lc-grid line { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.lc-grid line.lc-zero { stroke: var(--line); }
.lc-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.lc-area { fill: var(--viz-1); opacity: 0.1; }
.lc-line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-dot { fill: var(--viz-1); stroke: var(--card); stroke-width: 2; }
.lc-crosshair { stroke: var(--muted-2); stroke-width: 1; shape-rendering: crispEdges; }
.lc-overlay { fill: transparent; cursor: crosshair; }
.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 12px;
  white-space: nowrap;
  z-index: 5;
}
.chart-tooltip strong { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-tooltip span { color: var(--muted); }

.bar-row { min-width: 0; }
.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bar-label { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.bar-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { height: 8px; margin-top: 6px; border-radius: 0 4px 4px 0; background: var(--bg-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 0; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.bar-meta { margin-top: 4px; font-size: 12px; color: var(--muted); }
.table th.td-right, table th.td-right { text-align: right; }

/* Side drawer (openModal({ size: 'modal-drawer' })) */
.modal-root.is-drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.modal.modal-drawer {
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0;
  animation: drawerIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes drawerIn { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Printing a voucher prints only the open dialog. */
@media print {
  body.modal-open #app, body.modal-open #toast-root, body.modal-open .bottom-nav { display: none !important; }
  body.modal-open .modal-root { position: static; padding: 0; }
  body.modal-open .modal-backdrop, body.modal-open .modal-foot, body.modal-open .icon-btn { display: none !important; }
  body.modal-open .modal { box-shadow: none; border: 0; height: auto; max-width: none; }
}
.link-btn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Slip voucher (components/slip_drawer.js) */
.voucher { display: flex; flex-direction: column; gap: 14px; }
/* The products on a slip, numbered, each with its total and how it was worked out. */
.voucher-items { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.voucher-items li { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.voucher-items li::marker { color: var(--muted); font-weight: 700; }
.voucher-item-main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.voucher-item-name { font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.voucher-item-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A slip's products in a list cell: one per row, the quantity beside the name. */
.slip-products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.slip-products li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.slip-product-name { font-weight: 600; color: var(--text); }
.slip-product-qty { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.voucher-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.voucher-note { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2); }
.voucher-note .k { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.voucher-note p { margin-top: 4px; color: var(--text); white-space: pre-wrap; }


/* People directories (components/people_directory.js) */
.people-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 0; }
.people-search { flex: 1 1 260px; margin: 0; }
.person-avatar { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; }
.person-head { flex: 1; min-width: 0; }
.mini-card.is-inactive { opacity: 0.72; }
.person-actions { justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Assigned vehicles in the edit dialog. Results sit in the flow, not in a floating dropdown,
   because .modal-body scrolls and would clip one. */
.assign-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assign-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--card-2); font-size: 13px;
}
.assign-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.assign-remove {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.assign-remove:hover, .assign-remove:focus-visible { background: var(--danger-bg); color: var(--danger); }
.assign-results { border: 1px solid var(--line); border-radius: 12px; max-height: 240px; overflow-y: auto; }
.assign-results .vs-item {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: none;
  color: inherit; font: inherit; text-align: left;
}
.assign-results .vs-item:last-child { border-bottom: 0; }
.assign-results .vs-item:focus-visible { background: var(--brand-50); outline: 2px solid var(--brand); outline-offset: -2px; }
.assign-results .reg, .assign-results .model { display: block; }

/* Category colours (donut segments, legend swatches, product bars) */
[data-cat="Fuel"] { --cat: var(--cat-fuel); }
[data-cat="Lubricant"] { --cat: var(--cat-lubricant); }
[data-cat="Hydraulic"] { --cat: var(--cat-hydraulic); }
[data-cat="Coolant"] { --cat: var(--cat-coolant); }
[data-cat="Brake"] { --cat: var(--cat-brake); }
[data-cat="Other"] { --cat: var(--cat-other); }
.bar-fill[data-cat] { background: var(--cat); }

/* Donut (components/donut_chart.js) */
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; padding: 4px 0; }
.donut { flex: none; overflow: visible; }
.donut-seg { fill: var(--cat, var(--viz-1)); stroke: var(--card); stroke-width: 2; transition: opacity 0.15s ease; }
.donut-seg.is-dim { opacity: 0.3; }
.donut-total { fill: var(--text); font-size: 17px; font-weight: 700; }
.donut-caption { fill: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 200px; flex: 1; }
.donut-key { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 9px; font-size: 13px; border-radius: 6px; padding: 2px 4px; }
.donut-key:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.donut-key .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--cat); }
.donut-key-label { color: var(--text-2); font-weight: 600; }
.donut-key-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.donut-key-share { color: var(--muted); font-size: 12px; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.stat-icon.tone-ok { background: var(--ok-bg); color: var(--ok); }
.stat-icon.tone-warn { background: var(--warn-bg); color: var(--warn); }
.stat-icon.tone-purple { background: var(--purple-bg); color: var(--purple); }

/* -------------------------------------------------------------------------- */
/* List filters: search (+ toggles, Clear) on top, then the dropdowns sharing  */
/* one evenly filled row. Columns follow the panel's own width (container      */
/* query), so opening the sidebar never strands one field on a row of its own. */
/* -------------------------------------------------------------------------- */
.filter-panel { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; }
.filter-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-top .filter-search { flex: 1 1 260px; }
.filter-panel .field { margin: 0; min-width: 0; }
.filter-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
/* Controls in a row share one height (a select and the date button differ by a pixel otherwise). */
.filter-fields > .field { display: flex; flex-direction: column; }
.filter-fields > .field > .form-control { flex: 1 0 auto; }
.filter-fields.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 760px) {
  .filter-fields, .filter-fields.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 420px) {
  .filter-fields, .filter-fields.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .filter-top > * { flex: 1 1 100%; }
}

/* Date range field (components/date_range.js) */
.date-range { position: relative; }
.date-range-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--muted);
}
.date-range.is-set .date-range-button { color: var(--text); }
.date-range-button .fa-calendar { color: var(--brand); }
.date-range-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-range-caret { font-size: 11px; color: var(--muted); transition: transform 0.15s ease; }
.date-range-button[aria-expanded="true"] .date-range-caret { transform: rotate(180deg); }
.date-range-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: max(100%, 248px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}
.date-range-panel[hidden], .date-range-list[hidden], .date-range-custom[hidden] { display: none; }
.date-range-panel.align-end { left: auto; right: 0; }
.date-range-list { display: flex; flex-direction: column; padding: 6px; }
.date-range-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
}
.date-range-option:hover { background: var(--bg-2); color: var(--text); }
.date-range-option[aria-pressed="true"] { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.date-range-option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.date-range-option i { font-size: 11px; color: var(--muted); }
.date-range-to-custom { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; padding-top: 11px; }
.date-range-all { color: var(--muted); }
.date-range-custom { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; }
.date-range-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
}
.date-range-back:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.date-range-apply { align-self: flex-end; }

@media (max-width: 520px) {
  .date-range-panel, .date-range-panel.align-end { left: 0; right: 0; width: auto; }
}

/* -------------------------------------------------------------------------- */
/* Notification bell (topbar)                                                 */
/* -------------------------------------------------------------------------- */
.nb { position: relative; flex-shrink: 0; }
.nb-btn { position: relative; cursor: pointer; }
.nb-btn[aria-expanded="true"] { background: var(--brand-50); color: var(--brand); border-color: var(--brand); }
.nb-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--fill-danger);
  color: #fff;
  border: 2px solid var(--card);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nb-badge[hidden] { display: none; }
.nb-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: min(72vh, 600px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}
.nb-panel[hidden] { display: none; }
.nb-panel:focus { outline: none; }
.nb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
}
.nb-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.nb-read-all { font-size: 12.5px; }
.nb-head-actions { display: flex; align-items: center; gap: 6px; }
.nb-more { position: relative; }
.nb-more-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.nb-more-btn:hover, .nb-more-btn[aria-expanded="true"] { background: var(--bg-2); color: var(--text); }
.nb-more-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nb-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 2;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.nb-menu[hidden] { display: none; }
.nb-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.nb-menu button:hover, .nb-menu button:focus-visible { background: var(--bg-hover); outline: none; }
.nb-menu button i { width: 16px; color: var(--muted); }
.nb-menu button.is-danger, .nb-menu button.is-danger i { color: var(--danger); }
.nb-menu button:disabled { opacity: 0.5; cursor: default; background: transparent; }
.nb-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
}
.nb-bulk[hidden] { display: none; }
.nb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.nb-check input, .nb-select { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.nb-selected { flex: 1; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.nb-confirm { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.nb-read-all:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.nb-tabs { padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.nb-tabs .segmented { width: 100%; }
.nb-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nb-item { border-bottom: 1px solid var(--line-2); }
.nb-item:last-child { border-bottom: 0; }
.nb-item.is-unread { background: var(--brand-50); }
.nb-open {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* The whole row (checkbox, text and trash) highlights together. */
.nb-row { display: flex; align-items: flex-start; }
.nb-row:hover { background: var(--bg-hover); }
.nb-row .nb-open { flex: 1; min-width: 0; padding-right: 6px; }
.nb-select { flex-shrink: 0; margin: 21px 0 0 16px; }
.nb-row .nb-select + .nb-open { padding-left: 12px; }
.nb-item.is-selected { background: var(--bg-hover); }
.nb-delete {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 10px 8px 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.nb-delete:hover { background: var(--danger-bg); color: var(--danger); }
.nb-delete:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* With a mouse the trash button appears on hover or focus; touch screens always show it. */
@media (hover: hover) and (pointer: fine) {
  .nb-delete { opacity: 0; }
  .nb-item:hover .nb-delete, .nb-delete:focus-visible { opacity: 1; }
}
.nb-open:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.nb-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--info-bg);
  color: var(--info);
}
.nb-icon[data-kind="slip_submitted"] { background: var(--warn-bg); color: var(--warn); }
.nb-icon[data-kind="slip_approved"] { background: var(--ok-bg); color: var(--ok); }
.nb-icon[data-kind="slip_rejected"] { background: var(--danger-bg); color: var(--danger); }
.nb-icon[data-kind="slip_reversed"] { background: var(--purple-bg); color: var(--purple); }
.nb-item.is-resolved .nb-icon { background: var(--bg-2); color: var(--muted); }
.nb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-item-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.nb-item.is-unread .nb-item-title { font-weight: 700; }
.nb-body { font-size: 12.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.nb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 600;
}
.nb-chip i { font-size: 10px; color: var(--ok); }
.nb-chip.is-rejected i { color: var(--danger); }
.nb-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.nb-actions { justify-content: flex-end; padding: 0 16px 12px 62px; gap: 8px; }
.nb-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 24px; text-align: center; color: var(--muted); }
.nb-empty i { font-size: 22px; }
.nb-empty p { margin: 0; font-size: 13px; max-width: 260px; }
.nb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--card-2);
}
.nb-foot[hidden] { display: none; }
.nb-note { font-size: 12px; color: var(--muted); }

/* Phones: a sheet under the topbar, clear of the bottom navigation. */
@media (max-width: 640px) {
  .nb { position: static; }
  .nb-panel {
    position: fixed;
    /* the topbar is at the top of the screen and at most 56px tall here */
    top: 60px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 140px - env(safe-area-inset-bottom, 0px));
  }
  .nb-actions { padding-left: 16px; }
  .nb-actions .btn { flex: 1; }
}

/* Dated rate timelines (components/rate_timeline.js): product rates and VAT */
.rate-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rate-timeline li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
}
.rate-timeline li .td-sub { grid-column: 1 / -1; }
.rate-timeline li.is-current { border-color: var(--ok-border); background: var(--ok-bg); }
.rate-timeline li.is-future { border-style: dashed; }
.rate-when { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rate-amount { font-weight: 700; font-variant-numeric: tabular-nums; }