/* PesaLabs — Palantir Unified Dark Theme + Enhanced Data Visibility */

/* ═══ OVERRIDE ROOT VARIABLES — Dark Mode ═══ */
:root {
  --canvas:    #0D1117 !important;
  --surface:   #161B22 !important;
  --surface2:  #1C2128 !important;
  --surface3:  #21262D !important;
  --surface4:  #2D333B !important;
  --line:      rgba(255,255,255,.08) !important;
  --line2:     rgba(255,255,255,.12) !important;
  --line3:     rgba(255,255,255,.18) !important;
  --ink:       #F0F6FC !important;
  --ink2:      #D2DCE6 !important;
  --ink3:      #9EAAB6 !important;
  --ink-mid:   #9EAAB6 !important;
  --muted:     rgba(255,255,255,.40) !important;
  --accent:    #818CF8 !important;
  --accent2:   #A5B4FC !important;
  --accent-lt: rgba(99,102,241,.15) !important;
  --accent-bg: rgba(99,102,241,.08) !important;
  --teal:      #22D3EE !important;
  --rose:      #F87171 !important;
  --gold:      #FFC940 !important;
  --violet:    #A78BFA !important;
  --sh-xs:     0 1px 3px rgba(0,0,0,.3) !important;
  --sh-sm:     0 2px 8px rgba(0,0,0,.3) !important;
  --sh-md:     0 4px 16px rgba(0,0,0,.4) !important;
}

