/* =============================================================
   BELTS — internal tool theme
   Calm, dense, readable. Inspired by Linear / GitHub / Notion.
   Layered on top of Sneat. Loaded last so overrides win.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* Surfaces — flat, slightly warm off-white */
  --belts-bg:           #f6f6f4;
  --belts-surface:      #ffffff;
  --belts-surface-2:    #fafaf8;
  --belts-border:       #e7e7e2;
  --belts-border-2:     #d8d8d2;

  /* Skeleton loading (htmx swaps) */
  --belts-skel-base:    #ecece8;
  --belts-skel-shine:   rgba(255, 255, 255, 0.65);

  /* Ink */
  --belts-ink:          #1a1d22;
  --belts-ink-2:        #3a3f48;
  --belts-ink-muted:    #6c727f;
  --belts-ink-soft:     #9aa0aa;

  /* Accent — emerald, used sparingly */
  --belts-accent:       #047857;
  --belts-accent-hover: #036045;
  --belts-accent-tint:  #e6f4ee;

  /* Status */
  --belts-success:      #047857;
  --belts-success-tint: #e6f4ee;
  --belts-warning:      #92400e;
  --belts-warning-tint: #fef3c7;
  --belts-danger:       #991b1b;
  --belts-danger-tint:  #fee2e2;

  /* Effects */
  --belts-shadow:       0 1px 2px rgba(20, 30, 45, 0.04);
  --belts-shadow-pop:   0 4px 12px -4px rgba(20, 30, 45, 0.08);
  --belts-radius:       8px;
  --belts-radius-sm:    6px;

  /* Typography — single sans family */
  --belts-font:         "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --belts-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Density tokens */
  --belts-row-pad-y:    0.55rem;
  --belts-row-pad-x:    1rem;
}

/* =================== Base =================== */

html, body {
  font-family: var(--belts-font) !important;
  color: var(--belts-ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--belts-bg);
}

/* Heading sizes — restrained */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--belts-font);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--belts-ink);
  margin: 0;
}
h4 { font-size: 1.0625rem; line-height: 1.3; }
h5 { font-size: 0.9375rem; line-height: 1.3; }
h6 { font-size: 0.8125rem; line-height: 1.3; }

code, .belts-mono {
  font-family: var(--belts-font-mono);
  font-size: 0.825em;
  font-feature-settings: "tnum";
}

/* Tighter container */
.container-xxl { padding-left: 1.5rem; padding-right: 1.5rem; }

/* =================== Page header strip =================== */

.belts-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--belts-border);
}
.belts-page-head__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--belts-ink);
  margin: 0;
}
.belts-page-head__sub {
  font-size: 0.8125rem;
  color: var(--belts-ink-muted);
  margin: 0.15rem 0 0;
}
.belts-page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* =================== Cards (subtle, no fancy glass) =================== */

.card {
  background: var(--belts-surface) !important;
  border: 1px solid var(--belts-border) !important;
  border-radius: var(--belts-radius) !important;
  box-shadow: var(--belts-shadow) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--belts-border) !important;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
}
.card-header h5 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}
.card-body { padding: 1rem; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--belts-border) !important;
  padding: 0.6rem 1rem;
  font-size: 0.8125rem;
}

/* =================== Tables — dense, scannable =================== */

