/* ── NexiBook Sidebar Compact — Linear/Notion overlay ──
   Loaded only on pages with body.nb-dash-host (the -nb dashboards).
   Targets BOTH tenantSidebar (.sidebar.td-side) AND trainerSidebar (.tenant-sidebar).
   Preserves all menu items, links, JS — visual-only overlay.
   See /opt/insightful-dev/plans/openui-desktop-rollout/PLAN.md
*/

/* ═════════ TENANT SIDEBAR (.sidebar.td-side) ═════════ */
body.nb-dash-host .sidebar,
body.nb-dash-host #tenantSidebar {
  width: 232px !important;
  background: var(--nb-bg-body, #0a0a0a) !important;
  border-right: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  padding: 0 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

body.nb-dash-host .sidebar-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.06)) !important;
  background: transparent !important;
  height: auto !important;
  min-height: 56px;
}

body.nb-dash-host .sidebar-brand,
body.nb-dash-host .tenant-sidebar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  color: var(--nb-text-main, #fff) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  padding: 0 !important;
}

body.nb-dash-host .sidebar-brand .brand-icon,
body.nb-dash-host .sidebar-brand img.brand-logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  background: var(--nb-gold, #FFD700) !important;
  color: var(--nb-text-on-gold, #000) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.nb-dash-host .sidebar-brand .sidebar-brand-text,
body.nb-dash-host .tenant-sidebar-brand-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--nb-text-main, #fff) !important;
}

/* Search bar */
body.nb-dash-host .sidebar-search,
body.nb-dash-host .sidebar-search-wrap {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.04)) !important;
}
body.nb-dash-host .sidebar-search input,
body.nb-dash-host .sidebar-search-input {
  background: var(--nb-bg-surface, rgba(255,255,255,.03)) !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.06)) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 6px 10px 6px 28px !important;
  color: var(--nb-text-main, #fff) !important;
  height: 30px !important;
}
body.nb-dash-host .sidebar-search input::placeholder { color: var(--nb-text-muted, rgba(255,255,255,.4)) !important; }

