/* SAP Fiori Quartz Light — vibrant navy → plum → teal hero, magenta primary */
:root {
  --primary:           #BA066C;
  --primary-dark:      #8E0454;
  --primary-light:     #FBE3F0;
  --primary-50:        #FDF1F7;
  --primary-100:       #FBE3F0;
  --primary-500:       #BA066C;
  --primary-600:       #8E0454;
  --primary-700:       #5E0237;
  --accent:            #14B8A6;
  --accent-dark:       #0F766E;

  --hero-from:         #1B2238;
  --hero-via:          #4A1B5E;
  --hero-to:           #14B8B0;

  --topbar-bg:         #354A5F;
  --topbar-fg:         #FFFFFF;

  --success:           #107E3E;  --success-light:     #E4F1E4;
  --warning:           #B7791F;  --warning-light:     #FCEFC7;
  --danger:            #BB0000;  --danger-light:      #FFE5E5;
  --info:              #14B8A6;  --info-light:        #CCFBF1;

  --surface:           #FFFFFF;
  --surface-card:      #FFFFFF;
  --surface-alt:       #F7F7F7;
  --surface-canvas:    #EFEFEF;
  --background:        #EFEFEF;
  --bg-secondary:      #F7F7F7;
  --card-bg:           #FFFFFF;

  --text-primary:      #32363A;
  --text-secondary:    #6A6D70;
  --text-tertiary:     #89919A;
  --text-on-primary:   #FFFFFF;
  --text-on-hero:      #FFFFFF;
  --text-link:         #BA066C;

  --border-color:      #D9D9D9;
  --border-strong:     #B3B3B3;
  --border-subtle:     #EAEAEA;

  --gray-50:#F7F7F7; --gray-100:#EFEFEF; --gray-200:#D9D9D9; --gray-300:#B3B3B3;
  --gray-400:#898C8E; --gray-500:#6A6D70; --gray-600:#555555; --gray-700:#32363A;
  --gray-800:#22272A; --gray-900:#16191C;

  --chart-1:#BA066C; --chart-2:#4A1B5E; --chart-3:#14B8A6; --chart-4:#B7791F;
  --chart-5:#1B2238; --chart-6:#525DF4; --chart-7:#19A979;

  --shadow-sm: 0 1px 2px rgba(50,54,58,.06);
  --shadow-md: 0 2px 6px rgba(50,54,58,.09);
  --shadow-lg: 0 6px 16px rgba(50,54,58,.12);
}

/* Hero gradient */
.case-banner, .case-hero, .uw-hero,
[class*="case-banner"], [class*="uw-hero"],
[class*="hero-dark"], [class*="banner-dark"],
.dark-hero, .dark-banner,
.detail-header, [class*="detail-header"], [class*="page-hero"],
.application-header, .loan-header, .case-header {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-via) 55%, var(--hero-to) 100%) !important;
  color: var(--text-on-hero) !important;
  border-radius: 12px;
}
.case-banner *, .case-hero *, .uw-hero *,
[class*="case-banner"] *, [class*="uw-hero"] *,
[class*="hero-dark"] *, [class*="banner-dark"] *,
.dark-hero *, .dark-banner *,
.detail-header *, [class*="detail-header"] *, [class*="page-hero"] *,
.application-header *, .loan-header *, .case-header * {
  color: var(--text-on-hero) !important;
}
.case-banner .material-icons, .case-hero .material-icons, .uw-hero .material-icons,
[class*="banner"] .material-icons, [class*="hero"] .material-icons {
  color: rgba(255,255,255,.96) !important; opacity: 1 !important;
}

/* Top app bar */
.app-bar, header.app-bar, header[class*="top"], [class*="topbar"], [class*="appbar"] {
  background: var(--topbar-bg) !important;
  color: var(--topbar-fg) !important;
  border-bottom: 1px solid #1F2A36;
}
.app-bar *, header.app-bar *, [class*="topbar"] *, [class*="appbar"] * {
  color: var(--topbar-fg) !important;
}

/* ==================== SIDEBAR — light Fiori Quartz Light ==================== */
aside, .sidebar, [class*="sidebar"], nav[class*="side"] {
  background: #FFFFFF !important;
  border-right: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
aside *, .sidebar *, [class*="sidebar"] *, nav[class*="side"] * {
  color: var(--text-primary) !important;
}
/* Sidebar logo top — mini hero gradient strip */
aside h1, aside .logo, .sidebar h1, .sidebar .logo,
aside [class*="brand"], .sidebar [class*="brand"] {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-via) 60%, var(--hero-to) 100%) !important;
  color: #FFFFFF !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
