/**
 * Orevobank dashboard / admin visual language (Phase 2 + Phase 3 polish)
 * Extends marketing-theme.css tokens. Load after marketing-theme.css.
 * All key surfaces use multi-stop gradients + soft glows, never flat slabs.
 */

html.dark,
html.dashboard-theme:not(.theme-light) {
  color-scheme: dark;
}

/**
 * Light bank theme (user dashboard + admin only).
 * Driven by html.theme-light / data-theme="light" from public/js/ob-theme.js
 * Cool mint-graphite light surfaces. Emerald accents. Not a CSS invert.
 */
html.theme-light {
  color-scheme: light;
  --ob-bg: #f2f6f5;
  --ob-bg-elevated: #ffffff;
  --ob-surface: #ffffff;
  --ob-surface-2: #e8f0ed;
  --ob-border: rgba(15, 40, 34, 0.1);
  --ob-border-soft: rgba(15, 40, 34, 0.06);
  --ob-rim: rgba(15, 40, 34, 0.12);
  --ob-text: #0f1f1b;
  --ob-text-muted: #5a6b66;
  --ob-text-soft: #7a8a85;
  --ob-slate: #5a6b66;
  --ob-slate-soft: rgba(90, 107, 102, 0.14);
  --ob-slate-border: rgba(90, 107, 102, 0.22);
  --ob-primary-soft: rgba(19, 142, 117, 0.12);
  --ob-primary-glow: rgba(19, 142, 117, 0.22);
  --ob-warm-white: #f7faf9;
  --ob-warm-white-soft: rgba(19, 142, 117, 0.06);

  --ob-gradient-surface: linear-gradient(165deg, #ffffff 0%, #f7faf9 42%, #eef3f1 100%);
  --ob-gradient-surface-2: linear-gradient(165deg, #ffffff 0%, #f0f5f3 55%, #e8f0ed 100%);
  --ob-gradient-wash: linear-gradient(
    145deg,
    rgba(19, 142, 117, 0.14) 0%,
    rgba(19, 142, 117, 0.05) 100%
  );
  --ob-gradient-nav: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(242, 246, 245, 0.98) 55%,
    rgba(236, 243, 240, 0.99) 100%
  );
  --ob-gradient-page: radial-gradient(
      ellipse 120% 70% at 50% -12%,
      rgba(26, 155, 130, 0.12) 0%,
      rgba(19, 142, 117, 0.05) 28%,
      rgba(242, 246, 245, 0) 62%
    ),
    radial-gradient(
      ellipse 80% 50% at 100% 100%,
      rgba(19, 142, 117, 0.08) 0%,
      rgba(242, 246, 245, 0) 55%
    ),
    #f2f6f5;

  --ob-shadow-emerald: 0 14px 36px rgba(19, 142, 117, 0.2),
    0 4px 12px rgba(15, 40, 34, 0.08);
  --ob-shadow-card: 0 10px 28px rgba(15, 40, 34, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ob-shadow-fab: 0 12px 28px rgba(19, 142, 117, 0.32);
  --ob-focus-ring: 0 0 0 3px rgba(19, 142, 117, 0.28), 0 0 0 1px rgba(19, 142, 117, 0.35);
}

body.dashboard-shell,
body.admin-shell,
body.auth-shell {
  font-family: "Raleway", sans-serif !important;
  background: var(--ob-gradient-page) !important;
  background-color: var(--ob-bg) !important;
  background-attachment: fixed !important;
  color: var(--ob-text) !important;
}

/* ---------- User dash chrome ---------- */
.dashboard-shell {
  --primary-color: var(--ob-primary);
}

.dashboard-shell .ob-dash-surface {
  background: var(--ob-gradient-surface);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  box-shadow: var(--ob-shadow-card);
  color: var(--ob-text);
}

.dashboard-shell .ob-dash-surface-2 {
  background: var(--ob-gradient-surface-2);
  border: 1px solid var(--ob-border);
  box-shadow: var(--ob-shadow-card);
}

.dashboard-shell .ob-balance-gradient,
.ob-balance-hero {
  position: relative;
  overflow: hidden;
  background: var(--ob-gradient-card);
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--ob-shadow-emerald), inset 0 0 0 1px rgba(201, 162, 39, 0.12);
}

.ob-balance-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 88% 78%, rgba(6, 46, 42, 0.55) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.ob-balance-hero-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ob-balance-hero > *:not(.ob-balance-hero-clip) {
  position: relative;
  z-index: 1;
}

.ob-balance-hero > .ob-balance-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.ob-balance-hero > .ob-balance-hero-amount {
  margin-bottom: 1.25rem;
  min-width: 0;
}

.ob-balance-hero-label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Raleway", sans-serif;
}

.ob-balance-hero-value {
  margin: 0;
  font-size: 2.05rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-family: "Raleway", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Phase-3: one horizontal row, 4 equal action pills (never stacked full-width) */
.ob-balance-hero .ob-balance-hero-actions,
.ob-balance-hero > .ob-balance-hero-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  flex-direction: unset !important;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.ob-balance-hero .ob-balance-hero-actions > .ob-action-pill,
.ob-balance-hero .ob-balance-hero-actions > a.ob-action-pill,
.ob-balance-hero .ob-balance-hero-actions > button.ob-action-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100%;
  min-width: 0 !important;
  box-sizing: border-box;
  grid-column: auto !important;
}

.ob-glass-orb {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.02) 55%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ob-glass-orb-1 {
  width: 9rem;
  height: 9rem;
  top: -2.5rem;
  right: -1.5rem;
  opacity: 0.45;
}

.ob-glass-orb-2 {
  width: 7rem;
  height: 7rem;
  bottom: -2rem;
  left: -1.25rem;
  opacity: 0.28;
}

.ob-action-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.35rem;
  border-radius: 9999px;
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.42) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ob-action-pill:hover {
  transform: translateY(-1px);
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.38) 100%);
}

.ob-action-pill i {
  font-size: 0.95rem;
}

.ob-overview-card {
  position: relative;
  overflow: hidden;
  background: var(--ob-gradient-surface-2);
  border: 1px solid var(--ob-border);
  border-radius: 1.5rem;
  padding: 1rem 1.05rem 1.05rem;
  box-shadow: var(--ob-shadow-card);
  color: var(--ob-text);
}

.ob-overview-card::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.16) 35%,
    rgba(201, 162, 39, 0.35) 50%,
    rgba(255, 255, 255, 0.16) 65%,
    transparent
  );
  pointer-events: none;
}

.ob-icon-chip {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ob-gradient-wash);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ob-icon-chip.is-income {
  background: linear-gradient(145deg, rgba(47, 196, 168, 0.28), rgba(19, 142, 117, 0.1));
  color: #2fc4a8;
}

.ob-icon-chip.is-expense {
  background: linear-gradient(145deg, rgba(196, 92, 92, 0.28), rgba(196, 92, 92, 0.08));
  color: #e07a7a;
}

.ob-icon-chip.is-bills {
  background: linear-gradient(145deg, rgba(138, 151, 168, 0.28), rgba(138, 151, 168, 0.08));
  color: var(--ob-slate);
}

.ob-icon-chip.is-savings {
  background: linear-gradient(145deg, rgba(201, 162, 39, 0.22), rgba(19, 142, 117, 0.1));
  color: #d4bc5a;
}

.ob-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
}

