/* ============================================================
   ASBS STATE DATA HUB — Superset Premium Theme
   World-Class UI/UX matching sdh.central.abiastatistics.com
   Abia State Bureau of Statistics — June 2026
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ────────────────────────────────────── */
:root {
  --g:     #00562E;
  --gd:    #003820;
  --gl:    #1A7A46;
  --gold:  #C8962A;
  --gldt:  #DBA83B;
  --red:   #B8292F;
  --ink:   #0C1117;
  --navy:  #151E2D;
  --slate: #1E2532;
  --mist:  #F5F7F4;
  --dust:  #EAECe8;
  --mid:   #6B7280;
  --lgt:   #9CA3AF;
  --bdr:   #E5E7EB;
  --wh:    #FFFFFF;
  --sh:    0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  --shm:   0 8px 32px rgba(0,0,0,.10);
  --shl:   0 24px 64px rgba(0,0,0,.14);
}

/* ══════════════════════════════════════════════════════════
   1. GLOBAL BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }

html, body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background: var(--mist) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  line-height: 1.6 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
}

a { color: var(--g) !important; text-decoration: none !important; }
a:hover { color: var(--gl) !important; }

/* ══════════════════════════════════════════════════════════
   2. LOGIN PAGE — Full redesign
══════════════════════════════════════════════════════════ */

/* Background */
body.login-page,
body[class*="login"],
.login {
  background: linear-gradient(145deg, var(--gd) 0%, var(--g) 55%, var(--gl) 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Login card */
.login-container,
.login .panel,
.login .panel-default {
  background: var(--wh) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.3) !important;
  padding: 3rem 2.5rem 2.5rem !important;
  width: 100% !important;
  max-width: 420px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Gold top border accent on login card */
.login-container::before,
.login .panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--g), var(--gold), var(--g)) !important;
}

/* Login logo */
.login-container img,
.login img.img-responsive {
  height: 52px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto 1.5rem !important;
  object-fit: contain !important;
}

/* Login title */
.login h3, .login h4,
.login-container h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-align: center !important;
  margin-bottom: .35rem !important;
}

.login .lead, .login p.text-muted,
.login-container .text-muted {
  text-align: center !important;
  font-size: .84rem !important;
  color: var(--mid) !important;
  margin-bottom: 1.75rem !important;
}

/* Login form fields */
.login .form-control,
.login-container .form-control {
  border: 1.5px solid var(--bdr) !important;
  border-radius: 8px !important;
  height: 44px !important;
  font-size: .9rem !important;
  padding: .6rem 1rem !important;
  transition: border-color .18s, box-shadow .18s !important;
  background: var(--wh) !important;
}
.login .form-control:focus,
.login-container .form-control:focus {
  border-color: var(--g) !important;
  box-shadow: 0 0 0 3px rgba(0,86,46,.1) !important;
  outline: none !important;
}

/* Login button */
.login .btn-primary,
.login-container .btn-primary {
  width: 100% !important;
  height: 46px !important;
  background: var(--g) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: var(--wh) !important;
  transition: all .2s !important;
  margin-top: .5rem !important;
}
.login .btn-primary:hover,
.login-container .btn-primary:hover {
  background: var(--gl) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,86,46,.35) !important;
}

/* Login footer text */
.login-container .text-center,
.login .text-center {
  font-size: .78rem !important;
  color: var(--mid) !important;
  margin-top: 1.25rem !important;
}

/* ══════════════════════════════════════════════════════════
   3. TOP NAVIGATION BAR
══════════════════════════════════════════════════════════ */

.navbar,
.navbar-default,
nav.navbar,
[class*="HeaderWithLogo"],
[class*="NavBar"],
[class*="Navbar"] {
  background: var(--gd) !important;
  border: none !important;
  border-bottom: 3px solid var(--gold) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.25) !important;
  padding: 0 1.5rem !important;
  height: 56px !important;
  min-height: 56px !important;
}

/* Brand / Logo in navbar */
.navbar-brand,
.navbar-brand img,
[class*="NavbarBrand"],
[class*="logo"] {
  color: var(--wh) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: 0 !important;
  height: 56px !important;
  line-height: 56px !important;
}
.navbar-brand img {
  height: 36px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: .92 !important;
}