aside h1 *, aside .logo *, .sidebar h1 *, .sidebar .logo *,
aside [class*="brand"] *, .sidebar [class*="brand"] * {
  color: #FFFFFF !important;
}
/* Section dividers (MAIN, LOAN LIFECYCLE, etc) */
aside [class*="section"], .sidebar [class*="section"],
aside .nav-section, .sidebar .nav-section,
aside small, .sidebar small {
  color: var(--text-tertiary) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 16px 20px 6px !important;
  display: block;
}
/* Sidebar links */
aside a, .sidebar a, aside [role="link"], .sidebar [role="link"],
aside .nav-item, .sidebar .nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 20px !important;
  color: var(--text-secondary) !important;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: all 0.15s ease;
}
aside a:hover, .sidebar a:hover, aside .nav-item:hover, .sidebar .nav-item:hover {
  background: var(--primary-50) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary-light);
}
aside a:hover *, .sidebar a:hover *, aside .nav-item:hover *, .sidebar .nav-item:hover * {
  color: var(--primary) !important;
}
/* Active state */
aside .nav-active, aside [class*="active"]:not(button),
.sidebar .active, .sidebar [class*="active"]:not(button),
aside a.active, aside [aria-current="page"], aside a[aria-current="page"],
.sidebar a.active, .sidebar [aria-current="page"] {
  background: linear-gradient(90deg, var(--primary-50) 0%, transparent 100%) !important;
  color: var(--primary) !important;
  border-left: 3px solid var(--primary) !important;
  font-weight: 700 !important;
}
aside .nav-active *, aside [class*="active"]:not(button) *,
.sidebar .active *, .sidebar [class*="active"]:not(button) *,
aside a.active *, aside [aria-current="page"] *,
.sidebar a.active *, .sidebar [aria-current="page"] * {
  color: var(--primary) !important;
}
/* Sidebar icons */
aside .material-icons, .sidebar .material-icons,
aside svg, .sidebar svg {
  color: inherit;
  opacity: 0.85;
}
aside a.active .material-icons, aside [aria-current="page"] .material-icons,
aside a.active svg, aside [aria-current="page"] svg,
.sidebar .active .material-icons, .sidebar [aria-current="page"] .material-icons {
  color: var(--primary) !important;
  opacity: 1;
}

/* Buttons */
.btn-primary, button.btn-primary, button[class*="primary"]:not([class*="topbar"] *) {
  background-color: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn-primary:hover, button.btn-primary:hover, button[class*="primary"]:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-outline, button.btn-outline {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  background: var(--surface);
  border-radius: 6px;
  padding: 9px 18px;
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
}

/* Cards */
.card, [class*="-card"]:not([class*="kpi"]) {
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.kpi-card, [class*="kpi-card"] {
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  background: var(--surface-card);
  border-left: 4px solid var(--primary);
  transition: all 0.15s ease;
}
.kpi-card:hover, [class*="kpi-card"]:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Chips */
.chip, .badge, .pill, [class*="chip"], [class*="pill"], [class*="badge"] {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.risk-low, .badge-active, .status-active, .status-Active,
.badge-approved, .status-approved, .status-Approved,
[class*="badge"][class*="success"], [class*="badge"][class*="active"] {
  background: var(--success-light) !important;
  color: var(--success) !important;
}
.risk-medium, .badge-pending, .status-pending, .status-Pending,
.badge-warning, [class*="badge"][class*="warn"] {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
}
.risk-high, .risk-very_high, .risk-very,
.badge-rejected, .status-rejected, .status-Rejected,
[class*="badge"][class*="danger"], [class*="badge"][class*="error"] {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
}
.badge-info, [class*="badge"][class*="info"] {
  background: var(--info-light) !important;
  color: var(--info) !important;
}

/* Tables */
table thead th {
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table tbody tr:hover { background: var(--primary-50); }

/* Tabs */
.tab.active, [class*="tab"][class*="active"] {
  border-bottom: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 600;
}

/* Inputs */
input, select, textarea {
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  outline: 2px solid var(--primary-light);
  outline-offset: -1px;
}

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: "72", "72full", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark mode */
[data-theme="dark"], .dark, html[data-theme="dark"] {
  --surface: #1C2228; --surface-card: #21272D; --surface-alt: #2B3239;
  --surface-canvas: #14191D; --background: #14191D; --bg-secondary: #2B3239;
  --card-bg: #21272D;
  --text-primary: #FAFAFA; --text-secondary: #C2C5C9; --text-tertiary: #8C9097;
  --border-color: #3A4047; --border-strong: #4A5159;
}
[data-theme="dark"] aside, [data-theme="dark"] .sidebar {
  background: #1C2228 !important;
  border-right-color: #3A4047;
}
[data-theme="dark"] aside *, [data-theme="dark"] .sidebar * {
  color: #C2C5C9 !important;
}