/* ============================================================
   MBA Water Portal V1 — Professional Design System
   Uses Bootstrap 5.3 as base, layered with custom tokens.
   ============================================================ */

/* ── 1. Design Tokens (CSS Custom Properties) ─────────────── */
:root {
  /* Brand palette */
  --portal-primary:        #0f4c81;   /* Navy blue */
  --portal-primary-hover:  #0a3d6b;
  --portal-primary-light:  #e8f0fb;
  --portal-accent:         #0891b2;   /* Teal / cyan */
  --portal-accent-light:   #e0f7fa;
  --portal-success:        #0f7a55;
  --portal-warning:        #b45309;
  --portal-danger:         #be123c;

  /* Surface & text */
  --portal-surface:        #ffffff;
  --portal-surface-2:      #f5f7fa;
  --portal-surface-3:      #edf0f5;
  --portal-border:         #dde2eb;
  --portal-text:           #1a2332;
  --portal-text-muted:     #5a6881;

  /* Sidebar */
  --sidebar-width:         292px;
  --sidebar-collapsed-w:   76px;
  --sidebar-bg:            #111827;
  --sidebar-text:          rgba(255,255,255,0.90);
  --sidebar-text-muted:    rgba(226,232,240,0.58);
  --sidebar-hover:         rgba(148,163,184,0.13);
  --sidebar-active:        rgba(14,165,233,0.18);
  --sidebar-active-accent: #22d3ee;
  --sidebar-border:        rgba(148,163,184,0.16);
  --sidebar-brand-h:       76px;

  /* Topbar */
  --topbar-h:              56px;
  --topbar-bg:             #ffffff;
  --topbar-border:         #dde2eb;
  --topbar-shadow:         0 1px 4px rgba(15,76,129,.06);

  /* Elevation */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 2px 8px rgba(15,23,42,.07);
  --shadow-md:  0 4px 20px rgba(15,23,42,.10);
  --shadow-lg:  0 8px 40px rgba(15,23,42,.14);

  /* Radius */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-md:   0.25s ease;
}

/* ── Dark mode token overrides ─────────────────────────────── */
[data-bs-theme="dark"] {
  --portal-surface:    #050505;
  --portal-surface-2:  #000000;
  --portal-surface-3:  #0d0d0d;
  --portal-border:     #202020;
  --portal-text:       #f4f7fb;
  --portal-text-muted: #9aa4b2;
  --sidebar-bg:        #000000;
  --sidebar-hover:     rgba(255,255,255,0.08);
  --sidebar-active:    rgba(34,211,238,0.16);
  --sidebar-border:    rgba(255,255,255,0.10);
  --topbar-bg:         #050505;
  --topbar-border:     #1f1f1f;
  --topbar-shadow:     0 1px 0 rgba(255,255,255,.05);
  --portal-primary-light: rgba(56,189,248,.12);
  --portal-accent-light:  rgba(8,145,178,.12);
  --shadow-xs:  0 1px 2px rgba(0,0,0,.55);
  --shadow-sm:  0 3px 12px rgba(0,0,0,.65);
  --shadow-md:  0 8px 28px rgba(0,0,0,.72);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.80);
}

/* ── 2. Base / Reset ───────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body.portal-body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--portal-surface-2);
  color: var(--portal-text);
  margin: 0;
  padding: 0;
}

/* scrollbar refinement */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--portal-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--portal-text-muted); }

/* ── 3. Portal Shell Layout ────────────────────────────────── */
.portal-shell {
  display: flex;
  min-height: 100vh;
}

/* ── 3a. Sidebar ────────────────────────────────────────────── */
.portal-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background:
    linear-gradient(180deg, rgba(14,165,233,.12) 0%, rgba(14,165,233,0) 34%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, #0b1120 100%);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
  transition: width var(--transition-md), transform var(--transition-md);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 8px 0 28px rgba(15, 23, 42, .12);
}

/* Brand bar */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 18px;
  height: var(--sidebar-brand-h);
  min-height: var(--sidebar-brand-h);
  text-decoration: none;
  border-bottom: 1px solid var(--sidebar-border);
  background: rgba(255,255,255,.025);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-brand img {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.94);
  padding: 4px;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.brand-orb {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #0891b2, #0f4c81);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  transition: opacity var(--transition-md), width var(--transition-md);
}

.sidebar-brand-text strong {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sidebar-brand-text small {
  color: var(--sidebar-text-muted);
  font-size: 11.5px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav scroll area */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 14px;
}

.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* Caption / section label */
.sidebar-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
  padding: 16px 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-md);
}

.sidebar-context {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 12px 12px 2px;
  padding: 11px;
  border: 1px solid rgba(148,163,184,.16);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.sidebar-context-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(34,211,238,.12);
  color: #67e8f9;
}

.sidebar-context strong,
.sidebar-context small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-context strong {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.sidebar-context small {
  color: var(--sidebar-text-muted);
  font-size: 11px;
  margin-top: 2px;
}

.side-group {
  margin: 3px 0 8px;
}

/* Nav link */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 10px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  margin: 1px 0;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.sidebar-link i {
  font-size: 15px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: .9;
  transition: opacity var(--transition-fast);
}

.sidebar-link span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--transition-md);
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
  transform: translateX(1px);
}

.sidebar-link:hover i { opacity: 1; }

.sidebar-link.active {
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.14);
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: var(--sidebar-active-accent);
  border-radius: 0 2px 2px 0;
}

.sidebar-link.active i { opacity: 1; }

.sidebar-parent {
  color: #f8fafc;
  font-weight: 750;
}

.sidebar-parent small {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  color: rgba(226,232,240,.82);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}

.sidebar-parent .sidebar-chevron {
  width: 14px;
  margin-left: 0;
  font-size: 12px;
  opacity: .62;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.sidebar-parent[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
  opacity: .95;
}

.sidebar-parent.active-parent {
  background: rgba(255,255,255,.06);
}

.nested-link {
  min-height: 34px;
  margin-left: 8px;
  width: calc(100% - 8px);
  padding: 8px 9px 8px 12px;
  color: rgba(226,232,240,.78);
  font-size: 12.7px;
}

.nested-link i {
  width: 18px;
  font-size: 13px;
  color: rgba(103,232,249,.78);
}

.nested-link::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
}

.nested-link.active::after {
  background: var(--sidebar-active-accent);
}

/* Badge / count bubble */
.sidebar-badge {
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-link .sidebar-badge {
  flex: 0 0 auto;
}

.sidebar-badge.danger {
  background: #e11d48;
  color: #fff;
}

/* Sidebar profile */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-top: 1px solid var(--sidebar-border);
  margin: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.045);
  overflow: hidden;
}

.sidebar-profile .profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-profile-text { overflow: hidden; flex: 1; }
.sidebar-profile-text strong { color: #fff; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-text small { color: var(--sidebar-text-muted); font-size: 11px; }

/* Sidebar footer */
.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 10px 12px 12px;
  flex-shrink: 0;
  background: rgba(0,0,0,.08);
}

/* ── 3b. Collapsed state (desktop icon-only) ─────────────────── */
body.sidebar-collapsed .portal-sidebar {
  width: var(--sidebar-collapsed-w);
}

body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-link span,
body.sidebar-collapsed .sidebar-caption,
body.sidebar-collapsed .sidebar-badge,
body.sidebar-collapsed .sidebar-profile-text,
body.sidebar-collapsed .sidebar-context > span:not(.sidebar-context-icon),
body.sidebar-collapsed .sidebar-parent small,
body.sidebar-collapsed .sidebar-parent .sidebar-chevron {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

body.sidebar-collapsed .sidebar-nav { padding-left: 9px; padding-right: 9px; }
body.sidebar-collapsed .side-group .collapse { display: none; }
body.sidebar-collapsed .sidebar-context {
  grid-template-columns: 1fr;
  padding: 9px;
}
body.sidebar-collapsed .sidebar-context-icon { width: 38px; }
body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 9px 0; margin: 1px 0; }
body.sidebar-collapsed .sidebar-link i { width: auto; }
body.sidebar-collapsed .nested-link {
  margin-left: 0;
  width: 100%;
}
body.sidebar-collapsed .nested-link::after,
body.sidebar-collapsed .sidebar-link.active::before { display: none; }
body.sidebar-collapsed .portal-main { margin-left: var(--sidebar-collapsed-w); }

/* ── 3c. Main content area ───────────────────────────────────── */
.portal-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition-md);
}

/* ── 3d. Topbar ─────────────────────────────────────────────── */
.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: var(--topbar-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}

.topbar-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--portal-text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.topbar-toggle:hover {
  background: var(--portal-surface-3);
  color: var(--portal-text);
}

.topbar-breadcrumb {
  flex: 1;
  min-width: 0;
}

.topbar-breadcrumb .breadcrumb {
  margin: 0;
  font-size: 12px;
}

.topbar-breadcrumb .breadcrumb-item a {
  color: var(--portal-text-muted);
  text-decoration: none;
}

.topbar-breadcrumb .breadcrumb-item a:hover { color: var(--portal-primary); }
.topbar-breadcrumb .breadcrumb-item.active { color: var(--portal-text); font-weight: 600; }
.topbar-breadcrumb .page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--portal-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-search {
  position: relative;
  width: 220px;
  flex-shrink: 0;
}

.topbar-search input {
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  padding: 6px 32px 6px 32px;
  font-size: 13px;
  width: 100%;
  color: var(--portal-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.topbar-search input:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px rgba(15,76,129,.10);
  background: var(--portal-surface);
}

.topbar-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--portal-text-muted);
  font-size: 13px;
  pointer-events: none;
}

.topbar-search kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  background: var(--portal-surface-3);
  border: 1px solid var(--portal-border);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--portal-text-muted);
  line-height: 1.5;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--portal-text-muted);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.topbar-icon-btn:hover {
  background: var(--portal-surface-2);
  color: var(--portal-text);
  border-color: var(--portal-primary);
}

.topbar-icon-btn .badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #e11d48;
  border-radius: 50%;
  border: 2px solid var(--portal-surface);
}

/* User chip */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--portal-border);
  background: var(--portal-surface);
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.user-chip:hover {
  background: var(--portal-surface-2);
  border-color: var(--portal-primary);
}

.user-chip .profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--portal-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-chip .user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--portal-text);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip .user-role {
  font-size: 11px;
  color: var(--portal-text-muted);
  display: block;
}

/* ── 3e. Page content ───────────────────────────────────────── */
.portal-content {
  flex: 1;
  padding: 24px;
  background: var(--portal-surface-2);
}

/* ── 4. Sidebar backdrop (mobile) ──────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;
  backdrop-filter: blur(2px);
}

/* ── 5. Cards ──────────────────────────────────────────────── */
.portal-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.portal-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--portal-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.portal-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--portal-text);
  margin: 0;
}

.portal-card-body { padding: 20px; }

/* ── 6. KPI Stat Cards ─────────────────────────────────────── */
.kpi-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

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

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.kpi-icon.blue   { background: rgba(14,165,233,.12); color: #0284c7; }
.kpi-icon.teal   { background: rgba(8,145,178,.12);  color: #0891b2; }
.kpi-icon.orange { background: rgba(234,88,12,.12);  color: #ea580c; }
.kpi-icon.green  { background: rgba(22,163,74,.12);  color: #16a34a; }
.kpi-icon.purple { background: rgba(124,58,237,.12); color: #7c3aed; }
.kpi-icon.red    { background: rgba(220,38,38,.12);  color: #dc2626; }

.kpi-data { flex: 1; min-width: 0; }
.kpi-label { font-size: 12px; color: var(--portal-text-muted); font-weight: 500; margin-bottom: 4px; }
.kpi-value { font-size: 24px; font-weight: 800; color: var(--portal-text); line-height: 1; margin-bottom: 2px; }
.kpi-sub   { font-size: 12px; color: var(--portal-text-muted); }

/* ── 7. Module Grid Cards ──────────────────────────────────── */
.module-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.module-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--portal-primary);
  transform: translateY(-2px);
}

.module-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--portal-primary-light);
  color: var(--portal-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.module-card:hover .module-card-icon {
  background: var(--portal-primary);
  color: #fff;
}

.module-card-info { flex: 1; min-width: 0; }
.module-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--portal-text);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.module-card-sub { font-size: 11.5px; color: var(--portal-text-muted); }

/* ── 8. Welcome hero ───────────────────────────────────────── */
.welcome-hero {
  background: linear-gradient(135deg, var(--portal-primary) 0%, #1e6db5 100%);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.welcome-hero::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

.welcome-hero::before {
  content: '';
  position: absolute;
  right: 60px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}

.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.2);
}

.welcome-heading {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.2;
}

.welcome-sub {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  margin: 0;
  max-width: 480px;
}

.welcome-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.welcome-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.welcome-meta-row span { color: rgba(255,255,255,.65); }
.welcome-meta-row strong { color: #fff; }

/* ── 9. Quick Actions panel ────────────────────────────────── */
.quick-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--portal-text);
  border-bottom: 1px solid var(--portal-border);
  transition: background var(--transition-fast);
}

.quick-action-item:last-child { border-bottom: 0; }
.quick-action-item:hover { background: var(--portal-surface-2); }

.quick-action-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.quick-action-label { font-size: 13.5px; font-weight: 600; flex: 1; }
.quick-action-arrow { color: var(--portal-text-muted); font-size: 13px; }

/* ── 10. Data table ────────────────────────────────────────── */
.portal-table-wrap {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.portal-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.portal-table thead th {
  background: var(--portal-surface-2);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--portal-text-muted);
  border-bottom: 1px solid var(--portal-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.portal-table thead th:hover { color: var(--portal-primary); }

.portal-table tbody tr {
  border-bottom: 1px solid var(--portal-border);
  transition: background var(--transition-fast);
}

.portal-table tbody tr:last-child { border-bottom: 0; }
.portal-table tbody tr:hover { background: var(--portal-surface-2); }

.portal-table tbody td {
  padding: 11px 14px;
  vertical-align: middle;
  color: var(--portal-text);
}

.portal-table.compact thead th { padding: 8px 12px; }
.portal-table.compact tbody td { padding: 8px 12px; }

/* ── 11. Status badges ─────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.success { background: rgba(22,163,74,.12);  color: #16a34a; }
.status-badge.warning { background: rgba(234,88,12,.12);  color: #ea580c; }
.status-badge.danger  { background: rgba(220,38,38,.12);  color: #dc2626; }
.status-badge.info    { background: rgba(14,165,233,.12); color: #0284c7; }
.status-badge.neutral { background: var(--portal-surface-3); color: var(--portal-text-muted); }
.status-badge.purple  { background: rgba(124,58,237,.12); color: #7c3aed; }

/* ── 12. Auth pages ────────────────────────────────────────── */
body.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(34,211,238,.16) 0, transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(37,99,235,.20) 0, transparent 32%),
    linear-gradient(135deg, #06111f 0%, #0a2541 50%, #020617 100%);
  overflow-x: hidden;
  padding: 24px;
}

body.auth-page::before,
body.auth-page::after {
  content: '';
  position: fixed;
  inset: auto;
  width: 38vmin;
  height: 38vmin;
  border: 1px solid rgba(125,211,252,.18);
  border-radius: 50%;
  pointer-events: none;
  opacity: .8;
  animation: authFloat 13s ease-in-out infinite;
}

body.auth-page::before {
  top: -12vmin;
  right: 9vw;
}

body.auth-page::after {
  left: -10vmin;
  bottom: -14vmin;
  animation-delay: -5s;
}

.auth-wrapper {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 440px);
  gap: 28px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.auth-showcase {
  position: relative;
  min-height: 520px;
  display: grid;
  align-content: center;
  gap: 26px;
  color: #ffffff;
  animation: authPanelIn .55s ease both;
}

.auth-logo-wrap {
  text-align: left;
  margin-bottom: 0;
}

.auth-logo-orb {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(14,165,233,.95), rgba(15,76,129,.92)),
    rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 44px rgba(14,165,233,.22);
  animation: authLogoPulse 3.8s ease-in-out infinite;
}

.auth-brand-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(125,211,252,.28);
  border-radius: 999px;
  background: rgba(2,6,23,.28);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auth-app-name {
  color: #fff;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 900;
  line-height: .98;
  margin: 14px 0 12px;
}

.auth-app-sub {
  max-width: 560px;
  color: rgba(226,232,240,.78);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.auth-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
}

.auth-signal {
  display: grid;
  gap: 3px;
  min-height: 112px;
  padding: 15px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  background: rgba(2,6,23,.36);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  transform: translateY(0);
  animation: authSignalIn .62s ease both;
}

.auth-signal:nth-child(2) { animation-delay: .08s; }
.auth-signal:nth-child(3) { animation-delay: .16s; }

.auth-signal i {
  color: #38bdf8;
  font-size: 19px;
}

.auth-signal strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
}

.auth-signal small {
  color: rgba(226,232,240,.66);
  font-size: 12px;
}

.auth-signal.active {
  border-color: rgba(56,189,248,.38);
  box-shadow: 0 0 0 1px rgba(56,189,248,.08), 0 20px 55px rgba(14,165,233,.16);
}

.auth-orbit {
  position: absolute;
  inset: 6% 0 auto auto;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid rgba(125,211,252,.18);
  opacity: .75;
  pointer-events: none;
  animation: authRotate 18s linear infinite;
}

.auth-orbit span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 28px #38bdf8;
}