.table {
  --bs-table-bg: transparent;
  color: var(--belts-ink);
  font-size: 0.875rem;
  margin: 0;
}
.table thead th {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--belts-ink-muted);
  border-bottom: 1px solid var(--belts-border) !important;
  padding: var(--belts-row-pad-y) var(--belts-row-pad-x);
  background: var(--belts-surface-2) !important;
  text-transform: none;
}
.table tbody td {
  padding: var(--belts-row-pad-y) var(--belts-row-pad-x);
  border-bottom: 1px solid var(--belts-border) !important;
  vertical-align: middle;
  color: var(--belts-ink-2);
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table-hover tbody tr:hover { --bs-table-hover-bg: transparent; }
.table-hover tbody tr:hover td { background: var(--belts-surface-2) !important; }

/* Clickable rows — whole row navigates (see belts-init.js) */
tbody tr.belts-row-link { cursor: pointer; }
tbody tr.belts-row-link:hover td { background: var(--belts-surface-2) !important; }

/* Expand/collapse rows on tree pages — whole row toggles its children */
tbody tr.belts-row-toggle-row { cursor: pointer; }
tbody tr.belts-row-toggle-row:hover td { background: var(--belts-surface-2) !important; }

/* =================== Buttons =================== */

.btn {
  font-weight: 500;
  font-size: 0.8125rem;
  border-radius: var(--belts-radius-sm);
  padding: 0.4rem 0.85rem;
  letter-spacing: 0;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }
.btn:hover { transform: none; }

.btn-primary {
  background: var(--belts-accent) !important;
  border-color: var(--belts-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--belts-accent-hover) !important;
  border-color: var(--belts-accent-hover) !important;
}

.btn-outline-primary {
  color: var(--belts-accent) !important;
  border-color: var(--belts-border-2) !important;
  background: var(--belts-surface) !important;
}
.btn-outline-primary:hover {
  background: var(--belts-accent-tint) !important;
  border-color: var(--belts-accent) !important;
  color: var(--belts-accent-hover) !important;
}

.btn-outline-secondary {
  color: var(--belts-ink-2) !important;
  border-color: var(--belts-border-2) !important;
  background: var(--belts-surface) !important;
}
.btn-outline-secondary:hover {
  background: var(--belts-surface-2) !important;
  color: var(--belts-ink) !important;
  border-color: var(--belts-border-2) !important;
}

.btn-outline-danger {
  color: var(--belts-danger) !important;
  border-color: var(--belts-border-2) !important;
  background: var(--belts-surface) !important;
}
.btn-outline-danger:hover {
  background: var(--belts-danger-tint) !important;
  border-color: var(--belts-danger) !important;
  color: var(--belts-danger) !important;
}

.btn-danger {
  background: var(--belts-danger) !important;
  border-color: var(--belts-danger) !important;
  color: #fff !important;
}
.btn-danger:hover { background: #7f1d1d !important; border-color: #7f1d1d !important; }

/* =================== Forms =================== */

.form-control, .form-select {
  background: var(--belts-surface) !important;
  border: 1px solid var(--belts-border-2);
  border-radius: var(--belts-radius-sm);
  font-family: var(--belts-font);
  font-size: 0.875rem;
  color: var(--belts-ink);
  padding: 0.4rem 0.65rem;
  box-shadow: none !important;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--belts-accent);
  box-shadow: 0 0 0 2px var(--belts-accent-tint) !important;
}
.form-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--belts-ink-muted);
  margin-bottom: 0.25rem;
  text-transform: none;
  letter-spacing: 0;
}
.form-text {
  font-size: 0.75rem;
  color: var(--belts-ink-soft);
}
.form-check-input {
  border-color: var(--belts-border-2);
}
.form-check-input:checked {
  background-color: var(--belts-accent);
  border-color: var(--belts-accent);
}
.form-check-input:focus { box-shadow: 0 0 0 2px var(--belts-accent-tint); }

textarea.form-control { padding: 0.5rem 0.65rem; }

/* =================== Navbar / Sidebar / Layout =================== */

.layout-navbar.bg-navbar-theme {
  background: var(--belts-surface) !important;
  border-bottom: 1px solid var(--belts-border);
  box-shadow: none !important;
  backdrop-filter: none;
}

.bg-menu-theme {
  background: var(--belts-surface) !important;
  border-right: 1px solid var(--belts-border) !important;
  backdrop-filter: none;
}

