/* ============================================================
   theme-unify.css — ZyroAI LMS unified theme (project-wide)
   Applied to ALL tenants automatically. Tenant name + version
   pulled from backend, NOT hardcoded. Modern fintech glossy
   with deep purple primary + magenta accent.
   ============================================================ */

:root {
  /* Brand — Zyro AI purple/magenta complementary palette */
  --bank-navy:         #5B21B6;     /* deep purple, matches logo */
  --bank-navy-dark:    #4C1D95;
  --bank-navy-light:   #7C3AED;
  --bank-navy-50:      #F5F3FF;
  --bank-navy-100:     #EDE9FE;

  --bank-gold:         #D11C7F;     /* magenta from logo (was gold) */
  --bank-gold-dark:    #A8155F;
  --bank-gold-light:   #FCE7F3;

  --bank-saffron:      #F59E0B;     /* warm amber accent */

  /* Override sap-fiori tokens to purple palette */
  --primary:           #5B21B6;
  --primary-dark:      #4C1D95;
  --primary-light:     #EDE9FE;
  --primary-50:        #F5F3FF;
  --primary-100:       #EDE9FE;
  --primary-500:       #5B21B6;
  --primary-600:       #4C1D95;
  --primary-700:       #3B1980;

  --hero-from:         #5B21B6;
  --hero-to:           #4C1D95;

  --topbar-bg:         #FFFFFF;
  --topbar-fg:         #5B21B6;

  --surface:           #FFFFFF;
  --surface-card:      #FFFFFF;
  --surface-alt:       #FAF9FC;
  --background:        #F7F6FA;

  --text-primary:      #1F1B2E;
  --text-secondary:    #4A4459;
  --text-tertiary:     #75708A;
  --text-on-dark:      #FFFFFF;
  --text-link:         #5B21B6;

  --border-color:      #E5E1ED;
  --border-strong:     #C7C0D8;
  --border-subtle:     #EFEBF5;

  --success:           #047857;  --success-light:     #D1FAE5;
  --warning:           #B45309;  --warning-light:     #FEF3C7;
  --danger:            #B91C1C;  --danger-light:      #FEE2E2;
  --info:              #1D4ED8;  --info-light:        #DBEAFE;

  --shadow-xs: 0 1px 2px rgba(91,33,182,.04);
  --shadow-sm: 0 1px 3px rgba(91,33,182,.06);
  --shadow-md: 0 4px 12px rgba(91,33,182,.08);
}