/* Nav links */
.navbar-nav > li > a,
[class*="NavItem"] a,
[class*="nav-link"],
.nav > li > a {
  color: rgba(255,255,255,.78) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  padding: 0 .9rem !important;
  line-height: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  transition: all .18s !important;
  border-bottom: 3px solid transparent !important;
}
.navbar-nav > li > a:hover,
[class*="NavItem"]:hover > a {
  color: var(--wh) !important;
  background: rgba(255,255,255,.08) !important;
  border-bottom-color: rgba(255,255,255,.3) !important;
}
.navbar-nav > li.active > a,
.navbar-nav > li > a.active,
[class*="active"] > a {
  color: var(--gldt) !important;
  background: rgba(200,150,42,.12) !important;
  border-bottom-color: var(--gold) !important;
  font-weight: 700 !important;
}

/* Search bar in navbar */
.navbar-form .form-control,
.navbar input[type="search"],
.navbar input[type="text"] {
  background: rgba(255,255,255,.1) !important;
  border: 1.5px solid rgba(255,255,255,.2) !important;
  border-radius: 7px !important;
  color: var(--wh) !important;
  font-size: .84rem !important;
  height: 36px !important;
  padding: .4rem .9rem !important;
  transition: all .18s !important;
}
.navbar input::placeholder { color: rgba(255,255,255,.45) !important; }
.navbar input:focus {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: none !important;
}

/* User dropdown in navbar */
.navbar .dropdown-menu {
  background: var(--wh) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  box-shadow: var(--shm) !important;
  padding: .5rem 0 !important;
  top: calc(100% + 6px) !important;
}
.navbar .dropdown-menu > li > a {
  color: var(--ink) !important;
  font-size: .84rem !important;
  padding: .5rem 1.25rem !important;
  transition: all .15s !important;
}
.navbar .dropdown-menu > li > a:hover {
  background: var(--mist) !important;
  color: var(--g) !important;
}

/* ══════════════════════════════════════════════════════════
   4. LEFT SIDEBAR
══════════════════════════════════════════════════════════ */

[class*="SideBar"],
[class*="MenuContent"],
[class*="LeftPanel"],
.ant-menu,
.menu,
.sidebar {
  background: var(--wh) !important;
  border-right: 1px solid var(--bdr) !important;
}

/* Menu items */
.ant-menu-item,
.ant-menu-submenu-title,
[class*="MenuItem"] {
  border-radius: 7px !important;
  margin: 2px 8px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
}

.ant-menu-item-selected,
.ant-menu-item-active,
[class*="MenuItem-active"],
[class*="MenuItemActive"] {
  background: rgba(0,86,46,.09) !important;
  color: var(--g) !important;
  font-weight: 600 !important;
}
.ant-menu-item-selected::after {
  border-right: 3px solid var(--g) !important;
}

.ant-menu-item:hover:not(.ant-menu-item-selected),
.ant-menu-submenu-title:hover {
  background: rgba(0,86,46,.05) !important;
  color: var(--g) !important;
}

.ant-menu-item a, .ant-menu-item span { color: inherit !important; }

/* Menu section titles */
.ant-menu-item-group-title,
[class*="MenuGroup"] {
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--lgt) !important;
  padding: .75rem 1.25rem .35rem !important;
}

/* ══════════════════════════════════════════════════════════
   5. MAIN CONTENT AREA
══════════════════════════════════════════════════════════ */

/* Page wrapper */
#app, [class*="App"],
[class*="ContentWrapper"],
[class*="MainContent"] {
  background: var(--mist) !important;
}

/* Page header */
[class*="PageHeader"],
[class*="SubMenu"],
.page-header {
  background: var(--wh) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: 1rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
}
[class*="PageHeader"] h1,
[class*="PageHeader"] h2,
[class*="PageHeader"] h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: .5rem 0 !important;
  margin: 0 !important;
  font-size: .8rem !important;
}
.breadcrumb > li + li::before { color: var(--lgt) !important; }
.breadcrumb > li.active { color: var(--g) !important; font-weight: 600 !important; }
.breadcrumb a { color: var(--mid) !important; }
.breadcrumb a:hover { color: var(--g) !important; }

/* ══════════════════════════════════════════════════════════
   6. CARDS & PANELS
══════════════════════════════════════════════════════════ */

