/* ════════════════════════════════════════════════════════════════
   CONSTRUCTION-ERP  ·  Global stylesheet
   Design system: Obsidian — Premium ERP for 8-hour sessions
   ════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --nav-width: 260px;
  --nav-mini: 72px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --font-mono:
    "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Premium shadow system — layered for depth */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.20);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 20px rgba(30,64,175,0.15);
  --shadow-card: var(--shadow-sm);
  --shadow-drop: var(--shadow-lg);

  /* Glass effect */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.20);
  --glass-blur: 16px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.12s var(--ease-out);
  --transition-ui: 0.18s var(--ease-out);
  --transition-slow: 0.3s var(--ease-out);

  /* Gradient accents */
  --gradient-primary: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
  --gradient-success: linear-gradient(135deg, #059669 0%, #10B981 100%);
  --gradient-warning: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
  --gradient-danger: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
  --gradient-info: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
  --gradient-sidebar: linear-gradient(180deg, #0C1222 0%, #0A0F1C 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(30,64,175,0.04) 0%, transparent 50%),
                   radial-gradient(at 80% 80%, rgba(14,165,233,0.03) 0%, transparent 50%);
}

/* Dark mode tokens */
.mud-theme-dark {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px rgba(107,141,214,0.12);
  --shadow-card: 0 0 0 1px rgba(148,163,184,0.06), var(--shadow-sm);
  --shadow-drop: 0 0 0 1px rgba(148,163,184,0.08), var(--shadow-lg);
  --glass-bg: rgba(11,17,32,0.80);
  --glass-border: rgba(148,163,184,0.08);
  --gradient-sidebar: linear-gradient(180deg, #060A14 0%, #040810 100%);
  --gradient-mesh: radial-gradient(at 40% 20%, rgba(107,141,214,0.03) 0%, transparent 50%),
                   radial-gradient(at 80% 80%, rgba(56,189,248,0.02) 0%, transparent 50%);
}

/* ── Base ────────────────────────────────────────────────────── */
html, body {
  font-family: "Geist", "DM Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background: var(--mud-palette-background);
  color: var(--mud-palette-text-primary);
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Subtle mesh background on main content */
.mud-main-content {
  background: var(--mud-palette-background);
  background-image: var(--gradient-mesh);
  min-height: 100vh;
}

/* ── Scrollbar — minimal & elegant ─────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.2) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.2);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.35); }

/* ════════════════════════════════════════════════════════════════
   APP BAR — Frosted glass header (light) / solid dark surface (dark)
   ════════════════════════════════════════════════════════════════ */
.mud-appbar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-xs) !important;
}

.mud-appbar .mud-typography-h6 {
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #2563EB !important;
  font-family: "Geist", system-ui, sans-serif !important;
}

/* Top bar search */
.topbar-search .mud-input-root {
  background: var(--mud-palette-background-grey) !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.8125rem !important;
}
.topbar-search .mud-input-outlined-border {
  border-color: transparent !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-ui) !important;
}
.topbar-search .mud-input-outlined-border:focus-within {
  border-color: var(--mud-palette-primary) !important;
  box-shadow: 0 0 0 3px rgba(30,64,175,0.1), var(--shadow-glow) !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — Premium dark navigation
   ════════════════════════════════════════════════════════════════ */
.mud-drawer {
  background: var(--gradient-sidebar) !important;
  border-right: 1px solid rgba(148,163,184,0.06) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Section labels */
.mud-nav-group .mud-typography-overline,
.mud-navmenu .mud-typography-overline {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(148,163,184,0.5) !important;
  padding-inline: 18px;
  margin-top: 8px;
}

/* Nav links — pill-shaped with glow on active */
.mud-nav-link {
  border-radius: var(--radius-md) !important;
  margin: 2px 10px !important;
  padding: 8px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 450 !important;
  transition: all var(--transition-ui) !important;
  color: var(--mud-palette-drawer-text) !important;
  position: relative;
}
.mud-nav-link .mud-icon-root {
  color: var(--mud-palette-drawer-icon) !important;
  font-size: 1.25rem !important;
  transition: all var(--transition-ui) !important;
}
.mud-nav-link:hover {
  background: rgba(255,255,255,0.06) !important;
}
.mud-nav-link:hover .mud-icon-root {
  color: var(--mud-palette-drawer-text) !important;
}
.mud-nav-link.active {
  background: rgba(107,141,214,0.16) !important;
  color: #BFDBFE !important;
  font-weight: 600 !important;
  box-shadow: inset 4px 0 0 #6B8DD6;
}
.mud-nav-link.active .mud-icon-root {
  color: #93C5FD !important;
}

/* Nav group header */
.mud-nav-group-header {
  border-radius: var(--radius-md) !important;
  margin: 2px 10px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--mud-palette-drawer-text) !important;
}

/* Brighter nav text */
.mud-navmenu .mud-nav-link,
.mud-navmenu .mud-nav-group-header {
  color: #E2E8F0 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
}
/* Submenu container — indent + tree connector line */
.mud-navmenu .mud-nav-group .mud-collapse {
  border-left: 1px solid rgba(148,163,184,0.14);
  margin-left: 24px;
  margin-right: 4px;
}
.mud-navmenu .mud-nav-group .mud-collapse .mud-nav-link {
  color: #94A3B8 !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  padding-left: 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: var(--radius-sm) !important;
}
/* Section category labels — visually distinct separators */
.mud-navmenu .mud-typography-overline {
  color: rgba(148,163,184,0.75) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mud-navmenu .mud-typography-overline::before {
  content: '';
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(148,163,184,0.12);
  max-width: 12px;
}
.mud-navmenu .mud-typography-overline::after {
  content: '';
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(148,163,184,0.12);
}
.mud-navmenu .mud-nav-link .mud-icon-root {
  font-size: 1.2rem !important;
}

/* Module-specific icon colors */
.mud-navmenu .nav-ico-dashboard    .mud-icon-root { color:#6B8DD6 !important; }
.mud-navmenu .nav-ico-gl           .mud-icon-root { color:#34D399 !important; }
.mud-navmenu .nav-ico-org          .mud-icon-root { color:#22D3EE !important; }
.mud-navmenu .nav-ico-approvals    .mud-icon-root { color:#A78BFA !important; }
.mud-navmenu .nav-ico-inventory    .mud-icon-root { color:#FBBF24 !important; }
.mud-navmenu .nav-ico-sales        .mud-icon-root { color:#F472B6 !important; }
.mud-navmenu .nav-ico-procurement  .mud-icon-root { color:#FB923C !important; }
.mud-navmenu .nav-ico-projects     .mud-icon-root { color:#38BDF8 !important; }
.mud-navmenu .nav-ico-ap           .mud-icon-root { color:#F87171 !important; }
.mud-navmenu .nav-ico-subcontracts .mud-icon-root { color:#C084FC !important; }
.mud-navmenu .nav-ico-hr           .mud-icon-root { color:#2DD4BF !important; }
.mud-navmenu .nav-ico-assets       .mud-icon-root { color:#FACC15 !important; }
.mud-navmenu .nav-ico-qc           .mud-icon-root { color:#4ADE80 !important; }
.mud-navmenu .nav-ico-crm          .mud-icon-root { color:#E879F9 !important; }
.mud-navmenu .nav-ico-ar           .mud-icon-root { color:#FCD34D !important; }
.mud-navmenu .nav-ico-budget       .mud-icon-root { color:#5EEAD4 !important; }
.mud-navmenu .nav-ico-contracts    .mud-icon-root { color:#FCA5A5 !important; }
.mud-navmenu .nav-ico-payroll      .mud-icon-root { color:#93C5FD !important; }
.mud-navmenu .nav-ico-equipment    .mud-icon-root { color:#FDBA74 !important; }
.mud-navmenu .nav-ico-compliance   .mud-icon-root { color:#A3E635 !important; }
.mud-navmenu .nav-ico-system       .mud-icon-root { color:#94A3B8 !important; }
.mud-navmenu .nav-ico-reports      .mud-icon-root { color:#FB7185 !important; }
.mud-navmenu .nav-ico-documents    .mud-icon-root { color:#67E8F9 !important; }
.mud-navmenu .nav-ico-settings     .mud-icon-root { color:#CBD5E1 !important; }

/* Per-module active highlight — each module uses its own color */
.mud-navmenu .nav-ico-gl         .mud-nav-link.active { background:rgba(52,211,153,0.14)  !important; box-shadow:inset 4px 0 0 #34D399; color:#6EE7B7 !important; }
.mud-navmenu .nav-ico-gl         .mud-nav-link.active .mud-icon-root { color:#34D399 !important; }
.mud-navmenu .nav-ico-inventory  .mud-nav-link.active { background:rgba(251,191,36,0.14)  !important; box-shadow:inset 4px 0 0 #FBBF24; color:#FDE68A !important; }
.mud-navmenu .nav-ico-inventory  .mud-nav-link.active .mud-icon-root { color:#FBBF24 !important; }
.mud-navmenu .nav-ico-sales      .mud-nav-link.active { background:rgba(244,114,182,0.14) !important; box-shadow:inset 4px 0 0 #F472B6; color:#FBCFE8 !important; }
.mud-navmenu .nav-ico-sales      .mud-nav-link.active .mud-icon-root { color:#F472B6 !important; }
.mud-navmenu .nav-ico-procurement .mud-nav-link.active { background:rgba(251,146,60,0.14) !important; box-shadow:inset 4px 0 0 #FB923C; color:#FED7AA !important; }
.mud-navmenu .nav-ico-procurement .mud-nav-link.active .mud-icon-root { color:#FB923C !important; }
.mud-navmenu .nav-ico-projects   .mud-nav-link.active { background:rgba(56,189,248,0.14)  !important; box-shadow:inset 4px 0 0 #38BDF8; color:#BAE6FD !important; }
.mud-navmenu .nav-ico-projects   .mud-nav-link.active .mud-icon-root { color:#38BDF8 !important; }
.mud-navmenu .nav-ico-payroll    .mud-nav-link.active { background:rgba(147,197,253,0.14) !important; box-shadow:inset 4px 0 0 #93C5FD; color:#BFDBFE !important; }
.mud-navmenu .nav-ico-payroll    .mud-nav-link.active .mud-icon-root { color:#93C5FD !important; }
.mud-navmenu .nav-ico-equipment  .mud-nav-link.active { background:rgba(253,186,116,0.14) !important; box-shadow:inset 4px 0 0 #FDBA74; color:#FED7AA !important; }
.mud-navmenu .nav-ico-equipment  .mud-nav-link.active .mud-icon-root { color:#FDBA74 !important; }
.mud-navmenu .nav-ico-ap         .mud-nav-link.active { background:rgba(248,113,113,0.14) !important; box-shadow:inset 4px 0 0 #F87171; color:#FECACA !important; }
.mud-navmenu .nav-ico-ap         .mud-nav-link.active .mud-icon-root { color:#F87171 !important; }
.mud-navmenu .nav-ico-ar         .mud-nav-link.active { background:rgba(252,211,77,0.14)  !important; box-shadow:inset 4px 0 0 #FCD34D; color:#FEF08A !important; }
.mud-navmenu .nav-ico-ar         .mud-nav-link.active .mud-icon-root { color:#FCD34D !important; }
.mud-navmenu .nav-ico-hr         .mud-nav-link.active { background:rgba(45,212,191,0.14)  !important; box-shadow:inset 4px 0 0 #2DD4BF; color:#99F6E4 !important; }
.mud-navmenu .nav-ico-hr         .mud-nav-link.active .mud-icon-root { color:#2DD4BF !important; }
.mud-navmenu .nav-ico-budget     .mud-nav-link.active { background:rgba(94,234,212,0.14)  !important; box-shadow:inset 4px 0 0 #5EEAD4; color:#CCFBF1 !important; }
.mud-navmenu .nav-ico-budget     .mud-nav-link.active .mud-icon-root { color:#5EEAD4 !important; }
.mud-navmenu .nav-ico-qc         .mud-nav-link.active { background:rgba(74,222,128,0.14)  !important; box-shadow:inset 4px 0 0 #4ADE80; color:#BBF7D0 !important; }
.mud-navmenu .nav-ico-qc         .mud-nav-link.active .mud-icon-root { color:#4ADE80 !important; }
.mud-navmenu .nav-ico-crm        .mud-nav-link.active { background:rgba(232,121,249,0.14) !important; box-shadow:inset 4px 0 0 #E879F9; color:#F5D0FE !important; }
.mud-navmenu .nav-ico-crm        .mud-nav-link.active .mud-icon-root { color:#E879F9 !important; }
.mud-navmenu .nav-ico-org        .mud-nav-link.active { background:rgba(34,211,238,0.14)  !important; box-shadow:inset 4px 0 0 #22D3EE; color:#A5F3FC !important; }
.mud-navmenu .nav-ico-org        .mud-nav-link.active .mud-icon-root { color:#22D3EE !important; }
.mud-navmenu .nav-ico-approvals  .mud-nav-link.active { background:rgba(167,139,250,0.14) !important; box-shadow:inset 4px 0 0 #A78BFA; color:#DDD6FE !important; }
.mud-navmenu .nav-ico-approvals  .mud-nav-link.active .mud-icon-root { color:#A78BFA !important; }
.mud-navmenu .nav-ico-compliance .mud-nav-link.active { background:rgba(163,230,53,0.12)  !important; box-shadow:inset 4px 0 0 #A3E635; color:#D9F99D !important; }
.mud-navmenu .nav-ico-compliance .mud-nav-link.active .mud-icon-root { color:#A3E635 !important; }
.mud-navmenu .nav-ico-reports    .mud-nav-link.active { background:rgba(251,113,133,0.14) !important; box-shadow:inset 4px 0 0 #FB7185; color:#FECDD3 !important; }
.mud-navmenu .nav-ico-reports    .mud-nav-link.active .mud-icon-root { color:#FB7185 !important; }
.mud-navmenu .nav-ico-documents  .mud-nav-link.active { background:rgba(103,232,249,0.14) !important; box-shadow:inset 4px 0 0 #67E8F9; color:#CFFAFE !important; }
.mud-navmenu .nav-ico-documents  .mud-nav-link.active .mud-icon-root { color:#67E8F9 !important; }
.mud-navmenu .nav-ico-assets     .mud-nav-link.active { background:rgba(250,204,21,0.14)  !important; box-shadow:inset 4px 0 0 #FACC15; color:#FEF08A !important; }
.mud-navmenu .nav-ico-assets     .mud-nav-link.active .mud-icon-root { color:#FACC15 !important; }
.mud-navmenu .nav-ico-subcontracts .mud-nav-link.active { background:rgba(192,132,252,0.14) !important; box-shadow:inset 4px 0 0 #C084FC; color:#E9D5FF !important; }
.mud-navmenu .nav-ico-subcontracts .mud-nav-link.active .mud-icon-root { color:#C084FC !important; }
.mud-navmenu .nav-ico-contracts  .mud-nav-link.active { background:rgba(252,165,165,0.14) !important; box-shadow:inset 4px 0 0 #FCA5A5; color:#FECACA !important; }
.mud-navmenu .nav-ico-contracts  .mud-nav-link.active .mud-icon-root { color:#FCA5A5 !important; }

/* Sidebar user card */
.sidebar-user {
  background: rgba(255,255,255,0.04) !important;
  border-radius: var(--radius-md) !important;
  margin: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(8px);
}

/* Sidebar version footer */
.sidebar-version {
  padding: 14px 18px 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ════════════════════════════════════════════════════════════════
   CARDS & PAPER — Refined elevation system
   ════════════════════════════════════════════════════════════════ */
.mud-paper {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--mud-palette-divider) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow var(--transition-ui), transform var(--transition-ui) !important;
}

.mud-elevation-0 {
  box-shadow: none !important;
  border: none !important;
}

.mud-elevation-4, .mud-elevation-6, .mud-elevation-8 {
  box-shadow: var(--shadow-xl) !important;
}

/* Card hover lift */
.mud-card {
  border-radius: var(--radius-lg) !important;
  transition: box-shadow var(--transition-ui), transform var(--transition-ui) !important;
}
.mud-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* Dark mode card glow */
.mud-theme-dark .mud-card,
.mud-theme-dark .erp-card {
  box-shadow: var(--shadow-card) !important;
}
.mud-theme-dark .mud-card:hover,
.mud-theme-dark .erp-card:hover {
  box-shadow: var(--shadow-drop), var(--shadow-glow) !important;
}

/* ════════════════════════════════════════════════════════════════
   KPI CARDS — Premium data display
   ════════════════════════════════════════════════════════════════ */
.mud-paper .mud-typography-h4,
.mud-paper .mud-typography-h5 {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  line-height: 1.2;
}

.kpi-card {
  position: relative;
  background: var(--mud-palette-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mud-palette-divider);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-ui);
  width: 100%;
}
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.kpi-accent-bar {
  height: 3px;
  width: 100%;
  background: var(--kpi-color);
  opacity: 0.9;
}
.kpi-body {
  padding: 20px 20px 22px;
}
.kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.kpi-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  line-height: 1.4;
}
.kpi-icon-pill {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--kpi-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--mud-palette-text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.kpi-sub {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
}
.dash-card-compact { width: 100%; }

/* ════════════════════════════════════════════════════════════════
   TABLES — Clean, data-dense
   ════════════════════════════════════════════════════════════════ */
.mud-table {
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.mud-table-container {
  border-radius: var(--radius-lg) !important;
}

/* Header cells */
.mud-table-head .mud-table-cell {
  background: var(--mud-palette-background-grey) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mud-palette-text-secondary) !important;
  border-bottom: 2px solid var(--mud-palette-divider) !important;
  white-space: nowrap;
  padding: 10px 16px !important;
}

/* Dense body cells */
.mud-table-dense .mud-table-cell {
  padding: 6px 16px !important;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* Regular body cells */
.mud-table .mud-table-cell {
  padding: 12px 16px !important;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--mud-palette-table-lines);
  transition: background var(--transition-fast);
}

/* Hover */
.mud-table-row:hover .mud-table-cell {
  background: var(--mud-palette-table-hover) !important;
}

/* Simple tables */
.mud-simple-table thead tr {
  background: var(--mud-palette-background-grey) !important;
}
.mud-simple-table thead th {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mud-palette-text-secondary) !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid var(--mud-palette-divider) !important;
}
.mud-simple-table tbody td {
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  border-bottom: 1px solid var(--mud-palette-divider) !important;
}
.mud-simple-table tbody tr:last-child td { border-bottom: none !important; }
.mud-simple-table tbody tr:hover td { background: var(--mud-palette-table-hover) !important; }

/* Financial numbers */
.num, [style*="tabular-nums"], td .mud-typography[style*="tabular-nums"] {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — Polished with subtle depth
   ════════════════════════════════════════════════════════════════ */
.mud-button-root {
  border-radius: var(--radius-md) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition-ui) !important;
}
.mud-button-root:not(:disabled):hover {
  transform: translateY(-1px);
}

/* Filled primary — flat Steel Blue */
.mud-button-filled-primary {
  box-shadow: 0 1px 3px rgba(30,64,175,0.3), 0 1px 2px rgba(30,64,175,0.2) !important;
}
.mud-button-filled-primary:hover {
  box-shadow: 0 4px 12px rgba(30,64,175,0.35), 0 2px 4px rgba(30,64,175,0.2) !important;
}

/* Outlined buttons */
.mud-button-outlined {
  border-width: 1.5px !important;
}

/* ════════════════════════════════════════════════════════════════
   CHIPS & BADGES — Refined tags
   ════════════════════════════════════════════════════════════════ */
.mud-chip {
  border-radius: var(--radius-sm) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  height: 22px !important;
  letter-spacing: 0.02em !important;
}

/* ════════════════════════════════════════════════════════════════
   INPUTS — Clean with focus glow
   ════════════════════════════════════════════════════════════════ */
.mud-input-outlined-border {
  border-radius: var(--radius-md) !important;
  border-color: var(--mud-palette-lines-inputs) !important;
  transition: all var(--transition-ui) !important;
}
.mud-input-outlined-border:focus-within {
  border-color: var(--mud-palette-primary) !important;
  box-shadow: 0 0 0 3px rgba(30,64,175,0.08), var(--shadow-glow) !important;
}

.mud-select .mud-input-outlined-border {
  border-radius: var(--radius-md) !important;
}

/* ════════════════════════════════════════════════════════════════
   ALERTS — Left-accent with depth
   ════════════════════════════════════════════════════════════════ */
.mud-alert {
  border-radius: var(--radius-lg) !important;
  border-left-width: 4px !important;
}

/* ════════════════════════════════════════════════════════════════
   TIMELINE
   ════════════════════════════════════════════════════════════════ */
.mud-timeline-item-dot {
  box-shadow: 0 0 0 3px var(--mud-palette-surface) !important;
}

/* ════════════════════════════════════════════════════════════════
   DIVIDERS
   ════════════════════════════════════════════════════════════════ */
.mud-divider {
  border-color: var(--mud-palette-divider) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════════
   STATUS BADGES — Pill-shaped with subtle gradients
   ════════════════════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge.posted   { background: #D1FAE5; color: #065F46; }
.status-badge.posted::before { background: #059669; }
.status-badge.approved { background: #DBEAFE; color: #1E3A8A; }
.status-badge.approved::before { background: #1E40AF; }
.status-badge.submitted { background: #FEF3C7; color: #92400E; }
.status-badge.submitted::before { background: #D97706; }
.status-badge.draft    { background: #F1F5F9; color: #475569; }
.status-badge.draft::before { background: #94A3B8; }
.status-badge.error    { background: #FEE2E2; color: #991B1B; }
.status-badge.error::before { background: #DC2626; }
.status-badge.locked   { background: #F3E8FF; color: #6B21A8; }
.status-badge.locked::before { background: #7C3AED; }
.status-badge.closed   { background: #F1F5F9; color: #334155; }
.status-badge.closed::before { background: #64748B; }
.status-badge.active   { background: #DBEAFE; color: #1E40AF; }
.status-badge.active::before { background: #2563EB; }
.status-badge.info     { background: #E0F2FE; color: #075985; }
.status-badge.info::before { background: #0284C7; }

/* Dark mode status badges */
.mud-theme-dark .status-badge.posted   { background: rgba(5,150,105,0.15); color: #6EE7B7; }
.mud-theme-dark .status-badge.posted::before { background: #34D399; }
.mud-theme-dark .status-badge.approved { background: rgba(30,64,175,0.18); color: #93C5FD; }
.mud-theme-dark .status-badge.approved::before { background: #6B8DD6; }
.mud-theme-dark .status-badge.submitted { background: rgba(217,119,6,0.15); color: #FCD34D; }
.mud-theme-dark .status-badge.submitted::before { background: #FBBF24; }
.mud-theme-dark .status-badge.draft    { background: rgba(148,163,184,0.1); color: #94A3B8; }
.mud-theme-dark .status-badge.draft::before { background: #64748B; }
.mud-theme-dark .status-badge.error    { background: rgba(220,38,38,0.15); color: #FCA5A5; }
.mud-theme-dark .status-badge.error::before { background: #F87171; }
.mud-theme-dark .status-badge.locked   { background: rgba(124,58,237,0.15); color: #C4B5FD; }
.mud-theme-dark .status-badge.locked::before { background: #A78BFA; }
.mud-theme-dark .status-badge.closed   { background: rgba(100,116,139,0.15); color: #94A3B8; }
.mud-theme-dark .status-badge.closed::before { background: #64748B; }
.mud-theme-dark .status-badge.active   { background: rgba(37,99,235,0.15); color: #93C5FD; }
.mud-theme-dark .status-badge.active::before { background: #60A5FA; }
.mud-theme-dark .status-badge.info     { background: rgba(2,132,199,0.15); color: #7DD3FC; }
.mud-theme-dark .status-badge.info::before { background: #38BDF8; }
.status-badge.completed { background: #DBEAFE; color: #1E3A8A; }
.status-badge.completed::before { background: #1E40AF; }
.status-badge.paid      { background: #D1FAE5; color: #065F46; }
.status-badge.paid::before { background: #059669; }
.status-badge.disposed  { background: #F1F5F9; color: #334155; }
.status-badge.disposed::before { background: #64748B; }
.status-badge.impaired  { background: #FEE2E2; color: #991B1B; }
.status-badge.impaired::before { background: #DC2626; }
.status-badge.suspended { background: #FEF3C7; color: #92400E; }
.status-badge.suspended::before { background: #D97706; }
.status-badge.terminated { background: #FEE2E2; color: #991B1B; }
.status-badge.terminated::before { background: #DC2626; }
.status-badge.maintenance { background: #FEF3C7; color: #92400E; }
.status-badge.maintenance::before { background: #D97706; }
.mud-theme-dark .status-badge.completed { background: rgba(30,64,175,0.18); color: #93C5FD; }
.mud-theme-dark .status-badge.completed::before { background: #6B8DD6; }
.mud-theme-dark .status-badge.paid      { background: rgba(5,150,105,0.15); color: #6EE7B7; }
.mud-theme-dark .status-badge.paid::before { background: #34D399; }
.mud-theme-dark .status-badge.disposed  { background: rgba(100,116,139,0.15); color: #94A3B8; }
.mud-theme-dark .status-badge.disposed::before { background: #64748B; }
.mud-theme-dark .status-badge.impaired  { background: rgba(220,38,38,0.15); color: #FCA5A5; }
.mud-theme-dark .status-badge.impaired::before { background: #F87171; }
.mud-theme-dark .status-badge.suspended { background: rgba(217,119,6,0.15); color: #FCD34D; }
.mud-theme-dark .status-badge.suspended::before { background: #FBBF24; }
.mud-theme-dark .status-badge.terminated { background: rgba(220,38,38,0.15); color: #FCA5A5; }
.mud-theme-dark .status-badge.terminated::before { background: #F87171; }
.mud-theme-dark .status-badge.maintenance { background: rgba(217,119,6,0.15); color: #FCD34D; }
.mud-theme-dark .status-badge.maintenance::before { background: #FBBF24; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD GRID
   ════════════════════════════════════════════════════════════════ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1px;
  gap: var(--spacing-md);
  align-items: start;
  position: relative;
}
.dash-col-3  { grid-column: span 3; }
.dash-col-4  { grid-column: span 4; }
.dash-col-6  { grid-column: span 6; }
.dash-col-8  { grid-column: span 8; }
.dash-col-12 { grid-column: span 12; }

@media (max-width: 1280px) {
  .dash-col-3 { grid-column: span 4; }
}
@media (max-width: 960px) {
  .dash-col-3, .dash-col-4 { grid-column: span 6; }
  .dash-col-6 { grid-column: span 6; }
}
@media (max-width: 600px) {
  .dash-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dash-col-3, .dash-col-4, .dash-col-6, .dash-col-8, .dash-col-12 {
    grid-column: auto !important;
  }
}

/* Drag wrapper — dragging is scoped to .dash-drag-handle so scroll gestures
   (touch or click-drag) anywhere else on the card are never captured. */
.dash-card-wrap {
  position: relative;
  /* Grid items default to min-width:auto, which refuses to shrink below the
     intrinsic content width of children (e.g. a wide MudTable). Without this,
     a single wide table forces the whole .dash-grid row — and from there the
     entire page/viewport — to widen past the device width instead of
     scrolling horizontally inside its own .mud-table-container. This is what
     made "Switch to full site" render as a desktop-width page even on a real
     mobile viewport. */
  min-width: 0;
  transition: transform var(--transition-ui), box-shadow var(--transition-ui);
}
.dash-drag-handle {
  position: absolute;
  top: 8px;
  right: 40px;
  z-index: 10;
  cursor: grab;
  opacity: 0;
  color: var(--mud-palette-text-secondary);
  transition: opacity var(--transition-fast);
}
.dash-drag-handle:active { cursor: grabbing; }
.dash-card-wrap:hover .dash-drag-handle { opacity: 1; }
.dash-actions-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.dash-card-wrap:hover .dash-actions-btn { opacity: 1; }

/* Online Users widget — user row hover */
.presence-user-row:hover { background: rgba(148, 163, 184, 0.07); }

/* SortableJS states */
.dash-ghost { opacity: 0.3; }
.dash-chosen {
  box-shadow: var(--shadow-2xl) !important;
  transform: rotate(1deg) scale(1.02);
}

/* Card picker dialog */
.card-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--mud-palette-divider);
  background: var(--mud-palette-surface);
  transition: all var(--transition-ui);
  cursor: pointer;
}
.card-picker-item:hover {
  border-color: var(--mud-palette-primary);
  box-shadow: var(--shadow-sm);
}
.card-picker-item.picker-on {
  border-color: var(--mud-palette-primary);
  background: rgba(79,70,229,0.04);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.08);
}

/* ── KPI card enhancements — trends + sparklines ─────────────── */
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}
.kpi-trend-up   { background: rgba(5,150,105,0.12);  color: #059669; }
.kpi-trend-down { background: rgba(220,38,38,0.12);  color: #DC2626; }
.kpi-trend-flat { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }
.mud-theme-dark .kpi-trend-up   { background: rgba(52,211,153,0.14); color: #34D399; }
.mud-theme-dark .kpi-trend-down { background: rgba(248,113,113,0.14); color: #F87171; }
.kpi-sparkline-wrap {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 76px;
  height: 34px;
  opacity: 0.22;
  pointer-events: none;
}
.kpi-sparkline-wrap path.spark-line {
  stroke: var(--kpi-color);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-sparkline-wrap path.spark-area {
  fill: var(--kpi-color);
  stroke: none;
  opacity: 0.18;
}

/* ── Module cards — professional analytics cards ─────────────── */
.mod-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: var(--mud-palette-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mud-palette-divider);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none !important;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mod-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.07);
  border-color: var(--mod-color);
}
.mod-card-accent {
  height: 3px;
  width: 100%;
  background: var(--mod-color);
  flex-shrink: 0;
}
.mod-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mod-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mod-card-identity {
  display: flex;
  align-items: center;
  gap: 11px;
}
.mod-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mod-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--mud-palette-text-primary);
}
.mod-card-category {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mod-color);
  margin-top: 2px;
  opacity: 0.9;
}
.mod-card-cta {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--mud-palette-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mud-palette-text-secondary);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mod-card:hover .mod-card-cta {
  background: var(--mod-color);
  border-color: var(--mod-color);
  color: #fff;
}
.mod-card-value {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--mud-palette-text-primary);
  margin-bottom: 3px;
}
.mod-card-metric {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mud-palette-text-secondary);
  margin-bottom: 16px;
}
.mod-card-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.mod-card-bar-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--mud-palette-divider);
  overflow: hidden;
}
.mod-card-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--mod-color);
  transition: width 0.9s cubic-bezier(.25,.46,.45,.94);
}
.mod-card-bar-pct {
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mod-color);
  min-width: 32px;
  text-align: right;
  flex-shrink: 0;
}
.mod-card-footer { margin-top: auto; }
.mod-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--mud-palette-text-secondary);
  background: var(--mud-palette-background-grey);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mud-theme-dark .mod-card-meta {
  background: rgba(255,255,255,0.06);
}

/* ── Customize picker v2 ─────────────────────────────────────── */
.picker-v2-section { margin-bottom: 24px; }
.picker-v2-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mud-palette-divider);
}
.picker-v2-section-label { display: flex; align-items: center; gap: 8px; }
.picker-count-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--mud-palette-primary);
  background: rgba(37,99,235,0.1);
  padding: 1px 9px;
  border-radius: 999px;
  line-height: 1.6;
}
.picker-v2-grid { display: flex; flex-direction: column; gap: 6px; }
.card-picker-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--mud-palette-divider);
  background: var(--mud-palette-surface);
  transition: all var(--transition-ui);
  cursor: pointer;
  user-select: none;
}
.card-picker-v2:hover { border-color: rgba(37,99,235,0.45); }
.card-picker-v2.picker-v2-on {
  border-color: var(--mud-palette-primary);
  background: rgba(37,99,235,0.03);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.picker-v2-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.picker-v2-text { flex: 1; min-width: 0; }
.picker-v2-name { font-size: 0.875rem; font-weight: 600; color: var(--mud-palette-text-primary); line-height: 1.3; }
.picker-v2-desc { font-size: 0.75rem; color: var(--mud-palette-text-secondary); line-height: 1.3; margin-top: 1px; }

/* Pure CSS toggle — no Blazor component, no flicker on hover */
.dash-toggle {
  width: 36px; height: 20px; border-radius: 10px; flex-shrink: 0;
  background: rgba(148,163,184,0.25);
  position: relative; cursor: pointer;
  transition: background 0.18s ease;
}
.dash-toggle.dash-toggle-on { background: var(--mud-palette-primary); }
.dash-toggle-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  position: absolute; top: 2px; left: 2px;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  pointer-events: none;
}
.dash-toggle.dash-toggle-on .dash-toggle-thumb { transform: translateX(16px); }

/* ── Chart sections ──────────────────────────────────────────── */
.chart-section { margin-top: 44px; }
.chart-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--mud-palette-divider);
}
.chart-section-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: rgba(37,99,235,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chart-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mud-palette-text-primary);
  margin: 0 0 2px;
  line-height: 1.2;
}
.chart-section-subtitle {
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
  margin: 0;
  line-height: 1.3;
}
.picker-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   BALANCE FLASH & PAGE TRANSITIONS
   ════════════════════════════════════════════════════════════════ */
@keyframes flash-red {
  0%   { background: rgba(220,38,38,0.12); }
  50%  { background: rgba(220,38,38,0.06); }
  100% { background: transparent; }
}
.balance-error { animation: flash-red 0.6s ease; }

.page-header {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--mud-palette-divider);
}

/* Page enter animation */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter {
  animation: pageEnter 0.25s var(--ease-out) both;
}

/* Data refresh animation */
@keyframes dataRefresh {
  0%   { opacity: 0.5; transform: translateY(-4px); }
  100% { opacity: 1;   transform: translateY(0); }
}
@keyframes dataFlash {
  0%   { box-shadow: inset 0 0 0 0 rgba(79,70,229,0.12); }
  50%  { box-shadow: inset 0 0 0 2000px rgba(79,70,229,0.04); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
.data-refresh {
  animation: dataRefresh 0.3s var(--ease-out) both,
             dataFlash 0.5s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .page-enter, .data-refresh { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   FOCUS RING (Accessibility)
   ════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--mud-palette-primary) !important;
  outline-offset: 2px !important;
}
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mud-palette-primary) !important;
  outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════════
   RECONNECT / ERROR OVERLAYS
   ════════════════════════════════════════════════════════════════ */
#components-reconnect-modal {
  position: fixed;
  inset: 0;
  background: rgba(9,14,29,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  opacity: 1;
  pointer-events: auto;
}

.rc-card {
  background: rgba(26,34,54,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
  padding: 44px 40px 36px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  color: #F1F5F9;
  position: relative;
  overflow: hidden;
  animation: rc-enter 0.4s var(--ease-spring) both;
}

.rc-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-size: 200% 100%;
}
.rc-accent--blue {
  background: linear-gradient(90deg, transparent 0%, #4F46E5 40%, #818CF8 50%, #4F46E5 60%, transparent 100%);
  background-size: 200% 100%;
  animation: rc-accent-slide 2.5s ease-in-out infinite;
}
.rc-accent--amber {
  background: linear-gradient(90deg, transparent 0%, #F59E0B 40%, #FBBF24 50%, #F59E0B 60%, transparent 100%);
  background-size: 200% 100%;
  animation: rc-accent-slide 2.5s ease-in-out infinite;
}
.rc-accent--red { background: linear-gradient(90deg, transparent, #EF4444, transparent); }

.rc-icon-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.08);
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rc-ring--blue { border-color: rgba(79,70,229,0.2); box-shadow: 0 0 0 1px rgba(79,70,229,0.08); }
.rc-ring--blue::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #4F46E5;
  border-right-color: rgba(79,70,229,0.3);
  animation: rc-spin 1.4s linear infinite;
}
.rc-ring--blue svg { animation: rc-icon-breathe 2s ease-in-out infinite; }
.rc-ring--amber { border-color: rgba(245,158,11,0.2); box-shadow: 0 0 0 1px rgba(245,158,11,0.08); }
.rc-ring--amber::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #F59E0B;
  border-right-color: rgba(245,158,11,0.3);
  animation: rc-spin 3s linear infinite;
}
.rc-ring--amber svg { animation: rc-spin 12s linear infinite; }
.rc-ring--red { border-color: rgba(239,68,68,0.3); }

.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid;
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.rc-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  animation: rc-dot-pulse 2s ease-in-out infinite;
}
.rc-badge--blue { background: rgba(79,70,229,0.1); border-color: rgba(79,70,229,0.25); color: #A5B4FC; }
.rc-badge--blue::before { background: #4F46E5; }
.rc-badge--amber { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #FBBF24; }
.rc-badge--amber::before { background: #F59E0B; }
.rc-badge--red { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: #F87171; }
.rc-badge--red::before { background: #EF4444; }

.rc-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: #F1F5F9; margin: 0 0 8px; }
.rc-text { font-size: 0.875rem; color: #94A3B8; line-height: 1.7; margin: 0 0 24px; }

.rc-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 16px;
}
.rc-progress-fill { height: 100%; border-radius: var(--radius-full); width: 40%; }
.rc-progress--blue {
  background: linear-gradient(90deg, transparent, #4F46E5, #A5B4FC, #4F46E5, transparent);
  box-shadow: 0 0 12px rgba(79,70,229,0.6);
}
.rc-progress--amber {
  background: linear-gradient(90deg, transparent, #F59E0B, #FCD34D, #F59E0B, transparent);
  box-shadow: 0 0 12px rgba(245,158,11,0.6);
}
.rc-progress--sweep { animation: rc-sweep 1.8s ease-in-out infinite; }

.rc-meta { font-size: 0.75rem; color: #94A3B8; margin: 0 0 20px; letter-spacing: 0.01em; }

.rc-btn {
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all var(--transition-fast);
}
.rc-btn--blue { background: var(--gradient-primary); }
.rc-btn--red { background: var(--gradient-danger); }
.rc-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.rc-btn:active { transform: scale(0.98); }

@keyframes rc-sweep   { 0% { transform: translateX(-250%); } 100% { transform: translateX(500%); } }
@keyframes rc-spin    { to { transform: rotate(360deg); } }
@keyframes rc-enter   { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rc-dot-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
@keyframes rc-icon-breathe { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes rc-accent-slide { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Hub reconnecting shield — fully opaque, covers all page content ──────── */
/* Must be opaque (not semi-transparent) so stale data is never visible.       */
.hub-reconnecting-shield {
  position: fixed;
  inset: 0;
  background: var(--mud-palette-background, #0a0f1e);
  z-index: 9998; /* below auth-error-overlay (99999) but above everything else */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-reconnecting-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 56px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
}
.hub-reconnecting-spinner {
  margin-bottom: 4px;
}

/* ── Auth error overlay ─────────────────────────────────────── */
.auth-error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9,14,29,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-error-card {
  background: rgba(26,34,54,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: var(--radius-xl);
  padding: 48px 44px 40px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.auth-error-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-danger); }
.auth-error-icon-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(239,68,68,0.3);
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-error-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #F87171;
  margin-bottom: 16px;
}
.auth-error-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EF4444;
}
.auth-error-title { font-size: 1.125rem; font-weight: 700; color: #F1F5F9; margin: 0 0 12px; letter-spacing: -0.01em; }
.auth-error-text { font-size: 0.9rem; color: #94A3B8; line-height: 1.7; margin: 0 0 8px; }
.auth-error-subtext { font-size: 0.875rem; color: #64748B; line-height: 1.6; margin: 0 0 28px; }
.auth-error-subtext strong { color: #94A3B8; font-weight: 600; }
.auth-error-btn {
  width: 100%;
  padding: 12px 16px;
  background: var(--gradient-primary);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  transition: all var(--transition-fast);
}
.auth-error-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.auth-error-btn:active { transform: scale(0.98); }
.auth-error-hint { font-size: 0.8rem; color: #334155; margin: 0; }
.auth-error-link { color: #818CF8; text-decoration: none; }
.auth-error-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   DESIGN SYSTEM COMPONENTS
   ════════════════════════════════════════════════════════════════ */

/* Skeleton shimmer */
@keyframes erp-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.erp-skeleton {
  background: linear-gradient(90deg,
    var(--mud-palette-background-grey) 25%,
    var(--mud-palette-divider) 50%,
    var(--mud-palette-background-grey) 75%);
  background-size: 800px 100%;
  animation: erp-shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
.erp-skeleton--text   { border-radius: var(--radius-xs); }
.erp-skeleton--rect   { border-radius: var(--radius-md); }
.erp-skeleton--circle { border-radius: 50%; }

/* Breadcrumb */
.erp-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.8125rem;
  padding: 4px 0 8px;
  color: var(--mud-palette-text-secondary);
}
.erp-breadcrumb__item--link { color: var(--mud-palette-primary); text-decoration: none; }
.erp-breadcrumb__item--link:hover { text-decoration: underline; }
.erp-breadcrumb__item--current { font-weight: 600; color: var(--mud-palette-text-primary); }
.erp-breadcrumb__sep { opacity: .4; }

/* Command Palette */
.erp-cmdpalette {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 1301;
  pointer-events: none;
}
.erp-cmdpalette__inner {
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  width: 580px;
  max-width: 95vw;
  overflow: hidden;
  pointer-events: all;
  backdrop-filter: blur(20px);
}
.erp-cmdpalette__input { margin: 14px 14px 4px !important; }
.erp-cmdpalette__list  { max-height: 380px; overflow-y: auto; }
.erp-cmdpalette__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-radius: var(--radius-md);
  margin: 2px 8px;
}
.erp-cmdpalette__item:hover,
.erp-cmdpalette__item--active { background: var(--mud-palette-action-hover); }
.erp-cmdpalette__icon  { flex-shrink: 0; color: var(--mud-palette-text-secondary); }
.erp-cmdpalette__text  { display: flex; flex-direction: column; min-width: 0; }
.erp-cmdpalette__label { font-size: .875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-cmdpalette__category { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.erp-cmdpalette__empty { padding: 32px 16px; text-align: center; color: var(--mud-palette-text-secondary); font-size: .875rem; }
.erp-cmdpalette__footer {
  display: flex;
  gap: 16px;
  padding: 10px 18px;
  font-size: .7rem;
  color: var(--mud-palette-text-disabled);
  border-top: 1px solid var(--mud-palette-divider);
}

/* Notification Center */
.erp-notif-trigger { position: relative; }
.erp-notif-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  width: 380px;
  max-height: 520px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  z-index: 1201;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(20px);
}
.erp-notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mud-palette-divider);
  flex-shrink: 0;
}
.erp-notif-panel__body { overflow-y: auto; flex: 1; }
.erp-notif-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--mud-palette-text-secondary);
}
.erp-notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--mud-palette-divider);
  transition: background var(--transition-fast);
  position: relative;
}
.erp-notif-item:hover { background: var(--mud-palette-action-hover); }
.erp-notif-item--unread { background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent); }
.erp-notif-item__icon { flex-shrink: 0; margin-top: 2px; }
.erp-notif-item__content { flex: 1; min-width: 0; }
.erp-notif-item__title  { font-weight: 600; font-size: .875rem; margin-bottom: 2px; }
.erp-notif-item__body   { font-size: .8125rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.erp-notif-item__time   { font-size: .75rem; color: var(--mud-palette-text-disabled); }
.erp-notif-item__dot    { width: 8px; height: 8px; background: var(--mud-palette-primary); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* Workflow Status Bar */
.erp-workflow { display: flex; align-items: center; overflow-x: auto; padding: 8px 0; }
.erp-workflow__step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 88px; }
.erp-workflow__dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--mud-palette-divider);
  background: var(--mud-palette-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  transition: all var(--transition-ui);
}
.erp-workflow__step--completed .erp-workflow__dot {
  background: var(--gradient-success);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(5,150,105,0.3);
}
.erp-workflow__step--current .erp-workflow__dot {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.15), 0 2px 8px rgba(79,70,229,0.3);
}
.erp-workflow__step--upcoming .erp-workflow__dot { color: var(--mud-palette-text-disabled); }
.erp-workflow__label   { text-align: center; }
.erp-workflow__name    { font-size: .75rem; font-weight: 600; display: block; }
.erp-workflow__meta    { font-size: .7rem; color: var(--mud-palette-text-secondary); display: block; }
.erp-workflow__connector {
  flex: 1;
  height: 2px;
  min-width: 24px;
  margin: 0 4px;
  margin-bottom: 20px;
  transition: background var(--transition-ui);
}
.erp-workflow__connector--done    { background: var(--gradient-success); }
.erp-workflow__connector--pending { background: var(--mud-palette-divider); }

/* Save Bar */
.erp-savebar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
  z-index: 900;
  transform: translateY(100%);
  transition: transform 0.25s var(--ease-out);
}
.erp-savebar--visible { transform: translateY(0); }
.erp-savebar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.erp-savebar__msg { color: var(--mud-palette-text-secondary); }
.erp-savebar__actions { display: flex; gap: 8px; }

/* Action Menu */
.erp-action-menu__item--destructive { color: var(--mud-palette-error) !important; }

/* ════════════════════════════════════════════════════════════════
   PAGE HEADER — Premium structure
   ════════════════════════════════════════════════════════════════ */
.erp-page-header {
  margin-bottom: var(--spacing-lg);
}
.erp-page-header__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.erp-page-header__title-block {
  display: flex;
  align-items: center;
  gap: 6px;
}
.erp-page-header__title {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.erp-page-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.erp-page-header__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Sub-nav tab strip */
.erp-subnav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--mud-palette-divider);
  margin-bottom: var(--spacing-lg);
  overflow-x: auto;
}
.erp-subnav__tab {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--mud-palette-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
}
.erp-subnav__tab:hover { color: var(--mud-palette-primary); }
.erp-subnav__tab--active {
  color: var(--mud-palette-primary);
  border-bottom-color: var(--mud-palette-primary);
  font-weight: 600;
}
.erp-subnav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 1px 7px;
  margin-left: 6px;
  min-width: 18px;
}

/* Mobile Bottom Nav */
.erp-mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  height: 60px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.1);
  z-index: 800;
  justify-content: space-around;
  align-items: center;
}
.erp-mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: .65rem;
  font-weight: 600;
  color: var(--mud-palette-text-secondary);
  text-decoration: none;
  padding: 4px 12px;
  border: none;
  background: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  transition: color var(--transition-fast);
}
.erp-mobile-nav__item:hover,
.erp-mobile-nav__item--active { color: var(--mud-palette-primary); }
.erp-mobile-nav__item--create {
  background: var(--gradient-primary);
  color: #fff !important;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  min-width: 50px;
  padding: 0;
  box-shadow: 0 4px 12px rgba(30,64,175,0.4);
}

@media (max-width: 960px) {
  .erp-mobile-nav { display: flex; }
  .mud-main-content { padding-bottom: 68px !important; }
  /* Declutter the top app bar on phones so it stops overflowing:
     hide the wordmark text (logo stays) and the global search
     (the bottom nav already exposes a Search action). */
  .erp-appbar-wordmark,
  .erp-appbar-search { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ADVANCED TABLES
   ════════════════════════════════════════════════════════════════ */

/* Bulk Action Bar */
.erp-bulk-bar {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 850;
  transform: translateY(100%);
  transition: transform 0.25s var(--ease-out);
}
.erp-bulk-bar--visible { transform: translateY(0); }
.erp-bulk-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 28px;
  background: #0F172A;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.erp-bulk-bar__count {
  display: flex;
  align-items: center;
  font-size: .875rem;
  font-weight: 600;
  gap: 6px;
}
.erp-bulk-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Column Chooser */
.erp-col-chooser { position: relative; }
.erp-col-chooser__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 220px;
  z-index: 501;
  overflow: hidden;
}
.erp-col-chooser__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mud-palette-divider);
  background: var(--mud-palette-background-grey);
}
.erp-col-chooser__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: .875rem;
  transition: background var(--transition-fast);
}
.erp-col-chooser__row:hover { background: var(--mud-palette-action-hover); }

/* Filter Presets */
.erp-filter-presets { display: flex; align-items: center; gap: 8px; }
.erp-filter-presets__save { display: flex; align-items: center; gap: 4px; }

/* Dirty cell */
.erp-cell--dirty { border-left: 3px solid var(--mud-palette-warning) !important; }

/* ════════════════════════════════════════════════════════════════
   KANBAN — Premium board views
   ════════════════════════════════════════════════════════════════ */
.erp-kanban {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding: 4px 0 var(--spacing-md);
  align-items: flex-start;
  scrollbar-width: thin;
}
.erp-kanban__col {
  flex: 0 0 300px;
  min-width: 300px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--mud-palette-divider);
  background: var(--mud-palette-background-grey);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
}
.erp-kanban__col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--mud-palette-divider);
  border-top: 3px solid #4F46E5;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--mud-palette-surface);
}
.erp-kanban__col-title {
  display: flex;
  align-items: center;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--mud-palette-text-primary);
}
.erp-kanban__col-count {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--mud-palette-divider);
  color: var(--mud-palette-text-secondary);
}
.erp-kanban__col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  min-height: 60px;
}
.erp-kanban__card {
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: all var(--transition-ui);
}
.erp-kanban__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.erp-kanban__card--chosen {
  cursor: grabbing;
  box-shadow: var(--shadow-xl);
  transform: rotate(1.5deg) scale(1.02);
}
.erp-kanban__card--ghost {
  opacity: .3;
  border: 2px dashed var(--mud-palette-primary);
  background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}
.erp-kanban__card--drag { opacity: .95; box-shadow: var(--shadow-2xl); }
.erp-kanban__card-default { padding: 14px 16px; }
.erp-kanban__card-title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
}
.erp-kanban__empty {
  text-align: center;
  padding: 28px 12px;
  font-size: .75rem;
  color: var(--mud-palette-text-disabled);
  border: 2px dashed var(--mud-palette-divider);
  border-radius: var(--radius-md);
  flex: 1;
}

/* View toggle */
.erp-view-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mud-palette-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--mud-palette-surface);
}

/* Kanban card templates */
.erp-kcard { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.erp-kcard__title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mud-palette-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erp-kcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--mud-palette-text-secondary);
  flex-wrap: wrap;
}
.erp-kcard__amount {
  font-size: .875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--mud-palette-text-primary);
}
.erp-kcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL SEARCH & A11Y
   ════════════════════════════════════════════════════════════════ */
.erp-skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.erp-skip-link:focus { top: 16px; }

.erp-live-region {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   PRINT STYLESHEET
   ════════════════════════════════════════════════════════════════ */
@@media print {
  .mud-appbar, .mud-drawer, .erp-mobile-nav, .erp-cmdpalette,
  .erp-bulk-bar, .erp-skip-link, .mud-button-group,
  [data-noprint], .mud-snackbar-container { display: none !important; }

  .mud-main-content, .mud-container, body {
    width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important;
  }

  body::before {
    content: "Construction ERP — " attr(data-report-title) " — " attr(data-print-date);
    display: block;
    font-size: .75rem;
    color: #555;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 16px;
  }

  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr    { page-break-inside: avoid; }
  .erp-print-break { page-break-before: always; }
  .erp-card, .mud-paper, .mud-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  .apexcharts-toolbar, .apexcharts-tooltip { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .65rem; color: #666; }
  a[href^="#"]::after { content: ""; }
}

/* ════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS & POLISH
   ════════════════════════════════════════════════════════════════ */

/* Row save flash */
@@keyframes erp-row-saved {
  0%   { background: color-mix(in srgb, var(--mud-palette-success) 18%, transparent); }
  100% { background: transparent; }
}
.erp-row--saved td { animation: erp-row-saved 1.2s ease forwards; }

/* Row delete */
@@keyframes erp-row-delete {
  0%   { opacity: 1; max-height: 60px; }
  60%  { opacity: 0; max-height: 60px; }
  100% { opacity: 0; max-height: 0; overflow: hidden; }
}
.erp-row--deleting { animation: erp-row-delete .4s ease forwards; }

/* Error shake */
@@keyframes erp-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.erp-shake { animation: erp-shake .35s ease both; }

/* Copy tooltip */
.erp-copy-wrap { position: relative; display: inline-flex; }
.erp-copy-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #0F172A;
  color: #fff;
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  pointer-events: none;
  animation: erp-copy-in .15s ease both, erp-copy-out .2s ease 1.4s both;
}
@@keyframes erp-copy-in  { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@@keyframes erp-copy-out { from { opacity: 1; } to { opacity: 0; } }

/* Nav item transitions */
.mud-nav-link { transition: all var(--transition-ui) !important; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile refinements
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mud-main-content .mud-container { padding: 12px !important; }
  .mud-appbar .mud-toolbar { padding-left: 8px !important; padding-right: 8px !important; }
  /* max-width:100% is required alongside overflow-x:auto — without it this
     block-level container just grows to match its child table's intrinsic
     width instead of being clamped to the available card width, so the
     table never gets a chance to scroll internally and instead forces the
     whole page wider than the device viewport. */
  .mud-table-container, .mud-data-grid { overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch; }
  /* The min-width must go on the innermost <table> element, NOT on .mud-table
     (the outer wrapper div). .mud-table is a plain block child of MudPaper —
     if IT gets the min-width, it overflows its card directly (MudPaper has
     overflow-x:visible) and pushes the whole page wider instead of scrolling.
     Putting the floor on the <table> itself means only .mud-table-container
     (which does have overflow-x:auto) ever sees the overflow, so it scrolls
     inside the card exactly as intended. */
  .mud-table-container table { min-width: 520px; }
  .mud-data-grid .mud-table-container { overflow-x: auto !important; }
  .mud-paper { margin-left: 0 !important; margin-right: 0 !important; }
  .mud-grid > .mud-grid-item[class*="xs12"] { flex: 0 0 100% !important; max-width: 100% !important; }
  .mud-typography-h5 { font-size: 1.1rem !important; }
  .mud-typography-h6 { font-size: 1rem !important; }
  .mud-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
  }
  .mud-dialog-content { padding: 16px !important; }
  .mud-button-root.hide-on-mobile span.mud-button-label { display: none; }
  .mud-snackbar-location-bottom-right,
  .mud-snackbar-location-bottom-left,
  .mud-snackbar-location-bottom-center {
    left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important;
  }
  .rc-card { width: 94%; padding: 32px 20px 24px; }
}

@media (max-width: 640px) {
  .nav-label { display: none; }
  html, body { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   PREMIUM EXTRAS — Glass panels, stat cards, empty states
   ════════════════════════════════════════════════════════════════ */

/* Glass card variant */
.erp-glass {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
}

/* Stat card — larger KPI variant */
.erp-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--mud-palette-divider);
  background: var(--mud-palette-surface);
  padding: 24px;
  transition: all var(--transition-ui);
}
.erp-stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.erp-stat-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.erp-stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.erp-stat-card__value {
  font-size: 2.25rem;
  font-weight: 800;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.erp-stat-card__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mud-palette-text-secondary);
}
.erp-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.erp-stat-card__trend--up { background: rgba(5,150,105,0.1); color: #059669; }
.erp-stat-card__trend--down { background: rgba(220,38,38,0.1); color: #DC2626; }

/* Empty state */
.erp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}
.erp-empty-state__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--mud-palette-background-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.erp-empty-state__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--mud-palette-text-primary);
}
.erp-empty-state__text {
  font-size: 0.875rem;
  color: var(--mud-palette-text-secondary);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Detail page header — entity detail view */
.erp-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--mud-palette-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mud-palette-divider);
  margin-bottom: var(--spacing-lg);
}
.erp-detail-header__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.erp-detail-header__info { flex: 1; min-width: 0; }
.erp-detail-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.erp-detail-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--mud-palette-text-secondary);
}
.erp-detail-header__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Section card — for grouping content on detail pages */
.erp-section {
  background: var(--mud-palette-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--mud-palette-divider);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}
.erp-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mud-palette-divider);
  background: var(--mud-palette-background-grey);
}
.erp-section__title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.erp-section__body {
  padding: 20px;
}

/* Info grid — key-value pairs */
.erp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.erp-info-item {}
.erp-info-item__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mud-palette-text-secondary);
  margin-bottom: 4px;
}
.erp-info-item__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mud-palette-text-primary);
}

/* Activity timeline */
.erp-activity {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mud-palette-divider);
}
.erp-activity:last-child { border-bottom: none; }
.erp-activity__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.erp-activity__content { flex: 1; min-width: 0; }
.erp-activity__text { font-size: 0.8125rem; color: var(--mud-palette-text-primary); }
.erp-activity__time { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }

/* Tab panels */
.erp-tab-panel {
  padding: var(--spacing-lg) 0;
}

/* Dialog improvements */
.mud-dialog {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
}
.mud-dialog-title {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ════════════════════════════════════════════════════════════════
   APEXCHARTS — Dark mode text & grid overrides
   ApexCharts defaults to dark fill colors; these make every chart
   readable on dark card surfaces (#151D2E / #0B1120)
   ════════════════════════════════════════════════════════════════ */

/* Axis tick labels, datalabels, title, subtitle */
.mud-theme-dark .apexcharts-xaxis text,
.mud-theme-dark .apexcharts-yaxis text,
.mud-theme-dark .apexcharts-title-text,
.mud-theme-dark .apexcharts-subtitle-text,
.mud-theme-dark .apexcharts-datalabel,
.mud-theme-dark .apexcharts-datalabel text,
.mud-theme-dark .apexcharts-datalabels text,
.mud-theme-dark .apexcharts-pie-label,
.mud-theme-dark .apexcharts-donut-label,
.mud-theme-dark .apexcharts-donut-label text,
.mud-theme-dark .apexcharts-radialbar-label,
.mud-theme-dark .apexcharts-radialbar-label text {
  fill: #94A3B8 !important;
}

/* Legend text */
.mud-theme-dark .apexcharts-legend-text {
  color: #94A3B8 !important;
  font-family: "Geist", "DM Sans", system-ui, sans-serif !important;
  font-size: 0.75rem !important;
}

/* Grid lines */
.mud-theme-dark .apexcharts-gridline {
  stroke: rgba(148,163,184,0.08) !important;
}
.mud-theme-dark .apexcharts-grid line {
  stroke: rgba(148,163,184,0.08) !important;
}

/* X-axis baseline */
.mud-theme-dark .apexcharts-xaxis-tick,
.mud-theme-dark line.apexcharts-xcrosshairs,
.mud-theme-dark .apexcharts-xaxis line {
  stroke: rgba(148,163,184,0.12) !important;
}

/* Tooltip — target both generic and .apexcharts-theme-light (ApexCharts default class) */
.mud-theme-dark .apexcharts-tooltip,
.mud-theme-dark .apexcharts-tooltip.apexcharts-theme-light {
  background: #1E293B !important;
  border: 1px solid rgba(148,163,184,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  color: #E2E8F0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.mud-theme-dark .apexcharts-tooltip-title,
.mud-theme-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: #151D2E !important;
  border-bottom: 1px solid rgba(148,163,184,0.12) !important;
  color: #CBD5E1 !important;
  font-weight: 600 !important;
  font-family: "Geist", system-ui, sans-serif !important;
}
.mud-theme-dark .apexcharts-tooltip-series-group,
.mud-theme-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group {
  background: transparent !important;
}
.mud-theme-dark .apexcharts-tooltip-text,
.mud-theme-dark .apexcharts-tooltip-text-y-label,
.mud-theme-dark .apexcharts-tooltip-text-y-value,
.mud-theme-dark .apexcharts-tooltip-text-goals-label,
.mud-theme-dark .apexcharts-tooltip-text-goals-value,
.mud-theme-dark .apexcharts-tooltip-text-z-value {
  color: #E2E8F0 !important;
  font-family: "Geist", "DM Sans", system-ui, sans-serif !important;
}

/* Inner donut label (total / center text) */
.mud-theme-dark .apexcharts-pie text,
.mud-theme-dark .apexcharts-donut text {
  fill: #E2E8F0 !important;
}

/* Chart canvas background — keep transparent so MudPaper shows through */
.mud-theme-dark .apexcharts-canvas,
.mud-theme-dark .apexcharts-canvas svg {
  background: transparent !important;
}

/* ── PWA install banner ──────────────────────────────────────────────
   Slim, dismissible invite to install the ERP as a home-screen app.
   Sits above the mobile bottom nav; a centered card on desktop.        */
.pwa-install-banner {
  position: fixed;
  z-index: 850;                 /* above mobile nav (800), below overlays */
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  width: min(520px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--mud-palette-surface, #fff);
  border: 1px solid var(--glass-border, rgba(148,163,184,0.18));
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
  animation: pwa-banner-in .35s cubic-bezier(.16,1,.3,1);
}
@keyframes pwa-banner-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pwa-install-banner__body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pwa-install-banner__icon img {
  display: block;
  width: 40px; height: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(13, 27, 62, 0.35);
}
.pwa-install-banner__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pwa-install-banner__title {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 700;
  font-size: .875rem;
  color: var(--mud-palette-text-primary, #0f172a);
  line-height: 1.2;
}
.pwa-install-banner__subtitle {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: .75rem;
  color: var(--mud-palette-text-secondary, #64748b);
  line-height: 1.3;
  margin-top: 2px;
}
.pwa-install-banner__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pwa-install-banner__btn {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  font-size: .8125rem;
  color: #fff;
  background: #1E40AF;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition-fast, .15s), transform var(--transition-fast, .15s);
}
.pwa-install-banner__btn:hover { background: #1D4ED8; transform: translateY(-1px); }
.pwa-install-banner__btn:active { transform: translateY(0); }
.pwa-install-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--mud-palette-text-secondary, #64748b);
  cursor: pointer;
  transition: background var(--transition-fast, .15s);
}
.pwa-install-banner__close:hover { background: var(--mud-palette-action-default-hover, rgba(148,163,184,0.14)); }

/* Dark mode: brand tint shifts to the lighter steel blue per DESIGN.md */
.mud-theme-dark .pwa-install-banner {
  background: #0C1220;
  border-color: rgba(148,163,184,0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.mud-theme-dark .pwa-install-banner__btn { background: #6B8DD6; color: #0C1220; }
.mud-theme-dark .pwa-install-banner__btn:hover { background: #82A0E0; }

/* On phones, lift above the 60px bottom nav and honor the safe area. */
@media (max-width: 960px) {
  .pwa-install-banner {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* Never print the banner. */
@media print { .pwa-install-banner { display: none !important; } }