/* =====================================================================
   VRA Asset Management — design system ("Night Rail")
   A dark, collapsible navigation rail beside a bright workspace.
   Archivo type (wide cut for headings and big numbers), ink + amber
   taken from the VRA lightning mark, steel blue for links and focus,
   flat white panels with hairline borders.

   Bootstrap 5 (CDN) is the base. Everything here sits on top of it.
   Change the whole look from the tokens in :root — e.g. --tint.
   ===================================================================== */

:root {
  /* Typography — San Francisco on Apple devices, Inter elsewhere */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display-stretch: 112%;       /* headings use Archivo's wider cut */
  --number-stretch: 125%;        /* big numbers use the widest cut */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces */
  --bg: #F2F4F6;                 /* bright workspace */
  --surface: #FFFFFF;            /* panels, tables, dialogs */
  --surface-2: #F6F7F9;          /* inputs, subtle fills, hover */
  --surface-3: #EAEDF0;          /* pressed / segmented track */

  /* Text */
  --label: #101B26;
  --label-2: #5C6975;
  --label-3: #7C8894;
  --label-4: #A6B0BA;

  /* Lines */
  --separator: #E1E5E9;
  --separator-strong: #CDD3D9;

  /* Ink — the dark navigation rail, main buttons, dark panels */
  --ink: #0D1620;
  --ink-2: #16222F;
  --ink-3: #1E2D3D;
  --ink-line: #1C2D3D;
  --ink-text: #E4ECF3;
  --ink-muted: #8FA3B5;

  /* Amber — from the lightning bolt; highlights and progress */
  --amber: #F2B33D;
  --amber-hover: #F5C15F;
  --amber-text: #6B4600;
  --amber-soft: #FDF1D6;

  /* Steel blue — links, focus, selection */
  --tint: #1D5C8C;
  --tint-hover: #174D76;
  --tint-press: #123E60;
  --tint-soft: rgba(29, 92, 140, .10);
  --tint-soft-2: rgba(29, 92, 140, .16);

  /* Status colours (fill / text-on-light / soft background) */
  --green: #2E9E5B;   --green-text: #145A34;   --green-soft: #E7F3EC;
  --orange: #F2B33D;  --orange-text: #6B4600;  --orange-soft: #FDF1D6;
  --red: #D9483B;     --red-text: #9A2216;     --red-soft: #FCE6E3;
  --yellow: #F2B33D;  --yellow-text: #6B4600;  --yellow-soft: #FDF1D6;
  --indigo: #4F5BD5;  --indigo-text: #343E9E;  --indigo-soft: #ECEEFB;
  --teal: #2A8C9E;    --teal-text: #12606F;    --teal-soft: #E3F2F4;
  --gray: #7C8894;    --gray-text: #4B5763;    --gray-soft: #EEF1F3;

  /* Shape & depth */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 980px;
  --shadow-1: 0 1px 2px rgba(16, 27, 38, .06);
  --shadow-2: 0 1px 2px rgba(16, 27, 38, .04);
  --shadow-3: 0 16px 40px rgba(16, 27, 38, .16), 0 2px 8px rgba(16, 27, 38, .08);
  --glass: saturate(180%) blur(20px);

  /* Motion */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  /* Layout */
  --sidebar-w: 264px;
  --rail-w: 76px;
  --topbar-h: 64px;

  /* ---- Old names, kept so every existing page picks up the new look ---- */
  --vra-navy: var(--label);
  --vra-navy-dark: var(--label);
  --vra-green: var(--tint);
  --vra-green-dark: var(--tint-press);
  --vra-primary: var(--tint);
  --vra-primary-light: var(--tint-soft);
  --vra-accent: var(--tint);
  --vra-gold: var(--amber);
  --vra-bg: var(--bg);
  --vra-card: var(--surface);
  --vra-text: var(--label);
  --vra-text-muted: var(--label-2);
  --vra-border: var(--separator);
  --good: var(--green-text);   --good-bg: var(--green-soft);
  --fair: var(--orange-text);  --fair-bg: var(--orange-soft);
  --damaged: var(--red-text);  --damaged-bg: var(--red-soft);
  --rpt-navy: var(--label);
  --rpt-blue: var(--tint);
  --rpt-red: var(--red-text);
  --rpt-border: var(--separator);
  --rpt-bg: var(--bg);

  /* ---- Bootstrap, retuned ---- */
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 15px;
  --bs-body-color: var(--label);
  --bs-body-bg: var(--bg);
  --bs-secondary-color: var(--label-2);
  --bs-tertiary-color: var(--label-3);
  --bs-border-color: var(--separator);
  --bs-border-color-translucent: var(--separator);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-xl: var(--r-xl);
  --bs-primary: var(--tint);
  --bs-primary-rgb: 29, 92, 140;
  --bs-success-rgb: 46, 158, 91;
  --bs-danger-rgb: 217, 72, 59;
  --bs-warning-rgb: 242, 179, 61;
  --bs-info-rgb: 42, 140, 158;
  --bs-link-color: var(--tint);
  --bs-link-color-rgb: 29, 92, 140;
  --bs-link-hover-color: var(--tint-press);
  --bs-link-hover-color-rgb: 18, 62, 96;
  --bs-focus-ring-color: rgba(29, 92, 140, .3);
  --bs-primary-text-emphasis: var(--tint-press);
  --bs-primary-bg-subtle: var(--tint-soft);
  --bs-primary-border-subtle: var(--tint-soft-2);
  --bs-success-text-emphasis: var(--green-text);
  --bs-success-bg-subtle: var(--green-soft);
  --bs-danger-text-emphasis: var(--red-text);
  --bs-danger-bg-subtle: var(--red-soft);
  --bs-warning-text-emphasis: var(--orange-text);
  --bs-warning-bg-subtle: var(--orange-soft);
  --bs-info-text-emphasis: var(--teal-text);
  --bs-info-bg-subtle: var(--teal-soft);
  --bs-secondary-bg-subtle: var(--surface-2);
  --bs-light-rgb: 246, 247, 249;
}