.ob-status-chip.is-income,
.ob-status-chip.is-expense {
  color: #9ee8d6;
  background: linear-gradient(135deg, rgba(19, 142, 117, 0.28), rgba(10, 92, 82, 0.14));
  border-color: rgba(47, 196, 168, 0.18);
}

.ob-status-chip.is-bills {
  color: #c5ced8;
  background: linear-gradient(135deg, rgba(138, 151, 168, 0.28), rgba(138, 151, 168, 0.1));
  border-color: var(--ob-slate-border);
}

.ob-status-chip.is-savings {
  color: #e8d9a0;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.22), rgba(19, 142, 117, 0.1));
  border-color: rgba(201, 162, 39, 0.28);
}

.ob-header-icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, transform 0.2s ease;
}

.ob-header-icon-btn:hover {
  background: linear-gradient(160deg, rgba(26, 155, 130, 0.28) 0%, rgba(19, 142, 117, 0.12) 100%);
  transform: translateY(-1px);
}

/* Calm account trigger pill (hero header) */
.ob-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
  color: #fff;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ob-account-pill:hover {
  border-color: rgba(19, 142, 117, 0.4);
}

.ob-account-pill:focus-visible {
  outline: 2px solid rgba(19, 142, 117, 0.7);
  outline-offset: 2px;
}

/* Account picker bottom sheet (separate box, high z-index) */
.ob-account-sheet-backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ob-account-sheet {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  padding: 0 1rem 1.25rem;
  border-radius: 1.5rem 1.5rem 0 0;
  font-family: "Raleway", sans-serif;
  background-color: #0c1210;
  background-image: linear-gradient(180deg, #161616 0%, #0c1210 45%, #071412 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 -16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(19, 142, 117, 0.12);
}

.ob-account-sheet-handle {
  width: 3rem;
  height: 0.35rem;
  margin: 0.75rem auto 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
}

.ob-account-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.25rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.65rem;
}

.ob-account-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  font-family: "Raleway", sans-serif;
}

.ob-account-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: env(safe-area-inset-bottom, 0.5rem);
}

.ob-account-switcher-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.55rem;
  border-radius: 0.85rem;
  text-align: left;
  color: #fff;
  background-color: transparent;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ob-account-switcher-option:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
}

.ob-account-switcher-option.is-selected {
  background-color: #0f2e28;
  background-image: linear-gradient(135deg, rgba(19, 142, 117, 0.38) 0%, rgba(10, 40, 36, 0.95) 100%);
  border-color: rgba(19, 142, 117, 0.45);
}

.ob-account-switcher-option-icon {
  flex-shrink: 0;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: #dff8f0;
  background: linear-gradient(145deg, rgba(26, 155, 130, 0.55), rgba(10, 92, 82, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ob-account-switcher-option-icon.is-btc {
  color: #f5e6b8;
  background: linear-gradient(145deg, rgba(201, 162, 39, 0.45), rgba(19, 142, 117, 0.35));
}

.ob-account-switcher-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1;
  min-width: 0;
}

.ob-account-switcher-option-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.ob-account-switcher-option-meta {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.25;
}

.ob-account-switcher-check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  color: transparent;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ob-account-switcher-option.is-selected .ob-account-switcher-check {
  color: #ffffff;
  background: linear-gradient(145deg, #1a9b82, #138e75);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(19, 142, 117, 0.18);
}

@media (max-width: 360px) {
  .ob-balance-hero-value {
    font-size: 1.85rem;
  }

  .ob-balance-hero .ob-balance-hero-actions {
    gap: 0.4rem;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .ob-balance-hero .ob-balance-hero-actions > .ob-action-pill {
    padding: 0.62rem 0.2rem;
    font-size: 0.65rem;
  }
}

.ob-eye-btn {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.38) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
}

/* Bottom nav + FAB */
.ob-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.35rem 1rem 0.85rem;
  pointer-events: none;
}

.ob-bottom-nav-inner {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 4.25rem 1fr 1fr;
  align-items: end;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem 0.45rem;
  border-radius: 1.75rem;
  background: var(--ob-gradient-nav);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(19, 142, 117, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ob-bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.35rem 0.2rem;
  color: var(--ob-slate);
  font-size: 0.65rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.ob-bottom-nav-link i {
  font-size: 1.1rem;
}

.ob-bottom-nav-link.is-active {
  color: #1a9b82;
  background: transparent;
}

.ob-bottom-nav-link.is-active i {
  background: var(--ob-gradient-wash);
  -webkit-background-clip: text;
  background-clip: text;
  color: #1a9b82;
}

.ob-fab {
  position: absolute;
  left: 50%;
  top: -1.35rem;
  transform: translateX(-50%);
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--ob-gradient-fab);
  box-shadow: var(--ob-shadow-fab), 0 0 0 1px rgba(201, 162, 39, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ob-chart-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--ob-gold);
  box-shadow: 0 0 0 3px var(--ob-gold-soft);
}

.ob-progress-track {
  height: 0.35rem;
  border-radius: 9999px;
  background: rgba(138, 151, 168, 0.16);
  overflow: hidden;
}

.ob-progress-track > span,
.ob-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ob-gradient-progress);
}

.ob-fab:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.03);
  box-shadow: 0 14px 40px rgba(19, 142, 117, 0.55), 0 0 0 8px rgba(19, 142, 117, 0.14);
}

.ob-fab i {
  font-size: 1.25rem;
}

/* Soften hard blue notification washes toward emerald */
.dashboard-shell .bg-blue-50\/30,
.dashboard-shell .dark\:bg-blue-900\/20 {
  background: var(--ob-gradient-wash) !important;
}