/* Group sections */
body.nb-dash-host .nav-group {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.nb-dash-host .nav-group-header,
body.nb-dash-host .nav-group-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--nb-text-muted, rgba(255,255,255,.55)) !important;
  padding: 14px 16px 4px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  cursor: pointer;
}
body.nb-dash-host .nav-group-header:hover { color: var(--nb-text-main, #fff) !important; }
body.nb-dash-host .nav-group-header i,
body.nb-dash-host .nav-group-header svg { opacity: .5; transition: transform .15s; }
body.nb-dash-host .nav-group-header[aria-expanded="false"] i { transform: rotate(-90deg); }

body.nb-dash-host .nav-group-items {
  padding: 0 8px 4px !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
body.nb-dash-host .nav-group-items li,
body.nb-dash-host .nav-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Nav links — Linear/Notion compact row */
body.nb-dash-host .nav-link,
body.nb-dash-host .tenant-sidebar-item {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 6px 8px !important;
  margin: 1px 0 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--nb-text-muted, rgba(255,255,255,.65)) !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  transition: background-color .1s, color .1s !important;
  min-height: 30px !important;
  line-height: 1.2 !important;
}
body.nb-dash-host .nav-link:hover,
body.nb-dash-host .tenant-sidebar-item:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--nb-text-main, #fff) !important;
}
body.nb-dash-host .nav-link.active,
body.nb-dash-host .nav-link.is-active,
body.nb-dash-host .nav-item.active > .nav-link,
body.nb-dash-host .nav-item.active > a,
body.nb-dash-host li.active > .nav-link,
body.nb-dash-host .tenant-sidebar-item.active {
  background: rgba(255,215,0,.10) !important;
  color: var(--nb-gold, #FFD700) !important;
  font-weight: 500 !important;
  box-shadow: inset 3px 0 0 var(--nb-gold, #FFD700) !important;
}

/* Icons inside nav links */
body.nb-dash-host .nav-link i,
body.nb-dash-host .nav-link svg,
body.nb-dash-host .nav-link .nav-icon,
body.nb-dash-host .tenant-sidebar-item i,
body.nb-dash-host .tenant-sidebar-item svg {
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  opacity: .85;
}
body.nb-dash-host .nav-link.active i,
body.nb-dash-host .tenant-sidebar-item.active i { opacity: 1; }

body.nb-dash-host .nav-text {
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Badges/chips on nav items */
body.nb-dash-host .nav-link .badge,
body.nb-dash-host .nav-link .nav-badge {
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: rgba(255,215,0,.15) !important;
  color: var(--nb-gold, #FFD700) !important;
  font-weight: 500 !important;
  margin-left: auto !important;
}

/* Override the colored backgrounds on landing-page / landing-setup-wizard hard-styled items */
body.nb-dash-host .nav-link[style*="linear-gradient"],
body.nb-dash-host .nav-link[style*="border-left"] {
  background: transparent !important;
  border-left: none !important;
}
body.nb-dash-host .nav-link[style*="linear-gradient"]:hover {
  background: rgba(255,255,255,.04) !important;
}

/* Sidebar footer (logout etc) */
body.nb-dash-host .sidebar-footer,
body.nb-dash-host .tenant-sidebar-footer {
  border-top: 1px solid var(--nb-border-light, rgba(255,255,255,.06)) !important;
  padding: 8px !important;
  background: transparent !important;
}

/* ═════════ TRAINER SIDEBAR (.tenant-sidebar) ═════════ */
body.nb-dash-host .tenant-sidebar {
  width: 232px !important;
  background: var(--nb-bg-body, #0a0a0a) !important;
  border-right: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  padding: 0 !important;
}

body.nb-dash-host .tenant-sidebar-header {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.06)) !important;
  background: transparent !important;
  min-height: 56px;
}

body.nb-dash-host .tenant-sidebar-section,
body.nb-dash-host .tenant-sidebar-nav {
  padding: 6px 8px !important;
}

body.nb-dash-host .tenant-sidebar-section-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--nb-text-muted, rgba(255,255,255,.45)) !important;
  padding: 10px 8px 4px !important;
  margin: 0 !important;
}

/* Collapse toggle button (if present) */
body.nb-dash-host .sidebar-collapse-toggle,
body.nb-dash-host .sidebar-toggle {
  background: transparent !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  border-radius: 6px !important;
  color: var(--nb-text-muted, rgba(255,255,255,.5)) !important;
  width: 28px !important;
  height: 28px !important;
}

/* Body padding-left override — base tenant CSS sets `body.has-tenant-sidebar { padding-left:280px }` to clear fixed sidebar. We clamp it to 232px here.
   IMPORTANT: ONLY scoped to .has-tenant-sidebar / .has-trainer-sidebar bodies — customer pages have no sidebar, must keep padding-left:0. */
body.nb-dash-host.has-tenant-sidebar,
body.nb-dash-host.has-trainer-sidebar {
  padding-left: 232px !important;
}
body.nb-dash-host.has-tenant-sidebar.collapsed-sidebar,
body.nb-dash-host.has-trainer-sidebar.collapsed-sidebar { padding-left: 56px !important; }
@media (max-width: 768px) {
  body.nb-dash-host.has-tenant-sidebar,
  body.nb-dash-host.has-trainer-sidebar { padding-left: 0 !important; }
}

/* Content area: zero its own offset. For sidebar pages body padding-left handles offset.
   For customer (no sidebar) body padding 0, content fills viewport.
   Covers: .full-width-report, main.main-content, top-level .container-fluid,
   top-level <main>, customer dashboard-shell container-xxl. */
body.nb-dash-host .container-fluid.full-width-report,
body.nb-dash-host main.main-content,
body.nb-dash-host > .container-fluid,
body.nb-dash-host > main,
body.nb-dash-host main.dashboard-shell,
body.nb-dash-host .container-xxl {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}
body.nb-dash-host .container-fluid.full-width-report {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Customer-specific: center content with reasonable max-width since no sidebar */
body.nb-dash-host:not(.has-tenant-sidebar):not(.has-trainer-sidebar) main.dashboard-shell,
body.nb-dash-host:not(.has-tenant-sidebar):not(.has-trainer-sidebar) .container-xxl {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Some inherited rules ALSO target body.has-tenant-sidebar .full-width-report (without container-fluid prefix) — neutralise extra padding there too */
body.nb-dash-host .full-width-report {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Content shell — flush to sidebar with small breathing room */
body.nb-dash-host #nb-dash-v2 {
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 24px 48px !important;
}

/* Hide any leftover topbars/headers from the original tenant chrome that add their own padding */
body.nb-dash-host #tenantTopbar,
body.nb-dash-host .tenant-topbar,
body.nb-dash-host .topbar-search,
body.nb-dash-host .nb-page-fade > .premium-hero { display: none !important; }

/* Hide premium-hero leftovers (the old big welcome banner) — content-area uses #nb-dash-v2 page-head instead */
body.nb-dash-host .premium-hero { display: none !important; }

/* Collapsed sidebar state (if user toggles) */
body.nb-dash-host.collapsed-sidebar .sidebar,
body.nb-dash-host.collapsed-sidebar .tenant-sidebar { width: 56px !important; }
body.nb-dash-host.collapsed-sidebar .nav-text,
body.nb-dash-host.collapsed-sidebar .sidebar-brand-text,
body.nb-dash-host.collapsed-sidebar .nav-group-title,
body.nb-dash-host.collapsed-sidebar .nav-group-header span,
body.nb-dash-host.collapsed-sidebar .tenant-sidebar-brand-text,
body.nb-dash-host.collapsed-sidebar .tenant-sidebar-section-title { display: none !important; }
body.nb-dash-host.collapsed-sidebar .container-fluid.full-width-report {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobile: hide sidebar entirely (tenant dashboard handles its own mobile chrome) */
@media (max-width: 768px) {
  body.nb-dash-host .sidebar,
  body.nb-dash-host .tenant-sidebar { display: none !important; }
  body.nb-dash-host .container-fluid.full-width-report {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   CONTENT RESKIN — Linear/Notion overlay on existing dashboard markup
   Preserves all original HTML/data — only visual flattening + NB tokens.
   Targets ORIGINAL classes: .premium-hero, .kpi-card, .card, .nav-card.
   ═════════════════════════════════════════════════════════════════════ */

/* Inner container — use full width but with consistent padding */
body.nb-dash-host .container-fluid.full-width-report,
body.nb-dash-host #tenant-dashboard,
body.nb-dash-host .trainer-dashboard-container {
  font-family: 'Inter', -apple-system, sans-serif !important;
  padding-top: 20px !important;
  padding-bottom: 48px !important;
}

/* Kill the big premium-hero banner — replace with a single dense header line */
body.nb-dash-host .premium-hero {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px 0 !important;
  margin: 0 0 20px 0 !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  display: block !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
body.nb-dash-host .premium-hero::before,
body.nb-dash-host .premium-hero::after { display: none !important; }
body.nb-dash-host .premium-hero__content { padding: 0 !important; }
body.nb-dash-host .premium-hero__eyebrow {
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  color: var(--nb-text-muted, rgba(255,255,255,.45)) !important;
  margin: 0 0 4px 0 !important;
}
body.nb-dash-host .premium-hero__title {
  font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.01em !important;
  margin: 0 0 4px 0 !important; line-height: 1.2 !important;
  text-shadow: none !important; background: none !important; -webkit-text-fill-color: initial !important;
  color: var(--nb-text-main, #fff) !important;
}
body.nb-dash-host .premium-hero__title span { color: var(--nb-gold, #FFD700) !important; }
body.nb-dash-host .premium-hero__subtitle {
  font-size: 13px !important; color: var(--nb-text-muted, rgba(255,255,255,.5)) !important;
  margin: 0 0 12px 0 !important;
}
body.nb-dash-host .premium-hero .actions a,
body.nb-dash-host .premium-hero .btn {
  padding: 6px 12px !important; font-size: 13px !important; font-weight: 500 !important;
  border-radius: 8px !important; border: 1px solid var(--nb-border-light) !important;
  background: var(--nb-bg-surface, #181818) !important;
  color: var(--nb-text-main, #fff) !important;
  text-decoration: none !important; box-shadow: none !important;
}
body.nb-dash-host .premium-hero .btn-success,
body.nb-dash-host .premium-hero .btn-primary,
body.nb-dash-host .premium-hero .btn.primary {
  background: var(--nb-gold, #FFD700) !important;
  color: var(--nb-text-on-gold, #000) !important;
  border-color: var(--nb-gold, #FFD700) !important;
}
body.nb-dash-host .premium-hero__visual,
body.nb-dash-host .premium-hero__media,
body.nb-dash-host .premium-hero__illustration { display: none !important; }

/* KPI grid — Linear-style metric chips */
body.nb-dash-host .kpi-grid,
body.nb-dash-host .td-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 1100px) {
  body.nb-dash-host .kpi-grid,
  body.nb-dash-host .td-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}
body.nb-dash-host .kpi-card,
body.nb-dash-host .td-kpi,
body.nb-dash-host .premium-stat {
  background: var(--nb-bg-surface, #181818) !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
  min-height: 0 !important;
  transform: none !important;
  transition: border-color .15s !important;
}
body.nb-dash-host .kpi-card:hover { border-color: rgba(255,215,0,.25) !important; }
body.nb-dash-host .kpi-card::before,
body.nb-dash-host .kpi-card::after,
body.nb-dash-host .td-kpi::before { display: none !important; }
body.nb-dash-host .kpi-card__header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  margin-bottom: 8px !important; padding: 0 !important;
}
body.nb-dash-host .kpi-card__icon {
  width: 28px !important; height: 28px !important; border-radius: 6px !important;
  font-size: 14px !important; box-shadow: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body.nb-dash-host .kpi-card__icon--green { background: rgba(34,197,94,.12) !important; color: #4ade80 !important; }
body.nb-dash-host .kpi-card__icon--gold  { background: rgba(255,215,0,.15) !important; color: var(--nb-gold) !important; }
body.nb-dash-host .kpi-card__icon--blue  { background: rgba(59,130,246,.12) !important; color: #60a5fa !important; }
body.nb-dash-host .kpi-card__icon--purple{ background: rgba(168,85,247,.12) !important; color: #c084fc !important; }
body.nb-dash-host .kpi-card__trend {
  font-size: 11px !important; font-weight: 500 !important;
  padding: 2px 6px !important; border-radius: 4px !important;
  background: transparent !important;
}
body.nb-dash-host .kpi-card__trend.trend-up { color: #4ade80 !important; background: rgba(34,197,94,.1) !important; }
body.nb-dash-host .kpi-card__trend.trend-down { color: #f87171 !important; background: rgba(239,68,68,.1) !important; }
body.nb-dash-host .kpi-card__value {
  font-size: 24px !important; font-weight: 600 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
  color: var(--nb-text-main, #fff) !important;
  background: none !important; -webkit-text-fill-color: initial !important;
}
body.nb-dash-host .kpi-card__label {
  font-size: 12px !important; font-weight: 500 !important;
  color: var(--nb-text-muted, rgba(255,255,255,.6)) !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
  margin-top: 4px !important;
}

/* Cards */
body.nb-dash-host .card {
  background: var(--nb-bg-surface, #181818) !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
  backdrop-filter: none !important;
}
body.nb-dash-host .card.fade-in { animation: none !important; opacity: 1 !important; }
body.nb-dash-host .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.06)) !important;
  padding: 12px 18px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--nb-text-main, #fff) !important;
}
body.nb-dash-host .card-header h5,
body.nb-dash-host .card-title {
  font-size: 14px !important; font-weight: 600 !important; margin: 0 !important;
  color: var(--nb-text-main, #fff) !important;
}
body.nb-dash-host .card-body { padding: 14px 18px !important; }
body.nb-dash-host .card-body.p-0 { padding: 0 !important; }
body.nb-dash-host .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--nb-border-light, rgba(255,255,255,.06)) !important;
  padding: 10px 18px !important;
  font-size: 12px !important;
  color: var(--nb-text-muted, rgba(255,255,255,.5)) !important;
}

/* Nav cards (settings/services tiles) */
body.nb-dash-host .nav-card {
  background: var(--nb-bg-body, #0a0a0a) !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  transition: border-color .12s, background .12s !important;
}
body.nb-dash-host .nav-card:hover {
  border-color: var(--nb-border-gold, rgba(255,215,0,.3)) !important;
  background: rgba(255,215,0,.04) !important;
  transform: none !important;
}
body.nb-dash-host .nav-card-icon {
  width: 32px !important; height: 32px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  background: rgba(255,215,0,.1) !important;
  color: var(--nb-gold, #FFD700) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
body.nb-dash-host .nav-card-title {
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--nb-text-main, #fff) !important;
}
body.nb-dash-host .nav-card-description {
  font-size: 11px !important;
  color: var(--nb-text-muted, rgba(255,255,255,.5)) !important;
  margin-top: 2px !important;
}

/* Disable AOS / scroll-reveal animations — content shows immediately */
body.nb-dash-host [data-aos],
body.nb-dash-host .ds-scroll-reveal,
body.nb-dash-host .fade-in,
body.nb-dash-host .reveal,
body.nb-dash-host .viewport-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Tables inside cards */
body.nb-dash-host .table {
  color: var(--nb-text-main, #fff) !important;
  font-size: 13px !important;
}
body.nb-dash-host .table th {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--nb-text-muted, rgba(255,255,255,.5)) !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
  background: transparent !important;
}
body.nb-dash-host .table td {
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.05)) !important;
  padding: 10px 12px !important;
  background: transparent !important;
}

/* Activity feed */
body.nb-dash-host .activity-feed-card .list-group-item,
body.nb-dash-host .activity-item {
  background: transparent !important;
  border-bottom: 1px solid var(--nb-border-light, rgba(255,255,255,.05)) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: var(--nb-text-main, #fff) !important;
}

/* Buttons — flatten Bootstrap */
body.nb-dash-host .btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.nb-dash-host .btn-primary,
body.nb-dash-host .btn-success {
  background: var(--nb-gold, #FFD700) !important;
  color: var(--nb-text-on-gold, #000) !important;
  border-color: var(--nb-gold, #FFD700) !important;
}
body.nb-dash-host .btn-outline-primary,
body.nb-dash-host .btn-outline-secondary,
body.nb-dash-host .btn-outline-success {
  background: transparent !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.15)) !important;
  color: var(--nb-text-main, #fff) !important;
}

/* Section headers / hN inside content */
body.nb-dash-host h1,
body.nb-dash-host h2,
body.nb-dash-host h3 {
  letter-spacing: -.01em !important;
  font-weight: 600 !important;
}

/* KPI sparkline canvas — keep as-is but constrain background */
body.nb-dash-host .kpi-sparkline { opacity: .9 !important; }

/* dashboard-widgets-grid */
body.nb-dash-host .dashboard-widgets-grid { margin-bottom: 16px !important; }

/* ── Polish round 2 (2026-05-14) ── */

/* Premium-hero → KPI gap reduced */
body.nb-dash-host .premium-hero + .kpi-grid,
body.nb-dash-host .premium-hero + .td-kpi-row,
body.nb-dash-host section.premium-hero + section,
body.nb-dash-host .premium-hero + .row,
body.nb-dash-host .premium-hero + section { margin-top: 0 !important; }
body.nb-dash-host .kpi-grid, body.nb-dash-host .td-kpi-row { margin-top: 0 !important; }

/* Plan card (4th KPI) — add subtle CTA badge to match peers */
body.nb-dash-host .kpi-card.warn::after,
body.nb-dash-host .kpi-card[class*="plan"]::after {
  content: '';
  display: block;
  height: 40px;
  margin-top: 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(255,215,0,0));
  border: 1px dashed rgba(255,215,0,.15);
}

/* Unify all card border-radius */
body.nb-dash-host .nav-card,
body.nb-dash-host .quick-action-btn,
body.nb-dash-host .quick-action-card { border-radius: 12px !important; }

/* Quick action cards — match nav-card border for visual separation */
body.nb-dash-host .quick-action-btn,
body.nb-dash-host .quick-action-card,
body.nb-dash-host .action-card {
  background: var(--nb-bg-body, #0a0a0a) !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.08)) !important;
}
body.nb-dash-host .quick-action-btn:hover,
body.nb-dash-host .quick-action-card:hover {
  border-color: var(--nb-border-gold, rgba(255,215,0,.3)) !important;
  background: rgba(255,215,0,.04) !important;
}

/* Auto-fill nav-card grids so orphan 2-card row stretches */
body.nb-dash-host .row.g-3,
body.nb-dash-host .row.g-4 { --bs-gutter-x: 12px !important; --bs-gutter-y: 12px !important; }

/* Sidebar brand text — truncate with ellipsis, hover reveals via title attr */
body.nb-dash-host .sidebar-brand-text,
body.nb-dash-host .tenant-sidebar-brand-text {
  display: inline-block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* Card-header font alignment — keep Plus Jakarta Sans but tighter */
body.nb-dash-host .card-header,
body.nb-dash-host .card-header h5,
body.nb-dash-host .card-title { letter-spacing: -.005em !important; }

/* Progress bars (storage etc.) — visible track + clear bar */
body.nb-dash-host .progress,
body.nb-dash-host .progress-bar-wrapper {
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
body.nb-dash-host .progress-bar {
  background: linear-gradient(90deg, var(--nb-gold, #FFD700), #ffbf00) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Tighter section spacing — kill 100px+ dead zones */
body.nb-dash-host section + section,
body.nb-dash-host .card + .card { margin-top: 16px !important; }
body.nb-dash-host .mb-4 { margin-bottom: 16px !important; }
body.nb-dash-host .mb-5 { margin-bottom: 20px !important; }
body.nb-dash-host .my-4 { margin-top: 16px !important; margin-bottom: 16px !important; }

/* Onboarding modal — make it less aggressive on the dashboard */
body.nb-dash-host .modal-backdrop.show { opacity: .6 !important; }

/* Bootstrap text-muted in NB context — bump contrast */
body.nb-dash-host .text-muted,
body.nb-dash-host .card-footer.text-muted { color: var(--nb-text-muted, rgba(255,255,255,.55)) !important; }

/* Form inputs inside nb panels */
body.nb-dash-host input.form-control,
body.nb-dash-host select.form-select,
body.nb-dash-host textarea.form-control {
  background: var(--nb-bg-body, #0a0a0a) !important;
  border: 1px solid var(--nb-border-light, rgba(255,255,255,.1)) !important;
  color: var(--nb-text-main, #fff) !important;
  border-radius: 8px !important;
}
body.nb-dash-host input.form-control:focus,
body.nb-dash-host select.form-select:focus {
  border-color: var(--nb-gold, #FFD700) !important;
  box-shadow: 0 0 0 2px rgba(255,215,0,.15) !important;
}

/* Badge/chip components */
body.nb-dash-host .badge {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  font-weight: 500 !important;
}
body.nb-dash-host .badge.bg-success { background: rgba(34,197,94,.15) !important; color: #4ade80 !important; }
body.nb-dash-host .badge.bg-warning { background: rgba(255,215,0,.15) !important; color: var(--nb-gold) !important; }
body.nb-dash-host .badge.bg-danger  { background: rgba(239,68,68,.15) !important; color: #f87171 !important; }
body.nb-dash-host .badge.bg-info    { background: rgba(59,130,246,.15) !important; color: #60a5fa !important; }

/* Tooltips on truncated brand */
body.nb-dash-host .sidebar-brand[data-truncated]:hover::after {
  content: attr(data-truncated);
  position: absolute;
  left: 100%;
  margin-left: 8px;
  background: var(--nb-bg-surface);
  border: 1px solid var(--nb-border-light);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

/* Demo-readonly badge on body — keep visible but flat */
body.nb-dash-host.demo-readonly::before {
  content: 'DEMO READ-ONLY';
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 9999;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,215,0,.15);
  color: var(--nb-gold, #FFD700);
  border: 1px solid var(--nb-border-gold, rgba(255,215,0,.3));
  pointer-events: none;
}
/* Polish round 3 — Bootstrap component overrides 2026-05-14 */
body.nb-dash-host .list-group .list-group-item { background-color: var(--nb-bg-surface) !important; border: 1px solid var(--nb-border-light) !important; padding: 10px 14px !important; color: var(--nb-text-main) !important; }
body.nb-dash-host .list-group-item.active { background-color: rgba(255,215,0,.10) !important; color: var(--nb-gold) !important; border-color: rgba(255,215,0,.3) !important; }
body.nb-dash-host .dropdown-menu { background-color: var(--nb-bg-surface) !important; border: 1px solid var(--nb-border-light) !important; border-radius: 8px !important; padding: 4px !important; box-shadow: none !important; }
body.nb-dash-host .dropdown-item { font-size: 13px !important; padding: 6px 10px !important; color: var(--nb-text-main) !important; }
body.nb-dash-host .dropdown-item:hover, body.nb-dash-host .dropdown-item:focus { background-color: rgba(255,255,255,.04) !important; color: var(--nb-text-main) !important; }
body.nb-dash-host .alert { border-radius: 8px !important; border-width: 1px !important; padding: 10px 14px !important; font-size: 13px !important; }
body.nb-dash-host .alert-info { background-color: rgba(59,130,246,.12) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.3) !important; }
body.nb-dash-host .alert-success { background-color: rgba(34,197,94,.12) !important; color: #4ade80 !important; border-color: rgba(34,197,94,.3) !important; }
body.nb-dash-host .alert-warning { background-color: rgba(255,215,0,.12) !important; color: var(--nb-gold) !important; border-color: rgba(255,215,0,.3) !important; }
body.nb-dash-host .alert-danger { background-color: rgba(239,68,68,.12) !important; color: #f87171 !important; border-color: rgba(239,68,68,.3) !important; }
body.nb-dash-host .pagination { gap: 4px !important; }
body.nb-dash-host .page-link { background-color: var(--nb-bg-surface) !important; border: 1px solid var(--nb-border-light) !important; color: var(--nb-text-main) !important; border-radius: 6px !important; font-size: 13px !important; padding: 5px 10px !important; }
body.nb-dash-host .page-item.active .page-link { background-color: var(--nb-gold) !important; color: #000 !important; border-color: var(--nb-gold) !important; }
body.nb-dash-host .nav-tabs { border-bottom: 1px solid var(--nb-border-light) !important; }
body.nb-dash-host .nav-tabs .nav-link { color: var(--nb-text-muted) !important; border: none !important; padding: 8px 14px !important; font-size: 13px !important; }
body.nb-dash-host .nav-tabs .nav-link.active { color: var(--nb-text-main) !important; border-bottom: 2px solid var(--nb-gold) !important; background: transparent !important; }
body.nb-dash-host .nav-pills .nav-link { color: var(--nb-text-muted) !important; border-radius: 8px !important; }
body.nb-dash-host .nav-pills .nav-link.active { background-color: var(--nb-gold) !important; color: #000 !important; }
body.nb-dash-host .modal-content { background-color: var(--nb-bg-surface) !important; border: 1px solid var(--nb-border-light) !important; border-radius: 14px !important; }
body.nb-dash-host .modal-header { border-bottom: 1px solid var(--nb-border-light) !important; padding: 14px 18px !important; }
body.nb-dash-host .modal-footer { border-top: 1px solid var(--nb-border-light) !important; padding: 12px 18px !important; }
body.nb-dash-host .modal-title { font-size: 15px !important; font-weight: 600 !important; }
body.nb-dash-host .input-group-text { background-color: var(--nb-bg-body) !important; border: 1px solid var(--nb-border-light) !important; color: var(--nb-text-muted) !important; }
body.nb-dash-host .btn-group .btn { border: 1px solid var(--nb-border-light) !important; }
body.nb-dash-host table.dataTable thead th { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--nb-text-muted) !important; }
body.nb-dash-host .tooltip .tooltip-inner { background-color: var(--nb-bg-surface) !important; border: 1px solid var(--nb-border-light) !important; border-radius: 6px !important; color: var(--nb-text-main) !important; font-size: 12px !important; }
body.nb-dash-host .popover { background-color: var(--nb-bg-surface) !important; border: 1px solid var(--nb-border-light) !important; border-radius: 8px !important; }
body.nb-dash-host .popover-header { background-color: transparent !important; border-bottom: 1px solid var(--nb-border-light) !important; color: var(--nb-text-main) !important; }
body.nb-dash-host .form-check-input:checked { background-color: var(--nb-gold) !important; border-color: var(--nb-gold) !important; }
body.nb-dash-host .form-switch .form-check-input { border-color: var(--nb-border-light) !important; }
/* Polish round 4 — additional Bootstrap component overrides 2026-05-14 */

body.nb-dash-host .offcanvas {
  background-color: var(--nb-bg-surface) !important;
  border-color: var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
}

body.nb-dash-host .offcanvas-header {
  border-bottom: 1px solid var(--nb-border-light) !important;
  padding: 14px 18px !important;
}

body.nb-dash-host .offcanvas-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--nb-text-main) !important;
}

body.nb-dash-host .offcanvas-body {
  padding: 18px !important;
  color: var(--nb-text-main) !important;
}

body.nb-dash-host .toast {
  background-color: var(--nb-bg-surface) !important;
  border: 1px solid var(--nb-border-light) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.3) !important;
}

body.nb-dash-host .toast-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--nb-border-light) !important;
  color: var(--nb-text-main) !important;
  padding: 8px 12px !important;
}

body.nb-dash-host .toast-body {
  color: var(--nb-text-main) !important;
  padding: 12px !important;
  font-size: 13px !important;
}

body.nb-dash-host .accordion {
  background-color: transparent !important;
}

body.nb-dash-host .accordion-item {
  background-color: var(--nb-bg-surface) !important;
  border: 1px solid var(--nb-border-light) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

body.nb-dash-host .accordion-button {
  background-color: var(--nb-bg-surface) !important;
  color: var(--nb-text-main) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}

body.nb-dash-host .accordion-button:not(.collapsed) {
  background-color: rgba(255,215,0,.08) !important;
  color: var(--nb-gold) !important;
}

body.nb-dash-host .accordion-button::after {
  filter: invert(1) opacity(.6) !important;
}

body.nb-dash-host .accordion-body {
  background-color: var(--nb-bg-body) !important;
  color: var(--nb-text-main) !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
}

body.nb-dash-host .breadcrumb {
  font-size: 13px !important;
  padding: 6px 0 !important;
  margin-bottom: 12px !important;
  background-color: transparent !important;
}

body.nb-dash-host .breadcrumb-item a {
  color: var(--nb-text-muted) !important;
  text-decoration: none !important;
}

body.nb-dash-host .breadcrumb-item a:hover {
  color: var(--nb-gold) !important;
}

body.nb-dash-host .breadcrumb-item.active {
  color: var(--nb-text-main) !important;
}

body.nb-dash-host .breadcrumb-item + .breadcrumb-item::before {
  color: var(--nb-text-muted) !important;
}

body.nb-dash-host .spinner-border,
body.nb-dash-host .spinner-grow {
  color: var(--nb-gold) !important;
}

body.nb-dash-host .progress-bar.bg-success {
  background-color: #22c55e !important;
}

body.nb-dash-host .progress-bar.bg-warning {
  background-color: var(--nb-gold) !important;
}

body.nb-dash-host .progress-bar.bg-danger {
  background-color: #ef4444 !important;
}

body.nb-dash-host .progress-bar.bg-info {
  background-color: #3b82f6 !important;
}

body.nb-dash-host .card-group {
  gap: 12px !important;
}

body.nb-dash-host .text-success {
  color: #4ade80 !important;
}

body.nb-dash-host .text-warning {
  color: var(--nb-gold) !important;
}

body.nb-dash-host .text-danger {
  color: #f87171 !important;
}

body.nb-dash-host .text-primary {
  color: var(--nb-gold) !important;
}

body.nb-dash-host .text-info {
  color: #60a5fa !important;
}

body.nb-dash-host hr {
  border-color: var(--nb-border-light) !important;
  opacity: .5 !important;
}

body.nb-dash-host blockquote {
  border-left: 3px solid var(--nb-gold) !important;
  padding-left: 12px !important;
  color: var(--nb-text-muted) !important;
  font-size: 13px !important;
}
/* NB Light Theme companion to sidebar-compact.css — 2026-05-14 */

/* Sidebar (tenant + trainer) */
html[data-theme="light"] body.nb-dash-host .sidebar,
html[data-theme="light"] body.nb-dash-host .tenant-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .sidebar-header {
  border-bottom: 1px solid #e4e4e7 !important;
  background-color: #ffffff !important;
}

html[data-theme="light"] body.nb-dash-host .sidebar-brand,
html[data-theme="light"] body.nb-dash-host .tenant-sidebar-brand {
  color: #18181b !important;
}

/* polish-v2-admin.css forces .brand-text white in light mode (designed for
   a dark sidebar). Sidebar-compact paints the sidebar header white in
   light mode → white-on-white. Higher-specificity override restores dark
   readable text on the white header. */
html[data-theme="light"] body.nb-dash-host #tenantSidebar .brand-text,
html[data-theme="light"] body.nb-dash-host aside.sidebar .brand-text,
html[data-theme="light"] body.nb-dash-host #tenantSidebar .sidebar-brand,
html[data-theme="light"] body.nb-dash-host aside.sidebar .sidebar-brand {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host #tenantSidebar .brand-icon i,
html[data-theme="light"] body.nb-dash-host aside.sidebar .brand-icon i {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .nav-group-header {
  color: #71717a !important;
}

html[data-theme="light"] body.nb-dash-host .nav-link,
html[data-theme="light"] body.nb-dash-host .tenant-sidebar-item {
  color: #52525b !important;
}

html[data-theme="light"] body.nb-dash-host .nav-link:hover,
html[data-theme="light"] body.nb-dash-host .tenant-sidebar-item:hover {
  background-color: #f4f4f5 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .nav-link.active,
html[data-theme="light"] body.nb-dash-host li.active > .nav-link,
html[data-theme="light"] body.nb-dash-host .nav-item.active > .nav-link,
html[data-theme="light"] body.nb-dash-host .tenant-sidebar-item.active {
  background-color: #fef3c7 !important;
  color: #78350f !important;
  font-weight: 500 !important;
  box-shadow: inset 3px 0 0 #f59e0b !important;
}

html[data-theme="light"] body.nb-dash-host .sidebar-search input {
  background-color: #f9fafb !important;
  border: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .nav-link .badge,
html[data-theme="light"] body.nb-dash-host .nav-link .nav-badge {
  background-color: #fef3c7 !important;
  color: #78350f !important;
}

/* KPI cards + panels */
html[data-theme="light"] body.nb-dash-host .kpi-card,
html[data-theme="light"] body.nb-dash-host .td-kpi,
html[data-theme="light"] body.nb-dash-host .premium-stat,
html[data-theme="light"] body.nb-dash-host .panel,
html[data-theme="light"] body.nb-dash-host .card {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .kpi-card__label {
  color: #71717a !important;
}

html[data-theme="light"] body.nb-dash-host .kpi-card__value {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .card-header {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .card-footer {
  background-color: transparent !important;
  border-top: 1px solid #e4e4e7 !important;
  color: #52525b !important;
}

/* Bootstrap components for light */
html[data-theme="light"] body.nb-dash-host .list-group-item {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .list-group-item.active {
  background-color: #fef3c7 !important;
  color: #78350f !important;
  border-color: #fbbf24 !important;
}

html[data-theme="light"] body.nb-dash-host .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .dropdown-item {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .dropdown-item:hover {
  background-color: #f4f4f5 !important;
}

html[data-theme="light"] body.nb-dash-host .modal-content {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .modal-header {
  border-bottom: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .modal-footer {
  border-top: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .form-control,
html[data-theme="light"] body.nb-dash-host .form-select,
html[data-theme="light"] body.nb-dash-host input.form-control,
html[data-theme="light"] body.nb-dash-host select.form-select,
html[data-theme="light"] body.nb-dash-host textarea.form-control {
  background-color: #ffffff !important;
  border: 1px solid #d4d4d8 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .form-control:focus,
html[data-theme="light"] body.nb-dash-host .form-select:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.2) !important;
}

html[data-theme="light"] body.nb-dash-host .form-control::placeholder {
  color: #a1a1aa !important;
}

html[data-theme="light"] body.nb-dash-host .input-group-text {
  background-color: #f4f4f5 !important;
  border: 1px solid #d4d4d8 !important;
  color: #52525b !important;
}

html[data-theme="light"] body.nb-dash-host .page-link {
  background-color: #ffffff !important;
  border: 1px solid #d4d4d8 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .page-item.active .page-link {
  background-color: #f59e0b !important;
  color: #ffffff !important;
  border-color: #f59e0b !important;
}

html[data-theme="light"] body.nb-dash-host .table {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .table th {
  color: #71717a !important;
  border-bottom: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .table td {
  border-bottom: 1px solid #f4f4f5 !important;
}

html[data-theme="light"] body.nb-dash-host hr {
  border-color: #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .text-muted {
  color: #71717a !important;
}

html[data-theme="light"] body.nb-dash-host .btn-outline-primary,
html[data-theme="light"] body.nb-dash-host .btn-outline-secondary,
html[data-theme="light"] body.nb-dash-host .btn-outline-success {
  background-color: transparent !important;
  border: 1px solid #d4d4d8 !important;
  color: #18181b !important;
}

/* Quick actions / nav-cards */
html[data-theme="light"] body.nb-dash-host .nav-card,
html[data-theme="light"] body.nb-dash-host .quick-action-btn,
html[data-theme="light"] body.nb-dash-host .quick-action-card {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .nav-card:hover {
  border-color: #f59e0b !important;
  background-color: #fef3c7 !important;
}

html[data-theme="light"] body.nb-dash-host .nav-card-icon {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
}

html[data-theme="light"] body.nb-dash-host .nav-card-title {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .nav-card-description {
  color: #71717a !important;
}

/* Premium hero on light */
html[data-theme="light"] body.nb-dash-host .premium-hero {
  border-bottom-color: #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .premium-hero__title {
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .premium-hero__title span {
  color: #b45309 !important;
}

html[data-theme="light"] body.nb-dash-host .premium-hero__subtitle {
  color: #52525b !important;
}

/* Polish4 components in light */
html[data-theme="light"] body.nb-dash-host .offcanvas {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .toast {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

html[data-theme="light"] body.nb-dash-host .accordion-item {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
}

html[data-theme="light"] body.nb-dash-host .accordion-button {
  background-color: #ffffff !important;
  color: #18181b !important;
}

html[data-theme="light"] body.nb-dash-host .accordion-button:not(.collapsed) {
  background-color: #fef3c7 !important;
  color: #78350f !important;
}

html[data-theme="light"] body.nb-dash-host .accordion-button::after {
  filter: none !important;
}

html[data-theme="light"] body.nb-dash-host .accordion-body {
  background-color: #ffffff !important;
  color: #18181b !important;
}

/* Sparklines / progress */
html[data-theme="light"] body.nb-dash-host .pbar {
  background-color: #f4f4f5 !important;
}

html[data-theme="light"] body.nb-dash-host .progress {
  background-color: #f4f4f5 !important;
}

html[data-theme="light"] body.nb-dash-host .progress-bar {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}

/* ============================================================
   2026-05-17 — Light theme contrast pass: modals, forms, alerts,
   text utility classes, badges. Applies to all /tenant/* and
   /trainer/* desktop pages (any context with data-theme="light").
   Covers Bootstrap modals + ad-hoc dialogs that previously rendered
   white-on-white in light mode.
   ============================================================ */

/* ---- Bootstrap modals ---- */
html[data-theme="light"] .modal-content,
html.theme-light .modal-content {
  background: #ffffff !important;
  color: #18181b !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
}
html[data-theme="light"] .modal-header,
html.theme-light .modal-header {
  background: #f9fafb !important;
  border-bottom: 1px solid #e4e4e7 !important;
  color: #18181b !important;
}
html[data-theme="light"] .modal-title,
html.theme-light .modal-title,
html[data-theme="light"] .modal-header h1,
html[data-theme="light"] .modal-header h2,
html[data-theme="light"] .modal-header h3,
html[data-theme="light"] .modal-header h4,
html[data-theme="light"] .modal-header h5,
html[data-theme="light"] .modal-header h6,
html.theme-light .modal-header h1,
html.theme-light .modal-header h2,
html.theme-light .modal-header h3,
html.theme-light .modal-header h4,
html.theme-light .modal-header h5,
html.theme-light .modal-header h6 {
  color: #18181b !important;
}
html[data-theme="light"] .modal-body,
html.theme-light .modal-body,
html[data-theme="light"] .modal-body p,
html.theme-light .modal-body p,
html[data-theme="light"] .modal-body label,
html.theme-light .modal-body label,
html[data-theme="light"] .modal-body strong,
html.theme-light .modal-body strong,
html[data-theme="light"] .modal-body span:not(.badge):not(.btn),
html.theme-light .modal-body span:not(.badge):not(.btn) {
  color: #18181b !important;
}
html[data-theme="light"] .modal-footer,
html.theme-light .modal-footer {
  background: #f9fafb !important;
  border-top: 1px solid #e4e4e7 !important;
}
html[data-theme="light"] .modal .btn-close,
html.theme-light .modal .btn-close {
  filter: none !important;
  opacity: 0.7 !important;
}
html[data-theme="light"] .modal .btn-close:hover,
html.theme-light .modal .btn-close:hover { opacity: 1 !important; }

/* Modal sections / cards inside modals */
html[data-theme="light"] .modal-body .alert,
html.theme-light .modal-body .alert,
html[data-theme="light"] .modal-body .card,
html.theme-light .modal-body .card,
html[data-theme="light"] .modal-body section,
html.theme-light .modal-body section {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
  color: #18181b !important;
}

/* Bootstrap form-controls inside modals (and globally on light pages) */
html[data-theme="light"] .form-control,
html.theme-light .form-control,
html[data-theme="light"] .form-select,
html.theme-light .form-select,
html[data-theme="light"] textarea.form-control,
html.theme-light textarea.form-control,
html[data-theme="light"] input.form-control,
html.theme-light input.form-control {
  background: #ffffff !important;
  border: 1px solid #d4d4d8 !important;
  color: #18181b !important;
}
html[data-theme="light"] .form-control::placeholder,
html.theme-light .form-control::placeholder,
html[data-theme="light"] textarea::placeholder,
html.theme-light textarea::placeholder {
  color: #9ca3af !important;
}
html[data-theme="light"] .form-control:focus,
html.theme-light .form-control:focus,
html[data-theme="light"] .form-select:focus,
html.theme-light .form-select:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18) !important;
}
html[data-theme="light"] .form-label,
html.theme-light .form-label,
html[data-theme="light"] label,
html.theme-light label {
  color: #18181b !important;
}

/* Alert variants */
html[data-theme="light"] .alert-warning,
html.theme-light .alert-warning {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #78350f !important;
}
html[data-theme="light"] .alert-warning *,
html.theme-light .alert-warning * { color: #78350f !important; }
html[data-theme="light"] .alert-info,
html.theme-light .alert-info {
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
  color: #1e3a8a !important;
}
html[data-theme="light"] .alert-info *,
html.theme-light .alert-info * { color: #1e3a8a !important; }
html[data-theme="light"] .alert-success,
html.theme-light .alert-success {
  background: #d1fae5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}
html[data-theme="light"] .alert-success *,
html.theme-light .alert-success * { color: #065f46 !important; }
html[data-theme="light"] .alert-danger,
html.theme-light .alert-danger {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
html[data-theme="light"] .alert-danger *,
html.theme-light .alert-danger * { color: #991b1b !important; }

/* Subtle Bootstrap bg-* classes */
html[data-theme="light"] .bg-warning-subtle,
html.theme-light .bg-warning-subtle { background: #fef3c7 !important; color: #78350f !important; }
html[data-theme="light"] .bg-info-subtle,
html.theme-light .bg-info-subtle { background: #dbeafe !important; color: #1e3a8a !important; }
html[data-theme="light"] .bg-success-subtle,
html.theme-light .bg-success-subtle { background: #d1fae5 !important; color: #065f46 !important; }
html[data-theme="light"] .bg-danger-subtle,
html.theme-light .bg-danger-subtle { background: #fee2e2 !important; color: #991b1b !important; }

/* Utility text classes used heavily in tenant + trainer templates */
html[data-theme="light"] .nb-text,
html.theme-light .nb-text { color: #18181b !important; }
html[data-theme="light"] .nb-text-muted,
html.theme-light .nb-text-muted { color: #52525b !important; }
html[data-theme="light"] .nb-text-secondary,
html.theme-light .nb-text-secondary { color: #71717a !important; }
html[data-theme="light"] .nb-card-bg,
html.theme-light .nb-card-bg { background: #ffffff !important; color: #18181b !important; border-color: #e4e4e7 !important; }
html[data-theme="light"] .text-muted,
html.theme-light .text-muted { color: #52525b !important; }
html[data-theme="light"] .text-secondary,
html.theme-light .text-secondary { color: #71717a !important; }

/* High-contrast modal preset (.high-readability and .nb-modal--high-contrast) */
html[data-theme="light"] .high-readability,
html.theme-light .high-readability,
html[data-theme="light"] .nb-modal--high-contrast .modal-content,
html.theme-light .nb-modal--high-contrast .modal-content {
  background: #ffffff !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}

/* Confirmation / soft-info inline panels common across trainer/tenant */
html[data-theme="light"] .info-card,
html.theme-light .info-card,
html[data-theme="light"] .panel,
html.theme-light .panel {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
  color: #18181b !important;
}

/* Buttons with low-contrast outline-light variant */
html[data-theme="light"] .btn-outline-light,
html.theme-light .btn-outline-light {
  color: #18181b !important;
  border-color: #d4d4d8 !important;
  background: #ffffff !important;
}
html[data-theme="light"] .btn-outline-light:hover,
html.theme-light .btn-outline-light:hover {
  background: #f4f4f5 !important;
  color: #18181b !important;
}

/* List groups inside cards */
html[data-theme="light"] .list-group-item,
html.theme-light .list-group-item {
  background: transparent !important;
  color: #18181b !important;
  border-color: #e4e4e7 !important;
}

/* ============================================================
   2026-05-17 b — Hammer specificity for modals with hardcoded
   Bootstrap color classes (.bg-primary / .text-warning) +
   inline-style yellow alert blocks. User reported white-on-white
   "Conversie Disponibilă" heading + invisible modal title bar.
   ============================================================ */

/* Modal header with .bg-primary forced blue bg + white text — keep
   blue bg but ensure title text stays white-on-blue, NOT white-on-
   white. Override the .light .modal-header { bg:#f9fafb } only when
   .bg-primary is present so they don't conflict. */
html[data-theme="light"] .modal-header.bg-primary,
html.theme-light .modal-header.bg-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border-bottom-color: #2563eb !important;
}
html[data-theme="light"] .modal-header.bg-primary .modal-title,
html.theme-light .modal-header.bg-primary .modal-title,
html[data-theme="light"] .modal-header.bg-primary h1,
html[data-theme="light"] .modal-header.bg-primary h2,
html[data-theme="light"] .modal-header.bg-primary h3,
html[data-theme="light"] .modal-header.bg-primary h4,
html[data-theme="light"] .modal-header.bg-primary h5,
html[data-theme="light"] .modal-header.bg-primary h6,
html[data-theme="light"] .modal-header.bg-primary .nb-text,
html.theme-light .modal-header.bg-primary .modal-title,
html.theme-light .modal-header.bg-primary h1,
html.theme-light .modal-header.bg-primary h2,
html.theme-light .modal-header.bg-primary h3,
html.theme-light .modal-header.bg-primary h4,
html.theme-light .modal-header.bg-primary h5,
html.theme-light .modal-header.bg-primary h6,
html.theme-light .modal-header.bg-primary .nb-text {
  color: #ffffff !important;
}
html[data-theme="light"] .modal-header.bg-primary .btn-close,
html.theme-light .modal-header.bg-primary .btn-close {
  filter: invert(1) grayscale(100%) brightness(2) !important;
}

/* Bootstrap utility .text-* color classes — keep their semantic color
   readable on white backgrounds (default light-page surfaces) */
html[data-theme="light"] .text-warning,
html.theme-light .text-warning { color: #b45309 !important; }
html[data-theme="light"] .text-info,
html.theme-light .text-info { color: #1d4ed8 !important; }
html[data-theme="light"] .text-success,
html.theme-light .text-success { color: #047857 !important; }
html[data-theme="light"] .text-danger,
html.theme-light .text-danger { color: #b91c1c !important; }
html[data-theme="light"] .text-primary,
html.theme-light .text-primary { color: #1d4ed8 !important; }

/* `.nb-text` outside the dark modal header should be dark in light mode.
   Earlier rule set #18181b — keep, but ensure it wins over modal-body
   inherited white. */
html[data-theme="light"] .modal-body .nb-text,
html.theme-light .modal-body .nb-text,
html[data-theme="light"] .modal-body strong,
html.theme-light .modal-body strong { color: #18181b !important; }

/* Inline-styled yellow alert blocks: <div style="background: rgba(255,193,7,0.1)">
   Used in calendar-week.ejs "Conversie Disponibilă". Body strong stays
   readable but the heading was Bootstrap .text-warning yellow on yellow.
   Force the heading to use the deeper amber when on a soft-yellow bg. */
html[data-theme="light"] [style*="rgba(255, 193, 7"] .text-warning,
html.theme-light [style*="rgba(255, 193, 7"] .text-warning,
html[data-theme="light"] [style*="rgba(255,193,7"] .text-warning,
html.theme-light [style*="rgba(255,193,7"] .text-warning,
html[data-theme="light"] .border-warning .text-warning,
html.theme-light .border-warning .text-warning { color: #92400e !important; }

/* Generic <strong> + <p> + heading inside modal-body without explicit
   color class still inherits parent (#18181b set above). Also catch
   subtitle blocks under <h5>/<h6> that aren't .modal-title. */
html[data-theme="light"] .modal-body h1,
html[data-theme="light"] .modal-body h2,
html[data-theme="light"] .modal-body h3,
html[data-theme="light"] .modal-body h4,
html[data-theme="light"] .modal-body h5,
html[data-theme="light"] .modal-body h6,
html.theme-light .modal-body h1,
html.theme-light .modal-body h2,
html.theme-light .modal-body h3,
html.theme-light .modal-body h4,
html.theme-light .modal-body h5,
html.theme-light .modal-body h6 { color: #18181b !important; }

/* Specific class names used in calendar-week.ejs participants modal +
   reschedule modal headers that wrap titles in a .nb-text span. */
html[data-theme="light"] .modal-header .high-readability,
html.theme-light .modal-header .high-readability,
html[data-theme="light"] .modal-title.high-readability,
html.theme-light .modal-title.high-readability { color: inherit !important; }