/* ===================================================================== */
/* Base                                                                   */
/* ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--label);
  font-weight: 800;
  font-stretch: var(--display-stretch);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.15rem; font-weight: 650; }
h5, .h5 { font-size: 1.02rem; font-weight: 650; }
h6, .h6 { font-size: .9rem; font-weight: 650; }

a { color: var(--tint); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--tint-press); }

small, .small { font-size: .84em; }
code, kbd, pre, .font-monospace { font-family: var(--font-mono); }
.text-muted, .text-secondary, .text-vra-muted { color: var(--label-2) !important; }
.text-body-secondary { color: var(--label-2) !important; }
.text-primary, .text-vra-primary { color: var(--tint) !important; }
.text-success { color: var(--green-text) !important; }
.text-danger { color: var(--red-text) !important; }
.text-warning { color: var(--orange-text) !important; }
.text-info { color: var(--teal-text) !important; }
.text-dark { color: var(--label) !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-700 { font-weight: 700; }
.tabular { font-variant-numeric: tabular-nums; }
::selection { background: var(--tint-soft-2); }

:focus-visible { outline: 3px solid rgba(29, 92, 140, .35); outline-offset: 2px; border-radius: var(--r-xs); }

hr { border-color: var(--separator); opacity: 1; }

/* Thin, unobtrusive scrollbars (macOS-like) */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================================== */
/* App shell                                                              */
/* ===================================================================== */
.vra-accent-bar { display: none; }               /* old gradient bar — retired */

.vra-shell { display: flex; min-height: 100vh; }

/* ---- Navigation rail: dark, collapses to icons ---- */
.vra-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--ink-text);
  transition: width var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  overflow: hidden;
}

.vra-rail-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem .75rem 1.1rem 1rem;
  min-height: 72px;
}
.vra-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 1;
  min-width: 0;
  color: #fff !important;
}
.vra-sidebar-mark { flex: none; width: 30px; height: 27px; }
.vra-sidebar-brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: 1rem;
  line-height: 1.1;
  white-space: nowrap;
  color: #fff;
}
.vra-sidebar-brand .sub { font-size: .74rem; color: var(--ink-muted); white-space: nowrap; }
.rail-toggle {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid #22364A;
  background: #111D29;
  color: #B8C7D4;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rail-toggle:hover { background: var(--ink-3); color: #fff; }

.vra-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .25rem .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.vra-nav .nav-section-label {
  font-size: .78rem;
  font-weight: 600;
  color: #6F8597;
  padding: 1.1rem .9rem .4rem;
  white-space: nowrap;
}
.vra-nav a.nav-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 46px;
  padding: 0 .9rem;
  border-radius: 12px;
  color: var(--ink-muted);
  font-size: .94rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.vra-nav a.nav-link i {
  width: 22px;
  text-align: center;
  font-size: 1.15rem;
  color: inherit;
  flex-shrink: 0;
}
.vra-nav a.nav-link:hover { background: var(--ink-2); color: var(--ink-text); }
.vra-nav a.nav-link.active {
  background: var(--ink-3);
  color: var(--amber);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--amber);
}
.vra-nav a.nav-link.active i { color: var(--amber); }

.vra-nav .nav-collapse-toggle { justify-content: space-between; }
.vra-nav .nav-collapse-toggle > span { display: flex; align-items: center; gap: .8rem; }
.vra-nav .nav-collapse-toggle .chevron { font-size: .72rem; color: #6F8597; width: auto; transition: transform var(--dur-base) var(--ease); }
.vra-nav .nav-collapse-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.vra-nav .nav-collapse-toggle.has-active { color: var(--ink-text); }
.vra-nav .nav-submenu { display: none; flex-direction: column; gap: 2px; padding-left: .9rem; margin-left: 1.1rem; border-left: 1px solid var(--ink-line); }
.vra-nav .nav-submenu.show { display: flex; }
.vra-nav .nav-submenu a.nav-link { font-size: .88rem; min-height: 38px; padding: 0 .7rem; }
.vra-nav .nav-submenu a.nav-link.active { box-shadow: none; }

.vra-sidebar-foot {
  padding: .75rem .75rem 1rem;
  border-top: 1px solid var(--ink-line);
}
.vra-sidebar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .45rem;
  border-radius: 12px;
  color: var(--ink-text) !important;
}
.vra-sidebar-user:hover { background: var(--ink-2); }
.vra-sidebar-user .who { min-width: 0; flex: 1; }
.vra-sidebar-user .who .n { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-text); }
.vra-sidebar-user .who .r { font-size: .76rem; color: var(--ink-muted); text-transform: capitalize; }
.vra-sidebar-user .bi-chevron-expand { color: var(--ink-muted) !important; }
.vra-sidebar .dropdown-menu { min-width: 200px; }