.auth-orbit span:nth-child(1) { top: 18px; left: 44px; }
.auth-orbit span:nth-child(2) { right: 18px; top: 108px; }
.auth-orbit span:nth-child(3) { bottom: 34px; left: 92px; }

.auth-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.auth-lock-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(14,165,233,.12);
  color: var(--portal-primary);
  font-size: 18px;
}

.auth-card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(2,6,23,.34);
  overflow: hidden;
  backdrop-filter: blur(22px);
  animation: authCardIn .6s cubic-bezier(.2,.8,.2,1) both;
}

[data-bs-theme="dark"] .auth-card {
  background: rgba(5,5,5,.92);
  border-color: #202020;
}

.auth-card-body { padding: 34px; }

.auth-card-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--portal-text);
  margin: 0 0 4px;
}

.auth-card-sub {
  font-size: 13px;
  color: var(--portal-text-muted);
  margin: 0;
}

.auth-alert {
  border-radius: 10px;
  animation: authShake .46s ease both;
}

.auth-field {
  animation: authFieldIn .5s ease both;
}

.auth-field:nth-of-type(2) {
  animation-delay: .06s;
}

.auth-field .input-group {
  border: 1px solid var(--portal-border);
  border-radius: 10px;
  background: var(--portal-surface);
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-field .input-group:focus-within {
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 4px rgba(14,165,233,.15), 0 15px 34px rgba(15,23,42,.08);
  transform: translateY(-1px);
}

.auth-field .input-group-text,
.auth-field .form-control,
.auth-field .btn {
  border: 0 !important;
  min-height: 48px;
  background: transparent !important;
}

.auth-field .input-group-text {
  color: var(--portal-text-muted);
  padding-left: 15px;
  padding-right: 10px;
}

.auth-field .form-control {
  font-weight: 650;
}

.auth-field .btn {
  color: var(--portal-text-muted);
  border-left: 1px solid var(--portal-border) !important;
  border-radius: 0 !important;
}

.auth-field .btn:hover {
  color: var(--portal-primary);
}

.auth-field .btn.active {
  color: var(--portal-primary);
  transform: scale(.96);
}

.auth-field .input-group.is-active {
  border-color: rgba(14,165,233,.72);
}

.auth-field .input-group.is-valid-soft {
  border-color: rgba(34,197,94,.55);
}

.auth-field .input-group.is-invalid-soft {
  animation: authShake .42s ease;
  border-color: rgba(220,38,38,.58);
}

.auth-link {
  color: var(--portal-primary);
  font-size: 12.5px;
  font-weight: 750;
}

.auth-link:hover {
  color: var(--portal-primary-hover);
}

.auth-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--portal-text-muted);
  font-size: 13px;
}

.auth-form-row .form-check-label {
  font-size: 13px;
}

.auth-form-row .form-check-input {
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease;
}

.auth-form-row .form-check-input:checked {
  box-shadow: 0 0 0 4px rgba(14,165,233,.14);
  transform: scale(1.03);
}

.auth-session-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.auth-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--portal-border);
  border-radius: 10px;
  background: var(--portal-surface-2);
  color: var(--portal-text-muted);
  font-size: 12.5px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.auth-status i {
  color: var(--portal-primary);
}

.auth-status.ready {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
  color: #15803d;
}

[data-bs-theme="dark"] .auth-status.ready {
  color: #86efac;
}

.auth-status.warning {
  border-color: rgba(234,88,12,.36);
  background: rgba(234,88,12,.08);
  color: #c2410c;
}

[data-bs-theme="dark"] .auth-status.warning {
  color: #fdba74;
}

.auth-status.busy {
  border-color: rgba(14,165,233,.42);
  background: rgba(14,165,233,.10);
  color: var(--portal-primary);
  transform: translateY(-1px);
}

.auth-submit {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 10px !important;
  font-weight: 850;
  box-shadow: 0 15px 34px rgba(15,76,129,.24);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(15,76,129,.30);
}

.auth-submit:active {
  transform: translateY(0) scale(.99);
}

.auth-submit.is-loading {
  animation: authButtonGlow 1.1s ease-in-out infinite;
}

.auth-submit-pulse {
  animation: authShake .42s ease;
}

.auth-card-footer {
  border-top: 1px solid var(--portal-border);
  padding: 14px 18px;
  text-align: center;
  background: var(--portal-surface-2);
}

.auth-footer {
  text-align: center;
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

@keyframes authPanelIn {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes authCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes authFieldIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes authSignalIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes authFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, 18px, 0) scale(1.04); }
}

@keyframes authRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes authLogoPulse {
  0%, 100% { box-shadow: 0 18px 44px rgba(14,165,233,.22); }
  50% { box-shadow: 0 22px 58px rgba(14,165,233,.38); }
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  44% { transform: translateX(5px); }
  66% { transform: translateX(-3px); }
  88% { transform: translateX(3px); }
}

@keyframes authButtonGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.auth-pop-in {
  animation: authCardIn .28s ease both !important;
}

.auth-pop-out {
  animation: authFieldIn .18s ease reverse both !important;
}

@media (max-width: 900px) {
  .auth-wrapper {
    max-width: 460px;
    grid-template-columns: 1fr;
  }

  .auth-showcase {
    min-height: auto;
    text-align: center;
  }

  .auth-logo-wrap {
    text-align: center;
  }

  .auth-logo-orb {
    margin-left: auto;
    margin-right: auto;
  }

  .auth-signal-grid,
  .auth-orbit {
    display: none;
  }

  .auth-footer {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  body.auth-page {
    padding: 16px;
  }

  .auth-card-body {
    padding: 24px;
  }

  .auth-card-head {
    grid-template-columns: 1fr;
  }

  .auth-form-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-page::before,
  body.auth-page::after,
  .auth-showcase,
  .auth-card,
  .auth-field,
  .auth-signal,
  .auth-orbit,
  .auth-logo-orb,
  .auth-submit.is-loading,
  .auth-alert {
    animation: none !important;
  }

  .auth-field .input-group,
  .auth-submit,
  .auth-form-row .form-check-input,
  .auth-status {
    transition: none !important;
  }
}

/* ── 13. Stepper (password recovery) ───────────────────────── */
.auth-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}

.auth-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  position: relative;
}

.auth-step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--portal-border);
  z-index: 0;
}

.auth-step:last-child::after { display: none; }

.auth-step.done::after,
.auth-step.active::after { background: var(--portal-primary); }

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--portal-border);
  background: var(--portal-surface);
  color: var(--portal-text-muted);
  position: relative;
  z-index: 1;
  transition: all var(--transition-md);
}

.auth-step.done .step-circle {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
  color: #fff;
}

.auth-step.active .step-circle {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(15,76,129,.18);
}

.step-label {
  font-size: 11px;
  color: var(--portal-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.auth-step.active .step-label { color: var(--portal-primary); font-weight: 700; }
.auth-step.done .step-label   { color: var(--portal-text); }

/* ── 14. Module endpoint nav ───────────────────────────────── */
.endpoint-nav-list .endpoint-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  color: var(--portal-text);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.endpoint-nav-list .endpoint-btn:hover { background: var(--portal-surface-2); color: var(--portal-primary); }
.endpoint-nav-list .endpoint-btn.active { background: var(--portal-primary-light); color: var(--portal-primary); font-weight: 600; }
.endpoint-nav-list .endpoint-btn i { font-size: 14px; flex-shrink: 0; }
.endpoint-nav-list .endpoint-btn span { flex: 1; }

/* ── 15. Toolbar ───────────────────────────────────────────── */
.portal-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.portal-toolbar .toolbar-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.portal-toolbar .toolbar-search input {
  width: 100%;
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  min-height: 34px;
  padding: 6px 12px 6px 34px;
  font-size: 12.5px;
  background: var(--portal-surface-2);
  color: var(--portal-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.portal-toolbar .toolbar-search input:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px rgba(15,76,129,.10);
  background: var(--portal-surface);
}

.portal-toolbar .toolbar-search i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--portal-text-muted);
  font-size: 14px;
  pointer-events: none;
}

/* ── 16. Notifications ─────────────────────────────────────── */
.notification-item {
  display: flex;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--portal-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.notification-item:hover { background: var(--portal-surface-2); }
.notification-item.unread { background: var(--portal-primary-light); }
.notification-item.unread:hover { background: #dbeafe; }

[data-bs-theme="dark"] .notification-item.unread { background: rgba(56,189,248,.07); }
[data-bs-theme="dark"] .notification-item.unread:hover { background: rgba(56,189,248,.12); }

.notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.notification-content { flex: 1; min-width: 0; }
.notification-title { font-size: 13.5px; font-weight: 600; color: var(--portal-text); margin: 0 0 3px; }
.notification-body  { font-size: 12.5px; color: var(--portal-text-muted); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notification-time  { font-size: 11px; color: var(--portal-text-muted); margin-top: 4px; }

/* ── 17. Workflow pills (delivery) ─────────────────────────── */
.workflow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--portal-text-muted);
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  cursor: default;
  white-space: nowrap;
  transition: all var(--transition-fast);
  position: relative;
}

.workflow-step:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.workflow-step:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.workflow-step + .workflow-step { border-left: 0; }

.workflow-step.done    { background: rgba(22,163,74,.10); color: #16a34a; border-color: rgba(22,163,74,.25); }
.workflow-step.active  { background: var(--portal-primary); color: #fff; border-color: var(--portal-primary); }
.workflow-step.warning { background: rgba(234,88,12,.10); color: #ea580c; border-color: rgba(234,88,12,.25); }
.workflow-step.danger  { background: rgba(220,38,38,.10); color: #dc2626; border-color: rgba(220,38,38,.25); }

/* ── 18. Empty state ───────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--portal-text-muted);
}

.empty-state i { font-size: 48px; opacity: .35; margin-bottom: 16px; }
.empty-state h4 { font-size: 16px; font-weight: 700; color: var(--portal-text); margin: 0 0 6px; }
.empty-state p  { font-size: 13.5px; margin: 0; max-width: 340px; }

/* ── 19. Loading spinner ───────────────────────────────────── */
.portal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  text-align: center;
  color: var(--portal-text-muted);
}

.portal-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--portal-border);
  border-top-color: var(--portal-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

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

/* ── 20. SweetAlert2 theme overrides ───────────────────────── */
.swal2-popup { border-radius: var(--radius-lg) !important; }
.swal2-title { font-size: 18px !important; font-weight: 800 !important; }
.swal2-confirm { border-radius: var(--radius-sm) !important; }
.swal2-cancel  { border-radius: var(--radius-sm) !important; }

/* ── 21. Form controls enhancement ────────────────────────── */
.form-control, .form-select {
  font-size: 13.5px;
  border-color: var(--portal-border);
  border-radius: var(--radius-sm);
}

.form-control:focus, .form-select:focus {
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px rgba(15,76,129,.10);
}

.form-label { font-size: 12.5px; font-weight: 600; color: var(--portal-text-muted); margin-bottom: 5px; }
.input-group-text { font-size: 14px; background: var(--portal-surface-2); border-color: var(--portal-border); }

/* Bootstrap btn overrides */
.btn { border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; }
.btn-primary { background: var(--portal-primary); border-color: var(--portal-primary); }
.btn-primary:hover { background: var(--portal-primary-hover); border-color: var(--portal-primary-hover); }
.btn-outline-primary { color: var(--portal-primary); border-color: var(--portal-primary); }
.btn-outline-primary:hover { background: var(--portal-primary); border-color: var(--portal-primary); }

/* ── 22. Responsive / Mobile ───────────────────────────────── */
@media (max-width: 991.98px) {
  .portal-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: var(--shadow-lg);
  }

  .portal-main {
    margin-left: 0 !important;
  }

  body.sidebar-open .portal-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }

  .portal-content { padding: 16px; }
  .welcome-hero { padding: 24px; }
  .welcome-heading { font-size: 20px; }
  .topbar-search { display: none; }
}

@media (max-width: 575.98px) {
  .user-chip .user-role { display: none; }
  .portal-content { padding: 12px; }
}

/* ── 23. Print ─────────────────────────────────────────────── */
@media print {
  .portal-sidebar,
  .portal-topbar,
  .portal-toolbar,
  .sidebar-backdrop { display: none !important; }
  .portal-main { margin: 0 !important; }
  .portal-content { padding: 0 !important; }
  .portal-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ── 24. Bootstrap modal polish ────────────────────────────── */
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--portal-border); padding: 18px 24px; }
.modal-body   { padding: 20px 24px; }
.modal-footer { border-top: 1px solid var(--portal-border); padding: 14px 24px; }
.modal-title  { font-size: 16px; font-weight: 800; }

/* ── 25. Dark mode Bootstrap component overrides ────────────── */
[data-bs-theme="dark"] .modal-content { background: var(--portal-surface); }
[data-bs-theme="dark"] .card { background: var(--portal-surface); border-color: var(--portal-border); }
[data-bs-theme="dark"] .card-header { background: var(--portal-surface-2) !important; border-color: var(--portal-border); }
[data-bs-theme="dark"] .list-group-item { background: var(--portal-surface); border-color: var(--portal-border); color: var(--portal-text); }
[data-bs-theme="dark"] .table { color: var(--portal-text); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { background: transparent; border-color: var(--portal-border); }
[data-bs-theme="dark"] .dropdown-menu { background: var(--portal-surface); border-color: var(--portal-border); }
[data-bs-theme="dark"] .dropdown-item { color: var(--portal-text); }
[data-bs-theme="dark"] .dropdown-item:hover { background: var(--portal-surface-2); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: var(--portal-surface-2); border-color: var(--portal-border); color: var(--portal-text); }
[data-bs-theme="dark"] .input-group-text { background: var(--portal-surface-3); border-color: var(--portal-border); color: var(--portal-text-muted); }
[data-bs-theme="dark"] .auth-card { background: var(--portal-surface); }

/* Session countdown display */
.portal-session-countdown {
  font-size: 42px;
  font-weight: 800;
  color: var(--portal-primary);
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin: 8px 0;
}

/* ── 26. Loading Queue & Fleet Styles ─────────────────────────── */
.queue-create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.queue-form {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.queue-form header {
  border-bottom: 1px solid var(--portal-border);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.queue-form header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--portal-text);
  margin: 0;
}

.queue-combo-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-combo {
  display: flex;
  align-items: center;
  position: relative;
}

.queue-combo input.form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.queue-combo-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid var(--portal-border);
  border-left: 0;
  background: var(--portal-surface-2);
}

.queue-combo-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 1000;
}

.queue-combo-menu.show {
  display: flex;
  flex-direction: column;
}

.queue-combo-menu button {
  padding: 10px 14px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--portal-border);
  background: transparent;
  color: var(--portal-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-fast);
}