/* ---------- Brand lockup ---------- */
.dashboard-shell .ob-brand-lockup,
.admin-shell .ob-brand-lockup,
.auth-shell .ob-brand-lockup {
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-shell .ob-brand-lockup img,
.admin-shell .ob-brand-lockup img,
.auth-shell .ob-brand-lockup img {
  height: 2.25rem;
  width: auto;
  background: transparent !important;
  filter: none !important;
  box-shadow: none !important;
}

.admin-shell .ob-brand-wordmark {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

/* ---------- Admin shells ---------- */
.admin-shell .wrapper,
.admin-shell .main-panel,
.admin-shell .content,
.admin-shell .page-inner {
  background: transparent !important;
}

.admin-shell .main-header .logo-header,
.admin-shell .main-header .navbar-header {
  background: var(--ob-gradient-nav) !important;
  border-bottom: 1px solid var(--ob-border) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.admin-shell .sidebar,
.admin-shell .sidebar[data-background-color="dark"],
.admin-shell .sidebar[data-background-color="light"],
.admin-shell .sidebar .sidebar-wrapper {
  background: linear-gradient(180deg, #0c0c0c 0%, #050505 55%, #000000 100%) !important;
  border-right: 1px solid var(--ob-border);
}

.admin-shell .sidebar .nav > .nav-item.active > a,
.admin-shell .sidebar .nav > .nav-item.active > a:hover,
.admin-shell .sidebar .nav > .nav-item.active > a p,
.admin-shell .sidebar .nav > .nav-item.active > a i {
  color: #ffffff !important;
}

.admin-shell .sidebar .nav > .nav-item.active > a {
  background: var(--ob-gradient-hero) !important;
  box-shadow: 0 10px 28px rgba(19, 142, 117, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-shell .sidebar .nav > .nav-item > a:hover {
  background: var(--ob-gradient-wash) !important;
}

.admin-shell .sidebar .user,
.admin-shell .sidebar .nav .nav-section .text-section,
.admin-shell .sidebar .nav > .nav-item a p,
.admin-shell .sidebar .nav > .nav-item a i {
  color: #9ca3af !important;
}

.admin-shell .card {
  background: var(--ob-gradient-surface) !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 1.25rem !important;
  color: var(--ob-text);
  box-shadow: var(--ob-shadow-card) !important;
}

.admin-shell .card .card-header,
.admin-shell .card .card-body,
.admin-shell .card .card-title,
.admin-shell .card label,
.admin-shell .table,
.admin-shell .table td,
.admin-shell .table th {
  color: var(--ob-text) !important;
  background-color: transparent !important;
  border-color: var(--ob-border) !important;
}

.admin-shell .bg-primary-gradient,
.admin-shell .bg-dark-gradient,
.admin-shell .panel-header.bg-primary-gradient,
.admin-shell .panel-header.bg-dark-gradient {
  background: var(--ob-gradient-hero) !important;
  box-shadow: var(--ob-shadow-emerald);
}

.admin-shell .btn-primary,
.admin-shell .btn-primary:focus,
.admin-shell .btn-primary:active {
  background: var(--ob-gradient-fab) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(19, 142, 117, 0.32);
}

.admin-shell .btn-primary:hover {
  background: linear-gradient(145deg, #2fc4a8 0%, #1a9b82 40%, #0f766e 100%) !important;
  border-color: transparent !important;
}

.admin-shell .btn-info {
  background: linear-gradient(145deg, #0f766e 0%, #0a5c52 100%) !important;
  border-color: transparent !important;
}

.admin-shell .btn-success {
  background: var(--ob-gradient-fab) !important;
  border-color: transparent !important;
}

.admin-shell .footer {
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%) !important;
  border-top: 1px solid var(--ob-border) !important;
  color: var(--ob-text-muted) !important;
}

.admin-shell .form-control,
.admin-shell .select2-container--default .select2-selection--single {
  background: var(--ob-gradient-surface-2) !important;
  border-color: var(--ob-border) !important;
  color: var(--ob-text) !important;
}

/* ---------- Auth shells ---------- */
.auth-shell .ob-auth-card,
.admin-shell .ob-auth-card,
.ob-auth-card {
  background: var(--ob-gradient-surface);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  box-shadow: var(--ob-shadow-card), 0 0 60px rgba(19, 142, 117, 0.08);
}

.auth-shell .ob-auth-hero,
.admin-shell .ob-auth-hero,
.ob-auth-hero {
  background: var(--ob-gradient-hero);
  box-shadow: var(--ob-shadow-emerald);
}

.auth-shell .btn-primary,
.auth-shell button[type="submit"].bg-primary,
.auth-shell .ob-auth-submit,
.ob-auth-submit {
  background: var(--ob-gradient-fab) !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(19, 142, 117, 0.35);
}

/* Legacy user Purpose layout */
body.application.dashboard-shell,
.dashboard-shell .page-content,
.dashboard-shell .main-content {
  background: transparent !important;
}

.dashboard-shell .sidenav {
  background: linear-gradient(180deg, #0c0c0c 0%, #050505 60%, #000000 100%) !important;
}

.dashboard-shell .sidenav .navbar-brand-img {
  max-height: 2.5rem;
  background: transparent !important;
}

.dashboard-shell .footer,
.dashboard-shell .footer-light {
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%) !important;
  color: var(--ob-text-muted) !important;
  border-top: 1px solid var(--ob-border);
}

/* Desktop sidebar / header blend continuity */
.dashboard-shell aside,
.dashboard-shell .lg\:flex > .w-72 {
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.98) 0%, rgba(5, 5, 5, 0.98) 100%) !important;
}

/* Mobile padding for FAB nav */
@media (max-width: 1023px) {
  .dashboard-shell main.flex-1.pb-20,
  .ob-dash-mobile-pad,
  .dashboard-shell .ob-page-shell {
    padding-bottom: 6.5rem !important;
  }

  .dashboard-shell .ob-page-shell {
    overflow-x: hidden;
  }

  /* Tap targets on secondary pages */
  .dashboard-shell .ob-page-shell a.inline-flex,
  .dashboard-shell .ob-page-shell button.inline-flex,
  .dashboard-shell .ob-page-shell button[type="submit"] {
    min-height: 2.75rem;
  }
}

/* ---------- Phase 4: secondary page polish ---------- */
.dashboard-shell .ob-page-shell {
  background: transparent !important;
  color: var(--ob-text);
}

.dashboard-shell .ob-page-shell > .max-w-8xl,
.dashboard-shell .ob-page-shell > .max-w-7xl,
.dashboard-shell .ob-page-shell > .max-w-6xl {
  width: 100%;
}

/* Remap remaining light glass panels (Tailwind opacity utilities) */
.dashboard-shell .bg-white\/95,
.dashboard-shell .bg-white\/90,
.dashboard-shell .bg-white\/80,
.dashboard-shell .bg-white\/70,
.dashboard-shell .dark\:bg-gray-800\/95,
.dashboard-shell .dark\:bg-gray-800\/90,
.dashboard-shell .dark\:bg-gray-800\/80,
.dashboard-shell .dark\:bg-gray-800\/70,
.dashboard-shell .dark\:bg-gray-700\/90,
.dashboard-shell .dark\:bg-gray-700\/80,
.dashboard-shell .dark\:bg-gray-700\/70 {
  background: var(--ob-gradient-surface) !important;
  border-color: var(--ob-border) !important;
  box-shadow: var(--ob-shadow-card) !important;
  color: var(--ob-text);
}

.dashboard-shell .bg-white\/20,
.dashboard-shell .bg-white\/10 {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Soften leftover bright blues toward emerald / slate */
.dashboard-shell .bg-blue-50,
.dashboard-shell .bg-blue-50\/30,
.dashboard-shell .bg-blue-50\/70,
.dashboard-shell .bg-blue-100,
.dashboard-shell .dark\:bg-blue-900\/20,
.dashboard-shell .dark\:bg-blue-900\/30,
.dashboard-shell .dark\:bg-blue-900\/50 {
  background: var(--ob-gradient-wash) !important;
  border-color: rgba(19, 142, 117, 0.22) !important;
  color: #9ee8d6 !important;
}

.dashboard-shell .text-blue-600,
.dashboard-shell .text-blue-700,
.dashboard-shell .dark\:text-blue-300,
.dashboard-shell .dark\:text-blue-400,
.dashboard-shell .border-blue-300,
.dashboard-shell .dark\:border-blue-600 {
  color: #2fc4a8 !important;
  border-color: rgba(19, 142, 117, 0.35) !important;
}

.dashboard-shell .from-blue-400,
.dashboard-shell .from-blue-500,
.dashboard-shell .from-blue-800,
.dashboard-shell .via-blue-50,
.dashboard-shell .via-blue-600,
.dashboard-shell .to-blue-50,
.dashboard-shell .to-blue-50\/80,
.dashboard-shell .to-blue-500,
.dashboard-shell .to-blue-600 {
  --tw-gradient-from: #1a9b82 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(10 92 82 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.dashboard-shell .to-blue-500,
.dashboard-shell .to-blue-600 {
  --tw-gradient-to: #062e2a var(--tw-gradient-to-position) !important;
}

.dashboard-shell .via-blue-600 {
  --tw-gradient-to: rgb(19 142 117 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #138e75 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* Page hero bands on secondary money flows */
.dashboard-shell .ob-page-shell .bg-gradient-to-br.from-primary-500,
.dashboard-shell .ob-page-shell .from-primary-500.via-primary-600,
.dashboard-shell .bg-gradient-to-br.from-primary-500.via-primary-600.to-primary-700 {
  background: var(--ob-gradient-card) !important;
  box-shadow: var(--ob-shadow-emerald), inset 0 0 0 1px rgba(201, 162, 39, 0.1);
}

/* Inputs on secondary pages */
.dashboard-shell .ob-page-shell input[type="text"],
.dashboard-shell .ob-page-shell input[type="email"],
.dashboard-shell .ob-page-shell input[type="number"],
.dashboard-shell .ob-page-shell input[type="password"],
.dashboard-shell .ob-page-shell input[type="tel"],
.dashboard-shell .ob-page-shell input[type="search"],
.dashboard-shell .ob-page-shell input[type="url"],
.dashboard-shell .ob-page-shell input[type="date"],
.dashboard-shell .ob-page-shell select,
.dashboard-shell .ob-page-shell textarea {
  background: var(--ob-gradient-surface-2) !important;
  border-color: var(--ob-border) !important;
  color: var(--ob-text) !important;
}

.dashboard-shell .ob-page-shell input:focus,
.dashboard-shell .ob-page-shell select:focus,
.dashboard-shell .ob-page-shell textarea:focus {
  outline: none !important;
  box-shadow: var(--ob-focus-ring) !important;
  border-color: rgba(19, 142, 117, 0.55) !important;
}

.dashboard-shell .ob-page-shell label,
.dashboard-shell .ob-page-shell .text-gray-700,
.dashboard-shell .ob-page-shell .dark\:text-gray-300,
.dashboard-shell .ob-page-shell .text-gray-600,
.dashboard-shell .ob-page-shell .dark\:text-gray-400 {
  color: var(--ob-slate) !important;
}

.dashboard-shell .ob-page-shell .text-gray-900,
.dashboard-shell .ob-page-shell .dark\:text-white,
.dashboard-shell .ob-page-shell h1,
.dashboard-shell .ob-page-shell h2,
.dashboard-shell .ob-page-shell h3 {
  color: var(--ob-text) !important;
}

/* Tables */
.dashboard-shell .ob-page-shell table thead {
  background: var(--ob-gradient-wash) !important;
}

.dashboard-shell .ob-page-shell table th,
.dashboard-shell .ob-page-shell table td {
  border-color: var(--ob-border) !important;
  color: var(--ob-text) !important;
}

.dashboard-shell .ob-page-shell table tbody tr:hover {
  background: rgba(19, 142, 117, 0.06) !important;
}

/* Purpose Bootstrap secondary pages still on layouts.dash */
.dashboard-shell .card {
  background: var(--ob-gradient-surface) !important;
  border: 1px solid var(--ob-border) !important;
  border-radius: 1.25rem !important;
  color: var(--ob-text) !important;
  box-shadow: var(--ob-shadow-card) !important;
}

.dashboard-shell .card .card-header,
.dashboard-shell .card .card-body,
.dashboard-shell .card .card-footer,
.dashboard-shell .card label,
.dashboard-shell .card .text-muted,
.dashboard-shell .card small {
  background: transparent !important;
  color: var(--ob-text) !important;
  border-color: var(--ob-border) !important;
}

.dashboard-shell .card .text-muted,
.dashboard-shell .card small {
  color: var(--ob-text-muted) !important;
}

.dashboard-shell .card-pricing.bg-primary,
.dashboard-shell .card.bg-primary {
  background: var(--ob-gradient-hero) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--ob-shadow-emerald) !important;
}

.dashboard-shell .card-pricing .bg-white,
.dashboard-shell .card-pricing .h6.bg-white {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dashboard-shell .form-control {
  background: var(--ob-gradient-surface-2) !important;
  border-color: var(--ob-border) !important;
  color: var(--ob-text) !important;
  border-radius: 0.75rem !important;
}

.dashboard-shell .form-control:focus {
  box-shadow: var(--ob-focus-ring) !important;
  border-color: rgba(19, 142, 117, 0.55) !important;
}

.dashboard-shell .btn-primary,
.dashboard-shell .btn-primary:focus,
.dashboard-shell .btn-primary:active,
.dashboard-shell #navbar-main.bg-primary,
.dashboard-shell .navbar.bg-primary {
  background: var(--ob-gradient-fab) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.dashboard-shell .btn-primary:hover {
  background: linear-gradient(145deg, #2fc4a8 0%, #1a9b82 40%, #0f766e 100%) !important;
}

.dashboard-shell .btn-neutral {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

.dashboard-shell .page-title h5,
.dashboard-shell .page-title .h3 {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.dashboard-shell .alert-modern,
.dashboard-shell .alert {
  background: var(--ob-gradient-wash) !important;
  border: 1px solid rgba(19, 142, 117, 0.25) !important;
  color: var(--ob-text) !important;
  border-radius: 1rem !important;
}

.dashboard-shell .modal-content {
  background: var(--ob-gradient-surface) !important;
  border: 1px solid var(--ob-border) !important;
  color: var(--ob-text) !important;
  border-radius: 1.25rem !important;
}

.dashboard-shell .navbar-dark.bg-primary,
.dashboard-shell .navbar-horizontal.navbar-dark {
  background: var(--ob-gradient-nav) !important;
  border-bottom: 1px solid var(--ob-border);
}

/* Admin light-mode header forced dark charcoal */
.admin-shell .logo-header[data-background-color="blue"],
.admin-shell .navbar-header[data-background-color="blue"],
.admin-shell .logo-header[data-background-color="dark"],
.admin-shell .navbar-header[data-background-color="dark"] {
  background: var(--ob-gradient-nav) !important;
}

.dashboard-shell .ob-page-shell .bg-white,
.dashboard-shell .ob-page-shell .dark\:bg-gray-800,
.dashboard-shell .ob-page-shell .bg-gray-50,
.dashboard-shell .ob-page-shell .dark\:bg-gray-700\/50,
.dashboard-shell .ob-page-shell .dark\:bg-gray-700 {
  background: var(--ob-gradient-surface-2) !important;
  color: var(--ob-text);
}

.dashboard-shell .from-indigo-400,
.dashboard-shell .to-purple-600,
.dashboard-shell .from-purple-500,
.dashboard-shell .to-purple-700 {
  --tw-gradient-from: #1a9b82 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #062e2a var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.auth-shell input:focus,
.auth-shell select:focus {
  box-shadow: var(--ob-focus-ring) !important;
  border-color: rgba(19, 142, 117, 0.55) !important;
}

/* ---------- Premium auth chrome ---------- */
.auth-shell .ob-auth-aside {
  position: relative;
  min-height: 100vh;
  background: #062e2a;
}
.auth-shell .ob-auth-aside__media { position: absolute; inset: 0; }
.auth-shell .ob-auth-aside__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-shell .ob-auth-aside__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(6, 46, 42, 0.72) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.9) 100%),
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(19, 142, 117, 0.35), transparent 60%);
}
.auth-shell .ob-auth-aside__kicker {
  display: inline-block; margin: 0 0 0.85rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(47, 196, 168, 0.95);
}
.auth-shell .ob-auth-aside__title {
  font-family: "Raleway", sans-serif; font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.12; color: #ffffff; margin: 0 0 1rem;
}
.auth-shell .ob-auth-aside__copy {
  max-width: 28rem; color: rgba(255, 255, 255, 0.78); line-height: 1.65; margin: 0 0 1.5rem; font-size: 1.02rem;
}
.auth-shell .ob-auth-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.auth-shell .ob-auth-aside__list li {
  display: flex; align-items: flex-start; gap: 0.7rem; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; line-height: 1.45;
}
.auth-shell .ob-auth-aside__list i { color: #2fc4a8; margin-top: 0.2rem; }
.auth-shell .ob-auth-input {
  border: 1px solid rgba(255, 255, 255, 0.12) !important; background: #0d0d0d !important; color: #ffffff !important; outline: none;
}
.auth-shell .ob-auth-input::placeholder { color: #6b7280 !important; }
.auth-shell .ob-auth-input:focus {
  border-color: rgba(19, 142, 117, 0.65) !important; box-shadow: 0 0 0 3px rgba(19, 142, 117, 0.18) !important;
}
.auth-shell .ob-auth-card {
  background: linear-gradient(165deg, #141414 0%, #0d0d0d 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 1.25rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(19, 142, 117, 0.08);
}
.auth-shell .input-icon {
  position: absolute; inset-block: 0; left: 0.85rem; display: flex; align-items: center; color: #6b7280; pointer-events: none;
}
.auth-shell .bg-white\/90,
.auth-shell .dark\:bg-gray-800\/90,
.auth-shell .bg-gray-50\/50,
.auth-shell .dark\:bg-gray-900\/50 { background: #000000 !important; }
.auth-shell input,
.auth-shell select {
  background: #0d0d0d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.auth-shell .text-gray-900,
.auth-shell .dark\:text-white { color: #ffffff !important; }
.auth-shell .text-gray-600,
.auth-shell .text-gray-500,
.auth-shell .dark\:text-gray-400,
.auth-shell .dark\:text-gray-300 { color: #9ca3af !important; }
.auth-shell .border-gray-200\/50,
.auth-shell .dark\:border-gray-700\/50,
.auth-shell .border-gray-100\/50 { border-color: rgba(255, 255, 255, 0.08) !important; }
.auth-shell .ob-brand-wordmark {
  font-family: "Raleway", sans-serif; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; font-size: 1.05rem;
}

/* ---------- Light mode chrome (dashboard + admin) ---------- */
html.theme-light .dashboard-shell .ob-brand-wordmark,
html.theme-light .admin-shell .ob-brand-wordmark {
  color: #0f1f1b;
}

html.theme-light .dashboard-shell .ob-header-icon-btn {
  background: linear-gradient(160deg, rgba(19, 142, 117, 0.1) 0%, rgba(19, 142, 117, 0.04) 100%);
  border-color: rgba(15, 40, 34, 0.1);
  color: #0f1f1b;
}

html.theme-light .dashboard-shell .ob-action-pill {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(232, 240, 237, 0.95) 100%);
  border-color: rgba(15, 40, 34, 0.1);
  color: #0f1419;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(15, 40, 34, 0.06);
}

html.theme-light .dashboard-shell .ob-action-pill:hover {
  background: linear-gradient(165deg, #ffffff 0%, #e8f0ed 100%);
}

/* Beat hero-wide white ink: mint pills need charcoal labels + emerald icons */
html.theme-light .dashboard-shell .ob-balance-hero .ob-action-pill,
html.theme-light .dashboard-shell .ob-balance-hero .ob-action-pill span,
html.theme-light .dashboard-shell .ob-balance-hero a.ob-action-pill,
html.theme-light .dashboard-shell .ob-balance-hero button.ob-action-pill {
  color: #0f1419 !important;
}

html.theme-light .dashboard-shell .ob-balance-hero .ob-action-pill i {
  color: #138E75 !important;
}

html.theme-light .dashboard-shell .ob-bottom-nav-inner {
  background: var(--ob-gradient-nav);
  border-color: rgba(15, 40, 34, 0.1);
  box-shadow:
    0 -8px 32px rgba(15, 40, 34, 0.1),
    0 0 28px rgba(19, 142, 117, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Account sheet / options stay charcoal-emerald in light mode */
html.theme-light .dashboard-shell .ob-account-sheet {
  background-color: #0c1210;
  background-image: linear-gradient(180deg, #161616 0%, #0c1210 45%, #071412 100%);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 -16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(19, 142, 117, 0.12);
}

html.theme-light .dashboard-shell .ob-account-sheet-title,
html.theme-light .dashboard-shell .ob-account-switcher-option,
html.theme-light .dashboard-shell .ob-account-switcher-option-name {
  color: #ffffff;
}

html.theme-light .dashboard-shell .ob-account-switcher-option-meta {
  color: rgba(255, 255, 255, 0.55);
}

html.theme-light .dashboard-shell .ob-account-switcher-option.is-selected {
  background-color: #0f2e28;
  background-image: linear-gradient(135deg, rgba(19, 142, 117, 0.38) 0%, rgba(10, 40, 36, 0.95) 100%);
  border-color: rgba(19, 142, 117, 0.45);
}

html.theme-light .dashboard-shell .ob-account-pill {
  color: #fff;
}

html.theme-light .dashboard-shell .page-title h5,
html.theme-light .dashboard-shell .page-title .h3 {
  color: #0f1f1b !important;
}

html.theme-light .dashboard-shell .btn-neutral {
  background: rgba(19, 142, 117, 0.08) !important;
  border: 1px solid rgba(15, 40, 34, 0.12) !important;
  color: #0f1f1b !important;
}

html.theme-light .dashboard-shell .sidenav {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6f5 60%, #e8f0ed 100%) !important;
  border-right: 1px solid var(--ob-border);
}

html.theme-light .dashboard-shell .footer,
html.theme-light .dashboard-shell .footer-light {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6f5 100%) !important;
  color: var(--ob-text-muted) !important;
  border-top: 1px solid var(--ob-border);
}

html.theme-light .dashboard-shell aside,
html.theme-light .dashboard-shell .lg\:flex > .w-72,
html.theme-light .dashboard-shell .flex.h-screen > .w-72 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 246, 245, 0.99) 100%) !important;
  border-color: rgba(15, 40, 34, 0.1) !important;
}

html.theme-light .dashboard-shell .flex-1.flex.flex-col > header,
html.theme-light .dashboard-shell header.backdrop-blur-xl {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 40, 34, 0.1) !important;
}

html.theme-light .dashboard-shell main.bg-black,
html.theme-light .dashboard-shell .bg-black {
  background-color: transparent !important;
  background: transparent !important;
}

html.theme-light .dashboard-shell .border-white\/10 {
  border-color: rgba(15, 40, 34, 0.1) !important;
}

html.theme-light .dashboard-shell .ob-status-chip.is-income,
html.theme-light .dashboard-shell .ob-status-chip.is-expense {
  color: #0a5c52;
  background: linear-gradient(135deg, rgba(19, 142, 117, 0.16), rgba(19, 142, 117, 0.06));
  border-color: rgba(19, 142, 117, 0.22);
}

html.theme-light .dashboard-shell .ob-status-chip.is-bills {
  color: #3d4a46;
  background: linear-gradient(135deg, rgba(90, 107, 102, 0.16), rgba(90, 107, 102, 0.06));
}

html.theme-light .dashboard-shell .ob-status-chip.is-savings {
  color: #7a6818;
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(19, 142, 117, 0.06));
}

html.theme-light .dashboard-shell .ob-page-shell .bg-blue-50,
html.theme-light .dashboard-shell .ob-page-shell .bg-blue-50\/30,
html.theme-light .dashboard-shell .bg-blue-50,
html.theme-light .dashboard-shell .bg-blue-50\/30,
html.theme-light .dashboard-shell .bg-blue-50\/70,
html.theme-light .dashboard-shell .bg-blue-100,
html.theme-light .dashboard-shell .dark\:bg-blue-900\/20,
html.theme-light .dashboard-shell .dark\:bg-blue-900\/30,
html.theme-light .dashboard-shell .dark\:bg-blue-900\/50 {
  color: #0a5c52 !important;
}

/* User dash: same text-light trap on legacy Purpose pages */
html.theme-light .dashboard-shell .text-light,
html.theme-light .dashboard-shell .page-title .text-light,
html.theme-light .dashboard-shell .card .text-light {
  color: #0f1f1b !important;
}

/*
 * User dash light: overview + dash surfaces flip to mint/white fills while
 * Blade still hardcodes text-white / text-white/45 on stats cards and
 * Account Settings headers. Force charcoal ink; keep white on emerald heroes.
 */
html.theme-light .dashboard-shell .ob-overview-card,
html.theme-light .dashboard-shell .ob-dash-surface {
  color: #0f1f1b !important;
}

html.theme-light .dashboard-shell .ob-overview-card .text-white,
html.theme-light .dashboard-shell .ob-overview-card h1,
html.theme-light .dashboard-shell .ob-overview-card h2,
html.theme-light .dashboard-shell .ob-overview-card h3,
html.theme-light .dashboard-shell .ob-overview-card h4,
html.theme-light .dashboard-shell .ob-overview-card p,
html.theme-light .dashboard-shell .ob-dash-surface > .flex .text-white,
html.theme-light .dashboard-shell .ob-dash-surface > .flex h1,
html.theme-light .dashboard-shell .ob-dash-surface > .flex h2,
html.theme-light .dashboard-shell .ob-dash-surface > .flex p,
html.theme-light .dashboard-shell .ob-dash-surface .border-b .text-gray-900,
html.theme-light .dashboard-shell section > h2.text-white,
html.theme-light .dashboard-shell h2.text-lg.font-bold.text-white {
  color: #0f1f1b !important;
}

html.theme-light .dashboard-shell .ob-overview-card .text-white\/40,
html.theme-light .dashboard-shell .ob-overview-card .text-white\/45,
html.theme-light .dashboard-shell .ob-overview-card .text-white\/50,
html.theme-light .dashboard-shell .ob-overview-card .text-white\/55,
html.theme-light .dashboard-shell .ob-overview-card .text-white\/60,
html.theme-light .dashboard-shell .ob-dash-surface > .flex .text-white\/40,
html.theme-light .dashboard-shell .ob-dash-surface > .flex .text-white\/45,
html.theme-light .dashboard-shell .ob-dash-surface > .flex .text-white\/50,
html.theme-light .dashboard-shell .ob-dash-surface > .flex .text-white\/55,
html.theme-light .dashboard-shell .ob-dash-surface > .flex .text-white\/60 {
  color: rgba(15, 40, 34, 0.55) !important;
}

/* Catch Account Settings header + any loose white ink on light dash surfaces */
html.theme-light .dashboard-shell .ob-dash-surface .text-white {
  color: #0f1f1b !important;
}

html.theme-light .dashboard-shell .ob-dash-surface .text-white\/40,
html.theme-light .dashboard-shell .ob-dash-surface .text-white\/45,
html.theme-light .dashboard-shell .ob-dash-surface .text-white\/50,
html.theme-light .dashboard-shell .ob-dash-surface .text-white\/55,
html.theme-light .dashboard-shell .ob-dash-surface .text-white\/60,
html.theme-light .dashboard-shell .ob-dash-surface .text-white\/70,
html.theme-light .dashboard-shell .ob-dash-surface .text-white\/80 {
  color: rgba(15, 40, 34, 0.55) !important;
}

/* Emerald balance / profile hero stays light ink in both themes */
html.theme-light .dashboard-shell .ob-balance-hero,
html.theme-light .dashboard-shell .ob-balance-hero .text-white,
html.theme-light .dashboard-shell .ob-balance-hero h1,
html.theme-light .dashboard-shell .ob-balance-hero h2,
html.theme-light .dashboard-shell .ob-balance-hero h3,
html.theme-light .dashboard-shell .ob-balance-hero h4,
html.theme-light .dashboard-shell .ob-balance-hero p,
html.theme-light .dashboard-shell .ob-balance-hero span,
html.theme-light .dashboard-shell .ob-balance-hero a,
html.theme-light .dashboard-shell .ob-balance-hero button,
html.theme-light .dashboard-shell .ob-balance-hero i {
  color: #ffffff !important;
}

html.theme-light .dashboard-shell .ob-balance-hero .text-white\/40,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/45,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/50,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/55,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/60,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/70,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/75,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/80,
html.theme-light .dashboard-shell .ob-balance-hero .text-white\/90 {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Colored chips / solid primary badges keep white glyphs */
html.theme-light .dashboard-shell .ob-overview-card .ob-icon-chip,
html.theme-light .dashboard-shell .ob-overview-card .ob-icon-chip i {
  color: inherit;
}

html.theme-light .dashboard-shell .ob-icon-chip.is-income,
html.theme-light .dashboard-shell .ob-icon-chip.is-income i {
  color: #0a5c52 !important;
}

html.theme-light .dashboard-shell .ob-icon-chip.is-expense,
html.theme-light .dashboard-shell .ob-icon-chip.is-expense i {
  color: #9b3b3b !important;
}

html.theme-light .dashboard-shell .ob-icon-chip.is-bills,
html.theme-light .dashboard-shell .ob-icon-chip.is-bills i {
  color: #3d4a46 !important;
}

html.theme-light .dashboard-shell .ob-icon-chip.is-savings,
html.theme-light .dashboard-shell .ob-icon-chip.is-savings i {
  color: #7a6818 !important;
}

html.theme-light .dashboard-shell .bg-primary-500 .text-white,
html.theme-light .dashboard-shell .bg-green-500 .text-white,
html.theme-light .dashboard-shell .bg-red-500 .text-white,
html.theme-light .dashboard-shell .bg-accent-500 .text-white,
html.theme-light .dashboard-shell .bg-primary-600 .text-white,
html.theme-light .dashboard-shell [class*="bg-primary-"] > .text-white,
html.theme-light .dashboard-shell [class*="bg-primary-"] > i.text-white,
html.theme-light .dashboard-shell .bg-primary-500 > i,
html.theme-light .dashboard-shell .btn-primary,
html.theme-light .dashboard-shell .btn-primary.text-white {
  color: #ffffff !important;
}

/*
 * Admin light mode readability.
 * Root cause: Blade still emits Bootstrap text-light / text-white from DB
 * dashboard_style=dark while ob-theme.js only flips CSS surfaces. Atlantis
 * body[data-background-color="dark"] white-title rules also fight light cards
 * if the body attr briefly (or still) says dark. Force dark ink on light chrome.
 */
html.theme-light body.admin-shell,
html.theme-light body.admin-shell[data-background-color="dark"],
html.theme-light body.admin-shell[data-background-color="light"],
html[data-theme="light"] body.admin-shell,
body.admin-shell.theme-light {
  background: var(--ob-gradient-page) !important;
  background-color: var(--ob-bg) !important;
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .main-header .logo-header,
html.theme-light .admin-shell .main-header .navbar-header,
html.theme-light .admin-shell .logo-header[data-background-color="blue"],
html.theme-light .admin-shell .navbar-header[data-background-color="blue"],
html.theme-light .admin-shell .logo-header[data-background-color="dark"],
html.theme-light .admin-shell .navbar-header[data-background-color="dark"],
html.theme-light .admin-shell .logo-header[data-background-color="light"],
html.theme-light .admin-shell .navbar-header[data-background-color="light"] {
  background: var(--ob-gradient-nav) !important;
  border-bottom: 1px solid var(--ob-border) !important;
  box-shadow: 0 6px 20px rgba(15, 40, 34, 0.06);
}

html.theme-light .admin-shell .sidebar,
html.theme-light .admin-shell .sidebar[data-background-color="dark"],
html.theme-light .admin-shell .sidebar[data-background-color="light"],
html.theme-light .admin-shell .sidebar .sidebar-wrapper {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6f5 55%, #e8f0ed 100%) !important;
  border-right: 1px solid var(--ob-border);
}

html.theme-light .admin-shell .sidebar .user,
html.theme-light .admin-shell .sidebar .user .info a,
html.theme-light .admin-shell .sidebar .user .info a > span,
html.theme-light .admin-shell .sidebar .user .user-level,
html.theme-light .admin-shell .sidebar .nav .nav-section .text-section,
html.theme-light .admin-shell .sidebar .nav .nav-section .sidebar-mini-icon,
html.theme-light .admin-shell .sidebar .nav > .nav-item a,
html.theme-light .admin-shell .sidebar .nav > .nav-item a p,
html.theme-light .admin-shell .sidebar .nav > .nav-item a i,
html.theme-light .admin-shell .sidebar .nav > .nav-item a .caret,
html.theme-light .admin-shell .sidebar .nav-collapse li a,
html.theme-light .admin-shell .sidebar .nav-collapse li a .sub-item,
html.theme-light .admin-shell .sidebar .nav-collapse li a .sidebar-mini-icon {
  color: #3d4a46 !important;
}

html.theme-light .admin-shell .sidebar .nav > .nav-item > a:hover p,
html.theme-light .admin-shell .sidebar .nav > .nav-item > a:hover i,
html.theme-light .admin-shell .sidebar .nav > .nav-item > a:focus p,
html.theme-light .admin-shell .sidebar .nav > .nav-item > a:focus i,
html.theme-light .admin-shell .sidebar .nav-collapse li a:hover .sub-item {
  color: #0a5c52 !important;
}

html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a:hover,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a:focus,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a p,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a i,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a .caret,
html.theme-light .admin-shell .sidebar.sidebar-style-2 .nav .nav-item.active > a p,
html.theme-light .admin-shell .sidebar.sidebar-style-2 .nav .nav-item.active > a i,
html.theme-light .admin-shell .sidebar.sidebar-style-2 .nav .nav-item.active > a .caret {
  color: #ffffff !important;
}

html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a {
  background: var(--ob-gradient-hero) !important;
  box-shadow: 0 10px 28px rgba(19, 142, 117, 0.28) !important;
  border: 1px solid rgba(19, 142, 117, 0.35);
}

html.theme-light .admin-shell .footer {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6f5 100%) !important;
  border-top: 1px solid var(--ob-border) !important;
  color: #5a6b66 !important;
}

html.theme-light .admin-shell .footer p,
html.theme-light .admin-shell .footer a:not(.btn) {
  color: #5a6b66 !important;
}

html.theme-light .admin-shell .navbar-header .nav-link,
html.theme-light .admin-shell .navbar-header .fas,
html.theme-light .admin-shell .navbar-header .text-white,
html.theme-light .admin-shell .navbar-header a.btn.text-white,
html.theme-light .admin-shell .logo-header .navbar-toggler-icon i,
html.theme-light .admin-shell .logo-header .icon-menu,
html.theme-light .admin-shell .logo-header .icon-options-vertical,
html.theme-light .admin-shell .logo-header .more {
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .btn-toggle,
html.theme-light .admin-shell .navbar-toggler-icon i,
html.theme-light .admin-shell .topbar-toggler {
  color: #0f1f1b !important;
}

/* Main content: override Atlantis dark-body white ink + Blade text-light */
html.theme-light .admin-shell .wrapper,
html.theme-light .admin-shell .main-panel,
html.theme-light .admin-shell .content,
html.theme-light .admin-shell .page-inner,
html.theme-light body.admin-shell[data-background-color="dark"] .main-panel,
html.theme-light body.admin-shell[data-background-color="light"] .main-panel {
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .page-title,
html.theme-light .admin-shell .page-title h1,
html.theme-light .admin-shell .page-title h2,
html.theme-light .admin-shell .page-title h3,
html.theme-light .admin-shell .page-title h4,
html.theme-light .admin-shell .page-title h5,
html.theme-light .admin-shell .page-category,
html.theme-light .admin-shell .title1,
html.theme-light .admin-shell .breadcrumbs,
html.theme-light .admin-shell .breadcrumbs li,
html.theme-light .admin-shell .breadcrumbs li a,
html.theme-light body.admin-shell[data-background-color="dark"] .page-title,
html.theme-light body.admin-shell[data-background-color="dark"] .breadcrumbs li a,
html.theme-light body.admin-shell[data-background-color="dark"] .page-category {
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .page-category,
html.theme-light .admin-shell .card-category,
html.theme-light .admin-shell .text-muted,
html.theme-light .admin-shell small,
html.theme-light .admin-shell .form-text,
html.theme-light body.admin-shell[data-background-color="dark"] .card-category {
  color: #5a6b66 !important;
}

html.theme-light .admin-shell .card,
html.theme-light .admin-shell .row-card-no-pd,
html.theme-light .admin-shell .list-group-item,
html.theme-light body.admin-shell[data-background-color="dark"] .card,
html.theme-light body.admin-shell[data-background-color="dark"] .row-card-no-pd,
html.theme-light body.admin-shell[data-background-color="dark"] .list-group-item {
  background: var(--ob-gradient-surface) !important;
  border-color: var(--ob-border) !important;
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .card .card-header,
html.theme-light .admin-shell .card .card-body,
html.theme-light .admin-shell .card .card-footer,
html.theme-light .admin-shell .card .card-action,
html.theme-light .admin-shell .card .card-title,
html.theme-light .admin-shell .card .card-title a,
html.theme-light .admin-shell .card label,
html.theme-light .admin-shell .card .numbers,
html.theme-light .admin-shell .card .numbers p,
html.theme-light .admin-shell .table,
html.theme-light .admin-shell .table td,
html.theme-light .admin-shell .table th,
html.theme-light .admin-shell table.dataTable td,
html.theme-light .admin-shell table.dataTable th,
html.theme-light body.admin-shell[data-background-color="dark"] .card-title,
html.theme-light body.admin-shell[data-background-color="dark"] .card-title a,
html.theme-light body.admin-shell[data-background-color="dark"] .main-panel label {
  color: #0f1f1b !important;
  border-color: var(--ob-border) !important;
}

html.theme-light .admin-shell label,
html.theme-light .admin-shell .control-label,
html.theme-light .admin-shell h1,
html.theme-light .admin-shell h2,
html.theme-light .admin-shell h3,
html.theme-light .admin-shell h4,
html.theme-light .admin-shell h5,
html.theme-light .admin-shell h6,
html.theme-light .admin-shell p,
html.theme-light .admin-shell span,
html.theme-light .admin-shell li,
html.theme-light .admin-shell td,
html.theme-light .admin-shell th,
html.theme-light .admin-shell a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item) {
  color: inherit;
}

/* Blade text-{{ $text }} with $text=light while CSS theme is light */
html.theme-light .admin-shell .text-light,
html.theme-light .admin-shell .text-white,
html.theme-light .admin-shell .text-white-50,
html.theme-light[data-theme="light"] .admin-shell .text-light,
html.theme-light[data-theme="light"] .admin-shell .text-white {
  color: #0f1f1b !important;
}

/* Keep white ink on intentional emerald / solid colored surfaces */
html.theme-light .admin-shell .panel-header .text-white,
html.theme-light .admin-shell .panel-header .text-light,
html.theme-light .admin-shell .panel-header h1,
html.theme-light .admin-shell .panel-header h2,
html.theme-light .admin-shell .panel-header h3,
html.theme-light .admin-shell .panel-header h4,
html.theme-light .admin-shell .panel-header h5,
html.theme-light .admin-shell .panel-header h6,
html.theme-light .admin-shell .panel-header p,
html.theme-light .admin-shell .panel-header span,
html.theme-light .admin-shell .bg-primary-gradient .text-white,
html.theme-light .admin-shell .bg-primary-gradient .text-light,
html.theme-light .admin-shell .bg-dark-gradient .text-white,
html.theme-light .admin-shell .bg-dark-gradient .text-light,
html.theme-light .admin-shell .bg-primary .text-white,
html.theme-light .admin-shell .bg-success .text-white,
html.theme-light .admin-shell .bg-info .text-white,
html.theme-light .admin-shell .bg-danger .text-white,
html.theme-light .admin-shell .bg-warning .text-white,
html.theme-light .admin-shell .btn-primary,
html.theme-light .admin-shell .btn-primary.text-white,
html.theme-light .admin-shell .btn-success,
html.theme-light .admin-shell .btn-info,
html.theme-light .admin-shell .btn-danger,
html.theme-light .admin-shell .btn-warning,
html.theme-light .admin-shell .btn-secondary,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a,
html.theme-light .admin-shell .sidebar .nav > .nav-item.active > a *,
html.theme-light .admin-shell thead.bg-primary,
html.theme-light .admin-shell thead.bg-primary.text-white,
html.theme-light .admin-shell thead.bg-primary th,
html.theme-light .admin-shell .badge-primary,
html.theme-light .admin-shell .badge-success,
html.theme-light .admin-shell .badge-danger,
html.theme-light .admin-shell .badge-info,
html.theme-light .admin-shell .badge-warning {
  color: #ffffff !important;
}

html.theme-light .admin-shell .form-control,
html.theme-light .admin-shell .form-group-default,
html.theme-light .admin-shell .custom-select,
html.theme-light .admin-shell select.form-control,
html.theme-light .admin-shell textarea.form-control,
html.theme-light .admin-shell .input-group-text,
html.theme-light .admin-shell .select2-container--default .select2-selection--single,
html.theme-light .admin-shell .select2-container--default .select2-selection--single .select2-selection__rendered,
html.theme-light body.admin-shell[data-background-color="dark"] .form-control,
html.theme-light body.admin-shell[data-background-color="dark"] .form-group-default,
html.theme-light body.admin-shell[data-background-color="dark"] .input-group-text {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(15, 40, 34, 0.18) !important;
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .form-control::placeholder {
  color: #7a8a85 !important;
  opacity: 1;
}

html.theme-light .admin-shell .form-control:focus {
  border-color: rgba(19, 142, 117, 0.55) !important;
  box-shadow: var(--ob-focus-ring) !important;
}

html.theme-light .admin-shell .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--ob-border) !important;
  box-shadow: 0 12px 28px rgba(15, 40, 34, 0.12);
}

html.theme-light .admin-shell .dropdown-item,
html.theme-light .admin-shell .dropdown-user .dropdown-item {
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .dropdown-item:hover,
html.theme-light .admin-shell .dropdown-item:focus {
  background: rgba(19, 142, 117, 0.1) !important;
  color: #0a5c52 !important;
}

html.theme-light .admin-shell .nav-pills .nav-link:not(.active),
html.theme-light .admin-shell .nav-tabs .nav-link {
  color: #3d4a46 !important;
}

html.theme-light .admin-shell .nav-pills .nav-link.active,
html.theme-light .admin-shell .nav-tabs .nav-link.active {
  color: #0a5c52 !important;
}

html.theme-light .admin-shell .modal-content {
  background: #ffffff !important;
  color: #0f1f1b !important;
  border-color: var(--ob-border) !important;
}

html.theme-light .admin-shell .modal-header,
html.theme-light .admin-shell .modal-body,
html.theme-light .admin-shell .modal-footer,
html.theme-light .admin-shell .modal-title,
html.theme-light .admin-shell .close {
  color: #0f1f1b !important;
  border-color: var(--ob-border) !important;
}

html.theme-light .admin-shell .table thead th,
html.theme-light .admin-shell .dataTables_wrapper,
html.theme-light .admin-shell .dataTables_info,
html.theme-light .admin-shell .dataTables_filter label,
html.theme-light .admin-shell .dataTables_length label,
html.theme-light .admin-shell .paginate_button {
  color: #0f1f1b !important;
}

html.theme-light .admin-shell .border,
html.theme-light .admin-shell .border-top,
html.theme-light .admin-shell .border-bottom,
html.theme-light .admin-shell hr,
html.theme-light .admin-shell .separator-solid,
html.theme-light .admin-shell .separator-dashed {
  border-color: var(--ob-border) !important;
}

html.theme-light .admin-shell ::-webkit-scrollbar-track {
  background: #e8f0ed;
}

html.theme-light .admin-shell ::-webkit-scrollbar-thumb {
  background: #a8b8b2;
}

html.theme-light .admin-shell ::-webkit-scrollbar-thumb:hover {
  background: #138e75;
}

.ob-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--ob-border);
  background: var(--ob-gradient-wash);
  color: var(--ob-text);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ob-theme-toggle:hover {
  border-color: rgba(19, 142, 117, 0.4);
  transform: translateY(-1px);
}

.ob-theme-toggle .ob-theme-icon-sun {
  color: #ca8a04;
}

.ob-theme-toggle .ob-theme-icon-moon {
  color: #0f766e;
}

html.theme-light .ob-theme-toggle .ob-theme-icon-moon {
  color: #0d5c54;
}

html.dark .ob-theme-toggle .ob-theme-icon-sun,
html:not(.theme-light) .ob-theme-toggle .ob-theme-icon-sun {
  display: inline-block;
}

html.dark .ob-theme-toggle .ob-theme-icon-moon,
html:not(.theme-light) .ob-theme-toggle .ob-theme-icon-moon {
  display: none;
}

html.theme-light .ob-theme-toggle .ob-theme-icon-sun {
  display: none;
}

html.theme-light .ob-theme-toggle .ob-theme-icon-moon {
  display: inline-block;
}

html.theme-light .dashboard-shell ::-webkit-scrollbar-track {
  background: #e8f0ed;
}

html.theme-light .dashboard-shell ::-webkit-scrollbar-thumb {
  background: #a8b8b2;
}

html.theme-light .dashboard-shell ::-webkit-scrollbar-thumb:hover {
  background: #138e75;
}