.bg-menu-theme .menu-inner > .menu-item .menu-link {
  border-radius: var(--belts-radius-sm);
  margin: 1px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--belts-ink-2) !important;
  padding: 0.45rem 0.75rem;
}
.bg-menu-theme .menu-inner > .menu-item .menu-link:hover {
  background: var(--belts-surface-2) !important;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background: var(--belts-accent-tint) !important;
  color: var(--belts-accent-hover) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link i {
  color: var(--belts-accent) !important;
}

.app-brand-text {
  font-family: var(--belts-font) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0;
  color: var(--belts-ink) !important;
}

.content-footer.footer.bg-footer-theme {
  background: transparent !important;
  border-top: 1px solid var(--belts-border);
  font-size: 0.75rem;
}
.footer-link { color: var(--belts-ink-muted) !important; }
.footer-link:hover { color: var(--belts-ink) !important; }

/* =================== Badges =================== */

.badge {
  font-weight: 500;
  font-size: 0.7rem;
  padding: 0.18em 0.5em;
  border-radius: var(--belts-radius-sm);
  letter-spacing: 0;
}
.bg-label-success {
  background: var(--belts-success-tint) !important;
  color: var(--belts-success) !important;
}
.bg-label-warning {
  background: var(--belts-warning-tint) !important;
  color: var(--belts-warning) !important;
}
.bg-label-danger {
  background: var(--belts-danger-tint) !important;
  color: var(--belts-danger) !important;
}
.bg-label-secondary {
  background: var(--belts-surface-2) !important;
  color: var(--belts-ink-muted) !important;
  border: 1px solid var(--belts-border);
}

/* =================== Tabs =================== */

.nav-tabs {
  border-bottom: 1px solid var(--belts-border);
  gap: 0;
}
.nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--belts-ink-muted) !important;
  background: transparent !important;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--belts-ink) !important; }
.nav-tabs .nav-link.active {
  color: var(--belts-ink) !important;
  border-bottom-color: var(--belts-accent) !important;
  background: transparent !important;
  font-weight: 600;
}

/* =================== Offcanvas / Modal =================== */

/* Portal bottom sheet (.belts-sheet) is the only remaining offcanvas — app
   forms are now real modals (see .modal-content below). */
.offcanvas {
  background: var(--belts-surface);
  border-left: 1px solid var(--belts-border);
  box-shadow: var(--belts-shadow-pop);
  backdrop-filter: none;
}
.offcanvas-header {
  border-bottom: 1px solid var(--belts-border) !important;
  padding: 0.85rem 1.25rem;
}
.offcanvas-title { font-size: 0.95rem; font-weight: 600; }

.modal-content {
  background: var(--belts-surface);
  border: 1px solid var(--belts-border);
  border-radius: var(--belts-radius);
  box-shadow: var(--belts-shadow-pop);
  backdrop-filter: none;
}
.modal-header { border-bottom: 1px solid var(--belts-border) !important; padding: 0.85rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--belts-border) !important; padding: 0.75rem 1.25rem; }
.modal-title { font-size: 0.95rem; font-weight: 600; }

/* Tabs inside a form modal (e.g. the asset form) — clean underline tabs in the
   belts accent so long forms split into short, scroll-free sections. */
.belts-modal-tabs {
  border-bottom: 1px solid var(--belts-border);
  gap: 0.15rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Keep the tabs visible when a tab's content scrolls inside the modal. */
  position: sticky;
  top: 0;
  background: var(--belts-surface);
  z-index: 3;
}
.belts-modal-tabs .nav-link {
  color: var(--belts-ink-muted);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.belts-modal-tabs .nav-link:hover { color: var(--belts-ink); border-bottom-color: var(--belts-border-2); }
.belts-modal-tabs .nav-link.active {
  color: var(--belts-accent);
  background: transparent;
  border-bottom-color: var(--belts-accent);
}

/* intl-tel-input (vendor phone) — full-width widget with an inline country
   dropdown (the vendor modals drop modal-dialog-scrollable so it isn't clipped). */
.iti { display: block; width: 100%; }
.iti__selected-dial-code { font-weight: 500; }
.iti__country-list { max-height: 240px; z-index: 5; }
.modal-body { padding: 1rem 1.25rem; }

/* =================== Stat tiles — small, informational =================== */

.belts-stat {
  background: var(--belts-surface);
  border: 1px solid var(--belts-border);
  border-radius: var(--belts-radius);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.belts-stat__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--belts-ink-muted);
}
.belts-stat__value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--belts-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.belts-stat__hint {
  font-size: 0.75rem;
  color: var(--belts-ink-soft);
}