body { background: #0D1117 !important; color: #F0F6FC !important; }
.main-panel { background: #0D1117 !important; }

/* ═══ CARDS ═══ */
.dlp-card {
  background: #161B22 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #F0F6FC !important;
}
.dlp-card:hover {
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  transform: none !important;
}

.card-hdr {
  color: #9EAAB6 !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* ═══ KPI BOXES ═══ */
.kpi-box {
  background: #161B22 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
}
.kpi-box::before, .kpi-box::after { display: none !important; }
.kpi-box:hover { border-color: rgba(255,255,255,.12) !important; transform: none !important; }
.kpi-val {
  color: #F0F6FC !important;
  font-variant-numeric: tabular-nums !important;
  font-family: "IBM Plex Mono", "Inter", monospace !important;
}
.kv-teal { color: #2EE6D6 !important; }
.kv-rose { color: #FF8585 !important; }
.kpi-lbl { color: rgba(255,255,255,.45) !important; }

/* ═══ CONTROL CARDS ═══ */
.ctrl-card {
  background: #161B22 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #F0F6FC !important;
}

/* ═══ TABLES — HIGH VISIBILITY ═══ */
table.dataTable {
  background: transparent !important;
  color: #D2DCE6 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.dataTable thead th {
  background: #1C2128 !important;
  color: #9EAAB6 !important;
  border-bottom: 2px solid rgba(255,255,255,.10) !important;
  font-size: .70rem !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
}
table.dataTable tbody td {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  color: #D2DCE6 !important;
  font-size: .80rem !important;
  font-variant-numeric: tabular-nums !important;
  padding: 9px 12px !important;
}
/* Alternating rows for readability */
table.dataTable tbody tr:nth-child(odd) td {
  background: #161B22 !important;
}
table.dataTable tbody tr:nth-child(even) td {
  background: #1A1F28 !important;
}
table.dataTable tbody tr:hover td {
  background: rgba(99,102,241,.10) !important;
}
/* Selected row */
table.dataTable tbody tr.selected td {
  background: rgba(99,102,241,.18) !important;
  color: #F0F6FC !important;
}
/* DataTables controls */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: #9EAAB6 !important; font-size: .75rem !important; }
.dataTables_wrapper .dataTables_filter input {
  background: #21262D !important; color: #F0F6FC !important;
  border: 1px solid rgba(255,255,255,.12) !important; border-radius: 6px !important;
  padding: 5px 10px !important;
}
.dataTables_wrapper .dataTables_length select {
  background: #21262D !important; color: #F0F6FC !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #9EAAB6 !important; background: transparent !important;
  border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #21262D !important; color: #F0F6FC !important;
  border-color: rgba(255,255,255,.10) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(99,102,241,.18) !important; color: #A5B4FC !important;
  border-color: rgba(99,102,241,.30) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: rgba(255,255,255,.20) !important;
}
/* DT buttons (CSV, Excel, PDF) */
.dt-buttons .dt-button {
  background: #21262D !important; color: #D2DCE6 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 5px !important; font-size: .72rem !important;
}
.dt-buttons .dt-button:hover {
  background: #2D333B !important; color: #F0F6FC !important;
}

/* ═══ PLOTLY CHARTS — BRIGHT & READABLE ═══ */
.js-plotly-plot .main-svg { background: transparent !important; }

/* Override plotly text colors for dark bg */
.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text {
  fill: #9EAAB6 !important;
}
.js-plotly-plot .gtitle {
  fill: #D2DCE6 !important;
}
.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle {
  fill: #9EAAB6 !important;
}
/* Gridlines */
.js-plotly-plot .xgrid line,
.js-plotly-plot .ygrid line {
  stroke: rgba(255,255,255,.06) !important;
}
.js-plotly-plot .zerolinelayer line {
  stroke: rgba(255,255,255,.10) !important;
}
/* Legend */
.js-plotly-plot .legend text {
  fill: #D2DCE6 !important;
}
.js-plotly-plot .legend rect {
  fill: transparent !important;
  stroke: transparent !important;
}
/* Hover tooltip */
.js-plotly-plot .hoverlayer .hovertext rect {
  fill: rgba(13,17,23,.95) !important;
  stroke: rgba(99,102,241,.40) !important;
  stroke-width: 1px !important;
  rx: 6px !important;
}
.js-plotly-plot .hoverlayer .hovertext text {
  fill: #F0F6FC !important;
}
/* Range slider */
.js-plotly-plot .rangeslider-container {
  background: #161B22 !important;
}

/* ═══ FORM INPUTS ═══ */
.form-control, .selectize-input {
  background: #21262D !important;
  color: #F0F6FC !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 6px !important;
  font-size: .82rem !important;
}
.form-control:focus, .selectize-input.focus {
  border-color: rgba(99,102,241,.50) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.15) !important;
}
.selectize-dropdown {
  background: #21262D !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #F0F6FC !important;
}
.selectize-dropdown .option { color: #D2DCE6 !important; }
.selectize-dropdown .option:hover, .selectize-dropdown .active {
  background: rgba(99,102,241,.12) !important; color: #F0F6FC !important;
}
label { color: #9EAAB6 !important; }
.shiny-input-container label { color: #9EAAB6 !important; }

/* Checkboxes and radios */
.checkbox label, .radio label { color: #D2DCE6 !important; }

/* Slider inputs */
.irs--shiny .irs-bar { background: #6366F1 !important; border-color: #6366F1 !important; }
.irs--shiny .irs-handle { border-color: #6366F1 !important; background: #F0F6FC !important; }
.irs--shiny .irs-line { background: #21262D !important; }
.irs--shiny .irs-min, .irs--shiny .irs-max { color: #9EAAB6 !important; background: #21262D !important; }
.irs--shiny .irs-single { background: #6366F1 !important; color: #FFFFFF !important; }
.irs--shiny .irs-grid-text { color: #9EAAB6 !important; }

/* ═══ BUTTONS ═══ */
.btn-primary {
  background: #6366F1 !important;
  border-color: #6366F1 !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}
.btn-primary:hover { background: #818CF8 !important; border-color: #818CF8 !important; }
.btn-default {
  background: #21262D !important;
  color: #D2DCE6 !important;
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 6px !important;
}
.btn-default:hover { background: #2D333B !important; color: #F0F6FC !important; }
.btn-success { background: #0D9668 !important; border-color: #0D9668 !important; }
.btn-danger { background: #DC2626 !important; border-color: #DC2626 !important; }
.btn-warning { background: #D97706 !important; border-color: #D97706 !important; color: #FFF !important; }
.btn-info { background: #0891B2 !important; border-color: #0891B2 !important; }

/* ═══ PAGE ELEMENTS ═══ */
.page-header { color: #F0F6FC !important; }
.page-header-sub { color: #9EAAB6 !important; }
.upload-zone { background: #161B22 !important; border-color: rgba(255,255,255,.10) !important; }
.pesalabs-topbar-user {
  background: #0D1117 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: #D2DCE6 !important;
}

/* Tabs */
.nav-tabs { border-bottom-color: rgba(255,255,255,.08) !important; }
.nav-tabs > li > a { color: #9EAAB6 !important; background: transparent !important; }
.nav-tabs > li > a:hover { color: #F0F6FC !important; background: rgba(255,255,255,.04) !important; border-color: transparent !important; }
.nav-tabs > li.active > a {
  color: #F0F6FC !important; background: #161B22 !important;
  border-color: rgba(255,255,255,.08) !important; border-bottom-color: #161B22 !important;
}
.well { background: #161B22 !important; border: 1px solid rgba(255,255,255,.08) !important; color: #D2DCE6 !important; }
.panel { background: #161B22 !important; border-color: rgba(255,255,255,.08) !important; }
.panel-heading { background: #1C2128 !important; color: #D2DCE6 !important; border-color: rgba(255,255,255,.08) !important; }

/* Grids */
.grid-2, .grid-3, .grid-4 { gap: 16px !important; }

/* Scrollbar */
.main-panel::-webkit-scrollbar-track { background: transparent !important; }
.main-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12) !important; }

/* Modal dark */
.modal-content { background: #161B22 !important; color: #D2DCE6 !important; border: 1px solid rgba(255,255,255,.10) !important; }
.modal-header { border-bottom-color: rgba(255,255,255,.08) !important; }
.modal-footer { border-top-color: rgba(255,255,255,.08) !important; }

/* Skeleton shimmer */
.skeleton-shimmer {
  background: linear-gradient(90deg, #161B22 25%, #21262D 50%, #161B22 75%) !important;
}

/* Text areas and code */
textarea.form-control { background: #1C2128 !important; color: #F0F6FC !important; }
pre, code { background: #1C2128 !important; color: #D2DCE6 !important; border-color: rgba(255,255,255,.08) !important; }

/* HR lines */
hr { border-color: rgba(255,255,255,.08) !important; }

/* Alert boxes */
.alert-info { background: rgba(8,145,178,.15) !important; color: #22D3EE !important; border-color: rgba(8,145,178,.25) !important; }
.alert-success { background: rgba(13,150,104,.15) !important; color: #34D399 !important; border-color: rgba(13,150,104,.25) !important; }
.alert-warning { background: rgba(217,119,6,.15) !important; color: #FFC940 !important; border-color: rgba(217,119,6,.25) !important; }
.alert-danger { background: rgba(220,38,38,.15) !important; color: #F87171 !important; border-color: rgba(220,38,38,.25) !important; }

/* File input button */
.btn-file { background: #21262D !important; color: #D2DCE6 !important; border-color: rgba(255,255,255,.12) !important; }
.form-control[type="file"] { background: #21262D !important; color: #D2DCE6 !important; }

/* Progress bar */
.progress { background: #21262D !important; }
.progress-bar { background: #6366F1 !important; }


/* ═══ KPI STRIP — COMPACT, NO OVERFLOW ═══ */
.kpi-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.kpi-box {
  padding: 12px 14px !important;
  min-width: 0 !important;
  flex: 1 1 140px !important;
  overflow: hidden !important;
}
.kpi-val {
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.kpi-lbl {
  font-size: .62rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 3px !important;
}

/* Finance Dashboard KPIs */
.plt-kpi-val {
  font-size: 1.15rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.plt-kpi-lbl {
  font-size: .58rem !important;
  white-space: nowrap !important;
}
.plt-kpi {
  padding: 10px 12px !important;
  overflow: hidden !important;
}


/* ═══ LANDING PAGE — DATA-FIRST, MINIMAL HERO ═══ */
/* Shrink hero to contextual header */
.plt-hero {
  padding: 16px 32px 12px !important;
}
.plt-hero h1 {
  font-size: 20px !important;
  margin-bottom: 4px !important;
}
.plt-hero-sub {
  font-size: 12px !important;
  margin-bottom: 10px !important;
  max-width: 600px !important;
  line-height: 1.4 !important;
}
.plt-model-tags {
  gap: 4px !important;
}
.plt-mtag {
  font-size: 8px !important;
  padding: 2px 7px !important;
}

/* Remove the radial glow */
.plt-hero::before {
  display: none !important;
}

/* Tighten header bar */
.plt-header {
  padding: 10px 32px !important;
}

/* Tighten KPI strip */
.plt-kpi-strip {
  margin: 0 32px 16px !important;
}

/* Tighten chart grid */
.plt-grid {
  padding: 0 32px 12px !important;
  gap: 12px !important;
}
.plt-card {
  padding: 16px !important;
}


/* ═══ SLIDER VALUE BUBBLE — visible on dark theme ═══ */
.irs--shiny .irs-single {
  background: #6366F1 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}
.irs--shiny .irs-single:before {
  border-top-color: #6366F1 !important;
}
.irs--shiny .irs-from,
.irs--shiny .irs-to {
  background: #6366F1 !important;
  color: #FFFFFF !important;
}
.irs--shiny .irs-from:before,
.irs--shiny .irs-to:before {
  border-top-color: #6366F1 !important;
}

/* ═══ SHINY NOTIFICATIONS — visible on dark theme ═══ */
.shiny-notification {
  background: #161B22 !important;
  color: #F0F6FC !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
}
.shiny-notification-message {
  background: #161B22 !important;
  color: #F0F6FC !important;
  border-left: 4px solid #4ADE80 !important;
}
.shiny-notification-warning {
  background: #161B22 !important;
  color: #F0F6FC !important;
  border-left: 4px solid #FFC940 !important;
}
.shiny-notification-error {
  background: #161B22 !important;
  color: #F0F6FC !important;
  border-left: 4px solid #F87171 !important;
}
.shiny-notification .progress-bar {
  background: #6366F1 !important;
}
.shiny-notification .progress {
  background: #21262D !important;
}
.shiny-notification-close {
  color: #8B949E !important;
}
.shiny-notification-close:hover {
  color: #F0F6FC !important;
}
.shiny-notification-content-action a {
  color: #A5B4FC !important;
}