/* Collapsed: icons only. The choice is remembered (see app.js). */
@media (min-width: 992px) {
  html.rail-collapsed { --sidebar-w: var(--rail-w); }
  html.rail-collapsed .vra-rail-head { padding: 1rem 0 1.1rem; justify-content: center; }
  html.rail-collapsed .vra-sidebar-brand,
  html.rail-collapsed .vra-nav .nav-label,
  html.rail-collapsed .vra-nav .chevron,
  html.rail-collapsed .vra-sidebar-user .who,
  html.rail-collapsed .vra-sidebar-user .bi-chevron-expand { display: none !important; }
  html.rail-collapsed .vra-nav { padding: .25rem .9rem 1rem; }
  html.rail-collapsed .vra-nav a.nav-link { justify-content: center; padding: 0; }
  html.rail-collapsed .vra-nav .nav-collapse-toggle > span { gap: 0; }
  html.rail-collapsed .vra-nav .nav-section-label { font-size: 0; padding: 0; height: 1px; background: var(--ink-line); margin: .9rem .4rem; }
  html.rail-collapsed .vra-nav .nav-submenu { padding-left: 0; margin-left: 0; border-left: 0; }
  html.rail-collapsed .vra-nav .nav-submenu a.nav-link { min-height: 40px; }
  html.rail-collapsed .vra-nav .nav-submenu a.nav-link i { font-size: 1rem; }
  html.rail-collapsed .vra-sidebar-user { justify-content: center; }
}
html.no-rail-anim .vra-sidebar, html.no-rail-anim .vra-main { transition: none !important; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 800; letter-spacing: .02em;
  color: var(--ink);
  background: var(--amber);
  flex-shrink: 0;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.vra-avatar-lg { width: 72px; height: 72px; border-radius: 50%; }

.vra-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 22, 32, .45);
  z-index: 1035;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.vra-backdrop.show { opacity: 1; pointer-events: auto; }

/* ---- Main column ---- */
.vra-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--dur-base) var(--ease-out);
}

/* ---- Toolbar: sticky, frosted ---- */
.vra-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 2rem;
  background: rgba(242, 244, 246, .86);
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.vra-topbar.scrolled { border-bottom-color: var(--separator); background: rgba(246, 247, 249, .9); }

/* Search in the top bar */
.topbar-search { position: relative; width: 300px; max-width: 34vw; }
.topbar-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--label-3); pointer-events: none; }
.topbar-search input {
  width: 100%; height: 42px;
  border: 1px solid var(--separator); background: var(--surface);
  border-radius: 12px; padding: 0 14px 0 40px; font: inherit; font-size: .92rem; color: var(--label);
}
.topbar-search input:focus { outline: 0; border-color: var(--tint); box-shadow: 0 0 0 4px rgba(29, 92, 140, .16); }
.vra-topbar .hamburger {
  display: none;
  border: 0; background: transparent;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--label);
}
.vra-topbar .hamburger:hover { background: rgba(0, 0, 0, .05); }
.page-title-row { display: flex; align-items: center; gap: .55rem; }
.vra-topbar .page-title,
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  font-stretch: var(--number-stretch);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--label);
}
.page-subtitle { font-size: .88rem; color: var(--label-2); margin-top: 1px; }
.back-arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: var(--surface) !important;
  color: var(--tint) !important;
  border: 0 !important;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--separator);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease);
}
.back-arrow:hover { transform: translateX(-2px); }

.vra-content {
  flex: 1;
  padding: 1.25rem 2rem 2rem;
  width: 100%;
  max-width: 1480px;
}

/* ---- Footer ---- */
.vra-footer { margin-top: 2.5rem; padding: 1.25rem 0 .25rem; border-top: 1px solid var(--separator); }
.vra-footer__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; color: var(--label-3); font-size: .78rem; }
.vra-footer__divider { opacity: .6; }

/* ===================================================================== */
/* Page header helpers                                                    */
/* ===================================================================== */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.page-actions .meta { color: var(--label-2); font-size: .9rem; }
.section-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  font-stretch: var(--display-stretch);
  letter-spacing: -0.01em;
  margin: 0;
}
.section-sub { color: var(--label-2); font-size: .85rem; }
.section-icon {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tint-soft); color: var(--tint);
}

/* ===================================================================== */
/* Cards                                                                  */
/* ===================================================================== */
.card,
.vra-card,
.show-card,
.vra-form-card,
.filter-card {
  background: var(--surface);
  border: 1px solid var(--separator) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: none !important;
  color: var(--label);
}
.card { --bs-card-border-width: 1px; --bs-card-border-color: var(--separator); --bs-card-inner-border-radius: var(--r-xl); --bs-card-cap-bg: transparent; }
.card-header, .card-footer {
  background: transparent !important;
  border-color: var(--separator) !important;
  padding: 1rem 1.25rem;
}
.card-header { border-bottom: 1px solid var(--separator) !important; }
.card-body { padding: 1.25rem; }
.card-title { font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-stretch); letter-spacing: -0.01em; font-size: 1.1rem; }
.vra-card.hoverable, .hover-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.vra-card.hoverable:hover, .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-3) !important; }
.vra-card-accent { border-top: 0 !important; }
.shadow-sm { box-shadow: none !important; }
.border-0.shadow-sm { box-shadow: none !important; }

/* Inset grouped list — the classic iOS settings look */
.list-group { --bs-list-group-border-color: var(--separator); --bs-list-group-border-radius: var(--r-lg); }
.list-group-item { border-color: var(--separator); padding: .8rem 1rem; }
.list-group-item-action:hover { background: var(--surface-2); }

/* ===================================================================== */
/* KPI / stat tiles                                                       */
/* ===================================================================== */
.stat-card,
.vra-stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--separator) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: none !important;
  padding: 1.1rem 1.2rem !important;
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a .stat-card:hover, a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3) !important; }
.stat-icon,
.vra-stat-card .chip {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--tint-soft);
  color: var(--tint);
}
.stat-icon-blue, .vra-stat-card .chip.navy { background: var(--tint-soft); color: var(--tint); }
.stat-icon-green, .vra-stat-card .chip.green { background: var(--green-soft); color: var(--green-text); }
.stat-icon-orange, .stat-icon-gold, .vra-stat-card .chip.gold { background: var(--orange-soft); color: var(--orange-text); }
.stat-icon-red, .vra-stat-card .chip.red { background: var(--red-soft); color: var(--red-text); }
.stat-icon-indigo, .stat-icon-purple { background: var(--indigo-soft); color: var(--indigo-text); }
.stat-icon-teal { background: var(--teal-soft); color: var(--teal-text); }
.stat-icon-gray { background: var(--gray-soft); color: var(--gray-text); }
.stat-value,
.vra-stat-card .value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  font-stretch: var(--number-stretch);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.stat-label,
.vra-stat-card .label { font-size: .82rem; color: var(--label-2); font-weight: 500; }