.card, .panel, .panel-default,
[class*="Card"],
[class*="DashboardCard"],
[class*="ChartHolder"],
[class*="SliceContainer"],
[class*="Slice"] {
  background: var(--wh) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
  box-shadow: var(--sh) !important;
  transition: box-shadow .22s, transform .22s !important;
  overflow: hidden !important;
}

.card:hover,
[class*="DashboardCard"]:hover,
[class*="ChartHolder"]:hover {
  box-shadow: var(--shm) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(0,86,46,.15) !important;
}

/* Card / Panel header */
.panel-heading,
.card-header,
[class*="CardHeader"],
[class*="PanelHeader"] {
  background: var(--mist) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: .75rem 1.25rem !important;
  border-radius: 12px 12px 0 0 !important;
}

.panel-title, .card-title,
[class*="CardTitle"] {
  font-family: 'Inter', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--mid) !important;
}

/* Panel body */
.panel-body, .card-body {
  padding: 1.25rem !important;
}

/* ══════════════════════════════════════════════════════════
   7. DASHBOARD GRID
══════════════════════════════════════════════════════════ */

[class*="dragdroppable"],
[class*="DashboardWrapper"],
[class*="DashboardGrid"] {
  background: var(--mist) !important;
  padding: 1.5rem !important;
}

/* Chart/slice in dashboard */
.chart-slice,
[class*="ChartSlice"],
[class*="slice_"] {
  background: var(--wh) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 12px !important;
  box-shadow: var(--sh) !important;
  overflow: hidden !important;
}

/* Dashboard header */
[class*="DashboardHeader"],
[class*="DashboardHeaderLeft"],
[class*="DashboardComponent_header"] {
  background: var(--wh) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: 1rem 1.5rem !important;
}

/* Dashboard title */
[class*="DashboardTitle"],
.dashboard-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* ══════════════════════════════════════════════════════════
   8. BUTTONS
══════════════════════════════════════════════════════════ */

/* Primary */
.btn-primary,
.ant-btn-primary,
[class*="Button"][class*="primary"],
button[type="submit"].btn {
  background: var(--g) !important;
  border-color: var(--g) !important;
  color: var(--wh) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  height: 38px !important;
  padding: 0 1.25rem !important;
  transition: all .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  font-size: .84rem !important;
}
.btn-primary:hover, .ant-btn-primary:hover {
  background: var(--gl) !important;
  border-color: var(--gl) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,86,46,.3) !important;
}

/* Secondary / default */
.btn-default, .btn-secondary,
.ant-btn-default,
.ant-btn:not([class*="primary"]):not([class*="danger"]):not([class*="link"]) {
  background: var(--wh) !important;
  border: 1.5px solid var(--bdr) !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  border-radius: 7px !important;
  height: 38px !important;
  font-size: .84rem !important;
  transition: all .18s !important;
}
.btn-default:hover, .btn-secondary:hover, .ant-btn-default:hover {
  border-color: var(--g) !important;
  color: var(--g) !important;
  box-shadow: none !important;
}

/* Danger */
.btn-danger, .ant-btn-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: var(--wh) !important;
  border-radius: 7px !important;
  height: 38px !important;
}

/* Icon buttons */
.btn-link, .ant-btn-link {
  color: var(--g) !important;
}
.btn-link:hover { color: var(--gl) !important; }

/* ══════════════════════════════════════════════════════════
   9. FORMS & INPUTS
══════════════════════════════════════════════════════════ */

.form-control,
.ant-input,
.ant-select-selector,
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
textarea,
select {
  border: 1.5px solid var(--bdr) !important;
  border-radius: 7px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .88rem !important;
  color: var(--ink) !important;
  background: var(--wh) !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.form-control:focus,
.ant-input:focus,
.ant-input-focused,
.ant-select-focused .ant-select-selector,
input:focus, textarea:focus {
  border-color: var(--g) !important;
  box-shadow: 0 0 0 3px rgba(0,86,46,.1) !important;
  outline: none !important;
}

label, .control-label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: .35rem !important;
  display: block !important;
}

.form-group { margin-bottom: 1.1rem !important; }

.input-group-addon {
  background: var(--mist) !important;
  border: 1.5px solid var(--bdr) !important;
  color: var(--mid) !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   10. TABLES
══════════════════════════════════════════════════════════ */

.table, table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  font-size: .84rem !important;
  width: 100% !important;
}

