/* qLocal Geomarketing Demo Styles */
:root{
  --bg:#0b0e14;          /* slightly warmer dark */
  --panel:#101522;       /* card base */
  --panel-2:#0d1220;     /* header/footer */
  --text:#e6e9f2;        /* high contrast text */
  --muted:#9aa6b2;       /* muted labels */
  --primary:#57a3ff;     /* ActLocal blue */
  --primary-600:#367fe0;
  --primary-300:#a8c9ff;
  --success:#1fd286;
  --warning:#f8b53a;
  --danger:#fa4a6f;
  --radius:14px;
  --elev: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  --elev-hover: 0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Light mode disabled */

html,body{height:100%;}
html{ scroll-behavior: smooth; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  accent-color: var(--primary);
}

.app-header{
  position: sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(8px);
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark{
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--success));
  color: white; font-weight: 800; font-size: 1.1rem;
}
.subhead{ font-size: .85rem; }

.app-main{ padding: 18px 0 32px; }

/* KPI Summary */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap: 14px;
}
.kpi{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--elev);
}
.kpi .label{ color: var(--muted); font-size: .8rem; }
.kpi .value{ font-weight: 700; font-size: 1.25rem; letter-spacing:.2px; color: var(--text); }
.kpi .delta{ font-weight:600; font-size:.9rem; }
.kpi .delta.up{ color: var(--success); }
.kpi .delta.down{ color: var(--danger); }

@media (max-width: 992px){ .kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ .kpi-grid{ grid-template-columns: 1fr; } }

.app-tabs .nav-link{
  color: var(--muted);
  border-radius: var(--radius);
  padding: .5rem .85rem;
  background: transparent;
}
.app-tabs .nav-link:hover{ color: var(--text); }
.app-tabs .nav-link.active{
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(0,0,0,.25) inset, 0 8px 24px rgba(0,0,0,.15);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.soft-card{
  border: 1px solid rgba(255,255,255,.06);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--elev);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Ensure high-contrast text within soft-card containers on dark theme */
[data-theme="dark"] .soft-card,
[data-theme="dark"] .soft-card *{ color: var(--text); }
[data-theme="dark"] .soft-card .text-muted{ color: var(--muted) !important; }

.hover-lift:hover{ transform: translateY(-3px); box-shadow: var(--elev-hover); border-color: rgba(255,255,255,.12); }

.bg-primary-soft{ background: color-mix(in oklab, var(--primary) 20%, transparent); }
.text-primary{ color: var(--primary) !important; }
.badge{ border-radius: 999px; }

.map-frame iframe{ width:100%; height:100%; border:0; }

/* Fade-in for tabs/maps */
.tab-pane.animate-in{ animation: fadeSlide .35s ease both; }
.tab-pane.show iframe{ animation: fade .5s ease both; }
@keyframes fadeSlide{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

/* Table */
.table{ --bs-table-bg: transparent; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.table thead th{ position: sticky; top:0; background: var(--panel-2); z-index:1; cursor: pointer; }
.table-hover tbody tr:hover{ background: rgba(255,255,255,.04); }
.table .sort-asc::after{ content: " \25B2"; font-size:.8em; color: var(--primary-300); }
.table .sort-desc::after{ content: " \25BC"; font-size:.8em; color: var(--primary-300); }
/* Compact table density */
.table td, .table th{ padding: .55rem .75rem; }
.table td.text-end, .table th.text-end{ color: var(--text); }
.table thead th{ color: var(--text); }
#kpiTable td, #kpiTable th{ color: var(--text) !important; }
.table-striped tbody tr:nth-of-type(odd){ background: color-mix(in oklab, var(--panel) 92%, black 8%); }

/* Improve default table text color consistency on dark theme */
[data-theme="dark"] .table,
[data-theme="dark"] .table *{
  color: var(--text);
}

/* Force reports table text colors to white/black by theme (like csvTable) */
[data-theme="dark"] #runsTable{
  --bs-table-color: #ffffff !important;
  --bs-table-striped-color: #ffffff !important;
  --bs-table-hover-color: #ffffff !important;
  --bs-table-active-color: #ffffff !important;
  --bs-table-color-state: #ffffff !important;
  --bs-table-color-type: #ffffff !important;
  --bs-body-color: #ffffff !important;
  color:#ffffff !important;
}
[data-theme="dark"] #runsTable thead th{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #runsTable tbody td,
[data-theme="dark"] #runsTable tbody th{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #runsTable a,
[data-theme="dark"] #runsTable a:visited{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] .soft-card #runsTable *,
[data-theme="dark"] .soft-card #runsTable th,
[data-theme="dark"] .soft-card #runsTable td,
[data-theme="dark"] .soft-card #runsTable a,
[data-theme="dark"] #runsTable *,
[data-theme="dark"] #runsTable th,
[data-theme="dark"] #runsTable td,
[data-theme="dark"] #runsTable a{ color:#ffffff !important; }
[data-theme="dark"] .soft-card #runsTable.table>:not(caption)>*>*{ color:#ffffff !important; }
[data-theme="dark"] #runsTable .text-muted,
[data-theme="dark"] #runsTable .text-body-secondary,
[data-theme="dark"] #runsTable .text-secondary{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #runsTable.table>:not(caption)>*>*{ color:#ffffff !important; }
/* Ensure action buttons in runs table keep white text */
[data-theme="dark"] #runsTable .btn-outline-light{ color:#ffffff !important; }
[data-theme="dark"] #runsTable .btn-outline-light:hover{ color:#ffffff !important; }

[data-theme="light"] #runsTable{
  --bs-table-color: #000000;
  --bs-table-striped-color: #000000;
  --bs-table-hover-color: #000000;
  --bs-table-active-color: #000000;
  --bs-table-color-state: #000000;
  --bs-table-color-type: #000000;
  color:#000000 !important;
}
[data-theme="light"] #runsTable *,
[data-theme="light"] #runsTable th,
[data-theme="light"] #runsTable td,
[data-theme="light"] #runsTable a{ color:#000000 !important; }
[data-theme="light"] #runsTable .text-muted,
[data-theme="light"] #runsTable .text-body-secondary,
[data-theme="light"] #runsTable .text-secondary{ color:#000000 !important; opacity:1 !important; }
[data-theme="light"] #runsTable.table>:not(caption)>*>*{ color:#000000 !important; }

/* Highlight rows meeting both top-quartile Opportunity Score and Competitive Ability */
#csvTable tbody tr.row-top > td{
  /* Fallback for browsers without color-mix */
  background-color: rgba(31, 210, 134, 0.18) !important;
  background: color-mix(in oklab, var(--success) 30%, transparent) !important;
}
#csvTable tbody tr.row-top > td:first-child{
  border-left: 4px solid var(--success);
}