.queue-combo-menu button:last-child {
  border-bottom: 0;
}

.queue-combo-menu button:hover {
  background: var(--portal-surface-2);
  color: var(--portal-primary);
}

.queue-combo-empty {
  padding: 14px;
  text-align: center;
  color: var(--portal-text-muted);
  font-size: 13px;
}

.queue-driver-hint {
  font-size: 11.5px;
  color: var(--portal-text-muted);
}

.queue-token-grid, .queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.queue-card, .station-card, .display-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.queue-card:hover, .station-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.queue-header, .station-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--portal-border);
  padding-bottom: 10px;
}

.queue-token, .display-token {
  font-size: 22px;
  font-weight: 800;
  color: var(--portal-primary);
  font-variant-numeric: tabular-nums;
}

.station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.display-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.queue-filter-row,
.queue-report-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.queue-filter-row .form-label,
.queue-report-toolbar .form-label {
  min-width: 180px;
  margin-bottom: 0;
  color: var(--portal-text-muted);
  font-size: 12px;
  font-weight: 750;
}

.queue-group {
  margin-bottom: 18px;
}

.queue-group > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.queue-group > header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--portal-text);
  font-size: 16px;
  font-weight: 800;
}

.queue-group > header strong {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  background: var(--portal-surface);
  color: var(--portal-primary);
  font-size: 13px;
}

.queue-token-card {
  min-width: 0;
  border: 1px solid var(--portal-border);
  border-left: 4px solid var(--portal-text-muted);
  border-radius: var(--radius-sm);
  background: var(--portal-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.queue-token-card.waiting { border-left-color: #d97706; }
.queue-token-card.loading { border-left-color: #1769e0; }
.queue-token-card.done { border-left-color: #168760; }
.queue-token-card.cancelled { border-left-color: #be123c; }

.queue-token-card > header,
.station-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--portal-border);
}

.queue-token-no {
  min-width: 0;
  overflow: hidden;
  color: var(--portal-text);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-status-pill,
.station-card > header strong {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.queue-status-pill.waiting { background: #fff7ed; color: #9a3412; }
.queue-status-pill.loading { background: #eaf2fd; color: #0f4c81; }
.queue-status-pill.done { background: #e7f7f0; color: #0f7a55; }
.queue-status-pill.cancelled { background: #fff1f2; color: #be123c; }
.queue-status-pill.muted { background: var(--portal-surface-2); color: var(--portal-text-muted); }

.queue-token-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--portal-border);
}

.queue-token-card dl > div {
  min-width: 0;
  padding: 10px 12px;
  background: var(--portal-surface);
}

.queue-token-card dt,
.queue-token-card dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-token-card dt {
  color: var(--portal-text-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.queue-token-card dd {
  margin: 2px 0 0;
  color: var(--portal-text);
  font-size: 12.5px;
  font-weight: 650;
}

.queue-note {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--portal-border);
  color: var(--portal-danger);
  font-size: 12px;
}

.queue-token-card > footer,
.station-card > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--portal-border);
  background: var(--portal-surface-2);
}

.queue-token-card .btn,
.station-card .btn,
.queue-form .btn,
.queue-report-toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.queue-empty {
  grid-column: 1 / -1;
  min-height: 160px;
  border: 1px dashed var(--portal-border);
  border-radius: var(--radius-sm);
  background: var(--portal-surface);
}

.station-card.free { border-left: 4px solid #168760; }
.station-card.busy { border-left: 4px solid #1769e0; }
.station-card > header span {
  color: var(--portal-text);
  font-weight: 850;
}
.station-card.free > header strong { background: #e7f7f0; color: #0f7a55; }
.station-card.busy > header strong { background: #eaf2fd; color: #0f4c81; }

.station-free {
  display: grid;
  place-items: center;
  min-height: 176px;
  gap: 8px;
  color: var(--portal-success);
  text-align: center;
}

.station-free i {
  font-size: 32px;
}

.station-active-token {
  display: grid;
  gap: 12px;
}

.station-active-token > .queue-token-no {
  padding: 2px 0;
  color: var(--portal-primary);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.station-active-token dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  background: var(--portal-border);
}

.station-active-token dl > div {
  min-width: 0;
  padding: 10px;
  background: var(--portal-surface-2);
}

.station-active-token dt,
.station-active-token dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-active-token dt {
  color: var(--portal-text-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.station-active-token dd {
  margin: 2px 0 0;
  color: var(--portal-text);
  font-size: 12.5px;
  font-weight: 650;
}

.queue-display-board {
  display: grid;
  gap: 18px;
  min-height: 520px;
  padding: clamp(18px, 3vw, 32px);
  border-radius: var(--radius-sm);
  background: #0b1220;
  color: #f8fafc;
}

.queue-display-board > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: 14px;
}

.queue-display-board > header span,
.queue-display-board > header strong {
  color: #9fb5d1;
  font-size: 13px;
  font-weight: 750;
}

.queue-display-board h2 {
  margin: 0;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: 0;
}

.display-stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.display-stations article {
  display: grid;
  gap: 8px;
  min-height: 180px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  text-align: center;
}

.display-stations article.loading {
  background: rgba(23,105,224,.18);
  border-color: rgba(96,165,250,.45);
}

.display-stations article.done {
  background: rgba(22,135,96,.16);
  border-color: rgba(74,222,128,.34);
}

.display-stations > em {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  color: #b6c5da;
  font-style: normal;
}

.display-stations span,
.display-stations small {
  min-width: 0;
  overflow: hidden;
  color: #b6c5da;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.display-stations strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 950;
}

.display-next {
  display: grid;
  gap: 10px;
}

.display-next .section-kicker {
  color: #9fb5d1;
}

.display-next > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.display-next strong,
.display-next em {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.10);
  color: #f8fafc;
  font-style: normal;
}

.queue-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.queue-report-metrics article {
  padding: 12px;
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  background: var(--portal-surface);
}

.queue-report-metrics span,
.queue-report-metrics strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-report-metrics span {
  color: var(--portal-text-muted);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.queue-report-metrics strong {
  margin-top: 3px;
  color: var(--portal-text);
  font-size: 22px;
  font-weight: 900;
}

[data-bs-theme="dark"] .queue-token-card,
[data-bs-theme="dark"] .queue-token-card dl > div,
[data-bs-theme="dark"] .queue-form,
[data-bs-theme="dark"] .station-card,
[data-bs-theme="dark"] .queue-report-metrics article,
[data-bs-theme="dark"] .queue-empty {
  background: #182235;
  border-color: #2b3954;
}

[data-bs-theme="dark"] .queue-token-card dl {
  background: #2b3954;
}

[data-bs-theme="dark"] .queue-token-card > footer,
[data-bs-theme="dark"] .station-card > footer {
  background: #141c2b;
  border-color: #2b3954;
}

[data-bs-theme="dark"] .station-active-token dl,
[data-bs-theme="dark"] .station-active-token dl > div {
  border-color: #2b3954;
}

[data-bs-theme="dark"] .station-active-token dl {
  background: #2b3954;
}

[data-bs-theme="dark"] .station-active-token dl > div {
  background: #141c2b;
}

@media (max-width: 767.98px) {
  .queue-token-card dl,
  .station-active-token dl,
  .queue-report-metrics {
    grid-template-columns: 1fr;
  }

  .queue-display-board > header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── 27. Flow Meter Reading Styles ────────────────────────────── */
.flowmeter-panel {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
  overflow: hidden;
}

.flowmeter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--portal-surface-2);
  border-bottom: 1px solid var(--portal-border);
  flex-wrap: wrap;
}

.flowmeter-meter-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flowmeter-meter-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--portal-primary-light);
  color: var(--portal-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.flowmeter-start-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.flowmeter-start-label input {
  width: 140px;
}

.flowmeter-table {
  font-size: 13px;
}

.flowmeter-table thead th {
  background: var(--portal-surface-2);
  border-bottom: 1px solid var(--portal-border);
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--portal-text-muted);
}

.flowmeter-table tfoot td {
  background: var(--portal-surface-2);
  font-weight: 700;
  padding: 12px;
  border-top: 2px solid var(--portal-border);
}

.flowmeter-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--portal-border);
  background: var(--portal-surface);
}

.flowmeter-summary {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.flowmeter-summary-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--portal-border);
}

.flowmeter-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.flowmeter-kpi-grid > div {
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flowmeter-kpi-grid > div span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--portal-text-muted);
  letter-spacing: 0.04em;
}

.flowmeter-kpi-grid > div strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--portal-text);
}

.flowmeter-kpi-grid .flowmeter-cash {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.3);
}

.flowmeter-kpi-grid .flowmeter-cash strong {
  color: #16a34a;
}

.flowmeter-customer-summary {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
}

.flowmeter-customer-summary header {
  padding: 16px 20px;
  background: var(--portal-surface-2);
  border-bottom: 1px solid var(--portal-border);
}

.flowmeter-customer-summary header h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.flowmeter-customer-summary header small {
  color: var(--portal-text-muted);
  font-size: 12px;
}

/* ── 28. Customer & Vendor Workspaces ─────────────────────────── */
.customer-profile-grid, .vendor-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.customer-profile-grid.pro .customer-panel.wide {
  grid-column: span 2;
}

@media (max-width: 991.98px) {
  .customer-profile-grid.pro .customer-panel.wide {
    grid-column: span 1;
  }
}

.customer-panel, .vendor-panel {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.customer-panel .card-body, .vendor-panel .card-body {
  padding: 18px 20px;
}

.customer-icon, .vendor-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.customer-avatar, .vendor-avatar, .hr-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--portal-primary);
  color: #ffffff;
}

.hr-avatar.large {
  width: 54px;
  height: 54px;
  font-size: 20px;
}

.customer-detail-list, .vendor-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.customer-detail-list .list-group-item, .vendor-detail-list .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--portal-border);
  background: transparent;
}

.customer-detail-list .list-group-item:last-child, .vendor-detail-list .list-group-item:last-child {
  border-bottom: 0;
}

.customer-detail-list dt, .vendor-detail-list dt {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--portal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.customer-detail-list dd, .vendor-detail-list dd {
  font-size: 13px;
  font-weight: 600;
  color: var(--portal-text);
  margin: 0;
  text-align: right;
  max-width: 60%;
}

.customer-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.customer-field-item {
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.customer-field-item span {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--portal-text-muted);
  letter-spacing: 0.04em;
}

.customer-field-item strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--portal-text);
  word-break: break-word;
}

.customer-health-card {
  border-radius: var(--radius-sm);
}

.customer-kpi-grid, .hr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.customer-module-modern,
.project-workspace,
.transactions-workspace,
.customer-report-workspace {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

.customer-toolbar,
.customer-profile-head,
.project-toolbar,
.transactions-toolbar,
.customer-report-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(22,69,111,.055), rgba(14,143,126,.045)),
    #fff;
}

.customer-toolbar h3,
.customer-profile-head h3,
.project-toolbar h3,
.transactions-toolbar h3,
.customer-report-toolbar h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0 4px;
  color: #10233d;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
}

.customer-toolbar p,
.project-toolbar p,
.transactions-toolbar p,
.customer-report-toolbar p {
  margin: 0;
  max-width: 760px;
  color: var(--portal-text-muted) !important;
  font-size: 12.5px;
}

.customer-toolbar-side,
.customer-toolbar-actions,
.project-toolbar-actions,
.transactions-toolbar-actions,
.customer-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-toolbar-actions .btn,
.project-toolbar-actions .btn,
.transactions-toolbar-actions .btn,
.customer-report-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 750;
}

.customer-health-card {
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-health-card > div > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.customer-health-card span,
.customer-health-card small,
.customer-filter-summary span,
.customer-filter-summary small {
  color: var(--portal-text-muted);
  font-size: 11px;
  font-weight: 750;
}

.customer-health-card span,
.customer-filter-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.customer-health-card strong {
  color: #0f7a55;
  font-size: 18px;
  font-weight: 850;
}

.customer-filter-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #fff;
}

.customer-filter-summary strong {
  margin-left: auto;
  color: #10233d;
  font-size: 16px;
  font-weight: 850;
}

.customer-kpi-grid,
.project-kpi-grid,
.transactions-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 0;
}

.customer-kpi-grid > .col {
  width: auto;
  padding: 0;
}

.customer-kpi-grid .hr-kpi,
.customer-kpi-grid .customer-kpi,
.project-kpi-grid .hr-kpi,
.transactions-kpi-grid .hr-kpi {
  min-height: 76px;
  padding: 13px 14px;
  background: #fff;
  border-color: #dbe5f1;
}

.customer-kpi {
  border: 1px solid #dbe5f1 !important;
  border-radius: 8px;
  background: #fff;
  box-shadow: none !important;
}

.customer-kpi .card-body {
  min-height: 76px;
  padding: 13px 14px;
}

.customer-kpi .customer-icon {
  flex: 0 0 auto;
}

.customer-kpi strong,
.customer-kpi span {
  min-width: 0;
}

.customer-table-wrap,
.project-table-wrap,
.transactions-table-wrap {
  overflow: auto;
  margin: 0;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: #fff;
}

.customer-table,
.project-table,
.transactions-table {
  min-width: 980px;
}

.customer-table .customer-cell {
  min-width: 0;
}

.customer-table tbody tr,
.project-table tbody tr,
.transactions-table tbody tr {
  cursor: pointer;
}

.customer-contact,
.customer-inline-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-inline-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-row-tags .badge {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-pager,
.project-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: #fff;
  color: var(--portal-text-muted);
  font-size: 12px;
}