/* ===== App shell — clean white/light gray + banking typography ===== */
html, body, .app-root, [class*="app-shell"], [class*="layout"] {
  background: #F7F6FA !important;
  color: #2D2A3A;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Banking-pro typography globals */
html body, html body p, html body div, html body span:not([class*="badge"]):not([class*="chip"]):not([class*="pill"]):not(.material-icons):not([class*="material-icon"]) {
  letter-spacing: -.005em;
}

/* Material Icons — force ligature rendering, never show raw text */
.material-icons, [class*="material-icon"], i.material-icons,
span.material-icons, .mat-icon, [class*="mat-icon"] {
  font-family: "Material Icons", "Material Icons Outlined", "Material Icons Round", sans-serif !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
}
/* Headings — medium weight, not extra-bold */
html body h1:not([class*="banner"]):not([class*="hero"]):not([class*="header"]):not([class*="card"] *) {
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  letter-spacing: -.02em !important;
  color: #1F1B2E !important;
}
html body h2:not([class*="banner"]):not([class*="hero"]) {
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: -.015em !important;
  color: #1F1B2E !important;
}
html body h3:not([class*="banner"]):not([class*="hero"]) {
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
  color: #1F1B2E !important;
}
html body h4 { font-weight: 600 !important; font-size: 15px !important; color: #2D2A3A !important; }
html body h5 { font-weight: 600 !important; font-size: 14px !important; color: #2D2A3A !important; }

/* Form section header — banking pro with subtle purple accent strip */
[class*="form-section-header"], .section-header:not([class*="banner"]):not([class*="hero"]):not([class*="card-header"]),
.form-section-title, .section-title-block,
[class*="form-section"]:not(input):not(button):not([class*="form-section-body"]):not([class*="form-section-content"]) > h1:first-child,
[class*="form-section"]:not(input):not(button):not([class*="form-section-body"]):not([class*="form-section-content"]) > h2:first-child,
[class*="form-section"]:not(input):not(button):not([class*="form-section-body"]):not([class*="form-section-content"]) > h3:first-child {
  position: relative;
  padding-left: 16px !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  border-image: linear-gradient(180deg, #5B21B6 0%, #D11C7F 100%) 1 !important;
  margin-bottom: 4px !important;
}

/* Section title — clean, weighted */
[class*="section-title"], [class*="card-title"], [class*="panel-title"],
[class*="form-section-title"], [class*="form-title"]:not(.login-card *):not(.forgot-card *):not(.auth-card *) {
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -.01em !important;
  color: #1F1B2E !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
/* Add small dot indicator before section title */
[class*="form-section-title"]::before, .section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #5B21B6 0%, #D11C7F 100%);
  border-radius: 2px;
  margin-right: 4px;
  flex-shrink: 0;
}
/* Section description / subtitle */
[class*="section-desc"], [class*="section-subtitle"], [class*="form-section-desc"],
[class*="form-section-subtitle"], [class*="card-subtitle"]:not([class*="kpi"]) {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #75708A !important;
  line-height: 1.5 !important;
  margin: 4px 0 16px 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Form section container — soft frame with subtle purple-tint left edge */
[class*="form-section"]:not(input):not(button):not(h1):not(h2):not(h3):not([class*="title"]):not([class*="desc"]):not([class*="header"]):not([class*="body"]):not([class*="content"]),
.step-card, .form-card, .section-card:not([class*="kpi"]) {
  background: #FFFFFF !important;
  border: 1px solid #EFEBF5 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 6px rgba(91,33,182,.05), 0 1px 3px rgba(91,33,182,.04) !important;
  overflow: hidden;
}

/* Step-card header — gradient strip top + clean title */
.step-card-header, .form-card-header, .section-card-header {
  background: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
  border-bottom: 1px solid #EFEBF5 !important;
  padding: 16px 20px !important;
  position: relative;
}
.step-card-header::before, .form-card-header::before, .section-card-header::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #5B21B6 0%, #D11C7F 100%);
}
.step-card-header h1, .step-card-header h2, .step-card-header h3,
.form-card-header h1, .form-card-header h2, .form-card-header h3,
.section-card-header h1, .section-card-header h2, .section-card-header h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1F1B2E !important;
  margin: 0 0 4px !important;
  letter-spacing: -.01em !important;
  line-height: 1.4 !important;
}
.step-card-header p, .form-card-header p, .section-card-header p,
.step-card-header [class*="desc"], .step-card-header [class*="subtitle"] {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #6B6580 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Step-card body — padded content area */
.step-card-body, .form-card-body, .section-card-body,
.step-card-content, .form-card-content {
  padding: 20px !important;
  background: #FFFFFF !important;
}
/* Selection / highlight — soft purple instead of harsh */
::selection {
  background: rgba(91,33,182,.15) !important;
  color: #1F1B2E !important;
}
::-moz-selection {
  background: rgba(91,33,182,.15) !important;
  color: #1F1B2E !important;
}
/* Section descriptions / subtitles — lighter */
[class*="section-desc"], [class*="section-subtitle"], [class*="section-helper"],
[class*="card-subtitle"], [class*="form-section-desc"], [class*="page-subtitle"] {
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #6B6580 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  margin: 0 0 16px !important;
}

/* Page descriptions — soft grey */
.page-description, [class*="page-desc"], [class*="welcome-text"] {
  color: #6B6580 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* Strong text — semibold not bold */
html body strong, html body b {
  font-weight: 600 !important;
  color: #1F1B2E !important;
}

/* Labels uniform across project */
html body label:not(aside *):not(.sidebar *):not([class*="topbar"] *):not([class*="appbar"] *) {
  font-weight: 500 !important;
  font-size: 13px !important;
  color: #4A4459 !important;
  letter-spacing: 0 !important;
  margin-bottom: 6px !important;
}

/* Body paragraphs */
html body p:not(aside *):not(.sidebar *):not([class*="banner"] *):not([class*="hero"] *) {
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #2D2A3A !important;
  line-height: 1.5 !important;
}

/* Small / helper text */
html body small, html body [class*="helper"], html body [class*="hint"], html body [class*="caption"] {
  font-weight: 400 !important;
  font-size: 12px !important;
  color: #75708A !important;
}

/* ===== TOP APP BAR — clean white, subtle border ===== */
.app-bar, header.app-bar, header[class*="top"],
[class*="topbar"], [class*="appbar"] {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
}
.app-bar *, header.app-bar *,
[class*="topbar"] *, [class*="appbar"] * {
  color: var(--text-primary) !important;
}

/* ===== SEARCH BAR — clean banking input with visible icon ===== */
.app-bar input[type="search"], .app-bar input[type="text"],
header input[type="search"], header input[type="text"],
[class*="topbar"] input[type="search"], [class*="topbar"] input[type="text"],
[class*="appbar"] input[type="search"], [class*="appbar"] input[type="text"],
[class*="search-bar"] input, [class*="search-input"], input[placeholder*="Search"], input[placeholder*="search"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: var(--text-primary) !important;
  border: 1px solid #E5E1ED !important;
  border-radius: 8px !important;
  padding: 8px 14px 8px 38px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  height: 38px !important;
  width: 100% !important;
  max-width: 480px !important;
  transition: border-color .15s ease;
  box-shadow: none !important;
  outline: none !important;
}
/* Search placeholder — readable hint */
.app-bar input::placeholder, header input::placeholder,
[class*="topbar"] input::placeholder, [class*="appbar"] input::placeholder,
input[placeholder*="Search"]::placeholder {
  color: #75708A !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.app-bar input[type="search"]:focus, .app-bar input[type="text"]:focus,
header input[type="search"]:focus, header input[type="text"]:focus,
[class*="topbar"] input:focus, [class*="appbar"] input:focus,
[class*="search"] input:focus, input[placeholder*="Search"]:focus {
  background: var(--bank-navy-50) !important;
  border: 1px solid var(--bank-navy) !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Search container — no floating card */
[class*="search-bar"], [class*="search-container"], [class*="search-wrapper"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
.app-bar input::placeholder, header input::placeholder,
[class*="topbar"] input::placeholder, [class*="appbar"] input::placeholder,
[class*="search"] input::placeholder, input[placeholder*="Search"]::placeholder {
  color: var(--text-tertiary) !important;
  font-weight: 500;
}

/* Search container — wrap nicely */
[class*="search-container"], [class*="search-wrapper"], [class*="search-box"] {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bank-navy-50) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
}
[class*="search-container"]:focus-within, [class*="search-wrapper"]:focus-within {
  background: #FFFFFF !important;
  border-color: var(--bank-navy) !important;
  box-shadow: 0 4px 12px rgba(91,33,182,.10);
}

/* Search icon inside */
[class*="search"] .material-icons, [class*="search"] svg {
  color: var(--text-tertiary) !important;
  position: relative;
}

/* Ctrl+K hint chip — badge style */
[class*="kbd"], kbd, [class*="shortcut"] {
  background: #FFFFFF !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: "SF Mono", Menlo, monospace !important;
  box-shadow: 0 1px 0 var(--border-color) !important;
}

/* ===== SIDEBAR — glossy white, sticky 100vh, internal scroll ===== */
/* Match ONLY the sidebar root, NOT child sidebar-* classes */
aside,
.sidebar,
nav.sidebar,
[class~="sidebar"],
nav[class~="sidebar"],
.side-nav,
nav.side-nav {
  background: #FFFFFF !important;
  background-image:
    linear-gradient(180deg, rgba(245,243,255,1) 0%, rgba(255,255,255,1) 30%, rgba(252,231,243,.4) 100%) !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: 4px 0 24px rgba(91,33,182,.06), 1px 0 0 rgba(91,33,182,.04) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 260px;
  transition: width .25s ease;
}
/* Custom scrollbar */
aside::-webkit-scrollbar, .sidebar::-webkit-scrollbar {
  width: 6px;
}
aside::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
  background: var(--bank-navy-100);
  border-radius: 3px;
}
aside::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--bank-navy-light);
}

/* === COLLAPSED STATE — narrow rail showing only icons === */
aside.collapsed, .sidebar.collapsed,
aside[class*="collapsed"], .sidebar[class*="collapsed"],
aside[data-collapsed="true"], .sidebar[data-collapsed="true"],
aside.sidebar-collapsed, .sidebar.sidebar-collapsed,
aside.is-collapsed, .sidebar.is-collapsed {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}
aside.collapsed h1, aside.collapsed .logo, aside.collapsed [class*="brand"],
.sidebar.collapsed h1, .sidebar.collapsed .logo, .sidebar.collapsed [class*="brand"],
aside[class*="collapsed"] h1, aside[class*="collapsed"] .logo, aside[class*="collapsed"] [class*="brand"],
.sidebar[class*="collapsed"] h1, .sidebar[class*="collapsed"] .logo, .sidebar[class*="collapsed"] [class*="brand"] {
  background-position: center center !important;
  background-size: 36px 36px !important;
  background-image: url("/zyro-ai-logo.jpg"), linear-gradient(180deg, #FFFFFF 0%, #FAF9FC 100%) !important;
  padding: 22px 0 !important;
}
/* Hide nav labels + sections in collapsed */
aside.collapsed small, aside.collapsed [class*="section"], aside.collapsed .nav-section,
aside[class*="collapsed"] small, aside[class*="collapsed"] [class*="section"],
.sidebar.collapsed small, .sidebar.collapsed [class*="section"],
.sidebar[class*="collapsed"] small, .sidebar[class*="collapsed"] [class*="section"] {
  display: none !important;
}
aside.collapsed a, aside.collapsed .nav-item,
aside[class*="collapsed"] a, aside[class*="collapsed"] .nav-item,
.sidebar.collapsed a, .sidebar.collapsed .nav-item,
.sidebar[class*="collapsed"] a, .sidebar[class*="collapsed"] .nav-item {
  justify-content: center !important;
  padding: 12px 0 !important;
  margin: 4px 8px !important;
  gap: 0 !important;
}
aside.collapsed a span:not(.material-icons), aside.collapsed .nav-item span:not(.material-icons),
aside[class*="collapsed"] a span:not(.material-icons), aside[class*="collapsed"] .nav-item span:not(.material-icons),
.sidebar.collapsed a span:not(.material-icons), .sidebar.collapsed .nav-item span:not(.material-icons),
.sidebar[class*="collapsed"] a span:not(.material-icons), .sidebar[class*="collapsed"] .nav-item span:not(.material-icons) {
  display: none !important;
}
/* Footer hidden in collapsed */
aside.collapsed [class*="version"], aside.collapsed [class*="footer"],
aside[class*="collapsed"] [class*="version"], aside[class*="collapsed"] [class*="footer"],
.sidebar.collapsed [class*="version"], .sidebar.collapsed [class*="footer"],
.sidebar[class*="collapsed"] [class*="version"], .sidebar[class*="collapsed"] [class*="footer"] {
  display: none !important;
}

/* === Collapse toggle button — styled + always clickable === */
button.collapse-btn, button[class*="collapse-btn"],
button[aria-label*="ollapse"], button[aria-label*="ollapse sidebar"] {
  background: #FFFFFF !important;
  color: var(--bank-navy) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(91,33,182,.06);
}
button.collapse-btn:hover, button[class*="collapse-btn"]:hover,
button[aria-label*="ollapse"]:hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy-dark) !important;
  border-color: var(--bank-navy) !important;
}

aside .sidebar-nav,
.sidebar .sidebar-nav,
nav.sidebar-nav {
  background: transparent !important;
}

aside *,
.sidebar *,
[class*="sidebar"] *,
nav[class*="side"] *,
.side-nav * {
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

/* Brand / logo strip — real Zyro AI logo, glossy white */
aside h1, aside .logo, aside [class*="brand"],
.sidebar h1, .sidebar .logo, .sidebar [class*="brand"] {
  background: #FFFFFF !important;
  background-image:
    url("/zyro-ai-logo.jpg"),
    linear-gradient(180deg, #FFFFFF 0%, #FAF9FC 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 16px center, 0 0 !important;
  background-size: auto 36px, 100% 100% !important;
  color: transparent !important;
  font-size: 0 !important;
  padding: 22px 22px !important;
  height: 68px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(91,33,182,.03);
  text-shadow: none !important;
  overflow: hidden;
}
aside h1 *, aside .logo *, aside [class*="brand"] *,
.sidebar h1 *, .sidebar .logo *, .sidebar [class*="brand"] * {
  color: transparent !important;
  font-size: 0 !important;
  visibility: hidden !important;
}

/* Section labels (MAIN, LOAN LIFECYCLE) */
aside small, .sidebar small,
aside [class*="section"], .sidebar [class*="section"],
aside .nav-section, .sidebar .nav-section {
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 20px 22px 8px !important;
  display: block;
}

/* Nav links — glossy hover */
aside a, aside .nav-item, aside [role="link"],
.sidebar a, .sidebar .nav-item, .sidebar [role="link"] {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 16px !important;
  margin: 2px 10px !important;
  color: var(--text-secondary) !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px !important;
  border-left: none !important;
  transition: all .15s ease;
  background: transparent !important;
}

aside a:hover, aside .nav-item:hover,
.sidebar a:hover, .sidebar .nav-item:hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy) !important;
  transform: none !important;
}
aside a:hover *, aside .nav-item:hover *,
.sidebar a:hover *, .sidebar .nav-item:hover * {
  color: var(--bank-navy) !important;
}

/* Active item — glossy purple gradient pill */
aside a.active, aside [aria-current="page"],
aside .nav-active, aside [class*="active"]:not(button),
.sidebar a.active, .sidebar [aria-current="page"],
.sidebar .active, .sidebar [class*="active"]:not(button) {
  background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #A855F7 100%) !important;
  background-image: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #A855F7 100%) !important;
  color: #FFFFFF !important;
  border-left: none !important;
  font-weight: 700 !important;
  box-shadow:
    0 4px 12px rgba(91,33,182,.32),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.06) !important;
  transform: none !important;
}
aside a.active *, aside [aria-current="page"] *,
.sidebar a.active *, .sidebar [aria-current="page"] *,
aside [class*="active"]:not(button) *, .sidebar [class*="active"]:not(button) * {
  color: #FFFFFF !important;
}

/* Icons */
aside .material-icons, .sidebar .material-icons,
aside svg, .sidebar svg {
  color: inherit !important;
  opacity: .85;
  filter: none !important;
}
aside a.active .material-icons, aside [aria-current="page"] .material-icons,
aside a.active svg, aside [aria-current="page"] svg,
.sidebar a.active .material-icons, .sidebar [aria-current="page"] .material-icons {
  color: #FFFFFF !important;
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* Collapse / footer */
aside button[class*="collapse"], aside [class*="toggle"],
.sidebar button[class*="collapse"], .sidebar [class*="toggle"] {
  color: var(--text-secondary) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(91,33,182,.06);
}
aside [class*="version"], aside [class*="footer"],
.sidebar [class*="version"], .sidebar [class*="footer"] {
  color: var(--text-tertiary) !important;
  font-size: 11px;
  padding: 12px 22px;
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
}

/* ===== HERO BANNERS — glossy purple→magenta gradient ===== */
.case-banner, .case-hero, .uw-hero,
.detail-header, .application-header, .loan-header, .case-header,
.dark-hero, .dark-banner,
[class*="case-banner"], [class*="uw-hero"],
[class*="hero-dark"], [class*="banner-dark"],
[class*="detail-header"], [class*="page-hero"],
[class*="page-banner"] {
  background: #5B21B6 !important;
  background-image:
    radial-gradient(ellipse 800px 300px at 80% -20%, rgba(255,255,255,.18) 0%, transparent 60%),
    linear-gradient(135deg, #4C1D95 0%, #5B21B6 35%, #9C2BB5 75%, #D11C7F 100%) !important;
  color: #FFFFFF !important;
  border-radius: 12px;
  border: none !important;
  box-shadow:
    0 8px 24px rgba(91,33,182,.20),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.08) !important;
  position: relative;
  overflow: hidden;
}
/* glass shimmer overlay on hero */
.case-banner::before, .case-hero::before, .uw-hero::before,
.detail-header::before, .application-header::before, .loan-header::before,
[class*="case-banner"]::before, [class*="uw-hero"]::before,
[class*="detail-header"]::before, [class*="page-hero"]::before,
[class*="page-banner"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 40%);
  pointer-events: none;
  border-radius: inherit;
}
.case-banner *, .case-hero *, .uw-hero *,
.detail-header *, .application-header *, .loan-header *, .case-header *,
[class*="case-banner"] *, [class*="uw-hero"] *,
[class*="hero-dark"] *, [class*="banner-dark"] *,
[class*="detail-header"] *, [class*="page-hero"] * {
  color: #FFFFFF !important;
}

/* ===== STATUS CHIPS — corporate muted, dark text on light bg ===== */
.chip, .badge, .pill, .status-pill, .status-chip,
[class*="chip"], [class*="pill"],
[class*="badge"]:not(.material-icons):not([class*="icon"]),
[class*="status-"]:not(div):not(section):not(aside):not(header) {
  border-radius: 4px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid transparent !important;
}

/* On-hero chips: solid white bg + colored text for max contrast */
.case-banner .chip, .case-banner .badge, .case-banner .pill,
.detail-header .chip, .detail-header .badge, .detail-header .pill,
[class*="hero"] .chip, [class*="hero"] .badge, [class*="hero"] .pill,
[class*="banner"] .chip, [class*="banner"] .badge, [class*="banner"] .pill,
[class*="detail-header"] .chip, [class*="detail-header"] .badge, [class*="detail-header"] .pill {
  background: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* SUCCESS — Active / Approved / Completed / Disbursed */
.status-completed, .status-Completed, .status-COMPLETED,
.status-active, .status-Active, .status-ACTIVE,
.status-approved, .status-Approved, .status-APPROVED,
.status-disbursed, .status-Disbursed, .status-DISBURSED,
.status-success, .status-Success, .status-paid,
.badge-completed, .badge-active, .badge-approved, .badge-success,
.risk-low,
[class*="badge"][class*="success"],
[class*="badge"][class*="active"],
[class*="badge"][class*="approved"],
[class*="badge"][class*="completed"],
[class*="badge"][class*="disbursed"],
[class*="chip"][class*="success"],
[class*="chip"][class*="active"],
[class*="chip"][class*="completed"],
[class*="chip"][class*="approved"],
[class*="pill"][class*="success"],
[class*="pill"][class*="completed"],
[class*="pill"][class*="active"] {
  background: var(--success-light) !important;
  color: var(--success) !important;
  border: 1px solid var(--success) !important;
}

/* WARNING — Pending / Submitted / Review / Medium */
.status-pending, .status-Pending, .status-PENDING,
.status-in_progress, .status-InProgress, .status-review,
.status-submitted, .status-Submitted, .status-SUBMITTED,
.status-underwriting, .status-Underwriting,
.badge-pending, .badge-warning, .badge-review, .badge-submitted,
.risk-medium,
[class*="badge"][class*="pending"],
[class*="badge"][class*="warning"],
[class*="badge"][class*="review"],
[class*="badge"][class*="warn"],
[class*="chip"][class*="pending"],
[class*="chip"][class*="warning"],
[class*="pill"][class*="pending"],
[class*="pill"][class*="warning"] {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
  border: 1px solid var(--warning) !important;
}

/* DANGER — Rejected / NPA / Failed / Overdue / High */
.status-rejected, .status-Rejected, .status-REJECTED,
.status-failed, .status-Failed, .status-cancelled,
.status-npa, .status-NPA, .status-overdue, .status-Overdue,
.badge-rejected, .badge-failed, .badge-danger, .badge-error, .badge-npa,
.risk-high, .risk-very_high, .risk-very,
[class*="badge"][class*="reject"],
[class*="badge"][class*="fail"],
[class*="badge"][class*="danger"],
[class*="badge"][class*="error"],
[class*="badge"][class*="npa"],
[class*="badge"][class*="overdue"],
[class*="chip"][class*="reject"],
[class*="chip"][class*="fail"],
[class*="chip"][class*="danger"],
[class*="chip"][class*="error"],
[class*="pill"][class*="reject"],
[class*="pill"][class*="fail"],
[class*="pill"][class*="danger"] {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
}

/* INFO — Draft / New / App number */
.status-draft, .status-Draft, .status-DRAFT,
.status-new, .status-New, .status-info,
.badge-draft, .badge-new, .badge-info,
[class*="badge"][class*="info"],
[class*="badge"][class*="info"],
[class*="badge"][class*="draft"],
[class*="badge"][class*="new"],
[class*="chip"][class*="info"],
[class*="chip"][class*="draft"] {
  background: var(--info-light) !important;
  color: var(--info) !important;
  border: 1px solid var(--info) !important;
}

/* ===== CARDS — glossy white with subtle inner highlight ===== */
.card, [class*="-card"]:not([class*="kpi"]) {
  background: #FFFFFF !important;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FAF9FC 100%) !important;
  border-radius: 12px;
  border: 1px solid var(--border-subtle) !important;
  box-shadow:
    0 1px 3px rgba(91,33,182,.05),
    0 4px 12px rgba(91,33,182,.04),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  transition: all .18s ease;
}
.card:hover, [class*="-card"]:not([class*="kpi"]):hover {
  box-shadow:
    0 4px 16px rgba(91,33,182,.10),
    0 8px 32px rgba(91,33,182,.06),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.kpi-card, [class*="kpi-card"] {
  background: #FFFFFF !important;
  background-image:
    linear-gradient(180deg, #FFFFFF 0%, #FAF9FC 100%) !important;
  border-radius: 12px;
  border: 1px solid var(--border-subtle) !important;
  border-top: none !important;
  border-left: none !important;
  box-shadow:
    0 2px 6px rgba(91,33,182,.06),
    0 8px 24px rgba(91,33,182,.04),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.kpi-card::before, [class*="kpi-card"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5B21B6 0%, #9C2BB5 50%, #D11C7F 100%);
  border-radius: 12px 12px 0 0;
}
.kpi-card:hover, [class*="kpi-card"]:hover {
  box-shadow:
    0 8px 24px rgba(91,33,182,.12),
    0 16px 48px rgba(91,33,182,.08),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translateY(-2px) !important;
}

/* ===== BUTTONS — glossy purple gradient primary ===== */
.btn-primary, button.btn-primary, button[class*="primary"]:not([class*="topbar"] *):not(aside *):not(.sidebar *) {
  background: linear-gradient(180deg, #6B26C9 0%, #5B21B6 50%, #4C1D95 100%) !important;
  background-color: var(--bank-navy) !important;
  color: #FFFFFF !important;
  border: 1px solid #4C1D95 !important;
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 20px;
  box-shadow:
    0 2px 4px rgba(91,33,182,.20),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: none !important;
  transition: all .15s ease;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #7C3AED 0%, #6B26C9 50%, #5B21B6 100%) !important;
  border-color: #5B21B6 !important;
  box-shadow:
    0 4px 12px rgba(91,33,182,.32),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-1px) !important;
}
.btn-outline, button.btn-outline {
  border: 1px solid var(--bank-navy) !important;
  color: var(--bank-navy) !important;
  background: #FFFFFF !important;
  border-radius: 4px !important;
  padding: 9px 18px;
}
.btn-outline:hover {
  background: var(--bank-navy-50) !important;
}
.btn-accent, button[class*="accent"] {
  background: var(--bank-gold) !important;
  color: var(--bank-navy-dark) !important;
  border: 1px solid var(--bank-gold-dark) !important;
  border-radius: 4px !important;
  font-weight: 700;
}

/* ===== Tables — light lavender header, refined ===== */
table {
  background: #FFFFFF !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 3px rgba(91,33,182,.04);
}
table thead {
  background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%) !important;
}
table thead th {
  background: transparent !important;
  background-image: none !important;
  color: var(--bank-navy) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--bank-navy-100) !important;
  text-align: left;
}
table thead th * {
  color: var(--bank-navy) !important;
}
/* Sort arrows */
table thead th svg, table thead th .material-icons,
table thead th [class*="sort"] {
  color: var(--bank-navy-light) !important;
  opacity: .7;
}
table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background .12s ease;
}
table tbody tr:last-child {
  border-bottom: none;
}
table tbody tr:hover {
  background: #FAF9FC !important;
}
table tbody td {
  padding: 12px 14px !important;
  color: var(--text-primary) !important;
  font-size: 14px;
  vertical-align: middle;
}
table tbody td * {
  color: inherit;
}

/* ===== Tabs ===== */
.tab.active, [class*="tab"][class*="active"]:not(aside *):not(.sidebar *) {
  border-bottom: 3px solid var(--bank-navy) !important;
  color: var(--bank-navy) !important;
  font-weight: 700;
}
.tab.active::before, [class*="tab"][class*="active"]:not(aside *):not(.sidebar *)::before {
  background: var(--bank-navy) !important;
}

/* ===== Inputs ===== */
input:not([type="checkbox"]):not([type="radio"]),
select, textarea {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bank-navy) !important;
  outline: 2px solid var(--bank-navy-100) !important;
  outline-offset: -1px;
}

/* ===== Breadcrumb / link tone ===== */
a:not(aside *):not(.sidebar *):not([class*="topbar"] *):not([class*="badge"]):not([class*="chip"]):not(.btn-primary):not(.btn-outline):not(.btn-accent) {
  color: var(--bank-navy) !important;
}

/* ============================================================
   LOGIN PAGE — minimal targeted overrides, accept Angular layout
   ============================================================ */

/* Page BG — purple gradient on auth-related wrappers */
app-login, app-signin, app-auth, app-forgot-password, app-reset-password, app-register,
.login-page, .auth-page, .signin-page, .forgot-password-page, .reset-password-page,
.register-page, .signup-page,
[class~="login-page"], [class~="auth-page"], [class~="forgot-password"], [class~="reset-password"] {
  background: #4C1D95 !important;
  background-image:
    radial-gradient(ellipse 1000px 600px at 20% 0%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 800px 500px at 80% 100%, rgba(255,255,255,.08) 0%, transparent 60%),
    linear-gradient(135deg, #4C1D95 0%, #5B21B6 35%, #9C2BB5 75%, #D11C7F 100%) !important;
  min-height: 100vh !important;
}

/* Login / forgot / reset card — glass white, compact */
.login-card, .auth-card, .signin-card,
.forgot-password-card, .reset-password-card, .register-card, .signup-card, .forgot-card, .reset-card,
[class~="login-card"], [class~="auth-card"], [class~="forgot-password-card"] {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.30), 0 8px 24px rgba(91,33,182,.20) !important;
  backdrop-filter: blur(12px);
  padding: 32px !important;
  max-width: 400px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}
/* Hide accessibility skip link visually */
.skip-link, [class*="skip-link"] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.skip-link:focus, [class*="skip-link"]:focus {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  z-index: 99999 !important;
  background: var(--bank-navy) !important;
  color: #FFFFFF !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
}
/* Trim login-card excess content — hide footer/copyright/features inside card */
.login-card .login-footer, .login-card [class*="copyright"],
.login-card [class*="features"], .login-card [class*="tagline"],
.login-card .brand-tagline,
.login-page .login-footer, .login-page > [class*="footer"]:not(.login-card),
.login-page [class*="features"], .login-page [class*="hero"],
.login-page [class*="aside"], .login-page [class*="side-panel"],
app-login .copyright, app-login [class*="copyright"] {
  display: none !important;
}

/* Nuke INNER card-style elements only — keep layout intact */
html body .login-card form, html body .login-card .login-form,
html body .auth-card form, html body .auth-card .auth-form,
html body .forgot-card form, html body .forgot-card .forgot-form,
html body .reset-card form, html body .reset-card .reset-form {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Force VERTICAL stack inside auth cards — no 2-column split, compact */
html body .login-card:not(#nope):not(#nope):not(#nope),
html body .auth-card:not(#nope):not(#nope):not(#nope),
html body .signin-card:not(#nope):not(#nope):not(#nope),
html body .forgot-card:not(#nope):not(#nope):not(#nope),
html body .reset-card:not(#nope):not(#nope):not(#nope) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  max-width: 400px !important;
  width: 100% !important;
  padding: 32px !important;
  gap: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
}
html body .login-card > *:not(#nope):not(#nope):not(#nope),
html body .auth-card > *:not(#nope):not(#nope):not(#nope),
html body .forgot-card > *:not(#nope):not(#nope):not(#nope),
html body .reset-card > *:not(#nope):not(#nope):not(#nope) {
  flex: 0 0 auto !important;
}

/* Force readable text inside auth cards — solid dark color, EXCLUDE submit buttons */
html body .login-card *:not(.brand-logo):not(svg):not(path):not([type="submit"]):not(#nope):not(#nope):not(#nope),
html body .auth-card *:not(.brand-logo):not(svg):not(path):not([type="submit"]):not(#nope):not(#nope):not(#nope),
html body .forgot-card *:not(.brand-logo):not(svg):not(path):not([type="submit"]):not(#nope):not(#nope):not(#nope),
html body .reset-card *:not(.brand-logo):not(svg):not(path):not([type="submit"]):not(#nope):not(#nope):not(#nope) {
  color: #1F1B2E !important;
  -webkit-text-fill-color: #1F1B2E !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Submit buttons + their inner spans = WHITE TEXT, glossy purple gradient */
html body .login-card button[type="submit"]:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .login-card button[type="submit"] *:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .forgot-card button[type="submit"]:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .forgot-card button[type="submit"] *:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .auth-card button[type="submit"]:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .auth-card button[type="submit"] *:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .reset-card button[type="submit"]:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope),
html body .reset-card button[type="submit"] *:not(#nope):not(#nope):not(#nope):not(#nope):not(#nope) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: linear-gradient(180deg, #6B26C9 0%, #5B21B6 50%, #4C1D95 100%) !important;
  background-color: #5B21B6 !important;
}
/* Button INNER text (children) — white but no gradient bg on inner */
html body .login-card button[type="submit"] span,
html body .forgot-card button[type="submit"] span,
html body .auth-card button[type="submit"] span {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
/* Headings dark + bold */
html body .login-card h1, html body .login-card h2, html body .login-card h3,
html body .forgot-card h1, html body .forgot-card h2, html body .forgot-card h3,
html body .auth-card h1, html body .auth-card h2, html body .auth-card h3 {
  color: #1F1B2E !important;
  -webkit-text-fill-color: #1F1B2E !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  background: none !important;
  background-image: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}
/* Outline buttons inside card — purple text + border */
html body .forgot-card button:not([type="submit"]):not(.btn-primary-full):not(.btn-login),
html body .login-card button:not([type="submit"]):not(.btn-primary-full):not(.btn-login) {
  color: #5B21B6 !important;
  -webkit-text-fill-color: #5B21B6 !important;
  border: 1px solid #5B21B6 !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
}
html body .forgot-card button:not([type="submit"]) *,
html body .login-card button:not([type="submit"]):not(.btn-primary-full):not(.btn-login) * {
  color: #5B21B6 !important;
  -webkit-text-fill-color: #5B21B6 !important;
}
/* Auth submit button text white */
html body .login-card button[type="submit"]:not(#nope):not(#nope):not(#nope),
html body .login-card button[type="submit"] *:not(#nope):not(#nope):not(#nope),
html body .forgot-card button[type="submit"]:not(#nope):not(#nope):not(#nope),
html body .forgot-card button[type="submit"] *:not(#nope):not(#nope):not(#nope) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Hide copyright/footer outside main flow */
html body .forgot-page > *:not(.forgot-card):not(#nope):not(#nope):not(#nope),
html body app-forgot-password > *:not(.forgot-page):not(.forgot-card):not(#nope):not(#nope):not(#nope) {
  display: none !important;
}

/* Replace .brand-logo content with our SVG */
.login-brand .brand-logo,
.brand-logo:not([class*="zyro"]) {
  background: url("/zyro-ai-logo.jpg") no-repeat center center !important;
  background-size: contain !important;
  width: 160px !important;
  height: 44px !important;
  margin: 0 auto 16px !important;
  display: block !important;
}
/* Make sure login-brand container doesn't add extra space */
.login-card .login-brand,
.auth-card .auth-brand,
.signin-card .signin-brand {
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  text-align: center !important;
  border: none !important;
}
/* Hide children of brand-logo (old kite icon + text) */
.brand-logo > *, .login-brand .brand-logo > * {
  display: none !important;
  visibility: hidden !important;
}
/* Brand tagline visible */
.brand-tagline, .login-brand .brand-tagline {
  color: var(--text-secondary) !important;
  text-align: center !important;
  font-size: 13px !important;
  margin: 0 0 16px !important;
}

/* Hide right-side feature blurb (separate element if exists) */
.feature-panel, .login-features, .auth-features,
.login-side, .auth-side, .hero-panel,
.login-art, .auth-art, .signin-art, .forgot-art, .reset-art,
[class*="login-art"], [class*="auth-art"], [class*="login-features"], [class*="auth-features"] {
  display: none !important;
}
/* Center login-card / auth-card / forgot-card in page */
html body .login-page, html body .auth-page, html body .signin-page,
html body .forgot-page, html body .reset-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* Heading inside card */
.login-card h1, .login-card h2, .login-card h3,
.auth-card h1, .auth-card h2, .auth-card h3,
.signin-card h1, .signin-card h2, .signin-card h3 {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  text-align: center !important;
  letter-spacing: -.01em;
}

/* Generic forgot/reset auth pages — full-screen gradient BG */
html body app-forgot-password, html body app-reset-password,
html body app-register, html body app-signup, html body app-login,
html body app-signin, html body app-auth {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  flex: 1 1 100vw !important;
  background: #4C1D95 !important;
  background-image:
    radial-gradient(ellipse 1000px 600px at 20% 0%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 800px 500px at 80% 100%, rgba(255,255,255,.08) 0%, transparent 60%),
    linear-gradient(135deg, #4C1D95 0%, #5B21B6 35%, #9C2BB5 75%, #D11C7F 100%) !important;
}
.forgot-page, .reset-page, .register-page, .signup-page {
  background: transparent !important;
  background-image: none !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  flex: 1 !important;
}
.forgot-card, .reset-card, .register-card, .signup-card {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.30), 0 8px 24px rgba(91,33,182,.20) !important;
  backdrop-filter: blur(12px);
  max-width: 460px !important;
  width: 100% !important;
  padding: 36px !important;
}
/* Logo on .brand-logo element only — hide .forgot-brand outer */
.forgot-brand, .reset-brand, .register-brand, .signup-brand {
  background: transparent !important;
  background-image: none !important;
  text-align: center !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}
.forgot-brand .brand-logo, .reset-brand .brand-logo,
.register-brand .brand-logo, .signup-brand .brand-logo,
.forgot-brand > .brand-logo {
  background: url("/zyro-ai-logo.jpg") no-repeat center center !important;
  background-size: contain !important;
  width: 200px !important;
  height: 56px !important;
  margin: 0 auto !important;
  display: block !important;
}
.forgot-brand .brand-logo > *, .reset-brand .brand-logo > * {
  display: none !important;
}
/* Hide tagline (kite icon area) and other brand children except brand-logo */
.forgot-brand > *:not(.brand-logo):not(.brand-tagline),
.reset-brand > *:not(.brand-logo):not(.brand-tagline) {
  display: none !important;
}

/* Login submit button — glossy purple */
button.btn-login, button.btn-signin, button.btn-auth,
.login-card button[type="submit"],
.login-form button[type="submit"] {
  background: linear-gradient(180deg, #6B26C9 0%, #5B21B6 50%, #4C1D95 100%) !important;
  background-color: #5B21B6 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid #4C1D95 !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  width: 100% !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(91,33,182,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
button.btn-login *, button.btn-signin *,
.login-card button[type="submit"] *,
.login-form button[type="submit"] * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Form layout — clean spacing for login/forgot/auth forms */
html body .login-form, html body .auth-form, html body .forgot-form, html body .reset-form,
html body .login-card form, html body .auth-card form, html body .forgot-card form, html body .reset-card form {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}
/* Each form field group (label + input) — vertical stack */
html body .login-form > *, html body .auth-form > *, html body .forgot-form > *,
html body .login-card form > *:not(h1):not(h2):not(h3),
html body .forgot-card form > *:not(h1):not(h2):not(h3) {
  width: 100% !important;
  margin: 0 !important;
}
/* Form heading title centered with bottom margin */
html body .login-form h1, html body .login-form h2, html body .login-form h3,
html body .login-form .form-title,
html body .login-card .form-title, html body .forgot-card .form-title {
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  color: #1F1B2E !important;
}
/* Password input wrapper for Show button */
html body .login-card .password-wrapper, html body .login-card .password-field,
html body .login-card [class*="password"]:has(input):has(button),
html body .login-form > div:has(input[type="password"]) {
  position: relative !important;
  display: block !important;
}
/* Show button absolute positioned inside password field */
html body .login-card button[class*="show"], html body .login-card button[class*="toggle"],
html body .login-form button[class*="show"], .login-form .show-password,
.login-card .show-password-btn, button[aria-label*="how password"] {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  background: transparent !important;
  border: none !important;
  color: var(--bank-navy) !important;
  font-weight: 600 !important;
  z-index: 2;
}
/* Remember me + forgot password row — single line, space between */
html body .login-form .remember-row, html body .login-form .form-actions,
html body .login-form [class*="remember-row"], html body .login-form [class*="login-options"],
html body .login-card .remember-forgot, html body .login-card .form-options {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  margin: 4px 0 !important;
  width: 100% !important;
  padding: 0 !important;
}
/* Remember-me label inline-flex */
.login-card label:has(input[type="checkbox"]),
.login-form label:has(input[type="checkbox"]),
.login-card .remember-me, .login-form .remember-me,
[class*="remember"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.login-card label input[type="checkbox"],
.login-form label input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
}
/* Remember me TEXT — single line */
.login-card label:has(input[type="checkbox"]) span,
.login-form label:has(input[type="checkbox"]) span,
.login-card .remember-me span, .login-form .remember-me span {
  white-space: nowrap !important;
  font-size: 13px !important;
  display: inline !important;
}
/* Forgot password link — single line, right-aligned */
.login-card a[href*="forgot"], .login-card a:has-text("Forgot"),
.login-form a[href*="forgot"], .forgot-password-link,
[class*="forgot"]:not(button):not(div):not(form):not(.forgot-card):not(.forgot-page):not(.forgot-brand):not(.forgot-form):not(.forgot-footer) {
  white-space: nowrap !important;
  font-size: 13px !important;
  color: var(--bank-navy) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

/* "Show" password toggle */
[class*="login"] [class*="show"]:not(input), [class*="auth"] [class*="show"]:not(input),
button[class*="show-password"], button[class*="toggle-password"] {
  color: var(--bank-navy) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 8px !important;
}

/* ============================================================
   MAIN CONTENT LAYOUT — stop excess scroll
   ============================================================ */
main, [class*="main-content"], [class*="content-area"], [class*="page-content"],
[class*="app-content"], [class*="layout-main"] {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
}

/* Tighter card / section spacing */
[class*="page-container"], [class*="page-wrapper"] {
  padding: 16px 20px !important;
}
.card + .card, [class*="-card"] + [class*="-card"] {
  margin-top: 12px;
}

/* Hero/banner trim */
.case-banner, .case-hero, .uw-hero,
.detail-header, .application-header, .loan-header,
[class*="case-banner"], [class*="uw-hero"],
[class*="detail-header"], [class*="page-hero"] {
  padding: 16px 20px !important;
}

/* App shell layout — sidebar fixed left, main pushed right with margin */
.app-layout, [class~="app-layout"] {
  display: block !important;
  min-height: 100vh !important;
  width: 100% !important;
  position: relative;
}
/* app-sidebar wrapper — fixed left, width follows sidebar state */
app-sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
  display: block !important;
  width: 260px !important;
  transition: width .25s ease;
}
/* Collapsed sidebar — app-sidebar narrow */
app-sidebar:has(.sidebar.collapsed),
app-sidebar:has(.sidebar.is-collapsed),
app-sidebar:has(.sidebar[class*="collapsed"]) {
  width: 68px !important;
}
/* Main content — pushed right by sidebar width (260 expanded) */
.app-main, app-main, .main-content,
.app-layout > .app-main,
.app-layout > div:not(app-sidebar):not(.skip-link) {
  margin-left: 260px !important;
  width: calc(100% - 260px) !important;
  max-width: calc(100% - 260px) !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  transition: margin-left .25s ease, width .25s ease;
}
/* Page content container — prevent horizontal overflow, allow wrap */
.app-main > *, app-main > *, .main-content > * {
  max-width: 100% !important;
  overflow-x: visible;
}
/* Step indicator / wizard — wrap to multiple lines if needed */
[class*="stepper"], [class*="step-indicator"], [class*="wizard-steps"],
[class*="form-stepper"], [class*="progress-steps"] {
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
}
[class*="step-item"], [class*="wizard-step"] {
  flex-shrink: 0 !important;
}
/* When sidebar collapsed — main margin = 68 */
.app-layout:has(.sidebar.collapsed) .app-main,
.app-layout:has(.sidebar.is-collapsed) .app-main,
.app-layout:has(.sidebar[class*="collapsed"]) .app-main,
body:has(.sidebar.collapsed) .app-main,
body:has(.sidebar[class*="collapsed"]) .app-main {
  margin-left: 68px !important;
  width: calc(100% - 68px) !important;
  max-width: calc(100% - 68px) !important;
}

/* ===== Override inline gradient leftovers ===== */
aside[style*="gradient"], .sidebar[style*="gradient"],
aside[style*="background"], .sidebar[style*="background"] {
  background: var(--bank-navy) !important;
  background-image: none !important;
}

/* ===== Version footer — style only, content from backend (tenant-dynamic) ===== */
aside [class*="version"], .sidebar [class*="version"],
aside [class*="footer"], .sidebar [class*="footer"] {
  padding: 12px 22px !important;
  background: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
  border-top: 1px solid var(--border-subtle) !important;
  display: block !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  line-height: 1.5;
}
aside [class*="version"] *, .sidebar [class*="version"] *,
aside [class*="footer"] *, .sidebar [class*="footer"] * {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 500;
}
/* Tenant name (first child or labeled element) — magenta accent */
aside [class*="version"] > *:first-child:not(:only-child),
.sidebar [class*="version"] > *:first-child:not(:only-child),
aside [class*="footer"] > *:first-child:not(:only-child),
.sidebar [class*="footer"] > *:first-child:not(:only-child),
aside [class*="tenant"], .sidebar [class*="tenant"],
aside [class*="org-name"], .sidebar [class*="org-name"] {
  color: #D11C7F !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .02em;
}
/* Version number (second child) — purple */
aside [class*="version"] > *:last-child:not(:only-child),
.sidebar [class*="version"] > *:last-child:not(:only-child),
aside [class*="footer"] > *:last-child:not(:only-child),
.sidebar [class*="footer"] > *:last-child:not(:only-child),
aside [class*="app-version"], .sidebar [class*="app-version"] {
  color: var(--bank-navy) !important;
  font-weight: 600 !important;
  margin-top: 2px;
}

/* ===== FIX low-contrast buttons / disabled-look buttons ===== */
/* Outline / ghost buttons that look washed-out */
button:not(.btn-primary):not(.btn-accent):not(:disabled):not([disabled]):not(aside *):not(.sidebar *):not([class*="topbar"] *):not([class*="appbar"] *):not([class*="tab"]):not([class*="badge"]):not([class*="chip"]) {
  color: var(--bank-navy) !important;
  border-color: var(--bank-navy) !important;
}
button:not(.btn-primary):not(.btn-accent):not(:disabled):not([disabled]):not(aside *):not(.sidebar *):not([class*="topbar"] *):not([class*="appbar"] *):hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy-dark) !important;
}

/* Ghost buttons with low-contrast pink/light text — force readable */
button[class*="btn"]:not(.btn-primary):not(.btn-accent),
.btn:not(.btn-primary):not(.btn-accent),
[class*="kyc"], button[class*="kyc"], button[class*="check"] {
  color: var(--bank-navy) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--bank-navy) !important;
  font-weight: 600 !important;
}
button[class*="btn"]:not(.btn-primary):not(.btn-accent):hover,
.btn:not(.btn-primary):not(.btn-accent):hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy-dark) !important;
  border-color: var(--bank-navy-dark) !important;
}

/* Disabled look — keep readable */
button:disabled, button[disabled], .btn:disabled, [class*="btn"][disabled] {
  background: #E5E9EE !important;
  color: #718096 !important;
  border: 1px solid #B0BAC6 !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* Run KYC Check / Action chips — force solid contrast */
button[class*="action"], button[class*="kyc"],
button[title*="KYC"], button[title*="Check"],
button[aria-label*="KYC"], button[aria-label*="Check"] {
  color: #FFFFFF !important;
  background: var(--bank-navy) !important;
  border: 1px solid var(--bank-navy) !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* Generic anchor / link contrast */
a:not([class*="badge"]):not([class*="chip"]):not(aside *):not(.sidebar *):not(.btn-primary):not(.btn-outline):not(.btn-accent):not([class*="topbar"] *) {
  color: var(--bank-navy) !important;
  text-decoration: none;
}
a:not(aside *):not(.sidebar *):hover {
  color: var(--bank-navy-dark) !important;
  text-decoration: underline;
}

/* Breadcrumb separator + non-active crumb */
[class*="breadcrumb"] a, nav[aria-label*="readcrumb"] a {
  color: var(--bank-navy) !important;
  font-weight: 600;
}
[class*="breadcrumb"] [aria-current], [class*="breadcrumb"] .active {
  color: var(--text-primary) !important;
  font-weight: 700;
}

/* Tab text on inactive — readable */
[class*="tab"]:not([class*="active"]):not(aside *):not(.sidebar *) {
  color: var(--text-secondary) !important;
}
[class*="tab"]:not([class*="active"]):not(aside *):not(.sidebar *):hover {
  color: var(--bank-navy) !important;
}

/* Dropdown / menu items text contrast */
[role="menuitem"], [role="option"], .dropdown-item, .menu-item {
  color: var(--text-primary) !important;
}
[role="menuitem"]:hover, [role="option"]:hover, .dropdown-item:hover, .menu-item:hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy-dark) !important;
}

/* Search box in topbar */
[class*="topbar"] input[type="search"], [class*="topbar"] input[type="text"],
[class*="appbar"] input[type="search"], [class*="appbar"] input[type="text"] {
  background: var(--bank-navy-50) !important;
  color: var(--text-primary) !important;
  border: 1px solid transparent !important;
}
[class*="topbar"] input::placeholder, [class*="appbar"] input::placeholder {
  color: var(--text-tertiary) !important;
}

/* ============================================================
   FULL SWEEP — text/BG/button/click states matched to theme
   ============================================================ */

/* === Tabs — fix active text invisibility, glossy underline === */
[role="tab"], .tab, [class*="tab-"]:not([class*="table"]) {
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  border-radius: 8px 8px 0 0 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all .15s ease;
}
[role="tab"]:hover, .tab:hover, [class*="tab-"]:not([class*="table"]):hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy) !important;
}
[role="tab"][aria-selected="true"], .tab.active, [class*="tab"][class*="active"]:not(aside *):not(.sidebar *) {
  background: transparent !important;
  background-image: none !important;
  color: var(--bank-navy) !important;
  font-weight: 700 !important;
  border-bottom: 3px solid var(--bank-navy) !important;
  box-shadow: none !important;
}
[role="tab"][aria-selected="true"] *, .tab.active *, [class*="tab"][class*="active"]:not(aside *):not(.sidebar *) * {
  color: var(--bank-navy) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === Headings everywhere — readable on light BG === */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Inside dark hero — flip to white */
.case-banner h1, .case-banner h2, .case-banner h3,
.case-hero h1, .case-hero h2, .case-hero h3,
.uw-hero h1, .uw-hero h2, .uw-hero h3,
[class*="banner-dark"] h1, [class*="banner-dark"] h2, [class*="banner-dark"] h3,
[class*="hero-dark"] h1, [class*="hero-dark"] h2, [class*="hero-dark"] h3,
[class*="page-hero"] h1, [class*="page-hero"] h2, [class*="page-hero"] h3,
[class*="case-banner"] h1, [class*="case-banner"] h2, [class*="case-banner"] h3,
[class*="uw-hero"] h1, [class*="uw-hero"] h2, [class*="uw-hero"] h3,
[class*="detail-header"] h1, [class*="detail-header"] h2, [class*="detail-header"] h3 {
  color: #FFFFFF !important;
}
/* Sidebar-internal headings keep their styles */
aside h1, aside h2, aside h3, .sidebar h1, .sidebar h2, .sidebar h3 {
  color: var(--text-primary);
}

/* === Body text === */
body, body p, .card p, .card span, .card div:not([class*="value"]):not([class*="number"]):not([class*="metric"]) {
  color: var(--text-primary);
}
/* explicitly muted classes */
.text-muted, [class*="text-muted"], .text-secondary, [class*="text-secondary"],
[class*="-muted"], [class*="-secondary"]:not([class*="badge"]):not([class*="chip"]):not([class*="btn"]) {
  color: var(--text-secondary) !important;
}

/* === Buttons — only target real .btn / .button / .btn-* classes === */
.btn, button.btn, [class*="btn-"]:not([class*="badge"]):not([class*="bottom"]):not([class*="bottle"]) {
  font-family: inherit !important;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all .15s ease;
}

/* secondary / outline = ONLY explicit .btn-secondary, .btn-outline, .btn-default */
.btn-secondary, button.btn-secondary,
.btn-outline, button.btn-outline,
.btn-default, button.btn-default,
.btn-ghost, button.btn-ghost {
  background: #FFFFFF !important;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FAF9FC 100%) !important;
  color: var(--bank-navy) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 9px 16px;
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(91,33,182,.04),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.btn-secondary:hover, .btn-outline:hover, .btn-default:hover, .btn-ghost:hover {
  background: var(--bank-navy-50) !important;
  background-image: linear-gradient(180deg, var(--bank-navy-50) 0%, var(--bank-navy-100) 100%) !important;
  color: var(--bank-navy-dark) !important;
  border-color: var(--bank-navy) !important;
  box-shadow:
    0 4px 12px rgba(91,33,182,.10),
    inset 0 1px 0 rgba(255,255,255,.6);
  transform: translateY(-1px);
}

/* primary purple button — everywhere */
.btn-primary, button.btn-primary, button[class*="primary"]:not([class*="topbar"] *):not(aside *):not(.sidebar *):not([class*="badge"]):not([class*="chip"]),
button[type="submit"]:not(:disabled):not(aside *):not(.sidebar *) {
  background: linear-gradient(180deg, #6B26C9 0%, #5B21B6 50%, #4C1D95 100%) !important;
  background-color: var(--bank-navy) !important;
  color: #FFFFFF !important;
  border: 1px solid #4C1D95 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 20px;
  box-shadow:
    0 2px 4px rgba(91,33,182,.20),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-primary:hover, button.btn-primary:hover, button[class*="primary"]:not(aside *):hover,
button[type="submit"]:not(:disabled):not(aside *):hover {
  background: linear-gradient(180deg, #7C3AED 0%, #6B26C9 50%, #5B21B6 100%) !important;
  border-color: #5B21B6 !important;
  box-shadow:
    0 4px 14px rgba(91,33,182,.32),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-1px) !important;
}
.btn-primary:active, button.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 1px 2px rgba(91,33,182,.20),
    inset 0 1px 3px rgba(0,0,0,.18) !important;
}
.btn-primary *, button.btn-primary *, button[class*="primary"] *:not([class*="badge"]):not([class*="chip"]) {
  color: #FFFFFF !important;
}

/* danger / destructive button */
button[class*="danger"], button[class*="delete"], button[class*="reject"], .btn-danger {
  background: linear-gradient(180deg, #DC2626 0%, #B91C1C 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #991B1B !important;
}
button[class*="danger"]:hover, .btn-danger:hover {
  background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.32);
}

/* success button */
button[class*="success"], button[class*="approve"], .btn-success {
  background: linear-gradient(180deg, #059669 0%, #047857 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #065F46 !important;
}

/* disabled — clearly readable */
button:disabled, button[disabled], .btn:disabled, [class*="btn"][disabled] {
  background: #EFEBF5 !important;
  background-image: none !important;
  color: #75708A !important;
  border: 1px solid #C7C0D8 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* === Focus rings — purple everywhere === */
*:focus-visible {
  outline: 3px solid var(--bank-navy-100) !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* === Links — purple, underline on hover === */
a:not([class*="badge"]):not([class*="chip"]):not(aside *):not(.sidebar *):not(.btn-primary):not(.btn-outline):not(.btn-accent):not([class*="topbar"] *):not(button):not([role="button"]) {
  color: var(--bank-navy) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}
a:not([class*="badge"]):not([class*="chip"]):not(aside *):not(.sidebar *):hover {
  color: var(--bank-navy-dark) !important;
  text-decoration: underline;
}

/* === Modals / dialogs === */
[role="dialog"], [class*="modal"], [class*="dialog"] {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow:
    0 20px 50px rgba(91,33,182,.18),
    0 8px 24px rgba(0,0,0,.08) !important;
}
[class*="modal-header"], [class*="dialog-header"], [role="dialog"] header {
  background: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 14px 14px 0 0;
  padding: 16px 20px;
  color: var(--text-primary) !important;
}
[class*="modal-backdrop"], [class*="overlay"] {
  background: rgba(31,27,46,.45) !important;
  backdrop-filter: blur(4px);
}

/* === Dropdowns / menus === */
[role="menu"], [role="listbox"], .dropdown-menu, [class*="dropdown-menu"], [class*="popover"] {
  background: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(91,33,182,.16) !important;
  padding: 6px !important;
}
[role="menuitem"], [role="option"], .dropdown-item, .menu-item, [class*="dropdown-item"] {
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background .12s ease;
}
[role="menuitem"]:hover, [role="option"]:hover, .dropdown-item:hover,
[role="menuitem"][aria-selected="true"], [role="option"][aria-selected="true"] {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy-dark) !important;
}

/* === Toasts / alerts / notifications === */
[role="alert"], [class*="toast"], [class*="notification"]:not([class*="badge"]):not(aside *) {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 4px solid var(--bank-navy) !important;
  box-shadow: 0 8px 24px rgba(91,33,182,.12) !important;
  padding: 12px 16px !important;
  color: var(--text-primary) !important;
}
[role="alert"][class*="success"], [class*="toast"][class*="success"] {
  border-left-color: var(--success) !important;
  background: #F0FDF4 !important;
}
[role="alert"][class*="error"], [role="alert"][class*="danger"], [class*="toast"][class*="error"] {
  border-left-color: var(--danger) !important;
  background: #FEF2F2 !important;
}
[role="alert"][class*="warning"], [class*="toast"][class*="warning"] {
  border-left-color: var(--warning) !important;
  background: #FEFCE8 !important;
}

/* === Form labels / helpers === */
label, .form-label, [class*="label"]:not([aria-label]):not([class*="labeled"]):not([class*="badge"]) {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .02em;
}
.form-text, .help-text, [class*="helper"], [class*="form-help"], small.form-text {
  color: var(--text-tertiary) !important;
  font-size: 12px !important;
}
.form-error, [class*="error-message"], [class*="field-error"] {
  color: var(--danger) !important;
  font-size: 12px !important;
}

/* === Pagination === */
[class*="pagination"] button, [class*="paginator"] button,
[class*="pagination"] a, [class*="paginator"] a {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  min-width: 32px;
}
[class*="pagination"] button:hover, [class*="pagination"] a:hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy) !important;
  border-color: var(--bank-navy) !important;
}
[class*="pagination"] [aria-current], [class*="pagination"] .active, [class*="pagination"] [class*="active"] {
  background: var(--bank-navy) !important;
  color: #FFFFFF !important;
  border-color: var(--bank-navy-dark) !important;
}

/* === Toggles / switches === */
[role="switch"], input[type="checkbox"][role="switch"] {
  accent-color: var(--bank-navy) !important;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--bank-navy) !important;
}

/* === Progress bars === */
progress, [role="progressbar"], [class*="progress-bar"] {
  accent-color: var(--bank-navy) !important;
  background: var(--bank-navy-50) !important;
  border-radius: 999px;
  overflow: hidden;
}
progress::-webkit-progress-value, [role="progressbar"] > * {
  background: linear-gradient(90deg, var(--bank-navy) 0%, var(--bank-gold) 100%) !important;
  border-radius: 999px;
}

/* === Avatar circles === */
[class*="avatar"]:not(img):not([class*="badge"]) {
  background: linear-gradient(135deg, #5B21B6 0%, #D11C7F 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(91,33,182,.20);
}

/* === Dividers === */
hr, [class*="divider"], [class*="separator"] {
  border: none !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  margin: 12px 0;
}

/* === Generic surfaces / panels === */
[class*="panel"], [class*="section-card"], [class*="surface"]:not([class*="banner"]):not([class*="hero"]) {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 3px rgba(91,33,182,.05);
}

/* === Tooltips === */
[role="tooltip"], [class*="tooltip"]:not([class*="trigger"]) {
  background: #1F1B2E !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  border: none !important;
}

/* === Loading spinners === */
[class*="spinner"], [class*="loader"], [class*="loading"] {
  color: var(--bank-navy) !important;
  border-color: var(--bank-navy-100) !important;
  border-top-color: var(--bank-navy) !important;
}

/* === KPI big numbers — solid purple, NOT gradient-fill (avoids invisible text) === */
.kpi-card [class*="value"]:not([class*="badge"]), [class*="stat-value"], [class*="metric-value"] {
  color: var(--bank-navy) !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 2.5vw, 32px) !important;
  letter-spacing: -.02em;
}
.kpi-card [class*="kpi-label"], [class*="stat-label"], [class*="metric-label"] {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* === GLOBAL INPUT VISIBILITY — every input always readable === */
input, textarea, select {
  background: #FFFFFF !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
}
input[type="search"], input[placeholder*="earch"], input[placeholder*="EARCH"] {
  background: var(--bank-navy-50) !important;
  color: var(--text-primary) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 9px 14px 9px 36px !important;
}
input[type="search"]:focus, input[placeholder*="earch"]:focus {
  background: #FFFFFF !important;
  border-color: var(--bank-navy) !important;
  outline: 3px solid var(--bank-navy-100) !important;
}

/* === TAB CONTENT VISIBILITY — never let active tab hide content === */
[role="tabpanel"], [class*="tab-panel"], [class*="tab-content"], [class*="tabpanel"] {
  background: transparent !important;
  color: var(--text-primary) !important;
  display: block !important;
}
[role="tabpanel"][hidden], [class*="tab-panel"][hidden] {
  display: none !important;
}
[role="tablist"], [class*="tab-list"], [class*="tablist"] {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex;
  gap: 4px;
}

/* Tab text always visible — override any inline transparent */
[role="tab"] *, .tab *, [class*="tab-button"] * {
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}
[role="tab"][aria-selected="true"], .tab.active, [class*="tab"][class*="active"]:not(aside *):not(.sidebar *):not([class*="panel"]):not([class*="content"]) {
  background: transparent !important;
  background-image: none !important;
  color: var(--bank-navy) !important;
  border-bottom: 3px solid var(--bank-navy) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Section headings + table titles — explicit visible */
[class*="section-title"], [class*="section-header"]:not([class*="banner"]):not([class*="hero"]):not([class*="page-hero"]),
[class*="card-title"], [class*="card-header"]:not([class*="banner"]):not([class*="hero"]),
[class*="panel-title"], [class*="panel-header"],
[class*="recent"] h2, [class*="recent"] h3, [class*="recent"] h4,
[class*="pipeline"] h2, [class*="pipeline"] h3, [class*="pipeline"] h4 {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* ============================================================
   SIDEBAR FIX — sidebar-brand stretching, nav links invisible
   ============================================================ */
html body aside.sidebar .sidebar-brand,
html body .sidebar .sidebar-brand,
html body aside .sidebar-brand {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  flex: 0 0 68px !important;
  background: #FFFFFF !important;
  background-image: none !important;
  width: 100% !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
/* brand-logo VISIBLE with our JPG, hide its text children */
html body aside .sidebar-brand .brand-logo,
html body .sidebar .sidebar-brand .brand-logo {
  display: block !important;
  visibility: visible !important;
  background: url("/zyro-ai-logo.jpg") no-repeat center center !important;
  background-size: contain !important;
  width: 180px !important;
  height: 44px !important;
  margin: 0 16px !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}
/* When sidebar collapsed — replace logo with clean Z-mark gradient square (no image bg) */
html body aside.sidebar.collapsed .sidebar-brand .brand-logo,
html body aside .sidebar.collapsed .brand-logo,
html body .sidebar.collapsed .sidebar-brand .brand-logo,
html body .sidebar[class*="collapsed"] .sidebar-brand .brand-logo,
html body app-sidebar:has(.sidebar.collapsed) .brand-logo {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, #5B21B6 0%, #D11C7F 100%) !important;
  background-image: linear-gradient(135deg, #5B21B6 0%, #D11C7F 100%), none !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(91,33,182,.30);
}
/* Force-clear any logo image fallback in collapsed state */
html body .sidebar.collapsed .brand-logo,
html body .sidebar[class*="collapsed"] .brand-logo {
  background-image: linear-gradient(135deg, #5B21B6 0%, #D11C7F 100%) !important;
}
/* Add "Z" letter via ::before for collapsed icon */
html body aside.sidebar.collapsed .sidebar-brand .brand-logo::before,
html body aside .sidebar.collapsed .brand-logo::before,
html body .sidebar.collapsed .sidebar-brand .brand-logo::before,
html body .sidebar[class*="collapsed"] .sidebar-brand .brand-logo::before {
  content: "z";
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
  visibility: visible !important;
}
html body aside.sidebar.collapsed .sidebar-brand,
html body aside .sidebar.collapsed .sidebar-brand,
html body .sidebar.collapsed .sidebar-brand,
html body .sidebar[class*="collapsed"] .sidebar-brand {
  justify-content: center !important;
}
html body aside .sidebar-brand .brand-logo > *,
html body .sidebar .sidebar-brand .brand-logo > * {
  display: none !important;
  visibility: hidden !important;
}
/* Hide other brand siblings (text spans etc.) keep brand-logo */
html body aside .sidebar-brand > *:not(.brand-logo),
html body .sidebar .sidebar-brand > *:not(.brand-logo) {
  display: none !important;
}

/* Sidebar nav container — calc height fills middle, scroll only if too long */
html body aside.sidebar .sidebar-nav:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-nav:not(#nope):not(#nope):not(#nope),
html body aside nav.sidebar-nav:not(#nope):not(#nope):not(#nope) {
  flex: 1 1 auto !important;
  display: block !important;
  padding: 4px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  height: auto !important;
  min-height: calc(100vh - 130px) !important;
  scrollbar-width: thin !important;
}
/* Tighter nav links — fit more without scroll */
html body aside .sidebar-nav a:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-nav a:not(#nope):not(#nope):not(#nope) {
  padding: 8px 14px !important;
  margin: 1px 8px !important;
  font-size: 13.5px !important;
  gap: 10px !important;
}
/* Tighter section labels */
html body aside .sidebar-nav small:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-nav small:not(#nope):not(#nope):not(#nope),
html body aside .nav-section:not(#nope):not(#nope):not(#nope),
html body .sidebar .nav-section:not(#nope):not(#nope):not(#nope) {
  padding: 12px 16px 4px !important;
  font-size: 10px !important;
}
/* Compact footer — readable, single line */
html body aside .sidebar-footer:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-footer:not(#nope):not(#nope):not(#nope) {
  flex: 0 0 auto !important;
  padding: 10px 16px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  background: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
  background-image: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--bank-navy) !important;
  text-align: center !important;
}
html body aside .sidebar-footer *:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-footer *:not(#nope):not(#nope):not(#nope) {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--bank-navy) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  display: block !important;
}
/* Replace footer text with tagline "OS for Lending" — hide version, show tagline */
html body aside .sidebar-footer .sidebar-footer-text,
html body .sidebar .sidebar-footer .sidebar-footer-text {
  font-size: 0 !important;
  color: transparent !important;
  text-align: center !important;
}
html body aside .sidebar-footer .sidebar-footer-text *,
html body .sidebar .sidebar-footer .sidebar-footer-text *,
html body aside .sidebar-footer .version,
html body .sidebar .sidebar-footer .version,
html body aside .sidebar-footer span,
html body .sidebar .sidebar-footer span {
  font-size: 0 !important;
  color: transparent !important;
  display: none !important;
  visibility: hidden !important;
}
html body aside .sidebar-footer .sidebar-footer-text::before,
html body .sidebar .sidebar-footer .sidebar-footer-text::before {
  content: "OS for Lending";
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #D11C7F !important;
  letter-spacing: .04em;
  text-align: center !important;
  visibility: visible !important;
}

/* Sidebar nav LINKS — readable color, never white-on-white */
html body aside .sidebar-nav a:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-nav a:not(#nope):not(#nope):not(#nope),
html body aside .nav-item:not(#nope):not(#nope):not(#nope),
html body .sidebar .nav-item:not(#nope):not(#nope):not(#nope) {
  color: var(--text-secondary) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 16px !important;
  margin: 2px 10px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html body aside .sidebar-nav a:hover,
html body .sidebar .sidebar-nav a:hover,
html body aside .nav-item:hover {
  background: var(--bank-navy-50) !important;
  color: var(--bank-navy) !important;
}
html body aside .sidebar-nav a.active:not(#nope):not(#nope):not(#nope),
html body aside .sidebar-nav a[aria-current="page"]:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-nav a.active:not(#nope):not(#nope):not(#nope),
html body .sidebar .sidebar-nav a[aria-current="page"]:not(#nope):not(#nope):not(#nope),
html body aside .nav-item.active:not(#nope):not(#nope):not(#nope),
html body .sidebar .nav-item.active:not(#nope):not(#nope):not(#nope) {
  background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #A855F7 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(91,33,182,.32), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html body aside .sidebar-nav a.active *,
html body aside .sidebar-nav a[aria-current="page"] *,
html body .sidebar .sidebar-nav a.active *,
html body .sidebar .sidebar-nav a[aria-current="page"] *,
html body aside .nav-item.active * {
  color: #FFFFFF !important;
}

/* Sidebar nav SECTION labels (MAIN, LOAN LIFECYCLE) */
html body aside .sidebar-nav small,
html body .sidebar .sidebar-nav small,
html body aside .nav-section,
html body .sidebar .nav-section {
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: 16px 22px 6px !important;
  display: block !important;
  background: transparent !important;
}

/* Sidebar footer — readable, tenant-dynamic, NOT full height */
html body aside .sidebar-footer,
html body .sidebar .sidebar-footer {
  flex: 0 0 auto !important;
  height: auto !important;
  background: linear-gradient(180deg, #FAF9FC 0%, #F5F3FF 100%) !important;
  padding: 12px 22px !important;
  border-top: 1px solid var(--border-subtle) !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}
html body aside .sidebar-footer *,
html body .sidebar .sidebar-footer * {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
}

/* ============================================================
   MAX-SPECIFICITY OVERRIDES — beat Angular component-scoped CSS
   ============================================================ */
html body button.btn-primary-full:not(#nope):not(#nope):not(#nope),
html body button.btn-login:not(#nope):not(#nope):not(#nope),
html body button.btn-signin:not(#nope):not(#nope):not(#nope),
html body button.btn-auth:not(#nope):not(#nope):not(#nope),
html body .forgot-card button[type="submit"]:not(#nope):not(#nope):not(#nope),
html body .reset-card button[type="submit"]:not(#nope):not(#nope):not(#nope),
html body .login-card button[type="submit"]:not(#nope):not(#nope):not(#nope),
html body .auth-card button[type="submit"]:not(#nope):not(#nope):not(#nope),
html body .signin-card button[type="submit"]:not(#nope):not(#nope):not(#nope) {
  background: linear-gradient(180deg, #6B26C9 0%, #5B21B6 50%, #4C1D95 100%) !important;
  background-color: #5B21B6 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid #4C1D95 !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  width: 100% !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(91,33,182,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
}