/* ===================================================================== */
/* Buttons                                                                */
/* ===================================================================== */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--r-md);
  --bs-btn-padding-x: 1.05rem;
  --bs-btn-padding-y: .48rem;
  --bs-btn-font-size: .9rem;
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(29, 92, 140, .25);
  letter-spacing: 0;
  border-radius: var(--r-md) !important;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), transform 80ms var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .82rem; }
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1rem; }
.btn.rounded-3, .btn.rounded-2, .btn.rounded, .btn.rounded-pill { border-radius: var(--r-md) !important; }
.btn i { font-size: 1.02em; line-height: 1; vertical-align: -.08em; }
.btn > i:first-child:not(:last-child) { margin-right: .3rem; }
.btn > i:last-child:not(:first-child) { margin-left: .25rem; }

/* Filled — the one main action on a page */
.btn-primary, .btn-vra-primary, .btn-success, .btn-vra-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ink-3);
  --bs-btn-hover-border-color: var(--ink-3);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-bg: var(--ink);
  --bs-btn-disabled-border-color: var(--ink);
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-vra-primary:hover, .btn-success:hover, .btn-vra-navy:hover { background: var(--ink-3) !important; }

/* Amber — the one action you most want people to take (e.g. create tags) */
.btn-amber {
  background: var(--amber) !important; border-color: var(--amber) !important; color: var(--ink) !important; font-weight: 700;
}
.btn-amber:hover { background: var(--amber-hover) !important; color: var(--ink) !important; }

/* Tinted / gray — secondary actions */
.btn-secondary, .btn-light, .btn-vra-outline, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-success {
  --bs-btn-color: var(--tint);
  --bs-btn-bg: var(--tint-soft);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--tint-press);
  --bs-btn-hover-bg: var(--tint-soft-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--tint-press);
  --bs-btn-active-bg: var(--tint-soft-2);
  --bs-btn-active-border-color: transparent;
  background: var(--tint-soft) !important;
  border-color: transparent !important;
  color: var(--tint) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-vra-outline:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-success:hover { background: var(--tint-soft-2) !important; }

/* Plain gray */
.btn-gray, .btn-outline-light {
  background: var(--surface-2) !important;
  color: var(--label) !important;
  border-color: transparent !important;
}
.btn-gray:hover, .btn-outline-light:hover { background: var(--surface-3) !important; }

/* Destructive */
.btn-danger {
  --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red);
  --bs-btn-hover-bg: #C23D31; --bs-btn-hover-border-color: #C23D31;
  --bs-btn-active-bg: #A83429; --bs-btn-active-border-color: #A83429;
  background: var(--red) !important; border-color: var(--red) !important; color: #fff !important;
}
.btn-outline-danger {
  background: var(--red-soft) !important;
  color: var(--red-text) !important;
  border-color: transparent !important;
}
.btn-outline-danger:hover { background: #F8D3CE !important; }
.btn-warning, .btn-outline-warning {
  background: var(--orange-soft) !important; color: var(--orange-text) !important; border-color: transparent !important;
}
.btn-link { --bs-btn-color: var(--tint); background: transparent !important; text-decoration: none; }

/* Icon-only round buttons (table row actions) */
.btn-icon {
  width: 34px !important; height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 10px !important;
}
.btn-icon.btn-outline-primary, .btn-icon.btn-outline-secondary, .btn-icon.btn-outline-dark,
.btn-icon.btn-vra-outline, .btn-icon.btn-light {
  background: transparent !important;
  color: var(--label-2) !important;
}
.btn-icon.btn-outline-primary:hover, .btn-icon.btn-outline-secondary:hover, .btn-icon.btn-outline-dark:hover,
.btn-icon.btn-vra-outline:hover, .btn-icon.btn-light:hover { background: var(--surface-2) !important; color: var(--tint) !important; }
.btn-icon.btn-outline-danger { background: transparent !important; color: var(--label-3) !important; }
.btn-icon.btn-outline-danger:hover { background: var(--red-soft) !important; color: var(--red-text) !important; }

.btn-group > .btn { border-radius: var(--r-md) !important; }
.btn-close { border-radius: 50%; }

/* ===================================================================== */
/* Forms                                                                  */
/* ===================================================================== */
.form-label { font-size: .84rem; font-weight: 600; color: var(--label); margin-bottom: .35rem; }
.form-text { color: var(--label-2); font-size: .8rem; }
.form-control, .form-select, .filter-select {
  min-height: 40px;
  border-radius: var(--r-md) !important;
  border: 1px solid rgba(0, 0, 0, .1) !important;
  background-color: var(--surface);
  color: var(--label);
  font-size: .92rem;
  padding: .5rem .8rem;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .02);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.form-select { padding-right: 2.2rem; background-position: right .75rem center; }
.form-control-sm, .form-select-sm { min-height: 32px; font-size: .84rem; padding: .3rem .65rem; border-radius: var(--r-sm) !important; }
.form-select-sm { padding-right: 2rem; }
.form-control-lg { min-height: 48px; font-size: 1rem; }
.form-control::placeholder { color: var(--label-3); }
.form-control:hover, .form-select:hover { border-color: rgba(0, 0, 0, .18) !important; }
.form-control:focus, .form-select:focus, .filter-select:focus {
  border-color: var(--tint) !important;
  box-shadow: 0 0 0 4px rgba(29, 92, 140, .16) !important;
  outline: 0;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--label-2); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--red) !important; }