.customer-profile-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.customer-cell.profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.customer-avatar.large {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.customer-cell.profile > span:last-child {
  min-width: 0;
}

.customer-cell.profile h3 {
  overflow: hidden;
  margin: 0 0 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-cell.profile small {
  display: block;
  overflow: hidden;
  color: var(--portal-text-muted);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-hero-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-style: normal;
}

.customer-profile-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-profile-summary article {
  min-width: 130px;
  padding: 9px 12px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #f8fafc;
}

.customer-profile-summary span {
  display: block;
  color: var(--portal-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.customer-profile-summary strong {
  display: block;
  margin-top: 2px;
  color: #10233d;
  font-size: 15px;
  font-weight: 850;
}

.customer-action-panel {
  padding: 14px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: #fff;
}

.customer-action-panel header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.customer-action-panel h4 {
  margin: 2px 0 0;
  color: #10233d;
  font-size: 16px;
  font-weight: 850;
}

.customer-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.customer-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #f8fafc;
  color: #10233d;
  text-align: left;
}

.customer-action-card:hover {
  border-color: var(--portal-primary);
  background: #eef6ff;
}

.customer-action-card span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(22,69,111,.1);
  color: var(--portal-primary);
}

.customer-action-card strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-action-card i {
  font-size: 16px;
}

.customer-profile-grid.pro {
  gap: 12px;
}

.customer-panel {
  border-color: #dbe5f1;
  box-shadow: none;
}

.customer-panel .card-body {
  padding: 14px;
}

.customer-panel h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #10233d;
  font-size: 14px;
  font-weight: 850;
}

.customer-icon {
  background: rgba(22,69,111,.1);
  color: var(--portal-primary);
}

.customer-detail-list .list-group-item {
  gap: 12px;
  padding: 8px 0;
}

.customer-detail-list dt {
  min-width: 42%;
  font-size: 10.5px;
  font-weight: 800;
}

.customer-detail-list dd {
  max-width: 58%;
  font-weight: 750;
}

.project-remarks,
.transaction-title strong,
.transaction-title small {
  display: block;
  overflow: hidden;
  max-width: 360px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-date,
.transaction-title {
  display: grid;
  gap: 2px;
}

.transaction-date small,
.transaction-title small {
  color: var(--portal-text-muted);
  font-size: 11px;
}

.transaction-reference {
  display: inline-flex;
  max-width: 220px;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-reference.debit {
  background: #fff7ed;
  color: #9a3412;
}

.transaction-reference.credit {
  background: #ecfdf3;
  color: #047857;
}

.selected-customer-return {
  margin-bottom: 10px;
}

.selected-customer-return .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--portal-border);
  font-weight: 750;
}

.customer-report-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
}

.statement-report-workspace .customer-report-actions {
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(130px, 150px)) repeat(3, auto);
}

.customer-generic-view .module-summary-strip {
  margin: 0;
}

.customer-generic-view .module-summary-strip > article,
.module-summary-strip > article {
  justify-content: flex-start;
  min-width: 0;
}

.customer-generic-view .module-summary-strip > article > div,
.module-summary-strip > article > div {
  min-width: 0;
}

.customer-generic-view .module-summary-strip small,
.module-summary-strip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-generic-view .module-summary-strip strong,
.module-summary-strip strong {
  display: block;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-generic-view .module-table-responsive,
.customer-generic-view .record-card-grid {
  margin: 0;
}

.customer-generic-view .module-table-responsive {
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: #fff;
}

.customer-generic-view .generic-table-pager {
  margin-top: 0 !important;
  padding: 10px 12px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: #fff;
}

.customer-generic-view .record-card-grid .card {
  border: 1px solid #dbe5f1;
  box-shadow: none;
}

/* ── 29. HR People Operations & Profiles ──────────────────────── */
.hr-workspace, .customer-workspace {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.hr-toolbar, .customer-toolbar {
  padding: 18px 24px;
  border-bottom: 1px solid var(--portal-border);
  background: var(--portal-surface);
}

.hr-toolbar-actions, .customer-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hr-kpi {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-xs);
}

.hr-kpi i {
  font-size: 20px;
  margin-bottom: 4px;
}

.hr-kpi.blue i   { color: #0284c7; }
.hr-kpi.green i  { color: #16a34a; }
.hr-kpi.orange i { color: #ea580c; }
.hr-kpi.cyan i   { color: #0891b2; }
.hr-kpi.purple i { color: #7c3aed; }

.hr-kpi span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--portal-text-muted);
  letter-spacing: 0.04em;
}

.hr-kpi strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--portal-text);
}

.hr-employee-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.hr-org-cell strong, .hr-contact-cell span {
  display: block;
  font-size: 12.5px;
}

.hr-contact-cell span {
  color: var(--portal-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hr-profile {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-xs);
}

.hr-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--portal-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hr-profile-person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hr-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.hr-panel {
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.hr-panel h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--portal-text-muted);
  border-bottom: 1px solid var(--portal-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.hr-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.hr-detail-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.hr-detail-list dt {
  color: var(--portal-text-muted);
  font-weight: 500;
  margin: 0;
}

.hr-detail-list dd {
  font-weight: 700;
  color: var(--portal-text);
  margin: 0;
}

/* ── 30. Documents & Google Drive Store ────────────────────────── */
.document-card, .hr-document-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.document-card:hover, .hr-document-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--portal-primary);
}

.document-provider-icon, .hr-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  background: var(--portal-surface-2);
  color: var(--portal-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.document-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.document-card-main strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--portal-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-card-main small {
  font-size: 12px;
  color: var(--portal-text-muted);
}

.documents-table-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* ── 31. Tickets & Complaints Split Workspace ─────────────────── */
.ticket-workspace {
  display: grid;
  grid-template-columns: 340px 1fr;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: calc(100vh - var(--topbar-h) - 60px);
  min-height: 540px;
}

@media (max-width: 991.98px) {
  .ticket-workspace {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.ticket-list {
  border-right: 1px solid var(--portal-border);
  background: var(--portal-surface-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ticket-card {
  padding: 14px 16px;
  border-bottom: 1px solid var(--portal-border);
  background: var(--portal-surface);
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-card:hover {
  background: var(--portal-surface-2);
}

.ticket-card.active {
  background: var(--portal-primary-light);
  border-left: 3px solid var(--portal-primary);
}

.ticket-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--portal-surface);
}

.ticket-chat-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--portal-border);
  background: var(--portal-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ticket-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticket-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.ticket-message.incoming {
  align-self: flex-start;
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  border-bottom-left-radius: var(--radius-xs);
}

.ticket-message.outgoing {
  align-self: flex-end;
  background: var(--portal-primary);
  color: #ffffff;
  border-bottom-right-radius: var(--radius-xs);
}

.ticket-composer {
  padding: 14px 20px;
  border-top: 1px solid var(--portal-border);
  background: var(--portal-surface);
}

/* ── 32. Table Sort Buttons & Sticky Actions ──────────────────── */
.table-sort-button {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: inherit;
  letter-spacing: inherit;
}

.table-sort-button:hover {
  color: var(--portal-primary);
}

.table-sort-button i {
  font-size: 12px;
  opacity: 0.65;
}

.sticky-action {
  position: sticky;
  right: 0;
  background: inherit;
  z-index: 5;
}

/* Professional workspace refinements */
:root {
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --portal-surface-2: #f4f6f9;
  --portal-surface-3: #e9edf3;
  --portal-primary: #16456f;
  --portal-primary-hover: #0f3558;
  --portal-accent: #0e8f7e;
}

body.portal-body {
  background:
    linear-gradient(180deg, #f8fafc 0%, var(--portal-surface-2) 280px),
    var(--portal-surface-2);
}

.portal-content {
  padding: 14px 16px 20px;
}

.portal-card,
.kpi-card,
.module-card,
.queue-form,
.queue-card,
.station-card,
.display-card,
.flowmeter-panel,
.flowmeter-summary,
.customer-panel,
.vendor-panel,
.hr-workspace,
.customer-workspace,
.hr-profile,
.hr-kpi,
.document-card,
.hr-document-card {
  border-radius: 8px;
  box-shadow: none;
}

.user-chip,
.dropdown-menu,
.status-badge,
.sidebar-badge,
.badge,
.form-control,
.form-select,
.btn,
.swal2-popup,
.modal-content {
  border-radius: 8px !important;
}

.portal-card-header {
  min-height: 46px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.9));
}

.portal-card-title {
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.dashboard-commandbar,
.module-commandbar {
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.module-commandbar.mb-4 {
  margin-bottom: 12px !important;
}

.module-commandbar .kpi-icon {
  width: 42px !important;
  height: 42px !important;
  font-size: 18px !important;
}

.module-commandbar h1 {
  font-size: 21px;
  line-height: 1.15;
}

.module-commandbar p {
  font-size: 12.5px !important;
}

.module-commandbar #moduleHealthStrip .badge {
  padding: 5px 9px !important;
  font-size: 11px !important;
}

.dashboard-commandbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.dashboard-commandbar > div:first-child,
.module-hero-main {
  padding: 14px 18px;
}

.dashboard-commandbar .welcome-badge,
.module-commandbar .badge {
  border-radius: 6px;
}

.welcome-badge {
  background: var(--portal-primary-light);
  color: var(--portal-primary);
  border: 1px solid rgba(22, 69, 111, .16);
  margin-bottom: 10px;
}

.welcome-heading {
  color: var(--portal-text);
  font-size: 23px;
}

.welcome-sub {
  color: var(--portal-text-muted);
  max-width: 720px;
}

.welcome-meta {
  border: 0;
  border-left: 1px solid var(--portal-border);
  border-radius: 0;
  background: var(--portal-surface-2);
  min-width: 0;
  justify-content: center;
  padding: 18px 22px;
}

.welcome-meta-row {
  gap: 18px;
}

.welcome-meta-row span {
  color: var(--portal-text-muted);
}

.welcome-meta-row strong {
  color: var(--portal-text);
  text-align: right;
}

.welcome-hero::before,
.welcome-hero::after {
  display: none;
}

.dashboard-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

.dashboard-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: calc(var(--topbar-h) + 18px);
}

.dashboard-aside .portal-card {
  margin-bottom: 0 !important;
}

.module-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.module-card {
  min-height: 72px;
  padding: 13px 14px;
  border-color: #d8dee8;
}

.module-card:hover {
  box-shadow: 0 8px 22px rgba(15, 35, 60, .08);
  transform: translateY(-1px);
}

.module-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  font-size: 17px;
}

.module-card-open {
  color: var(--portal-text-muted);
  font-size: 13px;
}

.quick-action-item {
  min-height: 50px;
}

.module-workbench {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

body.module-rail-collapsed .module-workbench {
  grid-template-columns: minmax(0, 1fr);
}

body.module-rail-collapsed .module-rail {
  display: none !important;
}

.module-rail {
  min-width: 0;
}

.module-rail-panel {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  overflow: hidden;
}

.module-rail-head {
  flex-wrap: nowrap;
}

.module-rail-toggle,
.module-rail-open {
  width: 34px;
  height: 34px;
  padding: 0 !important;
}

.module-rail-open {
  width: auto;
  min-width: 34px;
  padding: 0 9px !important;
}

.module-stage {
  min-width: 0;
}

.module-data-card {
  overflow: hidden;
}

.module-quick-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--portal-surface-2);
  border-top: 1px solid var(--portal-border);
  overflow-x: auto;
}

.module-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  color: var(--portal-text);
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.module-quick-pill:hover,
.module-quick-pill.active {
  background: var(--portal-primary);
  color: #ffffff;
  border-color: var(--portal-primary);
}

.endpoint-btn {
  border-radius: 6px;
  margin: 1px 7px;
  width: calc(100% - 16px);
}

.module-summary-strip .card {
  border-color: var(--portal-border);
  border-radius: 8px;
  box-shadow: none;
}

.module-summary-strip .card-body {
  padding: 13px 15px;
}

.module-table-responsive {
  border-top: 1px solid var(--portal-border);
}

.module-generic-table thead th {
  background: #f7f9fc;
  color: #526176;
  font-size: 11px;
}

.module-generic-table tbody td {
  font-size: 12.5px;
}

.generic-table-pager {
  padding: 0 10px 10px;
  color: var(--portal-text-muted);
  font-size: 12px;
}

@media (max-width: 1199.98px) {
  .module-workbench {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .dashboard-commandbar,
  .dashboard-workbench {
    grid-template-columns: 1fr;
  }

  .dashboard-aside {
    position: static;
  }

  .welcome-meta {
    border-left: 0;
    border-top: 1px solid var(--portal-border);
  }
}

@media (max-width: 575.98px) {
  .portal-content {
    padding: 12px;
  }

  .dashboard-commandbar > div:first-child,
  .module-hero-main {
    padding: 18px;
  }

  .module-directory-grid {
    grid-template-columns: 1fr;
  }
}

/* Delivery premium workspace */
.delivery-module-view,
.flowmeter-workspace,
.assignment-workspace,
.daily-sheet-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.delivery-module-hero,
.assignment-hero,
.portal-report-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(20, 43, 70, .05);
}

.delivery-module-hero h3,
.assignment-hero h3,
.portal-report-toolbar h3,
.flowmeter-title-block h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0 4px;
  color: var(--portal-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.delivery-module-hero p,
.assignment-hero p,
.portal-report-toolbar p,
.flowmeter-title-block p {
  margin: 0;
  max-width: 760px;
  color: var(--portal-text-muted);
  font-size: 12.5px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.delivery-module-actions,
.flowmeter-actions,
.report-actions,
.assignment-tabs,
.assignment-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.delivery-module-actions .btn,
.flowmeter-actions .btn,
.report-actions .btn,
.assignment-tabs .btn,
.assignment-filters .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 700;
}

.delivery-module-stats,
.module-summary-strip,
.assignment-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.delivery-module-stats > div,
.module-summary-strip > article,
.assignment-kpis > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(20, 43, 70, .04);
}

.delivery-module-stats span,
.assignment-kpis small,
.module-summary-strip small {
  display: block;
  color: var(--portal-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.delivery-module-stats strong,
.assignment-kpis strong,
.module-summary-strip strong {
  color: var(--portal-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.module-summary-strip > article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.module-summary-strip > article > span.blue { background: rgba(14,165,233,.12); color: #0284c7; }
.module-summary-strip > article > span.green { background: rgba(22,163,74,.12); color: #16a34a; }
.module-summary-strip > article > span.orange { background: rgba(234,88,12,.12); color: #ea580c; }
.module-summary-strip > article > span.purple { background: rgba(124,58,237,.12); color: #7c3aed; }

.delivery-filter-bar,
.assignment-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto minmax(210px, .8fr);
  align-items: end;
  gap: 8px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
}

.delivery-filter-bar label,
.flowmeter-summary-inputs label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--portal-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.delivery-filter-bar > div {
  display: grid;
  gap: 3px;
  align-self: stretch;
  padding: 6px 9px;
  background: var(--portal-surface-2);
  border: 1px solid var(--portal-border);
  border-radius: 8px;
}

.delivery-filter-bar > div span {
  color: var(--portal-text-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.delivery-filter-bar > div strong {
  color: var(--portal-text);
  font-size: 12px;
  font-weight: 800;
}

.delivery-table-shell,
.daily-sheet-preview,
.document-frame-wrap {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
}

.enterprise-table {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #f8fafc;
  --bs-table-hover-bg: #eef6ff;
  margin: 0;
  color: var(--portal-text);
  font-size: 12.5px;
}

.enterprise-table thead th {
  padding: 8px 10px;
  background: #f3f6fa;
  border-bottom: 1px solid #d7dee9;
  color: #536176;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.enterprise-table tbody td {
  padding: 8px 10px;
  border-color: #e2e8f0;
  vertical-align: middle;
}

.enterprise-table tbody tr {
  transition: background var(--transition-fast);
}

.enterprise-table .table-sort-button {
  color: inherit;
}

.enterprise-delivery-table td {
  font-size: 12.5px;
}

.enterprise-delivery-table td strong {
  color: #0f3558;
}

.delivery-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.delivery-status.delivered,
.delivery-status.current {
  background: #dcfce7;
  color: #15803d;
}

.delivery-status.cancelled,
.delivery-status.deleted {
  background: #ffe4e6;
  color: #be123c;
}

.delivery-status.dispatched,
.delivery-status.in_transit,
.delivery-status.open {
  background: #dbeafe;
  color: #1d4ed8;
}

.delivery-status.past,
.delivery-status.draft {
  background: #f1f5f9;
  color: #475569;
}

.driver-report-groups,
.driver-report-card-grid,
.summary-panels {
  display: grid;
  gap: 14px;
}

.driver-report-card-grid,
.summary-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-report-customer,
.driver-report-card,
.summary-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(20, 43, 70, .04);
}

.driver-report-customer > header,
.driver-report-card > header,
.summary-panel > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid var(--portal-border);
}

.driver-report-customer header div,
.driver-report-card header {
  min-width: 0;
}

.driver-report-customer header span,
.driver-report-card header span {
  display: block;
  color: var(--portal-text-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.driver-report-customer header strong,
.driver-report-card header strong {
  display: block;
  overflow: hidden;
  color: var(--portal-text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-report-body,
.driver-report-card-drivers {
  display: grid;
  gap: 0;
}

.driver-report-driver {
  border-top: 1px solid var(--portal-border);
}

.driver-report-driver:first-child {
  border-top: 0;
}

.driver-report-driver h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--portal-text);
  font-size: 13px;
  font-weight: 800;
}

.driver-report-driver h4 small {
  color: var(--portal-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.driver-report-driver h4 span {
  margin-left: auto;
  padding: 4px 8px;
  background: var(--portal-primary-light);
  border-radius: 8px;
  color: var(--portal-primary);
  font-size: 11px;
}

.driver-report-card > header {
  display: block;
}

.driver-report-card-drivers section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--portal-border);
}

.driver-report-card-drivers section:last-child {
  border-bottom: 0;
}

.driver-report-card-drivers strong,
.driver-report-card-drivers small {
  display: block;
}

.driver-report-card-drivers small {
  color: var(--portal-text-muted);
  font-size: 12px;
}

.driver-report-card-drivers section > span {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 30px;
  background: var(--portal-primary-light);
  border-radius: 8px;
  color: var(--portal-primary);
  font-weight: 800;
}

.driver-report-card footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  background: #f8fafc;
  border-top: 1px solid var(--portal-border);
}

.summary-panel {
  padding: 16px;
}

.summary-panel > header {
  display: block;
  margin: -16px -16px 14px;
}

.summary-bars {
  display: grid;
  gap: 14px;
}

.summary-bars > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}

.summary-bars span,
.summary-bars small {
  overflow: hidden;
  color: var(--portal-text);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-bars small {
  grid-column: 1 / -1;
  color: var(--portal-text-muted);
  font-size: 11px;
}

.summary-bars strong {
  color: var(--portal-primary);
  font-size: 12px;
}

.summary-bars em {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--portal-primary), var(--portal-accent));
  border-radius: 999px;
}

.flowmeter-hero.card {
  margin: 0;
}

.flowmeter-date-group {
  min-width: 280px;
}

.flowmeter-grid {
  display: grid;
  gap: 16px;
}

.flowmeter-grid-parallel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flowmeter-grid-stack {
  grid-template-columns: 1fr;
}

.flowmeter-panel {
  overflow: hidden;
  margin: 0;
  border-color: var(--portal-border);
}

.flowmeter-panel-head {
  padding: 10px 12px;
  background: #f7f9fc;
}

.flowmeter-meter-title strong {
  color: var(--portal-text);
  font-size: 15px;
  font-weight: 800;
}

.flowmeter-start-label {
  grid-template-columns: auto 150px;
}

.flowmeter-table {
  table-layout: fixed;
}

.flowmeter-table th,
.flowmeter-table td {
  white-space: nowrap;
}

.flowmeter-table input {
  min-height: 32px;
}

.flowmeter-reading {
  color: var(--portal-text);
  font-variant-numeric: tabular-nums;
}

.flowmeter-card-footer {
  background: #ffffff;
}

.flowmeter-summary,
.flowmeter-customer-summary {
  margin-bottom: 0;
  background: #ffffff;
}

.flowmeter-summary-inputs {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  padding: 10px;
  margin: 0;
}

.flowmeter-kpi-grid {
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  padding: 0 10px 10px;
}

.flowmeter-kpi-grid > div {
  min-height: 58px;
  padding: 9px 10px;
  background: #f8fafc;
}

.flowmeter-customer-summary header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: #f7f9fc;
}

.assignment-hero {
  grid-template-columns: minmax(0, 1fr);
}

.assignment-tabs {
  justify-content: flex-start;
}

.assignment-tabs .btn.active {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
  color: #ffffff;
}

.assignment-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.assignment-kpis {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.assignment-kpis > span {
  min-height: 52px;
}

.assignment-filters .form-select {
  min-width: 180px;
}

.assignment-entity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.assignment-entity > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--portal-primary-light);
  color: var(--portal-primary);
  flex: 0 0 auto;
}

.assignment-entity strong,
.assignment-entity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignment-entity small {
  color: var(--portal-text-muted);
  font-size: 11.5px;
}

.assignment-actions .btn {
  width: 36px;
  height: 36px;
}

.daily-sheet-view .portal-report-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
}

.daily-sheet-toolbar {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(15,76,129,.06), rgba(8,145,178,.05)),
    #fff;
}

.daily-sheet-toolbar h3 i {
  color: var(--portal-primary);
  font-size: 18px;
}

.daily-sheet-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: center;
}

.daily-sheet-actions #dailyBack {
  grid-column: 1 / -1;
  justify-self: end;
}

.daily-sheet-actions #dailyMonth {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 700;
}

.daily-sheet-table-wrap,
.daily-sale-table-wrap {
  max-width: 100%;
}

.daily-sheet-preview {
  padding: 14px;
}

.daily-sale-report {
  min-width: 1040px;
  color: var(--portal-text);
  background: #fff;
}

.daily-sale-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--portal-border);
  background:
    linear-gradient(135deg, rgba(15,76,129,.08), rgba(8,145,178,.06)),
    #fff;
}