.table thead th, table thead th {
  background: var(--mist) !important;
  border-bottom: 2px solid var(--bdr) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: .75rem 1rem !important;
  white-space: nowrap !important;
}

.table tbody tr td {
  padding: .7rem 1rem !important;
  border-top: 1px solid var(--bdr) !important;
  vertical-align: middle !important;
  color: var(--ink) !important;
}

.table-hover tbody tr:hover td,
.table tbody tr:hover td {
  background: rgba(0,86,46,.04) !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
  background: rgba(245,247,244,.5) !important;
}

/* ══════════════════════════════════════════════════════════
   11. TAGS, LABELS, BADGES
══════════════════════════════════════════════════════════ */

.label, .badge,
[class*="Tag"],
[class*="Label"],
.ant-tag {
  font-family: 'Inter', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: .2rem .65rem !important;
  border-radius: 100px !important;
}

.label-default, .badge-default,
.ant-tag {
  background: rgba(0,86,46,.08) !important;
  color: var(--g) !important;
  border: 1px solid rgba(0,86,46,.2) !important;
}

.label-success { background: rgba(0,86,46,.08) !important; color: var(--g) !important; border: 1px solid rgba(0,86,46,.2) !important; }
.label-danger { background: rgba(184,41,47,.07) !important; color: var(--red) !important; border: 1px solid rgba(184,41,47,.2) !important; }
.label-warning { background: rgba(200,150,42,.1) !important; color: #92680f !important; border: 1px solid rgba(200,150,42,.25) !important; }
.label-info { background: rgba(59,130,246,.08) !important; color: #1d4ed8 !important; border: 1px solid rgba(59,130,246,.2) !important; }

/* ══════════════════════════════════════════════════════════
   12. MODALS & DIALOGS
══════════════════════════════════════════════════════════ */

.modal-content,
[class*="Modal"] > div,
.ant-modal-content {
  border-radius: 14px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.2) !important;
  border: none !important;
  overflow: hidden !important;
}

.modal-header,
[class*="ModalHeader"],
.ant-modal-header {
  background: var(--mist) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-title, .ant-modal-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.modal-footer, .ant-modal-footer {
  border-top: 1px solid var(--bdr) !important;
  padding: 1rem 1.5rem !important;
  background: var(--mist) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: .6rem !important;
}

.modal-body, .ant-modal-body {
  padding: 1.5rem !important;
}

/* Backdrop */
.modal-backdrop { background: var(--ink) !important; }

/* ══════════════════════════════════════════════════════════
   13. ALERTS & NOTIFICATIONS
══════════════════════════════════════════════════════════ */

.alert, [class*="Alert"] {
  border-radius: 8px !important;
  border-width: 1px !important;
  font-size: .88rem !important;
  padding: .85rem 1.1rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: .6rem !important;
}
.alert-success { background: rgba(0,86,46,.07) !important; border-color: rgba(0,86,46,.25) !important; color: var(--gd) !important; }
.alert-danger, .alert-error { background: rgba(184,41,47,.06) !important; border-color: rgba(184,41,47,.2) !important; }
.alert-warning { background: rgba(200,150,42,.07) !important; border-color: rgba(200,150,42,.22) !important; }
.alert-info { background: rgba(59,130,246,.06) !important; border-color: rgba(59,130,246,.2) !important; }

/* Toast notifications */
.ant-message-notice-content,
[class*="Toast"],
[class*="Notification"] {
  border-radius: 10px !important;
  box-shadow: var(--shm) !important;
  font-size: .88rem !important;
}

/* ══════════════════════════════════════════════════════════
   14. TABS
══════════════════════════════════════════════════════════ */

.nav-tabs {
  border-bottom: 2px solid var(--bdr) !important;
  margin-bottom: 1.25rem !important;
}
.nav-tabs > li > a {
  font-size: .84rem !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: .65rem 1rem !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all .18s !important;
}
.nav-tabs > li > a:hover { color: var(--g) !important; border-bottom-color: rgba(0,86,46,.3) !important; background: transparent !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
  color: var(--g) !important;
  border-bottom-color: var(--g) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* Ant Design tabs */
.ant-tabs-tab { font-size: .84rem !important; font-weight: 500 !important; }
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--g) !important; font-weight: 700 !important; }
.ant-tabs-ink-bar { background: var(--g) !important; }

/* ══════════════════════════════════════════════════════════
   15. DROPDOWNS
══════════════════════════════════════════════════════════ */

.dropdown-menu,
.ant-dropdown-menu,
[class*="DropdownMenu"] {
  background: var(--wh) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  box-shadow: var(--shm) !important;
  padding: .4rem 0 !important;
}

.dropdown-menu > li > a,
.ant-dropdown-menu-item,
[class*="DropdownMenuItem"] {
  font-size: .84rem !important;
  color: var(--ink) !important;
  padding: .5rem 1.1rem !important;
  transition: all .15s !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}
.dropdown-menu > li > a:hover,
.ant-dropdown-menu-item:hover {
  background: var(--mist) !important;
  color: var(--g) !important;
}

.dropdown-menu > li.divider,
.ant-dropdown-menu-item-divider {
  border-top: 1px solid var(--bdr) !important;
  margin: .35rem 0 !important;
}

/* ══════════════════════════════════════════════════════════
   16. ANT DESIGN COMPONENT OVERRIDES
══════════════════════════════════════════════════════════ */

/* Switch */
.ant-switch-checked { background-color: var(--g) !important; }

/* Checkbox */
.ant-checkbox-checked .ant-checkbox-inner { background-color: var(--g) !important; border-color: var(--g) !important; }

/* Radio */
.ant-radio-checked .ant-radio-inner { border-color: var(--g) !important; }
.ant-radio-inner::after { background: var(--g) !important; }

/* Progress bar */
.ant-progress-bg { background: var(--g) !important; }

/* Spin/loading */
.ant-spin-dot-item { background: var(--g) !important; }

/* Select */
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: rgba(0,86,46,.09) !important;
  color: var(--g) !important;
  font-weight: 600 !important;
}
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
  border-color: var(--g) !important;
  box-shadow: 0 0 0 2px rgba(0,86,46,.1) !important;
}