/* =================== Dashboard — KPI tiles =================== */

.belts-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.belts-kpi__main { min-width: 0; }
.belts-kpi__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--belts-ink-muted);
}
.belts-kpi__value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--belts-ink);
  margin-top: 0.1rem;
  font-feature-settings: "tnum";
}
.belts-kpi__hint {
  font-size: 0.75rem;
  color: var(--belts-ink-soft);
  margin-top: 0.15rem;
}
.belts-kpi__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.belts-kpi__icon--emerald { background: var(--belts-accent-tint); color: var(--belts-accent); }
.belts-kpi__icon--amber   { background: var(--belts-warning-tint); color: var(--belts-warning); }
.belts-kpi__icon--danger  { background: var(--belts-danger-tint); color: var(--belts-danger); }
.belts-kpi__icon--slate   { background: var(--belts-surface-2); color: var(--belts-ink-2); border: 1px solid var(--belts-border); }

/* Delta pills — small movement indicators vs. last month */
.belts-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.02rem 0.3rem;
  border-radius: var(--belts-radius-sm);
  vertical-align: middle;
}
.belts-delta i { font-size: 0.85rem; }
.belts-delta--up   { color: var(--belts-success); background: var(--belts-success-tint); }
.belts-delta--down { color: var(--belts-danger); background: var(--belts-danger-tint); }

/* Small inline chips (chart card footers) */
.belts-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--belts-ink-muted);
}

/* Metric rows inside detail cards */
.belts-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--belts-border);
  gap: 0.75rem;
}
.belts-metric-row:last-child { border-bottom: none; }
.belts-metric-row__label { font-size: 0.8125rem; color: var(--belts-ink-muted); }
.belts-metric-row__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--belts-ink);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Priority bars (corrective open-by-priority) */
.belts-pbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
}
.belts-pbar:first-child { margin-top: 0; }
.belts-pbar__code {
  width: 1.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--belts-ink-muted);
  flex-shrink: 0;
}
.belts-pbar__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--belts-surface-2);
  overflow: hidden;
}
.belts-pbar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--belts-accent);
}
.belts-pbar__n {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--belts-ink);
  min-width: 1.25rem;
  text-align: right;
  font-feature-settings: "tnum";
}

/* htmx month-swap: gently fade the body while the request is in flight */
#dashboard-root.htmx-request { opacity: 0.55; transition: opacity 120ms ease; pointer-events: none; }

/* flatpickr in static mode (inside offcanvas/modal) wraps the field in
   .flatpickr-wrapper, which is inline-block by default — keep it full width so
   the date input still matches the other form controls. */
.flatpickr-wrapper { display: block; width: 100%; }
.flatpickr-wrapper .form-control { width: 100%; }

/* =================== Dashboard — calendar =================== */