.invalid-feedback { color: var(--red-text); font-size: .8rem; }
textarea.form-control { min-height: 90px; }

.input-group-text {
  background: var(--surface-2);
  border: 1px solid rgba(0, 0, 0, .1);
  color: var(--label-2);
  border-radius: var(--r-md);
}

/* Older pages build search boxes as an input-group with a magnifier — make them
   look like one iOS search field instead of an icon box glued to an input. */
.input-group:has(> .input-group-text .bi-search) > .input-group-text,
.input-group:has(> .input-group-text .bi-search) > .form-control {
  background: var(--surface-2) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.input-group:has(> .input-group-text .bi-search) > .input-group-text { border-radius: var(--r-md) 0 0 var(--r-md) !important; }
.input-group:has(> .input-group-text .bi-search) > .form-control { border-radius: 0 var(--r-md) var(--r-md) 0 !important; margin-left: 0 !important; padding-left: .4rem; }
.input-group:has(> .input-group-text .bi-search) > .input-group-text { padding-right: .2rem; color: var(--label-3) !important; }
.input-group:has(> .input-group-text .bi-search):focus-within > .input-group-text,
.input-group:has(> .input-group-text .bi-search):focus-within > .form-control { background: var(--surface) !important; }
.input-group:has(> .input-group-text .bi-search):focus-within { border-radius: var(--r-md); box-shadow: 0 0 0 4px rgba(29, 92, 140, .16); }

/* Search field — iOS style */
.search-field { position: relative; }
.search-field > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--label-3); pointer-events: none; }
.search-field .form-control { padding-left: 2.3rem; background: var(--surface-2); border-color: transparent !important; box-shadow: none; }
.search-field .form-control:focus { background: var(--surface); }

/* Switches & checks */
.form-check-input {
  width: 1.15em; height: 1.15em;
  border: 1.5px solid var(--separator-strong);
  border-radius: 6px;
}
.form-check-input:checked { background-color: var(--tint); border-color: var(--tint); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(29, 92, 140, .16); border-color: var(--tint); }
.form-switch .form-check-input { width: 2.4em; height: 1.4em; border-radius: 2em; }
.form-switch .form-check-input:checked { background-color: var(--green); border-color: var(--green); }

/* Filter bar */
.filter-card { padding: 1rem 1.1rem !important; }
.filter-card .form-label { font-size: .76rem; color: var(--label-2); font-weight: 600; }
.filter-divider { border-top: 1px solid var(--separator); margin: .9rem 0; }

/* Drop zone */
.vra-dropzone {
  border: 2px dashed var(--separator-strong);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--label-2);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
}
.vra-dropzone:hover, .vra-dropzone.dragover { border-color: var(--tint); background: var(--tint-soft); color: var(--tint); }

/* ===================================================================== */
/* Segmented control (use for tabs / quick filters)                       */
/* ===================================================================== */
.segmented, .nav-pills, .nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-md);
  border: 0 !important;
}
.segmented > a, .segmented > button, .segmented > label,
.nav-pills .nav-link, .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 9px !important;
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--label) !important;
  background: transparent !important;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.segmented > .active, .segmented > a.active, .segmented > button.active,
.nav-pills .nav-link.active, .nav-tabs .nav-link.active,
.segmented > input:checked + label {
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
  font-weight: 600;
}
.segmented > input { display: none; }

/* ===================================================================== */
/* Tables — inset grouped list style                                      */
/* ===================================================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--label);
  --bs-table-border-color: var(--separator);
  --bs-table-hover-bg: rgba(0, 0, 0, .025);
  --bs-table-striped-bg: rgba(0, 0, 0, .02);
  margin-bottom: 0;
  font-size: .9rem;
}
.table > :not(caption) > * > * { padding: .8rem 1rem; border-bottom-color: var(--separator); }
.table thead th,
.vra-table thead th {
  background: transparent !important;
  color: var(--label-2) !important;
  font-size: .76rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--separator) !important;
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
  white-space: nowrap;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table-light { --bs-table-bg: transparent; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
.table-hover > tbody > tr { transition: background var(--dur-fast) var(--ease); }
.table td { vertical-align: middle; }
.table-responsive { border-radius: inherit; }
.card > .table-responsive:last-child, .card > .table:last-child { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }

/* Row thumbnail (asset picture in lists) */
.thumb {
  width: 40px; height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--separator);
  flex-shrink: 0;
}
.thumb-lg { width: 56px; height: 56px; border-radius: 12px; }
.mono { font-family: var(--font); font-stretch: 88%; font-weight: 600; font-size: .92em; letter-spacing: .01em; }

/* ===================================================================== */
/* Badges — tinted capsules                                               */
/* ===================================================================== */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: .6em;
  --bs-badge-padding-y: .32em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: 0;
}
.badge.bg-primary, .badge.text-bg-primary { background: var(--tint-soft) !important; color: var(--tint) !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--green-soft) !important; color: var(--green-text) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--red-soft) !important; color: var(--red-text) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--orange-soft) !important; color: var(--orange-text) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--teal-soft) !important; color: var(--teal-text) !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--gray-soft) !important; color: var(--gray-text) !important; }
.badge.bg-dark { background: var(--label) !important; color: #fff !important; }

.badge-condition, .badge-status, .status-badge, .status-pill, .stat-pill, .badge-pill, .pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .28em .7em;
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--gray-soft);
  color: var(--gray-text);
  border: 0;
}
.badge-condition::before, .dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.badge-condition.good, .badge-status.active, .status-pill--success, .pill-green { background: var(--green-soft); color: var(--green-text); }
.badge-condition.fair, .badge-status.maintenance, .pill-orange { background: var(--orange-soft); color: var(--orange-text); }
.badge-condition.damaged, .badge-status.disposed, .status-pill--danger, .pill-red { background: var(--red-soft); color: var(--red-text); }
.badge-status.retired, .pill-gray { background: var(--gray-soft); color: var(--gray-text); }
.pill-blue { background: var(--tint-soft); color: var(--tint); }
.pill-indigo { background: var(--indigo-soft); color: var(--indigo-text); }

