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

/* HeavyOps UI v2.0 shared component library styles.
   Component layer only. Page migrations happen in later phases. */
:root {
  --ho-font: Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  --ho-orange: #FF6A1A;
  --ho-orange-hover: #F05A00;
  --ho-bg: #FAFBFC;
  --ho-card: #FFFFFF;
  --ho-border: #E5E7EB;
  --ho-text: #111827;
  --ho-muted: #6B7280;
  --ho-success: #22C55E;
  --ho-warning: #F59E0B;
  --ho-danger: #EF4444;
  --ho-info: #3B82F6;
  --ho-sidebar-width: 272px;
  --ho-toolbar-height: 72px;
  --ho-page-padding: 32px;
  --ho-section-gap: 24px;
  --ho-card-padding: 24px;
  --ho-grid-gap: 20px;
  --ho-card-radius: 14px;
  --ho-button-radius: 10px;
  --ho-input-radius: 8px;
  --ho-card-shadow: 0 2px 8px rgba(0,0,0,.05);
  --ho-hover-shadow: 0 8px 20px rgba(0,0,0,.08);
  --ho-focus: 0 0 0 3px rgba(255,106,26,.16);
  --ui-bg: var(--ho-bg);
  --ui-panel: var(--ho-card);
  --ui-ink: var(--ho-text);
  --ui-muted: var(--ho-muted);
  --ui-line: var(--ho-border);
  --ui-soft: #F9FAFB;
  --ui-blue: var(--ho-orange);
  --ui-purple: var(--ho-orange);
  --ui-orange: var(--ho-orange);
  --ui-shadow: var(--ho-card-shadow);
  --paper: var(--ho-bg);
  --panel: var(--ho-card);
  --ink: var(--ho-text);
  --muted: var(--ho-muted);
  --line: var(--ho-border);
  --blue: var(--ho-orange);
  --blue-soft: #FFF1E8;
  --shadow: var(--ho-card-shadow);
}

html[data-theme="dark"] {
  --ho-bg: #0D1117;
  --ho-card: #151A22;
  --ho-border: #3A414D;
  --ho-text: #F3F4F6;
  --ho-muted: #A1A8B3;
  --ui-soft: #1A1F2B;
  color-scheme: dark;
}