.belts-calendar { table-layout: fixed; }
.belts-calendar thead th {
  background: transparent !important;
  border: none !important;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--belts-ink-soft);
  padding: 0 0.35rem 0.4rem;
}
.belts-calendar td {
  border: 1px solid var(--belts-border) !important;
  vertical-align: top;
  height: 96px;
  padding: 0.35rem;
  transition: background 100ms ease;
}
.belts-calendar td:hover { background: var(--belts-surface-2) !important; }
.belts-calendar td.is-out { background: var(--belts-surface-2) !important; }
.belts-calendar td.is-out .belts-calendar__day { color: var(--belts-ink-soft); }
.belts-calendar__day {
  font-size: 0.72rem;
  color: var(--belts-ink-muted);
  font-feature-settings: "tnum";
}
.belts-calendar__day.is-today {
  background: var(--belts-accent);
  color: #fff;
  border-radius: 999px;
  width: 1.3rem;
  height: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.belts-calendar__event {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--belts-ink-2) !important;
  padding: 0.1rem 0.25rem;
  border-radius: var(--belts-radius-sm);
  min-width: 0;
}
.belts-calendar__event:hover { background: var(--belts-surface); text-decoration: none; }
.belts-calendar__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-block;
}
.dot-red    { background: var(--belts-danger); }
.dot-amber  { background: var(--belts-warning); }
.dot-green  { background: var(--belts-accent); }
.dot-purple { background: #8b5cf6; }
.dot-blue   { background: #3b82f6; }

@media (max-width: 767.98px) {
  .belts-kpi__value { font-size: 1.4rem; }
  .belts-kpi__icon { width: 36px; height: 36px; font-size: 1.15rem; }
  .belts-calendar td { height: 64px; padding: 0.2rem; }
  .belts-calendar__event span.text-truncate { display: none; }
}

/* =================== Assets list — summary, bulk bar, htmx =================== */

/* htmx filter/pagination/search swap: instead of just dimming the stale table,
   draw an animated skeleton over it so the wait reads as "loading" and the page
   feels responsive. Every list results container gets .htmx-request via its
   hx-indicator, so one rule covers them all. The overlay only fades in after a
   short delay, so genuinely fast swaps stay flicker-free (feel instant). */
#asset-results.htmx-request,
#transfer-results.htmx-request,
#pm-results.htmx-request,
#cm-results.htmx-request,
#ticket-results.htmx-request,
#vendor-results.htmx-request,
#audit-results.htmx-request,
#user-results.htmx-request,
#notif-log.htmx-request {
  position: relative;
  pointer-events: none;
  min-height: 240px;
}

#asset-results.htmx-request::after,
#transfer-results.htmx-request::after,
#pm-results.htmx-request::after,
#cm-results.htmx-request::after,
#ticket-results.htmx-request::after,
#vendor-results.htmx-request::after,
#audit-results.htmx-request::after,
#user-results.htmx-request::after,
#notif-log.htmx-request::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--belts-radius);
  /* base surface hides the stale content; row bands + a moving shine on top */
  background-color: var(--belts-surface);
  background-image:
    linear-gradient(90deg, transparent 0%, var(--belts-skel-shine) 50%, transparent 100%),
    repeating-linear-gradient(
      to bottom,
      var(--belts-surface) 0, var(--belts-surface) 14px,
      var(--belts-skel-base) 14px, var(--belts-skel-base) 30px,
      var(--belts-surface) 30px, var(--belts-surface) 44px
    );
  background-repeat: no-repeat, repeat;
  background-size: 200% 100%, 100% 44px;
  background-position: -150% 0, 0 0;
  /* one-shot fade-in (delayed) + independent looping shine */
  animation:
    belts-skeleton-in 160ms ease-out 130ms both,
    belts-skeleton-shine 1.15s ease-in-out infinite;
  will-change: background-position;
}

@keyframes belts-skeleton-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes belts-skeleton-shine {
  from { background-position: -150% 0, 0 0; }
  to   { background-position:  150% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #asset-results.htmx-request::after,
  #transfer-results.htmx-request::after,
  #pm-results.htmx-request::after,
  #cm-results.htmx-request::after,
  #ticket-results.htmx-request::after,
  #vendor-results.htmx-request::after,
  #audit-results.htmx-request::after,
  #user-results.htmx-request::after,
  #notif-log.htmx-request::after {
    animation: belts-skeleton-in 160ms ease-out 130ms both;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--belts-surface) 0, var(--belts-surface) 14px,
      var(--belts-skel-base) 14px, var(--belts-skel-base) 30px,
      var(--belts-surface) 30px, var(--belts-surface) 44px
    );
  }
}

.belts-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.25rem 0.15rem 0.85rem;
}
.belts-summary__count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--belts-ink);
}
.belts-summary__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.belts-summary .belts-chip { gap: 0.35rem; }
.belts-summary__sep {
  width: 1px;
  height: 0.9rem;
  background: var(--belts-border-2);
}