/* Force CSV table text colors to white/black by theme */
[data-theme="dark"] #csvTable{
  --bs-table-color: #ffffff;
  --bs-table-striped-color: #ffffff;
  --bs-table-hover-color: #ffffff;
  --bs-table-active-color: #ffffff;
  --bs-table-color-state: #ffffff;
  --bs-table-color-type: #ffffff;
  color:#ffffff !important;
}
[data-theme="dark"] #csvTable *,
[data-theme="dark"] #csvTable th,
[data-theme="dark"] #csvTable td,
[data-theme="dark"] #csvTable a{ color:#ffffff !important; }
/* Neutralize any muted/secondary classes and opacity-based dimming */
[data-theme="dark"] #csvTable .text-muted,
[data-theme="dark"] #csvTable .text-body-secondary,
[data-theme="dark"] #csvTable .text-secondary{ color:#ffffff !important; opacity:1 !important; }
[data-theme="dark"] #panel-table .table,
[data-theme="dark"] #panel-table .table *{ color:#ffffff !important; opacity:1; }
[data-theme="dark"] #panel-table .table{ --bs-body-color:#ffffff; }
[data-theme="dark"] #csvTable.table>:not(caption)>*>*{ color:#ffffff !important; }

[data-theme="light"] #csvTable{
  --bs-table-color: #000000;
  --bs-table-striped-color: #000000;
  --bs-table-hover-color: #000000;
  --bs-table-active-color: #000000;
  --bs-table-color-state: #000000;
  --bs-table-color-type: #000000;
  color:#000000 !important;
}
[data-theme="light"] #csvTable *,
[data-theme="light"] #csvTable th,
[data-theme="light"] #csvTable td,
[data-theme="light"] #csvTable a{ color:#000000 !important; }
/* Neutralize any muted/secondary classes and opacity-based dimming */
[data-theme="light"] #csvTable .text-muted,
[data-theme="light"] #csvTable .text-body-secondary,
[data-theme="light"] #csvTable .text-secondary{ color:#000000 !important; opacity:1 !important; }
[data-theme="light"] #panel-table .table,
[data-theme="light"] #panel-table .table *{ color:#000000 !important; opacity:1; }
[data-theme="light"] #panel-table .table{ --bs-body-color:#000000; }
[data-theme="light"] #csvTable.table>:not(caption)>*>*{ color:#000000 !important; }