.daily-sale-brand,
.daily-sale-period {
  min-width: 0;
}

.daily-sale-brand span,
.daily-sale-period span {
  display: inline-flex;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.daily-sale-head h1,
.daily-sale-head h2 {
  margin: 0;
  color: #10233d;
  font-weight: 850;
  line-height: 1.1;
}

.daily-sale-head h1 {
  font-size: 26px;
}

.daily-sale-head h2 {
  font-size: 20px;
  text-align: right;
}

.daily-sale-head p {
  margin: 6px 0 0;
  color: var(--portal-text-muted);
  font-size: 12.5px;
}

.daily-sale-period {
  display: grid;
  justify-items: end;
  align-content: center;
  min-width: 260px;
  padding-left: 16px;
  border-left: 1px solid rgba(15,76,129,.14);
}

.daily-sale-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid var(--portal-border);
}

.daily-sale-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #f8fafc;
}

.daily-sale-meta span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.daily-sale-meta strong {
  color: #0f4c81;
  font-size: 18px;
  font-weight: 850;
}

.daily-sale-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 310px);
  background: #fff;
}

.daily-sale-table {
  min-width: 1320px;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--portal-text);
  font-size: 12px;
  table-layout: fixed;
}

.daily-sale-table th,
.daily-sale-table td {
  padding: 8px 6px;
  border-color: #dbe5f1 !important;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.daily-sale-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #eaf2fb;
  color: #17365d;
  font-size: 11px;
  font-weight: 850;
  box-shadow: inset 0 -1px 0 #cbd8e8;
}

.daily-sale-table .customer-col {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 178px;
  min-width: 178px;
  max-width: 178px;
  background: #fff;
  text-align: left;
  box-shadow: 1px 0 0 #dbe5f1;
}

.daily-sale-table thead .customer-col {
  z-index: 5;
  background: #dcecff;
}

.daily-sale-table .customer-col strong {
  display: block;
  overflow: hidden;
  color: #10233d;
  font-weight: 850;
  text-overflow: ellipsis;
}

.daily-sale-table .day-col {
  width: 40px;
}

.daily-sale-table .total-col,
.daily-sale-table .rate-col,
.daily-sale-table .trip-col,
.daily-sale-table .days-col {
  width: 66px;
}

.daily-sale-table .amount-col {
  width: 96px;
}

.daily-sale-table tbody tr:nth-child(even) td {
  background-color: #fbfdff;
}

.daily-sale-table tbody tr:hover td {
  background-color: #f1f7ff;
}

.daily-sale-table td.has-value {
  color: #075f49;
  background: #e8f8ef;
  font-weight: 800;
}

.daily-sale-table td.empty-value {
  color: #94a3b8;
}

.daily-sale-table .total-col,
.daily-sale-table tfoot td {
  background: #ecfdf3;
  color: #075f49;
  font-weight: 850;
}

.daily-sale-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 4;
  box-shadow: inset 0 1px 0 #bfe7ce;
}

.daily-sale-table tfoot .customer-col {
  z-index: 5;
  background: #dff7e8;
}

.document-frame-wrap iframe {
  width: 100%;
  min-height: 620px;
  border: 0;
}

.portal-date-input {
  background-image: linear-gradient(transparent, transparent);
  cursor: pointer;
}

.portal-date-dock {
  position: fixed;
  z-index: 2060;
  width: min(360px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: var(--portal-surface);
  color: var(--portal-text);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.portal-date-dock.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.portal-date-dock-handle {
  display: none;
}

.portal-date-dock-head,
.portal-date-dock-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-date-dock-head {
  margin-bottom: 10px;
}

.portal-date-dock-head strong {
  font-size: 14px;
  font-weight: 800;
}

.portal-date-dock-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: var(--portal-surface-2);
  color: var(--portal-text);
}

.portal-date-dock-icon:hover {
  border-color: var(--portal-primary);
  color: var(--portal-primary);
}

.portal-date-dock-weekdays,
.portal-date-dock-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.portal-date-dock-weekdays {
  margin-bottom: 4px;
  color: var(--portal-text-muted);
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.portal-date-dock-day {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--portal-text);
  font-size: 12.5px;
  font-weight: 700;
}

.portal-date-dock-day:hover {
  border-color: var(--portal-primary);
  background: var(--portal-primary-light);
  color: var(--portal-primary);
}

.portal-date-dock-day.muted {
  color: var(--portal-text-muted);
  opacity: .62;
}

.portal-date-dock-day.today {
  border-color: var(--portal-accent);
}

.portal-date-dock-day.selected {
  background: var(--portal-primary);
  color: #fff;
}

.portal-date-dock-actions {
  margin-top: 12px;
}

@media (max-width: 1399.98px) {
  .flowmeter-grid-parallel,
  .driver-report-card-grid,
  .summary-panels {
    grid-template-columns: 1fr;
  }

  .flowmeter-kpi-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 991.98px) {
  .delivery-module-view,
  .flowmeter-workspace,
  .assignment-workspace,
  .daily-sheet-view {
    padding: 12px;
  }

  .delivery-module-hero,
  .assignment-hero,
  .portal-report-toolbar,
  .daily-sheet-view .portal-report-toolbar {
    grid-template-columns: 1fr;
  }

  .delivery-module-actions,
  .flowmeter-actions,
  .report-actions,
  .assignment-filters {
    justify-content: flex-start;
  }

  .delivery-module-stats,
  .module-summary-strip,
  .delivery-filter-bar,
  .assignment-toolbar,
  .flowmeter-summary-inputs,
  .flowmeter-kpi-grid,
  .customer-toolbar,
  .customer-profile-head,
  .project-toolbar,
  .transactions-toolbar,
  .customer-report-toolbar,
  .daily-sale-meta {
    grid-template-columns: 1fr 1fr;
  }

  .customer-toolbar,
  .customer-profile-head,
  .project-toolbar,
  .transactions-toolbar,
  .customer-report-toolbar {
    grid-template-columns: 1fr;
  }

  .customer-toolbar-side,
  .customer-toolbar-actions,
  .project-toolbar-actions,
  .transactions-toolbar-actions,
  .customer-profile-summary,
  .customer-report-actions {
    justify-content: flex-start;
  }

  .customer-report-actions,
  .statement-report-workspace .customer-report-actions {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .customer-report-actions #reportCustomer {
    grid-column: 1 / -1;
  }

  .daily-sheet-actions {
    grid-template-columns: 1fr auto auto;
    justify-content: stretch;
  }

  .daily-sheet-actions #dailyBack,
  .daily-sheet-actions #dailyMonth {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .daily-sale-head {
    grid-template-columns: 1fr;
  }

  .daily-sale-period {
    justify-items: start;
    min-width: 0;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(15,76,129,.14);
    border-left: 0;
  }

  .daily-sale-head h2 {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .delivery-module-stats,
  .module-summary-strip,
  .delivery-filter-bar,
  .assignment-toolbar,
  .assignment-kpis,
  .flowmeter-summary-inputs,
  .flowmeter-kpi-grid {
    grid-template-columns: 1fr;
  }

  .delivery-module-hero,
  .assignment-hero,
  .portal-report-toolbar {
    padding: 14px;
  }

  .delivery-module-hero h3,
  .assignment-hero h3,
  .portal-report-toolbar h3,
  .flowmeter-title-block h3 {
    font-size: 20px;
  }

  .flowmeter-date-group,
  .assignment-filters .form-select {
    min-width: 100%;
  }

  .daily-sheet-actions,
  .customer-report-actions,
  .statement-report-workspace .customer-report-actions,
  .customer-kpi-grid,
  .project-kpi-grid,
  .transactions-kpi-grid,
  .daily-sale-meta {
    grid-template-columns: 1fr;
  }

  .customer-module-modern,
  .project-workspace,
  .transactions-workspace,
  .customer-report-workspace {
    padding: 8px;
  }

  .customer-toolbar,
  .customer-profile-head,
  .project-toolbar,
  .transactions-toolbar,
  .customer-report-toolbar,
  .customer-action-panel {
    padding: 12px;
  }

  .customer-toolbar-actions,
  .project-toolbar-actions,
  .transactions-toolbar-actions,
  .customer-report-actions {
    width: 100%;
  }

  .customer-toolbar-actions > *,
  .project-toolbar-actions > *,
  .transactions-toolbar-actions > *,
  .customer-report-actions > * {
    width: 100%;
  }

  .customer-filter-summary,
  .customer-pager,
  .project-pager,
  .customer-profile-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-profile-summary article {
    width: 100%;
  }

  .daily-sheet-preview {
    padding: 8px;
  }

  .daily-sale-head {
    padding: 12px;
  }

  .daily-sale-head h1 {
    font-size: 22px;
  }

  .portal-date-dock {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: none;
    padding: 14px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }

  .portal-date-dock.show {
    transform: translateY(0);
  }

  .portal-date-dock-handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--portal-border);
  }
}

/* Guardrails for compact portal cards that must never collapse into text columns. */
.module-data-view > .module-summary-strip,
.module-summary-view > .module-summary-strip,
.customer-generic-view .module-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(11.5rem, 1fr)) !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.module-summary-strip > article {
  display: grid !important;
  grid-template-columns: 2.375rem minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  min-width: 11.5rem !important;
  overflow: hidden !important;
}

.module-summary-strip > article > span {
  flex: 0 0 2.375rem !important;
  min-width: 2.375rem !important;
}

.module-summary-strip > article > div,
.customer-kpi .card-body > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

.module-summary-strip small,
.module-summary-strip strong,
.customer-kpi span,
.customer-kpi strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.customer-kpi-grid.row,
.customer-action-grid.row {
  display: flex !important;
  flex-wrap: wrap !important;
}