/* Bulk selection toolbar — slides in when rows are selected */
.belts-bulkbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.75rem;
  background: var(--belts-accent-tint);
  border: 1px solid var(--belts-accent);
  border-radius: var(--belts-radius);
}
.belts-bulkbar.is-visible { display: flex; }
.belts-bulkbar__count { font-size: 0.8125rem; color: var(--belts-accent-hover); }
.belts-bulkbar__count strong { font-weight: 600; }
.belts-bulkbar__actions { display: flex; gap: 0.5rem; }

/* Checkbox column */
.belts-col-check { width: 2.5rem; text-align: center; }
.belts-col-check .form-check-input { margin: 0; cursor: pointer; }

/* =================== Tree pages — controls bar (categories / locations) =================== */

.belts-tree-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.belts-tree-controls__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Search box with a leading icon */
.belts-search { position: relative; }
.belts-search i {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--belts-ink-soft);
  font-size: 1rem;
  pointer-events: none;
}
.belts-search .form-control {
  padding-left: 2rem;
  min-width: 240px;
}

@media (max-width: 575.98px) {
  .belts-tree-controls__right { width: 100%; }
  .belts-search { flex: 1 1 auto; }
  .belts-search .form-control { min-width: 0; width: 100%; }
}

/* =================== Asset detail — stats strip + tabs =================== */

/* Equal-height stat tiles across the at-a-glance strip */
.belts-asset-stats .belts-stat { height: 100%; }
.belts-stat__value--sm { font-size: 1.05rem; line-height: 1.25; }

/* Detail tabs: a touch more breathing room than the base nav-tabs */
.belts-detail-tabs { flex-wrap: wrap; }
.belts-detail-tabs .nav-link { display: inline-flex; align-items: center; }
.belts-detail-tabs .nav-link .badge { font-size: 0.65rem; }
.tab-content { background: transparent; }

/* =================== Asset detail header =================== */

.belts-asset-head {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--belts-surface);
  border: 1px solid var(--belts-border);
  border-radius: var(--belts-radius);
  margin-bottom: 1rem;
}
.belts-asset-head__photo {
  width: 96px;
  height: 96px;
  border-radius: var(--belts-radius-sm);
  background: var(--belts-surface-2);
  border: 1px solid var(--belts-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--belts-ink-soft);
  font-size: 0.7rem;
  text-align: center;
  overflow: hidden;
}
.belts-asset-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.belts-asset-head__body { min-width: 0; }
.belts-asset-head__category {
  font-size: 0.75rem;
  color: var(--belts-ink-muted);
  margin-bottom: 0.25rem;
}
.belts-asset-head__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--belts-ink);
  margin: 0 0 0.4rem;
}
.belts-asset-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--belts-ink-muted);
}
.belts-asset-head__meta strong { color: var(--belts-ink-2); font-weight: 500; }
.belts-asset-head__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

@media (max-width: 768px) {
  .belts-asset-head { grid-template-columns: 1fr; }
  .belts-asset-head__photo { width: 100%; height: 160px; }
}

/* =================== QR card =================== */

.belts-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.belts-qr__frame {
  padding: 0.6rem;
  border-radius: var(--belts-radius-sm);
  background: #fff;
  border: 1px solid var(--belts-border-2);
}
.belts-qr__frame img { display: block; width: 160px; height: 160px; }
.belts-qr__caption { font-size: 0.75rem; color: var(--belts-ink-muted); }

/* =================== Expandable rows (categories) =================== */

.belts-row-toggle {
  border: none;
  background: transparent;
  color: var(--belts-ink-muted);
  padding: 0.2rem 0.4rem;
  border-radius: var(--belts-radius-sm);
  line-height: 1;
}
.belts-row-toggle:hover { background: var(--belts-surface-2); color: var(--belts-ink); }
.belts-row-toggle .bx { transition: transform 150ms ease; display: inline-block; }
.belts-row-toggle[aria-expanded="true"] .bx { transform: rotate(90deg); }