/* Table row entrance animation */
#kpiTableBody tr{ animation: rowIn .25s ease both; }
@keyframes rowIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

.card-header{ background: var(--panel-2); border-bottom: 1px solid rgba(255,255,255,.06); }
.card-footer{ background: var(--panel-2); border-top: 1px solid rgba(255,255,255,.06); }

/* Footer */
.app-footer{ border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)); }

/* Utilities */
.text-muted{ color: var(--muted) !important; }
.btn-primary{ background: var(--primary); border-color: var(--primary-600); color:#ffffff; }
.btn-primary:hover{ background: var(--primary-600); border-color: var(--primary-600); color:#ffffff; }
.btn-outline-light{ color: var(--text); border-color: rgba(255,255,255,.25); }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); }
/* Force white text for outline-light on dark theme */
[data-theme="dark"] .btn-outline-light,
[data-theme="dark"] .btn-outline-light *{ color: #ffffff !important; }
[data-theme="dark"] .btn-outline-light{
  /* Ensure Bootstrap uses white for all interactive states */
  --bs-btn-color: #ffffff !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-disabled-color: #ffffff !important;
}
[data-theme="dark"] .btn-outline-light:hover,
[data-theme="dark"] .btn-outline-light:focus,
[data-theme="dark"] .btn-outline-light:active,
[data-theme="dark"] .btn-outline-light.active,
[data-theme="dark"] .btn-outline-light.show,
[data-theme="dark"] a.btn-outline-light:hover{
  color:#ffffff !important;
  border-color: rgba(255,255,255,.4) !important;
  background-color: rgba(255,255,255,.12) !important;
}
/* Anchor outline-light buttons base/visited */
[data-theme="dark"] a.btn-outline-light,
[data-theme="dark"] a.btn-outline-light:visited{
  color:#ffffff !important;
}

/* If any legacy 'soft' outline variant remains, keep it white too */
[data-theme="dark"] .btn-outline-light-soft,
[data-theme="dark"] .btn-outline-light-soft *{ color:#ffffff !important; }
[data-theme="dark"] .btn-outline-light-soft:hover,
[data-theme="dark"] .btn-outline-light-soft:focus,
[data-theme="dark"] .btn-outline-light-soft:active{
  color:#ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
  background-color: rgba(255,255,255,.10) !important;
}

/* Inputs polish */
.form-control, .form-select{
  background: var(--panel);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
.form-control::placeholder{ color: #94a0ad; }
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--primary) 50%, white 0%);
  box-shadow: 0 0 0 .2rem rgba(87,163,255,.15);
}

/* Scrollbar (WebKit/Chromium) */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.25); }

/* Leaflet controls dark restyle (inside iframes, if styles cascade) */
.leaflet-control-layers, .leaflet-control-zoom, .leaflet-control-scale{
  background: rgba(20,24,32,.85) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}
.leaflet-control-zoom a{ color: var(--text) !important; }

/* Make ratios a touch taller for maps on small screens */
@media (max-width: 576px){
  .ratio-16x9{ --bs-aspect-ratio: 70%; }
}

/* Searchable Categories Picker */
.cat-picker{ display:flex; flex-wrap:wrap; gap:.5rem; background: var(--panel); border:1px solid rgba(255,255,255,.12); border-radius: 10px; padding:.5rem; }
.cat-input{ flex:1; min-width:180px; border:0; outline:0; background:transparent; color:var(--text); }
.cat-list{ list-style:none; margin:0; padding:.25rem 0; width:100%; max-height:220px; overflow:auto; border-top:1px solid rgba(255,255,255,.08); }
.cat-list li{ padding:.35rem .5rem; cursor:pointer; border-radius:6px; }
[data-theme="dark"] .cat-list li:hover{ background: rgba(255,255,255,.06); }
[data-theme="light"] .cat-list li:hover{ background: rgba(0,0,0,.06); }
.cat-chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.cat-chips .chip{ display:inline-flex; align-items:center; gap:.35rem; background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--text); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:.2rem .55rem; font-size:.9rem; }
.chip .x{ cursor:pointer; opacity:.7; }
.chip .x:hover{ opacity:1; }

/* Brand logo utilities */
.brand-logo{ height:22px; width:auto; display:inline-block; vertical-align:middle; }
.brand-logo-hero{ height:34px; width:auto; display:block; }
.brand-logo-badge{ height:44px; width:auto; display:inline-block; }