/* ===================================================================== */
/* Alerts, toasts, dialogs, menus                                         */
/* ===================================================================== */
.alert {
  border: 0;
  border-radius: var(--r-lg);
  padding: .85rem 1.1rem;
  font-size: .9rem;
  box-shadow: var(--shadow-1);
}
.alert-success { background: var(--green-soft); color: #145C28; }
.alert-danger { background: var(--red-soft); color: #9E0010; }
.alert-warning { background: var(--orange-soft); color: #7A4100; }
.alert-info, .alert-primary { background: var(--tint-soft); color: #00458A; }
.alert-secondary, .alert-light { background: var(--surface-2); color: var(--label); }
.alert .btn-close { opacity: .45; }

.dropdown-menu {
  --bs-dropdown-border-radius: var(--r-md);
  border: 0;
  border-radius: var(--r-md);
  padding: .35rem;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow-3), 0 0 0 .5px rgba(0, 0, 0, .08);
  font-size: .9rem;
  min-width: 200px;
}
.dropdown-item { border-radius: 7px; padding: .45rem .7rem; color: var(--label); display: flex; align-items: center; gap: .5rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--tint); color: #fff; }
.dropdown-item:hover i, .dropdown-item:focus i { color: #fff !important; }
.dropdown-item.text-danger:hover { background: var(--red); color: #fff !important; }
.dropdown-divider { border-color: var(--separator); margin: .3rem .2rem; }
.dropdown-header { font-size: .74rem; color: var(--label-3); font-weight: 600; }

.modal-content {
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--separator); padding: 1.1rem 1.4rem; }
.modal-header .modal-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.1rem; }
.modal-body { padding: 1.3rem 1.4rem; }
.modal-footer { border-top: 1px solid var(--separator); padding: .9rem 1.4rem; gap: .5rem; }
.modal-backdrop.show { opacity: .3; }
.modal.fade .modal-dialog { transform: scale(.96); transition: transform var(--dur-base) var(--ease-out); }
.modal.show .modal-dialog { transform: none; }

.tooltip { --bs-tooltip-bg: rgba(29, 29, 31, .92); --bs-tooltip-border-radius: 8px; font-size: .78rem; }
.popover { border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-3); }

/* SweetAlert2 → Apple alert sheet (dialogs) and banner (toasts) */
.swal2-popup:not(.swal2-toast) {
  border-radius: 22px !important;
  padding: 1.6rem 1.4rem 1.3rem !important;
  font-family: var(--font) !important;
  box-shadow: var(--shadow-3) !important;
  width: 26rem !important;
}
.swal2-popup:not(.swal2-toast) .swal2-title { font-family: var(--font-display) !important; font-size: 1.2rem !important; font-weight: 700 !important; color: var(--label) !important; letter-spacing: -0.02em; }
.swal2-popup:not(.swal2-toast) .swal2-html-container { font-size: .92rem !important; color: var(--label-2) !important; }
.swal2-actions { gap: .5rem; width: 100%; }
.swal2-styled { border-radius: var(--r-pill) !important; font-weight: 600 !important; font-size: .9rem !important; padding: .55rem 1.3rem !important; box-shadow: none !important; }
.swal2-styled.swal2-confirm { background: var(--tint) !important; }
.swal2-styled.swal2-confirm.swal2-deny { background: var(--red) !important; }
.swal2-styled.swal2-cancel { background: var(--surface-2) !important; color: var(--label) !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon { transform: scale(.75); margin: .2rem auto .4rem !important; }
.swal2-container.swal2-center.swal2-backdrop-show { background: rgba(0, 0, 0, .28) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.swal2-container.swal2-top-end { background: transparent !important; }
.swal2-popup.swal2-toast {
  font-family: var(--font) !important;
  border-radius: 16px !important;
  padding: .7rem 1rem !important;
  max-width: 380px;
  background: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow-3), 0 0 0 .5px rgba(0, 0, 0, .06) !important;
}
.swal2-popup.swal2-toast .swal2-title { font-size: .88rem !important; font-weight: 600 !important; color: var(--label) !important; margin: 0 .2rem !important; }
.swal2-popup.swal2-toast .swal2-icon { transform: scale(.7); margin: 0 !important; }

/* Toast host (top-right) */
.vra-toast-host { position: fixed; top: 1rem; right: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }

/* ===================================================================== */
/* Pagination — round pills                                               */
/* ===================================================================== */
.pagination { gap: 4px; margin: 0; flex-wrap: wrap; }
.pagination .page-link {
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .65rem;
  font-size: .86rem; font-weight: 500;
  color: var(--label) !important;
  background: transparent !important;
}
.pagination .page-link:hover { background: var(--surface-3) !important; }
.pagination .page-item.active .page-link { background: var(--tint) !important; color: #fff !important; }
.pagination .page-item.disabled .page-link { color: var(--label-4) !important; }
nav[aria-label] .small.text-muted, .pagination-meta { font-size: .84rem; color: var(--label-2); }

/* ===================================================================== */
/* Detail pages (asset show etc.)                                          */
/* ===================================================================== */
.show-card { padding: 1.3rem 1.4rem; }
.show-card__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; margin-bottom: .6rem; }
.show-row, .vra-info-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--separator);
  font-size: .9rem;
}
.show-row:last-child, .vra-info-row:last-child { border-bottom: 0; }
.show-row__label, .vra-info-row .k, .vra-meta-label { color: var(--label-2); }
.show-row__value, .vra-info-row .v, .vra-meta-value { color: var(--label); font-weight: 500; text-align: right; }
.vra-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.vra-meta-item { background: var(--surface-2); border-radius: var(--r-md); padding: .75rem .9rem; }
.vra-meta-item .vra-meta-label { font-size: .76rem; display: block; margin-bottom: .15rem; }
.vra-meta-item .vra-meta-value { text-align: left; }

/* Hero picture */
.media-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.media-caption { font-size: .78rem; color: var(--label-2); margin-top: .5rem; display: flex; align-items: center; gap: .35rem; }

/* ===================================================================== */
/* Stepper (import wizard)                                                */
/* ===================================================================== */
.vra-stepper { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.vra-stepper .step { display: flex; align-items: center; gap: .5rem; color: var(--label-3); font-size: .86rem; font-weight: 500; }
.vra-stepper .step .num {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--label-2);
  font-size: .78rem; font-weight: 700;
}
.vra-stepper .step.active { color: var(--label); font-weight: 600; }
.vra-stepper .step.active .num { background: var(--tint); color: #fff; }
.vra-stepper .step.done { color: var(--label-2); }
.vra-stepper .step.done .num { background: var(--green); color: #fff; }
.vra-stepper .divider { flex: 0 0 32px; height: 1px; background: var(--separator-strong); }

/* ===================================================================== */
/* Empty states                                                           */
/* ===================================================================== */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--label-2); }
.empty-state .icon {
  width: 64px; height: 64px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--label-3);
  font-size: 1.8rem; margin-bottom: .9rem;
}
.empty-state h5 { color: var(--label); margin-bottom: .25rem; }