.belts-children-row > td { padding: 0 !important; border: none !important; background: transparent !important; }
.belts-children-row > td > .collapse,
.belts-children-row > td > .collapsing { background: var(--belts-surface-2); }

.belts-children {
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--belts-border);
}
/* Nested expand (department → units): darken slightly to keep depth legible */
.belts-children .belts-children-row > td > .collapse,
.belts-children .belts-children-row > td > .collapsing { background: var(--belts-bg); }
.belts-children--nested {
  padding: 0.7rem 0.9rem 0.85rem;
  border-top: 1px solid var(--belts-border);
}
.belts-children__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.belts-children__head h6 {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--belts-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.belts-children__table { font-size: 0.825rem; }
.belts-children__table thead th {
  font-size: 0.7rem;
  background: transparent !important;
  border-bottom: 1px solid var(--belts-border) !important;
  padding: 0.4rem 0.7rem;
}
.belts-children__table tbody td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--belts-border) !important;
  background: transparent !important;
}
.belts-children__table tbody tr:last-child td { border-bottom: none !important; }
.belts-children__empty {
  font-size: 0.8125rem;
  color: var(--belts-ink-soft);
  padding: 0.4rem 0;
}

/* =================== Stub section card =================== */

.belts-stub {
  background: var(--belts-surface-2) !important;
  border-style: dashed !important;
}
.belts-stub .card-header { border-bottom-style: dashed !important; }

/* =================== Misc helpers =================== */

.belts-id-pill {
  font-family: var(--belts-font-mono);
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--belts-radius-sm);
  background: var(--belts-surface-2);
  border: 1px solid var(--belts-border);
  color: var(--belts-ink-muted);
}
.belts-tag-pill {
  font-family: var(--belts-font-mono);
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--belts-radius-sm);
  background: var(--belts-accent-tint);
  border: 1px solid var(--belts-accent);
  color: var(--belts-accent);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.belts-tag-line {
  font-family: var(--belts-font-mono);
  font-size: 0.72rem;
  color: var(--belts-accent);
  margin-top: 0.05rem;
  margin-bottom: 0.1rem;
}

/* =================== Asset offcanvas form =================== */

.belts-form-section {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--belts-ink-muted);
  letter-spacing: 0.04em;
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--belts-border);
}
.belts-form-section:first-child { margin-top: 0; }

.belts-form-hint {
  font-size: 0.78rem;
  color: var(--belts-ink-muted);
  margin: 0 0 1rem;
}
.belts-required {
  color: var(--belts-danger);
  margin-left: 0.2rem;
  font-weight: 600;
}

.belts-tag-preview {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  margin: 0.5rem 0 1rem;
  background: var(--belts-accent-tint);
  border: 1px solid var(--belts-accent);
  border-radius: var(--belts-radius-sm);
}
.belts-tag-preview__label {
  font-size: 0.7rem;
  color: var(--belts-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  flex-shrink: 0;
}
.belts-tag-preview__value {
  font-family: var(--belts-font-mono);
  font-size: 0.8rem;
  color: var(--belts-accent);
  font-weight: 500;
  letter-spacing: 0.01em;
  word-break: break-all;
}

.belts-form-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  margin-top: 0.5rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--belts-border);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--belts-ink-muted);
  cursor: pointer;
}
.belts-form-toggle:hover { color: var(--belts-ink); }
.belts-form-toggle .bx { transition: transform 150ms ease; font-size: 1.1rem; }
.belts-form-toggle[aria-expanded="true"] .bx { transform: rotate(180deg); }
.belts-form-toggle[aria-expanded="true"] { color: var(--belts-ink); }
.belts-form-toggle__body { padding-top: 0.6rem; }
.belts-form-toggle__hint {
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--belts-ink-soft);
  font-weight: 400;
  margin-left: 0.4rem;
}

