/**
 * ISIO Advanced Client Targeting — Design System
 * Primary: White (#FFFFFF)
 * Brand Green: #00C878 (ISIO green)
 * Dark Green: #007A4D
 * Text Dark: #1A1A2E
 * Text Mid: #4A5568
 * Border: #E2E8F0
 * Background Light: #F7FAFC
 */

/* ── Root Variables ──────────────────────────────────────────────────────── */
:root {
  --isio-green:       #00C878;
  --isio-green-dark:  #007A4D;
  --isio-green-mid:   #00A86B;
  --isio-green-light: #E6FAF3;
  --isio-white:       #FFFFFF;
  --isio-bg:          #F7FAFC;
  --isio-bg-alt:      #EDF2F7;
  --isio-text:        #1A1A2E;
  --isio-text-mid:    #4A5568;
  --isio-text-light:  #718096;
  --isio-border:      #E2E8F0;
  --isio-shadow:      0 2px 12px rgba(0,200,120,0.10);
  --isio-shadow-lg:   0 8px 32px rgba(0,0,0,0.10);
  --isio-radius:      8px;
  --isio-radius-lg:   16px;
}

/* ── Body & Base ─────────────────────────────────────────────────────────── */
body {
  background: var(--isio-white) !important;
  color: var(--isio-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif !important;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.persistent-menu,
.navbar,
nav.navbar {
  background: var(--isio-white) !important;
  border-bottom: 2px solid var(--isio-green) !important;
  box-shadow: 0 2px 8px rgba(0,200,120,0.08) !important;
}

.persistent-menu .navbar-brand img,
.navbar-brand img {
  height: 36px !important;
  width: auto !important;
}

.persistent-menu .nav-link,
.navbar .nav-link {
  color: var(--isio-text) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.persistent-menu .nav-link:hover,
.persistent-menu .nav-link.active,
.navbar .nav-link:hover {
  color: var(--isio-green) !important;
  background: var(--isio-green-light) !important;
  border-radius: var(--isio-radius) !important;
}

/* ── Hero Section ────────────────────────────────────────────────────────── */
.hero-section,
section.hero-section,
.hero {
  background-image: url('/images/enplan-hero-banner.webp') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  min-height: 340px !important;
  display: flex !important;
  align-items: center !important;
}

.hero-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, rgba(0,120,70,0.82) 0%, rgba(0,200,120,0.45) 55%, rgba(0,0,0,0.05) 100%) !important;
  z-index: 0 !important;
}

.hero-section > * {
  position: relative !important;
  z-index: 1 !important;
}

.hero-content h1,
.hero-section h1,
.hero-title {
  color: var(--isio-white) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.hero-content p,
.hero-section p,
.hero-subtitle {
  color: rgba(255,255,255,0.92) !important;
}

/* Hero buttons */
.hero-btn,
.hero-section .btn {
  background: var(--isio-white) !important;
  color: var(--isio-green-dark) !important;
  border: 2px solid var(--isio-white) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 10px 22px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.hero-btn:hover,
.hero-section .btn:hover {
  background: var(--isio-green) !important;
  color: var(--isio-white) !important;
  border-color: var(--isio-green) !important;
}

/* ── Cards & Panels ──────────────────────────────────────────────────────── */
.card,
.scheme-card,
.company-card,
.info-panel {
  background: var(--isio-white) !important;
  border: 1px solid var(--isio-border) !important;
  border-radius: var(--isio-radius) !important;
  box-shadow: var(--isio-shadow) !important;
}

.card-header,
.panel-header {
  background: var(--isio-green-light) !important;
  border-bottom: 2px solid var(--isio-green) !important;
  color: var(--isio-text) !important;
  font-weight: 600 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary,
button.btn-primary {
  background: var(--isio-green) !important;
  border-color: var(--isio-green) !important;
  color: var(--isio-white) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--isio-green-dark) !important;
  border-color: var(--isio-green-dark) !important;
}

.btn-outline-primary,
button.btn-outline-primary {
  border-color: var(--isio-green) !important;
  color: var(--isio-green-dark) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--isio-green) !important;
  color: var(--isio-white) !important;
}

.btn-success,
button.btn-success {
  background: var(--isio-green) !important;
  border-color: var(--isio-green) !important;
}

/* ── Filter Bar ──────────────────────────────────────────────────────────── */
.compact-filter-bar,
.filter-bar {
  background: var(--isio-white) !important;
  border-bottom: 1px solid var(--isio-border) !important;
}

.compact-filter-btn,
.filter-btn {
  background: var(--isio-white) !important;
  border: 1px solid var(--isio-border) !important;
  color: var(--isio-text) !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.compact-filter-btn:hover,
.compact-filter-btn.active {
  background: var(--isio-green-light) !important;
  border-color: var(--isio-green) !important;
  color: var(--isio-green-dark) !important;
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
#map,
.leaflet-container {
  border: 1px solid var(--isio-border) !important;
  border-radius: var(--isio-radius) !important;
}

/* ── Propensity Score Badge ──────────────────────────────────────────────── */
.propensity-score,
.score-badge {
  background: var(--isio-green) !important;
  color: var(--isio-white) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.table thead th {
  background: var(--isio-green-light) !important;
  color: var(--isio-text) !important;
  border-bottom: 2px solid var(--isio-green) !important;
  font-weight: 600 !important;
}

.table tbody tr:hover {
  background: var(--isio-green-light) !important;
}

/* ── Sidebar / Detail Panel ──────────────────────────────────────────────── */
.detail-panel,
.scheme-detail,
.side-panel {
  background: var(--isio-white) !important;
  border-left: 3px solid var(--isio-green) !important;
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-header {
  background: var(--isio-green) !important;
  color: var(--isio-white) !important;
  border-bottom: none !important;
}

.modal-header .btn-close {
  filter: invert(1) !important;
}

.modal-title {
  color: var(--isio-white) !important;
  font-weight: 700 !important;
}

/* ── Login Screen ────────────────────────────────────────────────────────── */
.login-container,
.act-login-container,
#loginOverlay {
  background: linear-gradient(135deg, #007A4D 0%, #00C878 60%, #E6FAF3 100%) !important;
}

.login-card,
.act-login-card {
  background: var(--isio-white) !important;
  border-radius: var(--isio-radius-lg) !important;
  box-shadow: var(--isio-shadow-lg) !important;
  border-top: 4px solid var(--isio-green) !important;
}

.login-logo,
.act-login-logo {
  max-width: 160px !important;
  height: auto !important;
}

/* ── Agents Section ──────────────────────────────────────────────────────── */
.agents-section,
.agents-grid {
  background: var(--isio-bg) !important;
}

.agent-card {
  background: var(--isio-white) !important;
  border: 1px solid var(--isio-border) !important;
  border-radius: var(--isio-radius) !important;
  transition: all 0.2s ease !important;
}

.agent-card:hover {
  border-color: var(--isio-green) !important;
  box-shadow: 0 4px 16px rgba(0,200,120,0.15) !important;
  transform: translateY(-2px) !important;
}

/* ── Propensity Modal Table ──────────────────────────────────────────────── */
.propensity-factors-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.propensity-factors-table th {
  background: var(--isio-green) !important;
  color: var(--isio-white) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
}

.propensity-factors-table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--isio-border) !important;
  vertical-align: top !important;
}

.propensity-factors-table tr:hover td {
  background: var(--isio-green-light) !important;
}

.factor-name { font-weight: 600 !important; color: var(--isio-green-dark) !important; }
.factor-weight { font-weight: 700 !important; color: var(--isio-green) !important; }

/* ── Propensity Alert ────────────────────────────────────────────────────── */
.propensity-alert {
  padding: 14px 18px !important;
  border-radius: var(--isio-radius) !important;
  margin: 12px 0 !important;
}

.propensity-alert-info {
  background: var(--isio-green-light) !important;
  border-left: 4px solid var(--isio-green) !important;
  color: var(--isio-text) !important;
}

/* ── Explain Propensity Button ───────────────────────────────────────────── */
.explain-propensity-floating-btn {
  background: var(--isio-green) !important;
  color: var(--isio-white) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(0,200,120,0.3) !important;
  transition: all 0.2s ease !important;
}

.explain-propensity-floating-btn:hover {
  background: var(--isio-green-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,200,120,0.4) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--isio-bg); }
::-webkit-scrollbar-thumb { background: var(--isio-green); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--isio-green-dark); }

/* ── Hide Aptia-specific elements not relevant to ISIO ───────────────────── */
a[href*="diagnostic-reports"],
a[href*="news-archive"],
#salespro-btn {
  display: none !important;
}