/* ===================================================================== */
/* Skeletons                                                              */
/* ===================================================================== */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--surface-2); border-radius: var(--r-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-text { height: 12px; margin-bottom: 8px; }
.skeleton-stat { height: 90px; border-radius: var(--r-xl); }
.skeleton-chart { height: 260px; border-radius: var(--r-xl); }
.skeleton-row { height: 44px; margin-bottom: 6px; }

/* ===================================================================== */
/* Mobile asset cards                                                     */
/* ===================================================================== */
.vra-asset-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: .9rem 1rem;
  display: flex; gap: .8rem; align-items: center;
  margin-bottom: .6rem;
  transition: transform 80ms var(--ease);
}
.vra-asset-card:active { transform: scale(.98); }

/* ===================================================================== */
/* Sign-in & public pages                                                 */
/* ===================================================================== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #101B26 center / cover no-repeat;
  position: relative;
}
.auth-page::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .45));
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 2.2rem 2rem 1.8rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 255, 255, .5) inset;
  text-align: center;
}
.auth-logo {
  height: 76px; width: auto; max-width: 240px;
  border-radius: 16px;
  background: #fff;
  padding: 2px 6px;
  object-fit: contain;
  box-shadow: var(--shadow-2);
  margin-bottom: 1rem;
}
.auth-card h1 { font-size: 1.6rem; margin-bottom: .25rem; }
.auth-card .lead-sub { color: var(--label-2); font-size: .92rem; margin-bottom: 1.5rem; }
.auth-card form { text-align: left; }
.auth-card .form-control { min-height: 46px; background: rgba(255, 255, 255, .85); }
.auth-card .btn-primary { width: 100%; min-height: 46px; font-size: .98rem; font-weight: 600; }
.auth-foot { position: relative; color: rgba(255, 255, 255, .8); font-size: .78rem; text-align: center; margin-top: 1.2rem; }

.public-page { min-height: 100vh; background: var(--bg); padding: 2rem 1rem; display: flex; justify-content: center; }
.public-shell { width: 100%; max-width: 480px; }

/* ===================================================================== */
/* Dashboard pieces (reusable)                                            */
/* ===================================================================== */
.dash-hero {
  border-radius: 22px;
  background-image: linear-gradient(90deg, rgba(13, 22, 32, .9) 0%, rgba(13, 22, 32, .58) 45%, rgba(13, 22, 32, 0) 78%), var(--hero-img, none);
  background-size: cover;
  background-position: center 35%;
  background-color: var(--ink);
  min-height: 300px;
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  margin-bottom: 1.25rem;
}
.dash-hero__date { margin: 0 0 .5rem; color: #C9D4DD; font-size: .95rem; }
.dash-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 900;
  font-stretch: var(--number-stretch);
  line-height: .95;
  letter-spacing: -0.02em;
}
.dash-hero__lead { margin: .9rem 0 0; max-width: 540px; font-size: 1.1rem; line-height: 1.45; color: #E4ECF3; }
.dash-hero__actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-glass {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}
.btn-glass:hover { background: rgba(255, 255, 255, .22) !important; }

/* Sites as substations hanging off one line */
.dash-sites { margin-bottom: 1rem; }
.busbar {
  margin-top: 1.4rem;
  border-top: 3px solid var(--amber);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 .9rem;
}
.busbar__node { display: flex; flex-direction: column; align-items: center; color: var(--label); }
.busbar__node:hover { color: var(--label); }
.busbar__drop { position: relative; width: 2px; height: 24px; background: var(--amber); }
.busbar__drop::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--amber); background: var(--surface);
}
.busbar__card {
  margin-top: 12px; width: 100%;
  background: var(--surface-2); border: 1px solid var(--separator); border-radius: 14px;
  padding: .85rem 1rem;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.busbar__node:hover .busbar__card { border-color: var(--label-3); transform: translateY(-2px); }
.busbar__node.is-lead .busbar__card { background: var(--ink); border-color: var(--ink); color: #fff; }
.busbar__name { display: block; font-size: .88rem; font-weight: 600; color: var(--label-2); }
.busbar__count { display: block; font-size: 2.1rem; font-weight: 900; font-stretch: var(--number-stretch); line-height: 1.1; }
.busbar__meta { display: block; font-size: .8rem; color: var(--label-2); margin-top: .2rem; }
.busbar__node.is-lead .busbar__name, .busbar__node.is-lead .busbar__meta { color: #B8C7D4; }
@media (max-width: 767.98px) {
  .dash-hero {
    background-image: linear-gradient(180deg, rgba(13, 22, 32, .55) 0%, rgba(13, 22, 32, .88) 100%), var(--hero-img, none);
    padding: 1.5rem 1.4rem;
    min-height: 260px;
  }
  .busbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; border-top: 0; margin-top: 1rem; }
  .busbar__drop { display: none; }
  .busbar__card { margin-top: 0; border-top: 3px solid var(--amber); }
  .busbar__count { font-size: 1.6rem; }
  .busbar__card { padding: .7rem .8rem; }
}

/* One bar split into parts (condition) + its legend */
.split-bar { display: flex; gap: 3px; height: 14px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.split-bar__good { background: var(--green); }
.split-bar__fair { background: var(--amber); }
.split-bar__damaged { background: var(--red); }
.legend-list { display: flex; flex-direction: column; }
.legend-row { display: flex; align-items: center; gap: .65rem; padding: .7rem 0; border-bottom: 1px solid var(--separator); color: var(--label); }
.legend-row:last-child { border-bottom: 0; }
.legend-row:hover { color: var(--tint); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-num { font-weight: 800; font-stretch: 115%; font-size: 1.05rem; }
.legend-pct { width: 42px; text-align: right; color: var(--label-2); font-size: .88rem; }

/* Name — bar — number rows */
.meter { display: block; height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--tint); border-radius: 99px; }
.meter--ink { background: var(--ink-3); }
.meter--ink > span { background: var(--amber); min-width: 6px; }
.meter-row { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr) 44px; gap: .75rem; align-items: center; padding: .5rem 0; color: var(--label); }
.meter-row:hover { color: var(--tint); }
.meter-row__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter-row__num { text-align: right; font-weight: 700; }

/* Dark panel */
.card-ink { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--ink-text); }
.card-ink .section-title, .card-ink h2, .card-ink h3 { color: #fff; }
.tag-chip {
  width: 64px; height: 64px; flex: none;
  border-radius: 14px; background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; transform: rotate(-4deg);
}
.big-number { font-size: 2.1rem; font-weight: 900; font-stretch: var(--number-stretch); line-height: 1; color: #fff; }
.big-number span { font-stretch: 100%; font-size: 1rem; font-weight: 500; color: #B8C7D4; }

/* Needs attention rows */
.attn-row { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .8rem 0; border-top: 1px solid var(--separator); }
.attn-row__title { display: block; font-weight: 700; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-row__title:hover { color: var(--tint); }
.attn-row__meta { font-size: .84rem; color: var(--label-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-count { font-weight: 700; margin-left: .25rem; }

/* A table without the inset-list chrome, for use inside a card */
.table-plain { --bs-table-bg: transparent; }
.table-plain thead th { font-size: .8rem; font-weight: 600; color: var(--label-2); background: transparent !important; border-bottom: 1px solid var(--separator); padding: .6rem .5rem; }
.table-plain td { border-color: var(--separator); padding: .7rem .5rem; }
.table-plain tr[data-href] { cursor: pointer; }
.table-plain tr[data-href]:hover td { background: var(--surface-2); }

/* ===================================================================== */
/* Utilities                                                              */
/* ===================================================================== */
.bg-white { background-color: var(--surface) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.border { border-color: var(--separator) !important; }
.border-bottom, .border-top { border-color: var(--separator) !important; }
.rounded-4 { border-radius: var(--r-xl) !important; }
.rounded-3 { border-radius: var(--r-lg) !important; }
.gap-xs { gap: .35rem; }
.min-w-0 { min-width: 0; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cursor-pointer { cursor: pointer; }

/* ===================================================================== */
/* Responsive                                                             */
/* ===================================================================== */
@media (max-width: 991.98px) {
  .vra-sidebar { width: 280px; transform: translateX(-100%); box-shadow: none; }
  .vra-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-3); }
  .rail-toggle { display: none; }
  .topbar-search { display: none; }
  .vra-main { margin-left: 0; }
  .vra-topbar { padding: .6rem 1rem; }
  .vra-topbar .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .vra-topbar .page-title, .page-title { font-size: 1.35rem; }
  .vra-content { padding: 1rem 1rem 1.5rem; }
}
@media (max-width: 767.98px) {
  table.vra-table-desktop { display: none; }
  .vra-cards-mobile { display: block; }
  .stat-value, .vra-stat-card .value { font-size: 1.4rem; }
}
@media (min-width: 768px) {
  .vra-cards-mobile { display: none; }
}

/* ===================================================================== */
/* Print                                                                  */
/* ===================================================================== */
@media print {
  .vra-sidebar, .vra-topbar, .vra-footer, .no-print { display: none !important; }
  .vra-main { margin: 0 !important; }
  .vra-content { padding: 0 !important; max-width: none; }
  body { background: #fff; }
  .card, .vra-card { box-shadow: none !important; }
}

/* Laravel's Bootstrap pagination: "Showing 1 to 15 of 200" + page pills */
nav .flex-sm-fill { gap: 1rem; }
nav .flex-sm-fill p.small { margin: 0; color: var(--label-2); }
nav .flex-sm-fill p.small .fw-semibold { color: var(--label); font-weight: 600; }

/* Sticky action bar at the bottom of long forms */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: var(--glass);
  backdrop-filter: var(--glass);
  box-shadow: var(--shadow-3);
}