.customer-kpi-grid.row > .col {
  flex: 1 1 15rem !important;
  min-width: 15rem !important;
}

.customer-action-grid.row > .col {
  flex: 1 1 10rem !important;
  min-width: 10rem !important;
}

.customer-action-card {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 100% !important;
  overflow: hidden !important;
}

.customer-action-card > i {
  flex: 0 0 auto !important;
}

.customer-action-card strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.documents-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important;
  gap: 10px !important;
  padding: 12px !important;
}

.documents-kpi-grid > .customer-kpi {
  min-width: 15rem !important;
  overflow: hidden !important;
}

.documents-kpi-grid > .customer-kpi .card-body {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
}

@media (max-width: 767.98px) {
  .module-data-view > .module-summary-strip,
  .module-summary-view > .module-summary-strip,
  .customer-generic-view .module-summary-strip {
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
  }

  .module-summary-strip > article,
  .customer-kpi-grid.row > .col,
  .customer-action-grid.row > .col,
  .documents-kpi-grid > .customer-kpi {
    min-width: 0 !important;
  }

  .documents-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Assets dashboard layout repair */
.asset-dashboard {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: #f6f8fb !important;
}

.asset-dashboard-hero {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--portal-border, #d9e2ef) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ffffff, #eef7ff 62%, #ecfdf5) !important;
}

.asset-dashboard-hero h3 {
  margin: 4px 0 6px !important;
  color: #0f172a !important;
  font-size: 1.45rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.asset-dashboard-hero p {
  max-width: 72ch !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

.asset-dashboard-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
}

.asset-dashboard-metrics {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(10rem, 1fr)) !important;
  gap: 10px !important;
}

.asset-dashboard-metric {
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  gap: 2px 10px !important;
  min-width: 10rem !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--portal-border, #d9e2ef) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.asset-dashboard-metric i {
  grid-row: 1 / 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  height: 2.4rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
}

.asset-dashboard-metric.blue i { color: #1769e0 !important; background: #eaf2fd !important; }
.asset-dashboard-metric.green i { color: #168760 !important; background: #e7f7f0 !important; }
.asset-dashboard-metric.orange i { color: #d77b12 !important; background: #fff3df !important; }
.asset-dashboard-metric.red i { color: #d34b56 !important; background: #feebed !important; }
.asset-dashboard-metric.purple i { color: #7852c7 !important; background: #f0ebfb !important; }

.asset-dashboard-metric span,
.asset-dashboard-metric strong,
.asset-dashboard-metric small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.asset-dashboard-metric span {
  color: #64748b !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.asset-dashboard-metric strong {
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
}

.asset-dashboard-metric small {
  color: #64748b !important;
  font-size: .75rem !important;
}

.asset-dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr) !important;
  gap: 12px !important;
}

.asset-dashboard-panel {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--portal-border, #d9e2ef) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.asset-dashboard-panel > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.asset-dashboard-panel h4 {
  margin: 3px 0 0 !important;
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
}

.asset-dashboard-panel header > strong {
  display: grid !important;
  place-items: center !important;
  min-width: 2.2rem !important;
  height: 1.8rem !important;
  padding: 0 .6rem !important;
  border-radius: 999px !important;
  color: #0f4c81 !important;
  background: #eaf2fd !important;
  font-size: .8rem !important;
}

.asset-category-bars,
.asset-due-list {
  display: grid !important;
  gap: 8px !important;
}

.asset-category-bars > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 10px !important;
  align-items: center !important;
}

.asset-category-bars span,
.asset-category-bars strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.asset-category-bars em {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: 9px !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  background: #1769e0 !important;
}

.asset-due-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  text-align: left !important;
}

.asset-due-row span {
  display: grid !important;
  min-width: 0 !important;
}

.asset-due-row strong,
.asset-due-row small,
.asset-due-row em {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.asset-dashboard-panel.recent {
  margin: 0 !important;
}

.asset-dashboard-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)) !important;
  gap: 10px !important;
}

.asset-dashboard-card {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.asset-dashboard-card header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.asset-dashboard-card header > div {
  display: grid !important;
  min-width: 0 !important;
}

.asset-dashboard-card strong,
.asset-dashboard-card small,
.asset-dashboard-card dd {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.asset-dashboard-card dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 0 !important;
  border: 1px solid #e2e8f0 !important;
  background: #e2e8f0 !important;
}

.asset-dashboard-card dl div {
  min-width: 0 !important;
  padding: 7px 8px !important;
  background: #f8fafc !important;
}

.asset-dashboard-card dt {
  color: #64748b !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.asset-dashboard-card dd {
  margin: 2px 0 0 !important;
  color: #0f172a !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
}

.asset-dashboard-card footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 1199.98px) {
  .asset-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(10rem, 1fr)) !important;
  }

  .asset-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767.98px) {
  .asset-dashboard-hero {
    flex-direction: column !important;
  }

  .asset-dashboard-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .asset-dashboard-metrics,
  .asset-dashboard-cards {
    grid-template-columns: 1fr !important;
  }

  .asset-dashboard-metric {
    min-width: 0 !important;
  }

  .asset-due-row {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }
}

/* HR dashboard layout */
.hr-dashboard {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px !important;
  overflow: hidden !important;
  background: #f6f8fb !important;
}

.hr-dashboard-hero {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--portal-border, #d9e2ef) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ffffff, #eef7ff 62%, #ecfdf5) !important;
}

.hr-dashboard-hero h3 {
  margin: 4px 0 6px !important;
  color: #0f172a !important;
  font-size: 1.45rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.hr-dashboard-hero p {
  max-width: 72ch !important;
  margin: 0 !important;
  color: #475569 !important;
  font-size: .9rem !important;
  line-height: 1.5 !important;
}

.hr-dashboard-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
}

.hr-dashboard-kpis {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(10rem, 1fr)) !important;
  gap: 10px !important;
}

.hr-dashboard-kpis .hr-kpi {
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 10px !important;
  min-width: 10rem !important;
  min-height: 74px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--portal-border, #d9e2ef) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.hr-dashboard-kpis .hr-kpi i {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  height: 2.4rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
}

.hr-dashboard-kpis .hr-kpi.blue i { color: #1769e0 !important; background: #eaf2fd !important; }
.hr-dashboard-kpis .hr-kpi.green i { color: #168760 !important; background: #e7f7f0 !important; }
.hr-dashboard-kpis .hr-kpi.orange i { color: #d77b12 !important; background: #fff3df !important; }
.hr-dashboard-kpis .hr-kpi.purple i { color: #7852c7 !important; background: #f0ebfb !important; }
.hr-dashboard-kpis .hr-kpi.cyan i { color: #0891b2 !important; background: #e0f7fb !important; }

.hr-dashboard-kpis .hr-kpi span,
.hr-dashboard-kpis .hr-kpi strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.hr-dashboard-kpis .hr-kpi span {
  color: #64748b !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.hr-dashboard-kpis .hr-kpi strong {
  color: #0f172a !important;
  font-size: 1.2rem !important;
  font-weight: 850 !important;
}

.hr-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.hr-dashboard-panel {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--portal-border, #d9e2ef) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.hr-dashboard-panel > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.hr-dashboard-panel h4 {
  margin: 3px 0 0 !important;
  color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
}

.hr-dashboard-panel header > strong {
  display: grid !important;
  place-items: center !important;
  min-width: 2.2rem !important;
  height: 1.8rem !important;
  padding: 0 .6rem !important;
  border-radius: 999px !important;
  color: #0f4c81 !important;
  background: #eaf2fd !important;
  font-size: .8rem !important;
}

.hr-dashboard-list {
  display: grid !important;
  gap: 8px !important;
}

.hr-dashboard-person,
.hr-dashboard-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  text-align: left !important;
}

.hr-dashboard-person:hover {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}

.hr-dashboard-person > span:not(.hr-avatar),
.hr-dashboard-row > span:first-child {
  display: grid !important;
  min-width: 0 !important;
}

.hr-dashboard-person strong,
.hr-dashboard-person small,
.hr-dashboard-row strong,
.hr-dashboard-row small,
.hr-dashboard-row > span,
.hr-dashboard-settings dd {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.hr-dashboard-person small,
.hr-dashboard-row small {
  color: #64748b !important;
  font-size: .78rem !important;
}

.hr-dashboard-settings {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 0 !important;
  border: 1px solid #e2e8f0 !important;
  background: #e2e8f0 !important;
}

.hr-dashboard-settings div {
  min-width: 0 !important;
  padding: 10px !important;
  background: #f8fafc !important;
}

.hr-dashboard-settings div:last-child {
  grid-column: 1 / -1 !important;
}

.hr-dashboard-settings dt {
  color: #64748b !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.hr-dashboard-settings dd {
  margin: 3px 0 0 !important;
  color: #0f172a !important;
  font-size: .9rem !important;
  font-weight: 750 !important;
}

@media (max-width: 1199.98px) {
  .hr-dashboard-kpis {
    grid-template-columns: repeat(3, minmax(10rem, 1fr)) !important;
  }
}

@media (max-width: 991.98px) {
  .hr-dashboard-hero {
    flex-direction: column !important;
  }

  .hr-dashboard-actions {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .hr-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767.98px) {
  .hr-dashboard-kpis,
  .hr-dashboard-settings {
    grid-template-columns: 1fr !important;
  }

  .hr-dashboard-kpis .hr-kpi {
    min-width: 0 !important;
  }

  .hr-dashboard-row {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }
}

/* Premium dashboard workspace */
.premium-dashboard-hero {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  border: 1px solid rgba(148, 163, 184, .26);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,249,255,.9) 56%, rgba(236,253,245,.86)),
    var(--portal-surface);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.premium-dashboard-hero .dashboard-hero-copy {
  padding: 24px 28px;
}

.premium-dashboard-hero .welcome-badge {
  background: rgba(14, 165, 233, .1);
  color: #075985;
  border-color: rgba(14, 165, 233, .22);
  margin-bottom: 14px;
}

.premium-dashboard-hero .welcome-heading {
  max-width: 760px;
  color: #0f172a;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: 0;
}

.premium-dashboard-hero .welcome-sub {
  max-width: 760px;
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
}

[data-bs-theme="dark"] .premium-dashboard-hero {
  background:
    linear-gradient(135deg, rgba(30,41,59,.98), rgba(15,23,42,.96) 58%, rgba(8,47,73,.68)),
    var(--portal-surface);
}

[data-bs-theme="dark"] .premium-dashboard-hero .welcome-heading {
  color: #f8fafc;
}

[data-bs-theme="dark"] .premium-dashboard-hero .welcome-sub {
  color: #cbd5e1;
}

.dashboard-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.dashboard-hero-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid rgba(15, 76, 129, .14);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #16456f;
  font-size: 12.5px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.dashboard-hero-actions a:hover {
  border-color: rgba(14, 165, 233, .35);
  color: #0f4c81;
  background: #fff;
}

.dashboard-hero-actions span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-account-card {
  display: grid;
  align-content: center;
  gap: 12px;
  border-left: 1px solid rgba(148, 163, 184, .25);
  background: rgba(248, 250, 252, .78);
  padding: 22px;
}

[data-bs-theme="dark"] .dashboard-account-card {
  background: rgba(15,23,42,.42);
}

.dashboard-account-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .24);
}

.dashboard-account-head .profile-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f4c81, #0891b2);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.dashboard-account-head strong,
.dashboard-account-head small,
.dashboard-account-card .welcome-meta-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-account-head strong {
  color: var(--portal-text);
  font-size: 13.5px;
  font-weight: 850;
}

.dashboard-account-head small {
  color: var(--portal-text-muted);
  font-size: 11.5px;
}

.dashboard-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(10rem, 1fr));
  gap: 10px;
}

.dashboard-status-strip article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: var(--portal-surface);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.dashboard-status-strip article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 18px;
}