/* Tooltip */
.ant-tooltip-inner { border-radius: 6px !important; font-size: .8rem !important; }

/* Popover */
.ant-popover-inner { border-radius: 10px !important; box-shadow: var(--shm) !important; }

/* ══════════════════════════════════════════════════════════
   17. PAGINATION
══════════════════════════════════════════════════════════ */

.pagination > li > a, .pagination > li > span {
  border-color: var(--bdr) !important;
  color: var(--g) !important;
  border-radius: 7px !important;
  margin: 0 2px !important;
  font-size: .82rem !important;
  min-width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pagination > .active > a, .pagination > .active > span {
  background: var(--g) !important;
  border-color: var(--g) !important;
  color: var(--wh) !important;
  font-weight: 700 !important;
}
.pagination > li > a:hover { background: var(--mist) !important; border-color: var(--g) !important; }

/* ══════════════════════════════════════════════════════════
   18. EXPLORE / SQL LAB VIEW
══════════════════════════════════════════════════════════ */

[class*="ExploreViewContainer"],
[class*="SqlLabView"],
[class*="Explore"] {
  background: var(--mist) !important;
}

/* Chart controls */
[class*="ControlPanel"],
[class*="ControlRow"],
[class*="ChartControls"] {
  background: var(--wh) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 10px !important;
  padding: 1rem !important;
}

/* ══════════════════════════════════════════════════════════
   19. SCROLLBAR
══════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--lgt); }

/* ══════════════════════════════════════════════════════════
   20. WELCOME / HOME PAGE
══════════════════════════════════════════════════════════ */

[class*="Welcome"],
[class*="Home"],
[class*="Landing"],
[class*="EmptyState"] {
  background: var(--mist) !important;
}

/* Empty state */
[class*="EmptyState"] {
  border-radius: 14px !important;
  padding: 3rem 2rem !important;
  text-align: center !important;
  border: 2px dashed var(--bdr) !important;
  background: var(--wh) !important;
}
[class*="EmptyState"] h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: var(--ink) !important;
}
[class*="EmptyState"] p { color: var(--mid) !important; }

/* ══════════════════════════════════════════════════════════
   21. RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .navbar { height: auto !important; padding: .5rem 1rem !important; }
  .navbar-nav > li > a { height: auto !important; line-height: 1.4 !important; padding: .5rem .75rem !important; }
  .modal-dialog { margin: .5rem !important; }
}