dl.belts-dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 0.4rem 1rem; font-size: 0.875rem; }
dl.belts-dl dt { color: var(--belts-ink-muted); font-weight: 400; }
dl.belts-dl dd { color: var(--belts-ink); margin: 0; }

a { color: var(--belts-accent); text-decoration: none; }
a:hover { color: var(--belts-accent-hover); text-decoration: underline; }

/* Soft scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(20, 30, 45, 0.18);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 30, 45, 0.28); background-clip: padding-box; }

/* =================== History timeline (asset audit trail) =================== */

.belts-timeline { list-style: none; margin: 0; padding: 0; }
.belts-timeline__item {
  position: relative;
  padding: 0 0 0.85rem 1rem;
  border-left: 2px solid var(--belts-border);
}
.belts-timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.belts-timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.3rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--belts-ink-soft);
  border: 2px solid var(--belts-surface);
}
.belts-timeline__item--moved::before     { background: var(--belts-accent); }
.belts-timeline__item--condition::before { background: var(--belts-warning); }
.belts-timeline__item--status::before    { background: var(--belts-ink-2); }
.belts-timeline__item--created::before   { background: var(--belts-accent); }
.belts-timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.belts-timeline__event { font-size: 0.8rem; font-weight: 500; color: var(--belts-ink); }
.belts-timeline__time { font-size: 0.7rem; color: var(--belts-ink-soft); white-space: nowrap; }
.belts-timeline__detail {
  font-size: 0.78rem;
  color: var(--belts-ink-muted);
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.belts-timeline__detail code { font-family: var(--belts-font-mono); font-size: 0.72rem; }
.belts-timeline__to { color: var(--belts-ink-2); font-weight: 500; }

/* =================== Mobile pass =================== */

@media (max-width: 767.98px) {
  /* Tighter chrome on phones */
  .container-xxl { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Page head: stack title and actions, action buttons go full-width */
  .belts-page-head { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 1rem 0 0.75rem; }
  .belts-page-head__actions { width: 100%; }
  .belts-page-head__actions .btn { flex: 1 1 0; }

  /* Definition lists stack instead of forcing a 140px first column */
  dl.belts-dl { grid-template-columns: 1fr; gap: 0; }
  dl.belts-dl dt {
    padding-top: 0.55rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  dl.belts-dl dd {
    padding: 0 0 0.5rem;
    border-bottom: 1px solid var(--belts-border);
  }
  dl.belts-dl dd:last-child { border-bottom: none; padding-bottom: 0; }

  /* Asset detail hero: tighter padding, photo full-width handled at 768px already */
  .belts-asset-head { padding: 0.85rem 1rem; gap: 0.75rem; }

  /* Children sections (locations/categories tree) — denser on phone */
  .belts-children { padding: 0.6rem 0.75rem 0.85rem; }
  .belts-children__head { flex-wrap: wrap; gap: 0.5rem; }
  .belts-children__head .btn { flex: 1 1 auto; }

  /* Tag preview: stack label above value when narrow */
  .belts-tag-preview { flex-direction: column; align-items: stretch; gap: 0.2rem; }

  /* Form section toggles: bigger tap target */
  .belts-form-toggle { padding: 0.75rem 0; }

  /* Buttons: minimum 38px tall (Apple HIG / Material both recommend ~44px;
     38 is the smallest that still feels right for our compact aesthetic). */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }

  /* Asset list table: hide secondary columns to avoid horizontal scroll
     on phone (they're still visible on the detail page). */
  .belts-list-table th.belts-col-status,
  .belts-list-table td.belts-col-status,
  .belts-list-table th.belts-col-category,
  .belts-list-table td.belts-col-category { display: none; }

  /* Modal: slightly tighter padding so content has more room */
  .modal-body { padding: 0.85rem 1rem; }
  .modal-header, .modal-footer { padding: 0.75rem 1rem; }

  /* Stat tiles: condense large numbers slightly */
  .belts-stat__value { font-size: 1.25rem; }
  .belts-stat { padding: 0.7rem 0.85rem; }
}