.dashboard-status-strip .blue { color: #0284c7; background: rgba(14,165,233,.12); }
.dashboard-status-strip .green { color: #168760; background: rgba(22,163,74,.12); }
.dashboard-status-strip .orange { color: #d77b12; background: rgba(234,88,12,.12); }
.dashboard-status-strip .purple { color: #7852c7; background: rgba(124,58,237,.12); }

.dashboard-status-strip small,
.dashboard-status-strip strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-status-strip small {
  color: var(--portal-text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-status-strip strong {
  color: var(--portal-text);
  font-size: 20px;
  font-weight: 850;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(13rem, 1fr));
  gap: 12px;
}

.dashboard-kpi-grid .kpi-card {
  min-width: 0;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.dashboard-kpi-grid .kpi-value,
.dashboard-kpi-grid .kpi-sub,
.dashboard-kpi-grid .kpi-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.dashboard-section-head span {
  display: block;
  color: var(--portal-text-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-section-head h2 {
  margin: 3px 0 0;
  color: var(--portal-text);
  font-size: 22px;
  font-weight: 850;
}

.dashboard-section-head strong {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  background: var(--portal-surface);
  color: var(--portal-text-muted);
  font-size: 12px;
}

.dashboard-groups {
  display: grid;
  gap: 14px;
}

.dashboard-group-panel {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: var(--portal-surface);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.dashboard-group-panel > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.dashboard-group-panel > header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--portal-primary-light);
  color: var(--portal-primary);
  font-size: 17px;
}

.dashboard-group-panel h3,
.dashboard-group-panel small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-group-panel h3 {
  margin: 0;
  color: var(--portal-text);
  font-size: 15px;
  font-weight: 850;
}

.dashboard-group-panel small {
  color: var(--portal-text-muted);
  font-size: 11.5px;
}

.dashboard-group-panel .module-directory-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.premium-module-card {
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.76), rgba(255,255,255,.98)),
    var(--portal-surface);
  border-color: rgba(148, 163, 184, .3);
}

.premium-module-card:hover {
  border-color: rgba(14, 165, 233, .42);
}

.premium-module-card .module-card-name,
.premium-module-card .module-card-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-side-panel {
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.dashboard-side-panel .portal-card-header {
  padding: 14px 16px;
}

.dashboard-side-panel .quick-action-item {
  min-height: 54px;
  padding: 10px 14px;
}

.quick-action-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1399.98px) {
  .dashboard-kpi-grid,
  .dashboard-status-strip {
    grid-template-columns: repeat(2, minmax(13rem, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .dashboard-workbench {
    grid-template-columns: 1fr;
  }

  .dashboard-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .premium-dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-account-card {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, .25);
  }
}

@media (max-width: 767.98px) {
  .dashboard-aside,
  .dashboard-kpi-grid,
  .dashboard-status-strip {
    grid-template-columns: 1fr;
  }

  .premium-dashboard-hero .dashboard-hero-copy,
  .dashboard-account-card {
    padding: 18px;
  }

  .premium-dashboard-hero .welcome-heading {
    font-size: 24px;
  }

  .dashboard-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-section-head strong {
    align-self: flex-start;
  }
}

@media (max-width: 575.98px) {
  .dashboard-group-panel {
    padding: 12px;
  }

  .dashboard-group-panel .module-directory-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* Theme-safe topbar and dashboard readability */
:root {
  --bs-body-bg: var(--portal-surface-2);
  --bs-body-color: var(--portal-text);
  --bs-border-color: var(--portal-border);
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--portal-surface-2);
  --bs-body-color: var(--portal-text);
  --bs-border-color: var(--portal-border);
  --bs-secondary-color: var(--portal-text-muted);
  --bs-tertiary-bg: var(--portal-surface-3);
}

.portal-topbar {
  color: var(--portal-text);
}

.topbar-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  max-width: 96px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  flex: 0 0 auto;
}

.topbar-theme-toggle i {
  font-size: 14px;
  line-height: 1;
}

[data-bs-theme="dark"] .topbar-theme-toggle {
  --bs-btn-color: #dbeafe;
  --bs-btn-border-color: #334155;
  --bs-btn-hover-color: #f8fafc;
  --bs-btn-hover-bg: #1e293b;
  --bs-btn-hover-border-color: #475569;
  --bs-btn-active-bg: #1e293b;
  --bs-btn-active-border-color: #64748b;
  background: #111827;
}

[data-bs-theme="dark"] body.portal-body,
[data-bs-theme="dark"] .portal-content {
  background: #0f172a;
  color: var(--portal-text);
}

[data-bs-theme="dark"] .portal-card,
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .dashboard-group-panel,
[data-bs-theme="dark"] .dashboard-status-strip article,
[data-bs-theme="dark"] .dashboard-side-panel {
  background: #182235;
  border-color: #2b3954;
  color: #e5edf8;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

[data-bs-theme="dark"] .portal-card-header,
[data-bs-theme="dark"] .dashboard-side-panel .portal-card-header {
  background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(24,34,53,.96)) !important;
  border-color: #2b3954;
  color: #e5edf8;
}

[data-bs-theme="dark"] .portal-card-title,
[data-bs-theme="dark"] .dashboard-section-head h2,
[data-bs-theme="dark"] .dashboard-group-panel h3,
[data-bs-theme="dark"] .module-card-name,
[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .dashboard-status-strip strong,
[data-bs-theme="dark"] .dashboard-account-head strong,
[data-bs-theme="dark"] .dashboard-account-card .welcome-meta-row strong {
  color: #f8fafc;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .module-card-sub,
[data-bs-theme="dark"] .kpi-label,
[data-bs-theme="dark"] .kpi-sub,
[data-bs-theme="dark"] .dashboard-section-head span,
[data-bs-theme="dark"] .dashboard-section-head strong,
[data-bs-theme="dark"] .dashboard-group-panel small,
[data-bs-theme="dark"] .dashboard-status-strip small,
[data-bs-theme="dark"] .dashboard-account-head small,
[data-bs-theme="dark"] .welcome-meta-row span {
  color: #aebdd2 !important;
}

[data-bs-theme="dark"] .premium-dashboard-hero {
  border-color: #30405e;
  background:
    linear-gradient(135deg, rgba(24,34,53,.98), rgba(15,23,42,.98) 58%, rgba(12,74,110,.46)),
    #182235;
}

[data-bs-theme="dark"] .premium-dashboard-hero .welcome-badge {
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.24);
  color: #bae6fd;
}

[data-bs-theme="dark"] .dashboard-hero-actions a {
  background: rgba(15,23,42,.72);
  border-color: #334155;
  color: #dbeafe;
}

[data-bs-theme="dark"] .dashboard-hero-actions a:hover {
  background: #1e293b;
  border-color: #38bdf8;
  color: #f8fafc;
}

[data-bs-theme="dark"] .premium-module-card {
  background:
    linear-gradient(180deg, rgba(30,41,59,.74), rgba(24,34,53,.98)),
    #182235;
  border-color: #2b3954;
}

[data-bs-theme="dark"] .premium-module-card:hover {
  border-color: rgba(56,189,248,.46);
}

.welcome-meta-row,
.dashboard-section-head strong,
.dashboard-status-strip small,
.dashboard-status-strip strong,
.kpi-label,
.kpi-value,
.kpi-sub,
.module-card-name,
.module-card-sub,
.quick-action-label,
.portal-card-title,
.dashboard-group-panel h3,
.dashboard-group-panel small,
.dashboard-hero-actions a,
.topbar-breadcrumb .page-title,
.breadcrumb-item,
.user-name,
.user-role {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-status-strip small,
.kpi-label,
.module-card-sub,
.dashboard-group-panel small,
.portal-card-title,
.dashboard-section-head span {
  font-size: 11px;
}

.dashboard-status-strip strong {
  font-size: 20px;
}

.module-card-name,
.quick-action-label {
  font-size: 13px;
}

@media (max-width: 575.98px) {
  .portal-topbar {
    gap: 7px;
    padding-inline: 10px;
  }

  .topbar-toggle,
  .topbar-theme-toggle {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
  }

  .topbar-theme-toggle span {
    display: none !important;
  }

  .dashboard-status-strip article,
  .kpi-card {
    min-height: 66px;
    padding: 12px;
  }

  .premium-dashboard-hero .welcome-sub {
    font-size: 12.5px;
  }

  .dashboard-status-strip small,
  .kpi-label,
  .module-card-sub,
  .dashboard-group-panel small,
  .portal-card-title,
  .dashboard-section-head span {
    font-size: 10px;
  }

  .dashboard-status-strip strong {
    font-size: 16px;
  }

  .module-card-name,
  .quick-action-label {
    font-size: 12px;
  }
}

/* AMOLED dark theme coverage
   Keep this late so every portal page, module, and dynamically rendered subview
   inherits the same dark surfaces even when older page CSS uses Bootstrap defaults. */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: #000000;
  --bs-body-color: var(--portal-text);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--portal-text-muted);
  --bs-tertiary-color: #7f8a99;
  --bs-secondary-bg: #0a0a0a;
  --bs-tertiary-bg: #101010;
  --bs-border-color: var(--portal-border);
  --bs-border-color-translucent: rgba(255,255,255,.12);
  --bs-link-color: #67d6ff;
  --bs-link-hover-color: #9be7ff;
}

[data-bs-theme="dark"],
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.portal-body,
[data-bs-theme="dark"] .portal-shell,
[data-bs-theme="dark"] .portal-main,
[data-bs-theme="dark"] .portal-content {
  background: #000000 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .portal-sidebar {
  background:
    linear-gradient(180deg, rgba(8,145,178,.10), rgba(0,0,0,0) 32%),
    #000000 !important;
  border-color: var(--sidebar-border) !important;
  box-shadow: 8px 0 28px rgba(0,0,0,.75);
}

[data-bs-theme="dark"] .portal-topbar {
  background: #050505 !important;
  border-color: #1f1f1f !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .portal-card,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .dashboard-group-panel,
[data-bs-theme="dark"] .dashboard-side-panel,
[data-bs-theme="dark"] .dashboard-status-strip article,
[data-bs-theme="dark"] .module-hero,
[data-bs-theme="dark"] .module-workspace,
[data-bs-theme="dark"] .module-toolbar,
[data-bs-theme="dark"] .module-summary-strip article,
[data-bs-theme="dark"] .record-card,
[data-bs-theme="dark"] .empty-state,
[data-bs-theme="dark"] .flowmeter-panel,
[data-bs-theme="dark"] .queue-form,
[data-bs-theme="dark"] .queue-token-card,
[data-bs-theme="dark"] .station-card,
[data-bs-theme="dark"] .queue-report-metrics article,
[data-bs-theme="dark"] .notification-item,
[data-bs-theme="dark"] .quick-action-item,
[data-bs-theme="dark"] .endpoint-nav-list,
[data-bs-theme="dark"] .auth-card,
[data-bs-theme="dark"] [class$="-panel"],
[data-bs-theme="dark"] [class$="-card"] {
  background: #050505 !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.72) !important;
}

[data-bs-theme="dark"] .portal-card-header,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .flowmeter-panel-head,
[data-bs-theme="dark"] .queue-token-card > footer,
[data-bs-theme="dark"] .station-card > footer,
[data-bs-theme="dark"] .dashboard-account-card,
[data-bs-theme="dark"] .notification-head,
[data-bs-theme="dark"] .module-rail,
[data-bs-theme="dark"] .module-rail-head {
  background: #0a0a0a !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .premium-dashboard-hero,
[data-bs-theme="dark"] .welcome-card,
[data-bs-theme="dark"] .dashboard-hero,
[data-bs-theme="dark"] .module-hero {
  background:
    linear-gradient(135deg, rgba(5,5,5,.98), rgba(0,0,0,.98) 62%, rgba(8,47,73,.28)),
    #000000 !important;
  border-color: #202020 !important;
}

[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] .portal-table,
[data-bs-theme="dark"] .enterprise-table,
[data-bs-theme="dark"] .de-table,
[data-bs-theme="dark"] .flowmeter-table,
[data-bs-theme="dark"] .customer-table,
[data-bs-theme="dark"] .vendor-table,
[data-bs-theme="dark"] .ticket-table,
[data-bs-theme="dark"] .report-table,
[data-bs-theme="dark"] .sheet-table {
  --bs-table-bg: #050505;
  --bs-table-color: var(--portal-text);
  --bs-table-border-color: #202020;
  --bs-table-striped-bg: #0b0b0b;
  --bs-table-striped-color: var(--portal-text);
  --bs-table-hover-bg: #101820;
  --bs-table-hover-color: #ffffff;
  background: #050505 !important;
  color: var(--portal-text) !important;
  border-color: #202020 !important;
}

[data-bs-theme="dark"] .table-responsive,
[data-bs-theme="dark"] .portal-table-wrap,
[data-bs-theme="dark"] .module-table-responsive,
[data-bs-theme="dark"] .customer-table-wrap,
[data-bs-theme="dark"] .delivery-table-shell,
[data-bs-theme="dark"] .transactions-table-wrap,
[data-bs-theme="dark"] .assets-table-wrap,
[data-bs-theme="dark"] .ticket-table-wrap,
[data-bs-theme="dark"] .daily-sale-table-wrap {
  background: #050505 !important;
  border-color: #202020 !important;
}

[data-bs-theme="dark"] .table > :not(caption) > * > *,
[data-bs-theme="dark"] .portal-table th,
[data-bs-theme="dark"] .portal-table td,
[data-bs-theme="dark"] .enterprise-table th,
[data-bs-theme="dark"] .enterprise-table td,
[data-bs-theme="dark"] .de-table th,
[data-bs-theme="dark"] .de-table td,
[data-bs-theme="dark"] .flowmeter-table th,
[data-bs-theme="dark"] .flowmeter-table td {
  background-color: transparent !important;
  border-color: #202020 !important;
  color: inherit !important;
}

[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .portal-table thead th,
[data-bs-theme="dark"] .enterprise-table thead th,
[data-bs-theme="dark"] .de-table thead th,
[data-bs-theme="dark"] .flowmeter-table thead th,
[data-bs-theme="dark"] .sheet-table thead th {
  background: #0d0d0d !important;
  color: #cbd5e1 !important;
  border-color: #242424 !important;
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-bs-theme="dark"] .portal-table tbody tr:hover,
[data-bs-theme="dark"] .enterprise-table tbody tr:hover {
  background-color: #101820 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-floating > .form-control,
[data-bs-theme="dark"] .form-floating > .form-select,
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
[data-bs-theme="dark"] select {
  background-color: #050505 !important;
  border-color: #2a2a2a !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea:focus,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
[data-bs-theme="dark"] select:focus {
  background-color: #000000 !important;
  border-color: #22d3ee !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea::placeholder,
[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])::placeholder {
  color: #6f7a88 !important;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: #050505 !important;
  border-color: #3a3a3a !important;
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #0891b2 !important;
  border-color: #22d3ee !important;
}

[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
  background-color: #202020;
}

[data-bs-theme="dark"] .form-range::-moz-range-track {
  background-color: #202020;
}

[data-bs-theme="dark"] .form-floating > label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .input-group-text {
  background-color: transparent !important;
  border-color: #2a2a2a !important;
  color: var(--portal-text-muted) !important;
}

[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--portal-text);
  --bs-btn-bg: #0a0a0a;
  --bs-btn-border-color: #2a2a2a;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #141414;
  --bs-btn-hover-border-color: #3a3a3a;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #161616;
  --bs-btn-active-border-color: #3a3a3a;
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .tooltip-inner,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .swal2-popup,
[data-bs-theme="dark"] .portal-date-dock,
[data-bs-theme="dark"] .queue-combo-menu,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .offcanvas {
  background: #050505 !important;
  border-color: #242424 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .nav-link,
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .page-link,
[data-bs-theme="dark"] .table-sort-button {
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus,
[data-bs-theme="dark"] .nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .page-link:hover,
[data-bs-theme="dark"] .queue-combo-menu button:hover {
  background: #101820 !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .nav-tabs {
  border-color: #202020 !important;
}

[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .page-item.active .page-link {
  background: rgba(34,211,238,.16) !important;
  border-color: rgba(34,211,238,.45) !important;
  color: #e6fbff !important;
}

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .text-bg-light {
  background-color: #050505 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .small,
[data-bs-theme="dark"] .module-card-sub,
[data-bs-theme="dark"] .kpi-label,
[data-bs-theme="dark"] .kpi-sub,
[data-bs-theme="dark"] .section-kicker,
[data-bs-theme="dark"] .breadcrumb-item.active,
[data-bs-theme="dark"] .user-role {
  color: var(--portal-text-muted) !important;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .portal-card-title,
[data-bs-theme="dark"] .module-card-name,
[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .dashboard-status-strip strong,
[data-bs-theme="dark"] .dashboard-account-head strong,
[data-bs-theme="dark"] .record-card-title {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start {
  border-color: #202020 !important;
}

[data-bs-theme="dark"] .progress {
  background-color: #161616 !important;
}

[data-bs-theme="dark"] .alert {
  background-color: #080808 !important;
  border-color: #242424 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .badge.bg-light {
  background-color: #111111 !important;
  color: var(--portal-text) !important;
  border-color: #2a2a2a !important;
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Exact AMOLED coverage for module pages with page-specific light panels. */
[data-bs-theme="dark"] .delivery-module-view,
[data-bs-theme="dark"] .flowmeter-workspace,
[data-bs-theme="dark"] .assignment-workspace,
[data-bs-theme="dark"] .daily-sheet-view,
[data-bs-theme="dark"] .customer-module-modern,
[data-bs-theme="dark"] .project-workspace,
[data-bs-theme="dark"] .transactions-workspace,
[data-bs-theme="dark"] .customer-report-workspace {
  background: #000000 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .module-quick-nav,
[data-bs-theme="dark"] .delivery-filter-bar,
[data-bs-theme="dark"] .assignment-toolbar,
[data-bs-theme="dark"] .delivery-filter-bar > div,
[data-bs-theme="dark"] .delivery-module-hero,
[data-bs-theme="dark"] .assignment-hero,
[data-bs-theme="dark"] .portal-report-toolbar,
[data-bs-theme="dark"] .delivery-module-stats > div,
[data-bs-theme="dark"] .module-summary-strip > article,
[data-bs-theme="dark"] .assignment-kpis > span,
[data-bs-theme="dark"] .delivery-table-shell,
[data-bs-theme="dark"] .daily-sheet-preview,
[data-bs-theme="dark"] .document-frame-wrap,
[data-bs-theme="dark"] .driver-report-customer,
[data-bs-theme="dark"] .driver-report-card,
[data-bs-theme="dark"] .summary-panel,
[data-bs-theme="dark"] .driver-report-driver h4,
[data-bs-theme="dark"] .driver-report-card footer,
[data-bs-theme="dark"] .flowmeter-card-footer,
[data-bs-theme="dark"] .flowmeter-summary,
[data-bs-theme="dark"] .flowmeter-customer-summary,
[data-bs-theme="dark"] .flowmeter-kpi-grid > div,
[data-bs-theme="dark"] .daily-sale-report,
[data-bs-theme="dark"] .daily-sale-meta,
[data-bs-theme="dark"] .daily-sale-meta div,
[data-bs-theme="dark"] .daily-sale-table-wrap,
[data-bs-theme="dark"] .customer-toolbar,
[data-bs-theme="dark"] .customer-profile-head,
[data-bs-theme="dark"] .project-toolbar,
[data-bs-theme="dark"] .transactions-toolbar,
[data-bs-theme="dark"] .customer-report-toolbar,
[data-bs-theme="dark"] .customer-health-card,
[data-bs-theme="dark"] .customer-filter-summary,
[data-bs-theme="dark"] .customer-kpi,
[data-bs-theme="dark"] .customer-kpi-grid .hr-kpi,
[data-bs-theme="dark"] .project-kpi-grid .hr-kpi,
[data-bs-theme="dark"] .transactions-kpi-grid .hr-kpi,
[data-bs-theme="dark"] .customer-pager,
[data-bs-theme="dark"] .project-pager,
[data-bs-theme="dark"] .customer-profile-summary article,
[data-bs-theme="dark"] .customer-action-panel,
[data-bs-theme="dark"] .customer-action-card,
[data-bs-theme="dark"] .customer-generic-view .generic-table-pager {
  background: #050505 !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .flowmeter-panel-head,
[data-bs-theme="dark"] .flowmeter-customer-summary header,
[data-bs-theme="dark"] .driver-report-customer > header,
[data-bs-theme="dark"] .driver-report-card > header,
[data-bs-theme="dark"] .summary-panel > header,
[data-bs-theme="dark"] .daily-sheet-toolbar,
[data-bs-theme="dark"] .daily-sale-head {
  background: #0a0a0a !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .daily-sale-brand span,
[data-bs-theme="dark"] .daily-sale-period span,
[data-bs-theme="dark"] .daily-sale-meta span,
[data-bs-theme="dark"] .delivery-filter-bar label,
[data-bs-theme="dark"] .delivery-filter-bar > div span,
[data-bs-theme="dark"] .flowmeter-summary-inputs label,
[data-bs-theme="dark"] .driver-report-card-drivers small,
[data-bs-theme="dark"] .summary-bars small,
[data-bs-theme="dark"] .flowmeter-customer-summary header small {
  color: var(--portal-text-muted) !important;
}

[data-bs-theme="dark"] .delivery-module-hero h3,
[data-bs-theme="dark"] .assignment-hero h3,
[data-bs-theme="dark"] .portal-report-toolbar h3,
[data-bs-theme="dark"] .flowmeter-title-block h3,
[data-bs-theme="dark"] .daily-sale-head h1,
[data-bs-theme="dark"] .daily-sale-head h2,
[data-bs-theme="dark"] .daily-sale-table .customer-col strong,
[data-bs-theme="dark"] .delivery-filter-bar > div strong,
[data-bs-theme="dark"] .flowmeter-meter-title strong,
[data-bs-theme="dark"] .flowmeter-kpi-grid > div strong,
[data-bs-theme="dark"] .flowmeter-customer-summary header h4,
[data-bs-theme="dark"] .driver-report-customer header strong,
[data-bs-theme="dark"] .driver-report-card header strong,
[data-bs-theme="dark"] .driver-report-card-drivers strong,
[data-bs-theme="dark"] .summary-bars span {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .enterprise-table td strong {
  color: #7dd3fc !important;
}

[data-bs-theme="dark"] .delivery-status {
  background: #111111 !important;
  border: 1px solid #2a2a2a !important;
  color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .delivery-status.delivered,
[data-bs-theme="dark"] .delivery-status.current {
  background: rgba(22, 163, 74, .18) !important;
  border-color: rgba(34, 197, 94, .35) !important;
  color: #86efac !important;
}

[data-bs-theme="dark"] .delivery-status.cancelled,
[data-bs-theme="dark"] .delivery-status.deleted {
  background: rgba(220, 38, 38, .16) !important;
  border-color: rgba(248, 113, 113, .34) !important;
  color: #fca5a5 !important;
}

[data-bs-theme="dark"] .delivery-status.dispatched,
[data-bs-theme="dark"] .delivery-status.in_transit,
[data-bs-theme="dark"] .delivery-status.open {
  background: rgba(59, 130, 246, .18) !important;
  border-color: rgba(96, 165, 250, .35) !important;
  color: #93c5fd !important;
}

[data-bs-theme="dark"] .daily-sale-table {
  background: #050505 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .daily-sale-table th,
[data-bs-theme="dark"] .daily-sale-table td {
  background: #050505 !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .daily-sale-table thead th,
[data-bs-theme="dark"] .daily-sale-table thead .customer-col {
  background: #0d0d0d !important;
  box-shadow: inset 0 -1px 0 #242424 !important;
  color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .daily-sale-table .customer-col {
  background: #080808 !important;
  box-shadow: 1px 0 0 #242424 !important;
}

[data-bs-theme="dark"] .daily-sale-table tbody tr:nth-child(even) td {
  background: #0a0a0a !important;
}

[data-bs-theme="dark"] .daily-sale-table tbody tr:hover td {
  background: #101820 !important;
}

[data-bs-theme="dark"] .daily-sale-table td.has-value,
[data-bs-theme="dark"] .daily-sale-table .total-col,
[data-bs-theme="dark"] .daily-sale-table tfoot td,
[data-bs-theme="dark"] .daily-sale-table tfoot .customer-col {
  background: rgba(22, 101, 52, .22) !important;
  color: #86efac !important;
  box-shadow: inset 0 1px 0 rgba(34, 197, 94, .2) !important;
}

[data-bs-theme="dark"] .daily-sale-table td.empty-value {
  color: #64748b !important;
}

[data-bs-theme="dark"] .asset-dashboard,
[data-bs-theme="dark"] .hr-dashboard {
  background: #000000 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .asset-dashboard-hero,
[data-bs-theme="dark"] .hr-dashboard-hero,
[data-bs-theme="dark"] .asset-dashboard-metric,
[data-bs-theme="dark"] .asset-dashboard-panel,
[data-bs-theme="dark"] .asset-dashboard-card,
[data-bs-theme="dark"] .asset-due-row,
[data-bs-theme="dark"] .asset-dashboard-card dl div,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi,
[data-bs-theme="dark"] .hr-dashboard-panel,
[data-bs-theme="dark"] .hr-dashboard-row,
[data-bs-theme="dark"] .hr-dashboard-settings {
  background: #050505 !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .asset-dashboard-card dl {
  background: #202020 !important;
  border-color: #202020 !important;
}

[data-bs-theme="dark"] .asset-dashboard-hero h3,
[data-bs-theme="dark"] .asset-dashboard-metric strong,
[data-bs-theme="dark"] .asset-dashboard-panel h4,
[data-bs-theme="dark"] .asset-dashboard-card strong,
[data-bs-theme="dark"] .asset-dashboard-card dd,
[data-bs-theme="dark"] .asset-due-row strong,
[data-bs-theme="dark"] .hr-dashboard-hero h3,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi strong,
[data-bs-theme="dark"] .hr-dashboard-panel h4,
[data-bs-theme="dark"] .hr-dashboard-row strong,
[data-bs-theme="dark"] .hr-dashboard-settings dd {
  color: #ffffff !important;
}

[data-bs-theme="dark"] .asset-dashboard-hero p,
[data-bs-theme="dark"] .asset-dashboard-metric span,
[data-bs-theme="dark"] .asset-dashboard-metric small,
[data-bs-theme="dark"] .asset-dashboard-card dt,
[data-bs-theme="dark"] .asset-dashboard-card small,
[data-bs-theme="dark"] .asset-due-row small,
[data-bs-theme="dark"] .asset-due-row em,
[data-bs-theme="dark"] .hr-dashboard-hero p,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi span,
[data-bs-theme="dark"] .hr-dashboard-row small,
[data-bs-theme="dark"] .hr-dashboard-settings dt {
  color: var(--portal-text-muted) !important;
}

[data-bs-theme="dark"] .asset-dashboard-panel header > strong,
[data-bs-theme="dark"] .driver-report-card-drivers section > span,
[data-bs-theme="dark"] .driver-report-driver h4 span,
[data-bs-theme="dark"] .hr-dashboard-panel header > strong {
  background: rgba(34, 211, 238, .14) !important;
  color: #7dd3fc !important;
}

[data-bs-theme="dark"] .asset-dashboard-metric.blue i,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi.blue i {
  background: rgba(59, 130, 246, .16) !important;
  color: #93c5fd !important;
}

[data-bs-theme="dark"] .asset-dashboard-metric.green i,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi.green i {
  background: rgba(34, 197, 94, .16) !important;
  color: #86efac !important;
}

[data-bs-theme="dark"] .asset-dashboard-metric.orange i,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi.orange i {
  background: rgba(251, 146, 60, .16) !important;
  color: #fdba74 !important;
}

[data-bs-theme="dark"] .asset-dashboard-metric.red i {
  background: rgba(248, 113, 113, .16) !important;
  color: #fca5a5 !important;
}

[data-bs-theme="dark"] .asset-dashboard-metric.purple i,
[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi.purple i {
  background: rgba(168, 85, 247, .16) !important;
  color: #c4b5fd !important;
}

[data-bs-theme="dark"] .hr-dashboard-kpis .hr-kpi.cyan i {
  background: rgba(34, 211, 238, .14) !important;
  color: #67e8f9 !important;
}

/* Modern dashboard command center */
.dashboard-modern-page {
  display: grid;
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.92)),
    var(--portal-surface-2);
}

.dashboard-modern-page .premium-dashboard-hero {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 380px);
  min-height: 260px;
  margin-bottom: 0 !important;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96) 55%, rgba(236,253,245,.92)),
    var(--portal-surface);
}

.dashboard-modern-page .premium-dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,165,233,.08), transparent 42%),
    repeating-linear-gradient(90deg, rgba(15,23,42,.035) 0 1px, transparent 1px 72px);
}

.dashboard-modern-page .dashboard-hero-copy,
.dashboard-modern-page .dashboard-account-card {
  position: relative;
  z-index: 1;
}

.dashboard-modern-page .dashboard-hero-copy {
  display: grid;
  align-content: center;
  padding: 28px 30px;
}

.dashboard-modern-page .welcome-badge {
  width: fit-content;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0;
}

.dashboard-modern-page .welcome-heading {
  margin: 0;
  max-width: 780px;
  font-size: 34px;
  line-height: 1.05;
}

.dashboard-modern-page .welcome-sub {
  max-width: 760px;
  margin-top: 10px;
  font-size: 14.5px;
}

.dashboard-modern-page .dashboard-hero-actions a {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.dashboard-modern-page .dashboard-hero-actions a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(14, 165, 233, .16);
}

.dashboard-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(34,197,94,.24);
  border-radius: 8px;
  background: rgba(34,197,94,.08);
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-session-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dashboard-session-row strong {
  flex: 0 0 auto;
}

.dashboard-modern-page .dashboard-status-strip {
  margin-bottom: 0 !important;
}

.dashboard-modern-page .dashboard-status-strip article,
.dashboard-ops-card,
.dashboard-modern-page .dashboard-kpi-grid .kpi-card,
.dashboard-modern-page .dashboard-group-panel,
.dashboard-modern-page .dashboard-side-panel {
  border-radius: 8px;
  border-color: rgba(148,163,184,.28);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.dashboard-modern-page .dashboard-status-strip article {
  min-height: 82px;
}

.dashboard-ops-row {
  display: grid;
  grid-template-columns: 1.25fr repeat(2, minmax(220px, .8fr));
  gap: 12px;
}

.dashboard-ops-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 118px;
  padding: 16px;
  background: var(--portal-surface);
  border: 1px solid var(--portal-border);
}

.dashboard-ops-card > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(14,165,233,.12);
  color: #0284c7;
  font-size: 20px;
}

.dashboard-ops-card.primary > span {
  background: rgba(22,163,74,.12);
  color: #16a34a;
}

.dashboard-ops-card small,
.dashboard-health-list span {
  display: block;
  color: var(--portal-text-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dashboard-ops-card strong {
  display: block;
  margin-top: 3px;
  color: var(--portal-text);
  font-size: 18px;
  font-weight: 850;
}

.dashboard-ops-card p {
  margin: 8px 0 0;
  color: var(--portal-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.dashboard-modern-page .dashboard-workbench {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
}

.dashboard-modern-page .dashboard-section-head {
  padding: 0 2px;
}

.dashboard-modern-page .dashboard-section-head h2 {
  font-size: 24px;
}

.dashboard-modern-page .dashboard-group-panel {
  padding: 16px;
}

.dashboard-modern-page .premium-module-card {
  min-height: 86px;
  background: var(--portal-surface);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.dashboard-modern-page .premium-module-card:hover {
  background: linear-gradient(180deg, rgba(240,249,255,.94), rgba(255,255,255,.98));
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 165, 233, .13);
}

.dashboard-modern-page .module-card-icon,
.dashboard-modern-page .dashboard-group-panel > header > span {
  border-radius: 8px;
}

.dashboard-health-list {
  display: grid;
  gap: 1px;
  padding: 0 16px 16px;
}

.dashboard-health-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--portal-border);
}

.dashboard-health-list div:last-child {
  border-bottom: 0;
}

.dashboard-health-list strong {
  overflow: hidden;
  max-width: 160px;
  color: var(--portal-text);
  font-size: 12.5px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-revealed {
  animation: dashboardReveal .42s ease both;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes dashboardReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-bs-theme="dark"] .dashboard-modern-page {
  background: #000000 !important;
}

[data-bs-theme="dark"] .dashboard-modern-page .premium-dashboard-hero {
  background:
    linear-gradient(135deg, rgba(5,5,5,.98), rgba(0,0,0,.98) 62%, rgba(8,47,73,.24)),
    #000000 !important;
}

[data-bs-theme="dark"] .dashboard-modern-page .premium-dashboard-hero::before {
  background:
    linear-gradient(90deg, rgba(34,211,238,.08), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px);
}

[data-bs-theme="dark"] .dashboard-modern-page .dashboard-hero-actions a,
[data-bs-theme="dark"] .dashboard-ops-card,
[data-bs-theme="dark"] .dashboard-health-list div {
  background: #050505 !important;
  border-color: #202020 !important;
  color: var(--portal-text) !important;
}

[data-bs-theme="dark"] .dashboard-modern-page .premium-module-card:hover {
  background: #0a0a0a !important;
}

[data-bs-theme="dark"] .dashboard-session-row {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.28) !important;
  color: #86efac !important;
}

[data-bs-theme="dark"] .dashboard-ops-card.primary > span {
  background: rgba(34,197,94,.16) !important;
  color: #86efac !important;
}

[data-bs-theme="dark"] .dashboard-ops-card > span {
  background: rgba(34,211,238,.14) !important;
  color: #67e8f9 !important;
}

@media (max-width: 1199.98px) {
  .dashboard-ops-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .dashboard-modern-page .premium-dashboard-hero,
  .dashboard-modern-page .dashboard-workbench {
    grid-template-columns: 1fr;
  }

  .dashboard-modern-page .dashboard-account-card {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .dashboard-modern-page .dashboard-hero-copy {
    padding: 20px;
  }

  .dashboard-modern-page .welcome-heading {
    font-size: 26px;
  }

  .dashboard-ops-card {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-revealed,
  .dashboard-modern-page .dashboard-hero-actions a,
  .dashboard-modern-page .premium-module-card {
    animation: none !important;
    transition: none !important;
  }
}