html,
body {
  background: var(--ho-bg) !important;
  color: var(--ho-text) !important;
  font-family: var(--ho-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* AppLayout */
.ho-app-layout,
.app {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: var(--ho-sidebar-width) minmax(0, 1fr) !important;
  background: var(--ho-bg) !important;
}

.ho-main,
main,
.main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: var(--ho-page-padding) !important;
  background: var(--ho-bg) !important;
  color: var(--ho-text) !important;
}

/* Sidebar */
.ho-sidebar,
.app > aside,
.app > aside.nav,
.app > .nav {
  width: var(--ho-sidebar-width) !important;
  min-width: var(--ho-sidebar-width) !important;
  min-height: 100vh !important;
  height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px !important;
  background: var(--ho-card) !important;
  color: var(--ho-text) !important;
  border-right: 1px solid var(--ho-border) !important;
  box-shadow: none !important;
}

.ho-sidebar-logo,
.app > aside .brand,
.app > aside.nav > .brand,
.app > .nav .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 78px !important;
  padding: 10px !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  color: var(--ho-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app > aside .brand.brand-logo,
.app > .nav .brand.brand-logo {
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-card-radius) !important;
  background: #fff !important;
}

.heavyops-logo {
  display: block !important;
  width: min(168px, 100%) !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

.ho-sidebar-nav,
.app > aside .nav,
.app > .nav .nav {
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ho-nav-item,
.app > aside .nav button,
.app > aside.nav > button,
.app > .nav button,
.account-link {
  width: 100% !important;
  min-height: 38px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: var(--ho-button-radius) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  color: var(--ho-muted) !important;
  box-shadow: none !important;
  font-family: var(--ho-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.ho-nav-item:hover,
.app > aside .nav button:hover,
.app > aside.nav > button:hover,
.app > .nav button:hover,
.account-link:hover {
  background: #FFF1E8 !important;
  color: var(--ho-orange-hover) !important;
  transform: none !important;
}

.ho-nav-item.is-active,
.ho-nav-item.active,
.app > aside .nav button.active,
.app > aside.nav > button.active,
.app > .nav button.active {
  background: var(--ho-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.ho-nav-item svg,
.account-link svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex: 0 0 auto;
}

.app > aside .nav .audit-menu {
  display: grid !important;
  grid-auto-rows: auto !important;
  gap: 4px !important;
  width: 100% !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.app > aside .nav .audit-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  color: var(--ho-muted) !important;
  box-shadow: none !important;
}

.app > aside .nav .audit-children {
  display: none !important;
  position: static !important;
  gap: 2px !important;
  margin: 0 0 4px 16px !important;
  padding: 3px 0 3px 14px !important;
  border-left: 1px solid var(--ho-border) !important;
  overflow: visible !important;
}

.app > aside .nav .audit-menu.expanded .audit-children {
  display: grid !important;
  height: 154px !important;
  min-height: 154px !important;
}

.app > aside .nav .audit-menu.expanded {
  grid-template-rows: 38px 154px !important;
  min-height: 196px !important;
}

.app > aside .nav .audit-child {
  min-height: 28px !important;
  padding: 6px 8px !important;
  border-radius: var(--ho-input-radius) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.app > aside .nav .audit-child.active {
  background: #FFF1E8 !important;
  color: var(--ho-orange-hover) !important;
  box-shadow: none !important;
}

.sidebar-meta,
.meta,
.app > aside .sidebar-meta,
.app > aside .meta {
  order: 30 !important;
  margin: 8px 0 0 !important;
  padding: 12px 8px 0 !important;
  border-top: 1px solid var(--ho-border) !important;
  color: var(--ho-muted) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.data-sync-status {
  order: 40 !important;
  margin: 2px 8px 0 !important;
}

.account-menu {
  order: 50 !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--ho-border) !important;
  display: grid !important;
  gap: 6px !important;
}

.account-id {
  display: grid !important;
  gap: 2px !important;
  padding: 8px 10px !important;
}

.account-id strong {
  color: var(--ho-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.account-id span {
  color: var(--ho-muted) !important;
  font-size: 12px !important;
}

.account-link.logout {
  color: var(--ho-danger) !important;
}

.account-link.logout:hover {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}

/* TopToolbar and PageHeader */
.ho-top-toolbar {
  min-height: var(--ho-toolbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--ho-card-padding);
  background: var(--ho-card);
  border: 1px solid var(--ho-border);
  border-radius: var(--ho-card-radius);
  box-shadow: var(--ho-card-shadow);
}

.ho-page-header,
.top,
.topbar {
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
  background: var(--ho-card) !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-card-radius) !important;
  box-shadow: var(--ho-card-shadow) !important;
  padding: var(--ho-card-padding) !important;
  margin-bottom: var(--ho-section-gap) !important;
}

.ho-page-title,
h1,
.top h1,
.topbar h1 {
  margin: 0 !important;
  color: var(--ho-text) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

.ho-page-subtitle,
.subtle,
.mini,
.muted,
small,
.help-text,
.source-note {
  color: var(--ho-muted) !important;
  font-size: 15px;
  font-weight: 400 !important;
}

/* Cards */
.ho-card,
.ho-stat-card,
.panel,
.card,
.metric,
.driver-card,
.unit-card,
.asset-card,
.vehicle-card,
.day,
.assignment,
.request-item,
.work-item,
.note,
.note-item,
.summary-cell,
.detail-panel,
.modal,
.login-card {
  background: var(--ho-card) !important;
  color: var(--ho-text) !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-card-radius) !important;
  box-shadow: var(--ho-card-shadow) !important;
}

.ho-card {
  padding: var(--ho-card-padding);
}

.ho-card:hover,
.ho-stat-card:hover {
  box-shadow: var(--ho-hover-shadow);
}

.ho-card-title,
.panel-head h2,
h2 {
  color: var(--ho-text) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.ho-stat-card {
  padding: var(--ho-card-padding);
}

.ho-stat-label {
  display: block;
  color: var(--ho-muted);
  font-size: 12px;
  font-weight: 500;
}

.ho-stat-value {
  display: block;
  margin-top: 8px;
  color: var(--ho-text);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

/* HeavyOps shared Stat/KPI card standard */
.ho-stat-card,
.metric {
  --ho-stat-accent: #FF6A1A;
  --ho-stat-accent-soft: #FFEDD5;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  align-items: start !important;
  column-gap: 18px !important;
  min-height: 128px !important;
  padding: 24px !important;
  overflow: hidden !important;
  background: var(--ho-card) !important;
  border: 1px solid var(--ho-border) !important;
  border-left: 3px solid var(--ho-stat-accent) !important;
  border-radius: var(--ho-card-radius) !important;
  box-shadow: var(--ho-card-shadow), 0 14px 28px color-mix(in srgb, var(--ho-stat-accent) 10%, transparent) !important;
}

.ho-stat-card:hover,
.metric:hover {
  border-color: #D3D7DE !important;
  box-shadow: var(--ho-hover-shadow), 0 18px 34px color-mix(in srgb, var(--ho-stat-accent) 13%, transparent) !important;
}

.ho-stat-card__accent {
  display: none;
}

.ho-stat-card__content {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ho-stat-card__icon,
.ho-stat-icon,
.metric-icon {
  grid-column: 2 !important;
  grid-row: 1 / span 4 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ho-stat-accent-soft) !important;
  color: var(--ho-stat-accent) !important;
  position: static !important;
  margin: 0 !important;
}

.ho-stat-card__icon svg,
.ho-stat-icon svg,
.metric-icon svg,
.ho-stat-card .ho-icon,
.metric-icon .ho-icon {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.15 !important;
  flex: 0 0 auto !important;
}

.ho-stat-label,
.metric span:first-child {
  display: block !important;
  color: var(--ho-muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 14px !important;
}

.ho-stat-value,
.ho-stat-card strong,
.metric strong {
  display: block !important;
  color: var(--ho-stat-accent) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 14px !important;
}

.ho-stat-card__secondary {
  color: var(--ho-text);
  font-size: .72em;
  font-weight: 750;
  margin-left: 8px;
}

.ho-stat-note,
.ho-stat-card small,
.metric small {
  display: block !important;
  color: var(--ho-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.ho-stat-card__trend {
  margin-top: 7px !important;
  color: #15803D !important;
  font-weight: 650 !important;
}

.ho-stat-card--blue,
.metric:nth-child(1) { --ho-stat-accent: #3B82F6; --ho-stat-accent-soft: #DBEAFE; }
.ho-stat-card--green,
.metric:nth-child(2) { --ho-stat-accent: #22C55E; --ho-stat-accent-soft: #DCFCE7; }
.ho-stat-card--teal,
.metric:nth-child(3) { --ho-stat-accent: #14B8A6; --ho-stat-accent-soft: #CCFBF1; }
.ho-stat-card--orange,
.metric:nth-child(4) { --ho-stat-accent: #FF6A1A; --ho-stat-accent-soft: #FFEDD5; }
.ho-stat-card--red,
.metric:nth-child(5) { --ho-stat-accent: #EF4444; --ho-stat-accent-soft: #FEE2E2; }
.ho-stat-card--purple { --ho-stat-accent: #8B5CF6; --ho-stat-accent-soft: #EDE9FE; }
.ho-stat-card--gray { --ho-stat-accent: #64748B; --ho-stat-accent-soft: #F1F5F9; }

html[data-theme="dark"] .ho-stat-card,
html[data-theme="dark"] .metric {
  background: #171C27 !important;
  border-color: #2C3547 !important;
  border-left-color: var(--ho-stat-accent) !important;
}

html[data-theme="dark"] .ho-stat-card__secondary {
  color: #F8FAFC !important;
}

.metric-grid .metric,
.fleet-summary .ho-stat-card,
.reports-summary .ho-stat-card,
.settings-summary > .ho-stat-card,
.users-summary-grid .ho-stat-card,
.drivers-stat-grid .ho-stat-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  align-items: start !important;
  column-gap: 18px !important;
  min-height: 128px !important;
  padding: 24px !important;
  border-radius: var(--ho-card-radius) !important;
}

.fleet-summary .ho-stat-card__icon,
.fleet-summary .ho-stat-icon,
.reports-summary .ho-stat-card__icon,
.reports-summary .ho-stat-icon,
.settings-summary .ho-stat-card__icon,
.settings-summary .ho-stat-icon,
.users-summary-grid .ho-stat-card__icon,
.drivers-stat-grid .ho-stat-card__icon,
.metric-grid .metric-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ho-stat-accent-soft) !important;
  color: var(--ho-stat-accent) !important;
  position: static !important;
}

.fleet-summary .ho-stat-card__icon svg,
.fleet-summary .ho-stat-icon svg,
.reports-summary .ho-stat-card__icon svg,
.reports-summary .ho-stat-icon svg,
.settings-summary .ho-stat-card__icon svg,
.settings-summary .ho-stat-icon svg,
.users-summary-grid .ho-stat-card__icon svg,
.drivers-stat-grid .ho-stat-card__icon svg,
.metric-grid .metric-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.15 !important;
}

/* Buttons */
.ho-button,
button,
.btn,
.action,
.secondary,
.danger,
.ghost,
.tab,
.report-tabs button {
  min-height: 40px !important;
  border-radius: var(--ho-button-radius) !important;
  font-family: var(--ho-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

.ho-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
}

.ho-button--primary,
.btn,
.action,
.primary,
button#loginButton {
  background: var(--ho-orange) !important;
  color: #fff !important;
  border: 1px solid var(--ho-orange) !important;
  box-shadow: none !important;
}

.ho-button--primary:hover,
.btn:hover,
.action:hover,
.primary:hover,
button#loginButton:hover {
  background: var(--ho-orange-hover) !important;
  border-color: var(--ho-orange-hover) !important;
}

.ho-button--secondary,
.secondary {
  background: var(--ho-card) !important;
  color: var(--ho-text) !important;
  border: 1px solid var(--ho-border) !important;
  box-shadow: none !important;
}

.ho-button--danger,
.danger {
  background: var(--ho-card) !important;
  color: var(--ho-danger) !important;
  border: 1px solid var(--ho-danger) !important;
  box-shadow: none !important;
}

.ho-button--ghost,
.ghost {
  background: transparent !important;
  color: var(--ho-text) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

/* Forms */
.ho-input,
.ho-select,
.ho-textarea,
input,
select,
textarea,
.field,
.clean-select {
  background: var(--ho-card) !important;
  color: var(--ho-text) !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-input-radius) !important;
  box-shadow: none !important;
  font-family: var(--ho-font) !important;
  font-size: 15px !important;
}

input,
select,
textarea,
.ho-input,
.ho-select {
  min-height: 40px !important;
  padding: 9px 10px !important;
}

textarea,
.ho-textarea {
  padding: 10px !important;
}

.ho-label,
.field label,
.form-row label,
.date-control label {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--ho-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

input:focus,
select:focus,
textarea:focus,
.ho-input:focus,
.ho-select:focus,
.ho-textarea:focus {
  outline: none !important;
  border-color: var(--ho-orange) !important;
  box-shadow: var(--ho-focus) !important;
}

.ho-checkbox,
.ho-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ho-text);
  font-size: 15px;
}

.ho-toggle-control {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--ho-border);
  background: #E5E7EB;
  position: relative;
  transition: background .16s ease;
}

.ho-toggle-control::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .16s ease;
}

.ho-toggle input:checked + .ho-toggle-control {
  background: var(--ho-orange);
  border-color: var(--ho-orange);
}

.ho-toggle input:checked + .ho-toggle-control::after {
  transform: translateX(18px);
}

.ho-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Tables */
.ho-table-wrap,
.table-wrap {
  overflow: auto !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-card-radius) !important;
  background: var(--ho-card) !important;
}

.ho-data-table,
table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--ho-card) !important;
  color: var(--ho-text) !important;
  border: 0 !important;
  border-radius: var(--ho-card-radius) !important;
  overflow: hidden !important;
}

.ho-data-table th,
table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F9FAFB !important;
  color: var(--ho-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.ho-data-table th,
.ho-data-table td,
table th,
table td {
  padding: 12px 14px !important;
  border-top: 1px solid var(--ho-border) !important;
  color: var(--ho-text) !important;
  vertical-align: middle !important;
}

.ho-data-table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) td {
  background: #FCFCFD !important;
}

.ho-data-table tbody tr:hover td,
table tbody tr:hover td {
  background: #FFF7ED !important;
}

/* StatusBadge */
.ho-status-badge,
.badge,
.status,
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.ho-status-badge--success,
.badge.ok,
.ok,
.status.ACTIVE,
.badge.ACTIVE {
  background: #DCFCE7 !important;
  color: #15803D !important;
}

.ho-status-badge--warning,
.badge.warn,
.warn,
.status.ON,
.status.STANDBY {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}

.ho-status-badge--danger,
.badge.bad,
.bad,
.status.SHOP,
.status.NEEDS,
.status.MAINTENANCE,
.status.PM {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}

.ho-status-badge--info,
.badge.info,
.info {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

/* Modal and Drawer */
.ho-modal-backdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.46) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 1000;
}

.ho-modal,
.modal {
  background: var(--ho-card) !important;
  border: 1px solid var(--ho-border) !important;
  border-radius: var(--ho-card-radius) !important;
  box-shadow: 0 24px 70px rgba(16,24,40,.25) !important;
}

.ho-modal-head,
.ho-modal-body,
.ho-modal-foot,
.modal-head,
.modal-body,
.modal-foot,
.modal-actions {
  background: var(--ho-card) !important;
  color: var(--ho-text) !important;
  border-color: var(--ho-border) !important;
}

.ho-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(460px, 100vw);
  height: 100vh;
  background: var(--ho-card);
  border-left: 1px solid var(--ho-border);
  box-shadow: 0 24px 70px rgba(16,24,40,.25);
  transform: translateX(100%);
  transition: transform .2s ease;
  z-index: 1001;
}

.ho-drawer.is-open {
  transform: translateX(0);
}

/* EmptyState, LoadingSkeleton, Toast */
.ho-empty-state,
.empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 120px;
  padding: var(--ho-card-padding);
  background: var(--ho-card) !important;
  border: 1px dashed var(--ho-border) !important;
  border-radius: var(--ho-card-radius) !important;
  color: var(--ho-muted) !important;
  text-align: center;
}

.ho-skeleton {
  display: block;
  min-height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6);
  background-size: 200% 100%;
  animation: ho-skeleton 1.15s ease-in-out infinite;
}

@keyframes ho-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ho-toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  display: grid;
  gap: 10px;
}

.ho-toast {
  min-width: 260px;
  max-width: 380px;
  padding: 14px 16px;
  background: var(--ho-card);
  border: 1px solid var(--ho-border);
  border-radius: var(--ho-card-radius);
  box-shadow: var(--ho-hover-shadow);
  color: var(--ho-text);
  font-size: 14px;
}

.ho-toast--success { border-left: 4px solid var(--ho-success); }
.ho-toast--error { border-left: 4px solid var(--ho-danger); }
.ho-toast--warning { border-left: 4px solid var(--ho-warning); }
.ho-toast--info { border-left: 4px solid var(--ho-info); }

html[data-theme="dark"] .app > aside .nav button,
html[data-theme="dark"] .app > aside.nav > button,
html[data-theme="dark"] .app > .nav button,
html[data-theme="dark"] .account-link {
  color: var(--ho-muted) !important;
}

html[data-theme="dark"] .app > aside .nav button:hover,
html[data-theme="dark"] .app > aside.nav > button:hover,
html[data-theme="dark"] .app > .nav button:hover,
html[data-theme="dark"] .account-link:hover {
  background: #2B1B10 !important;
  color: #FFB37A !important;
}

html[data-theme="dark"] .ho-data-table th,
html[data-theme="dark"] table th {
  background: #1A1F2B !important;
  color: var(--ho-muted) !important;
}

html[data-theme="dark"] .ho-data-table tbody tr:nth-child(even) td,
html[data-theme="dark"] table tbody tr:nth-child(even) td {
  background: #171C25 !important;
}

html[data-theme="dark"] .ho-data-table tbody tr:hover td,
html[data-theme="dark"] table tbody tr:hover td {
  background: #2B1B10 !important;
}

html[data-theme="dark"] .ho-skeleton {
  background: linear-gradient(90deg, #1A1F2B, #3A414D, #1A1F2B);
  background-size: 200% 100%;
}

@media (max-width: 980px) {
  .ho-app-layout,
  .app {
    grid-template-columns: 1fr !important;
  }
  .ho-sidebar,
  .app > aside,
  .app > aside.nav,
  .app > .nav {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--ho-border) !important;
  }
  .ho-main,
  main,
  .main {
    padding: 18px !important;
  }
}

/* Final StatCard consistency override */
.ho-stat-card,
.metric,
.metric-grid .metric,
.fleet-summary .ho-stat-card,
.reports-summary .ho-stat-card,
.settings-summary > .ho-stat-card,
.users-summary-grid .ho-stat-card,
.drivers-stat-grid .ho-stat-card {
  --ho-stat-accent: var(--ho-stat-accent, #FF6A1A);
  --ho-stat-accent-soft: var(--ho-stat-accent-soft, #FFEDD5);
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  align-items: start !important;
  column-gap: 18px !important;
  min-height: 128px !important;
  padding: 24px !important;
  overflow: hidden !important;
  background: var(--ho-card, #FFFFFF) !important;
  border: 1px solid var(--ho-border, #E5E7EB) !important;
  border-left: 3px solid var(--ho-stat-accent) !important;
  border-radius: var(--ho-card-radius, 14px) !important;
  box-shadow: var(--ho-card-shadow, 0 2px 8px rgba(0,0,0,.05)), 0 14px 28px color-mix(in srgb, var(--ho-stat-accent) 10%, transparent) !important;
}

.ho-stat-card__icon,
.ho-stat-icon,
.metric-icon,
.fleet-summary .ho-stat-card__icon,
.fleet-summary .ho-stat-icon,
.reports-summary .ho-stat-card__icon,
.reports-summary .ho-stat-icon,
.settings-summary .ho-stat-card__icon,
.settings-summary .ho-stat-icon,
.users-summary-grid .ho-stat-card__icon,
.drivers-stat-grid .ho-stat-card__icon,
.metric-grid .metric-icon {
  grid-column: 2 !important;
  grid-row: 1 / span 4 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ho-stat-accent-soft) !important;
  color: var(--ho-stat-accent) !important;
  position: static !important;
  margin: 0 !important;
}

.ho-stat-card__icon svg,
.ho-stat-icon svg,
.metric-icon svg,
.fleet-summary .ho-stat-card__icon svg,
.fleet-summary .ho-stat-icon svg,
.reports-summary .ho-stat-card__icon svg,
.reports-summary .ho-stat-icon svg,
.settings-summary .ho-stat-card__icon svg,
.settings-summary .ho-stat-icon svg,
.users-summary-grid .ho-stat-card__icon svg,
.drivers-stat-grid .ho-stat-card__icon svg,
.metric-grid .metric-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.15 !important;
  flex: 0 0 auto !important;
}

.ho-stat-card--blue,
.metric:nth-child(1) { --ho-stat-accent: #3B82F6; --ho-stat-accent-soft: #DBEAFE; }
.ho-stat-card--green,
.metric:nth-child(2) { --ho-stat-accent: #22C55E; --ho-stat-accent-soft: #DCFCE7; }
.ho-stat-card--teal,
.metric:nth-child(3) { --ho-stat-accent: #14B8A6; --ho-stat-accent-soft: #CCFBF1; }
.ho-stat-card--orange,
.metric:nth-child(4) { --ho-stat-accent: #FF6A1A; --ho-stat-accent-soft: #FFEDD5; }
.ho-stat-card--red,
.metric:nth-child(5) { --ho-stat-accent: #EF4444; --ho-stat-accent-soft: #FEE2E2; }
.ho-stat-card--purple { --ho-stat-accent: #8B5CF6; --ho-stat-accent-soft: #EDE9FE; }
.ho-stat-card--gray { --ho-stat-accent: #64748B; --ho-stat-accent-soft: #F1F5F9; }

/* Phase 2 approved revisions: reduce blueprint visual differences without page conversion. */
:root {
  --ho-card-shadow: 0 6px 18px rgba(17,24,39,.07);
  --ho-hover-shadow: 0 14px 32px rgba(17,24,39,.11);
  --ho-soft-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.06);
}

html,
body {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

h1,
.ho-page-title,
.top h1,
.topbar h1 {
  font-family: var(--ho-font) !important;
  font-size: 34px !important;
  line-height: 1.06 !important;
  font-weight: 700 !important;
  color: var(--ho-text) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

h2,
.ho-card-header h2,
.panel-head h2,
.card-title,
.section-title {
  font-family: var(--ho-font) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--ho-text) !important;
  letter-spacing: 0 !important;
}

h3,
.card h3,
.panel h3,
.detail-panel h3 {
  font-family: var(--ho-font) !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--ho-text) !important;
}

.subtle,
.mini,
.muted,
small,
.source-note,
.ho-page-header p,
.top p,
.topbar .subtle {
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--ho-muted) !important;
  font-weight: 400 !important;
}

.ho-main,
main,
.main {
  padding: 32px !important;
}

.ho-sidebar,
.app > aside,
.app > aside.nav,
.app > .nav {
  padding: 22px 20px !important;
  gap: 18px !important;
  background: #fff !important;
  box-shadow: 1px 0 0 rgba(17,24,39,.04) !important;
}

.ho-sidebar-logo,
.app > aside .brand,
.app > aside.nav > .brand,
.app > .nav .brand {
  min-height: 108px !important;
  padding: 22px 18px 18px !important;
  margin: 0 0 8px !important;
}

.app > aside .brand.brand-logo,
.app > .nav .brand.brand-logo {
  border-radius: 14px !important;
  border-color: #E5E7EB !important;
  box-shadow: var(--ho-soft-shadow) !important;
}

.heavyops-logo {
  width: min(156px, 88%) !important;
  max-height: 78px !important;
}

.ho-sidebar-nav,
.app > aside .nav,
.app > .nav .nav {
  gap: 8px !important;
}

.app > aside .nav .audit-menu {
  margin-top: 8px !important;
}

.ho-nav-item,
.app > aside .nav button,
.app > aside.nav > button,
.app > .nav button,
.account-link {
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #444B5A !important;
}

.ho-nav-item svg,
.account-link svg,
.app > aside svg,
.app > .nav svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.15 !important;
  flex: 0 0 18px !important;
  display: block !important;
}

.ho-nav-label {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}

.app > aside .nav .audit-head {
  justify-content: flex-start !important;
}

.app > aside .nav .audit-head .audit-caret {
  margin-left: auto !important;
}

.ho-nav-item.is-active,
.ho-nav-item.active,
.app > aside .nav button.active,
.app > aside.nav > button.active,
.app > .nav button.active {
  background: var(--ho-orange) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(255,106,26,.22) !important;
}

.ho-nav-item:hover,
.app > aside .nav button:hover,
.app > aside.nav > button:hover,
.app > .nav button:hover,
.account-link:hover {
  background: #FFF1E8 !important;
  color: var(--ho-orange-hover) !important;
}

.sidebar-meta,
.app > aside .sidebar-meta,
.data-sync-status,
.account-menu {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.account-menu {
  padding: 14px 0 0 !important;
  gap: 8px !important;
  border-top: 1px solid var(--ho-border) !important;
}

.account-id {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #FAFBFC !important;
  border: 1px solid #EEF0F3 !important;
}

.ho-page-header,
.top,
.topbar {
  padding: 24px !important;
  border-radius: 14px !important;
  border: 1px solid var(--ho-border) !important;
  box-shadow: var(--ho-soft-shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  background: var(--ho-card) !important;
}

.tools,
.ho-page-actions,
.ho-toolbar-right {
  gap: 10px !important;
  align-items: end !important;
}

.ho-card,
.panel,
.card,
.driver-card,
.unit-card,
.asset-card,
.vehicle-card,
.day,
.assignment,
.request-item,
.work-item,
.note,
.note-item,
.summary-cell,
.detail-panel,
.login-card {
  border-radius: 14px !important;
  border: 1px solid var(--ho-border) !important;
  box-shadow: var(--ho-card-shadow) !important;
  padding: 24px !important;
}

.panel,
.ho-card {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important;
}

.panel:hover,
.ho-card:hover,
.card:hover,
.driver-card:hover,
.asset-card:hover,
.vehicle-card:hover {
  box-shadow: var(--ho-hover-shadow) !important;
  border-color: #D3D7DE !important;
}

.panel-head,
.ho-card-header {
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid #EEF0F3 !important;
}

.metric,
.ho-stat-card {
  min-height: 118px !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
  box-shadow: var(--ho-card-shadow) !important;
}

.metric strong,
.ho-stat-card strong {
  font-size: 32px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.ho-button,
button,
.action,
.secondary,
.danger,
.tab,
.report-tabs button {
  min-height: 40px !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-family: var(--ho-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.ho-button--primary,
.action,
button.primary {
  background: var(--ho-orange) !important;
  border-color: var(--ho-orange) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255,106,26,.24) !important;
}

.ho-button--primary:hover,
.action:hover,
button.primary:hover {
  background: var(--ho-orange-hover) !important;
  border-color: var(--ho-orange-hover) !important;
  box-shadow: 0 14px 28px rgba(255,106,26,.30) !important;
}

.ho-button--secondary,
.secondary,
button.secondary {
  background: #fff !important;
  border: 1px solid #D3D7DE !important;
  color: var(--ho-text) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.04) !important;
}

.ho-button--secondary:hover,
.secondary:hover,
button.secondary:hover {
  border-color: #A1A8B3 !important;
  background: #FAFBFC !important;
}

.field,
.ho-input,
.ho-select,
.ho-textarea,
input,
select,
textarea {
  min-height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #D3D7DE !important;
  background: #fff !important;
  font-family: var(--ho-font) !important;
  font-size: 15px !important;
  color: var(--ho-text) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.03) !important;
}

.table-wrap,
.ho-table-wrap {
  border-radius: 14px !important;
  border: 1px solid var(--ho-border) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.04) !important;
}

table th,
.ho-data-table th {
  padding: 13px 16px !important;
  background: #FAFBFC !important;
  color: #5A616E !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

table td,
.ho-data-table td {
  padding: 14px 16px !important;
  font-size: 15px !important;
  color: var(--ho-text) !important;
}

table tbody tr:hover td,
.ho-data-table tbody tr:hover td {
  background: #FFF7ED !important;
}

.badge,
.ho-status-badge {
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .ho-sidebar,
html[data-theme="dark"] .app > aside,
html[data-theme="dark"] .app > aside.nav,
html[data-theme="dark"] .app > .nav {
  background: var(--ho-card) !important;
}

/* HeavyOps final sidebar icon alignment */
.app > aside .nav,
.app > .nav .nav,
.ho-sidebar-nav {
  display: grid !important;
  gap: 8px !important;
}

.app > aside .nav button,
.app > aside.nav > button,
.app > .nav button,
.account-link,
.ho-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.app > aside .nav button svg,
.app > aside.nav > button svg,
.app > .nav button svg,
.account-link svg,
.ho-nav-item svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  display: block !important;
  margin: 0 !important;
  stroke-width: 2.15 !important;
}

.ho-nav-label,
.account-link span,
.ho-nav-item span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.app > aside .nav button.active,
.app > aside.nav > button.active,
.app > .nav button.active,
.account-link.active,
.ho-nav-item.is-active,
.ho-nav-item.active {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.app > aside .nav .audit-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 40px !important;
  height: 40px !important;
}

.app > aside .nav .audit-head .audit-caret {
  margin-left: auto !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
}

html[data-theme="dark"] .account-id {
  background: #1A1F2B !important;
  border-color: var(--ho-border) !important;
}

html[data-theme="dark"] .ho-button--secondary,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .field,
html[data-theme="dark"] .ho-input,
html[data-theme="dark"] .ho-select,
html[data-theme="dark"] .ho-textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #151A22 !important;
  border-color: #3A414D !important;
  color: var(--ho-text) !important;
}

/* HeavyOps locked shared menu - same structure on every page */
.app > aside,
.app > aside.nav,
.app > .nav {
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
}

.app > aside .nav[data-ho-normalized="true"],
.app > .nav .nav[data-ho-normalized="true"] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 40px !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-content: start !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.app > aside .nav[data-ho-normalized="true"] > button,
.app > .nav .nav[data-ho-normalized="true"] > button {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  text-align: left !important;
  color: #444B5A !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transform: none !important;
}

.app > aside .nav[data-ho-normalized="true"] > button svg,
.app > .nav .nav[data-ho-normalized="true"] > button svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  display: block !important;
  margin: 0 !important;
  justify-self: center !important;
  align-self: center !important;
  stroke-width: 2.15 !important;
}

.app > aside .nav[data-ho-normalized="true"] > button .ho-nav-label,
.app > .nav .nav[data-ho-normalized="true"] > button .ho-nav-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  align-self: center !important;
}

.app > aside .nav[data-ho-normalized="true"] > button:hover,
.app > .nav .nav[data-ho-normalized="true"] > button:hover {
  background: #FFF1E8 !important;
  color: #D95700 !important;
  box-shadow: none !important;
  transform: none !important;
}

.app > aside .nav[data-ho-normalized="true"] > button.active,
.app > .nav .nav[data-ho-normalized="true"] > button.active {
  background: linear-gradient(135deg, #FF7A1A, #FF4F00) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(255, 106, 26, .22) !important;
}

.app > aside .nav[data-ho-normalized="true"] > button.active svg,
.app > .nav .nav[data-ho-normalized="true"] > button.active svg {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .app > aside .nav[data-ho-normalized="true"] > button,
html[data-theme="dark"] .app > .nav .nav[data-ho-normalized="true"] > button {
  color: #D3D7DE !important;
}

html[data-theme="dark"] .app > aside .nav[data-ho-normalized="true"] > button:hover,
html[data-theme="dark"] .app > .nav .nav[data-ho-normalized="true"] > button:hover {
  background: #2B1B10 !important;
  color: #FFB37A !important;
}

@media (max-width: 980px) {
  .app > aside,
  .app > aside.nav,
  .app > .nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .app > aside .nav[data-ho-normalized="true"],
  .app > .nav .nav[data-ho-normalized="true"] {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    grid-auto-rows: 40px !important;
  }
}