/* ============================================================
   Insightnix — dash.css
   Dashboard-page-specific styles only.
   Shared styles (accent theme, TOC, nouislider colour,
   .chart-zoom-btn.active, .bg-accent, etc.) live in main.css.
   Load AFTER main.css on dashboard.php only.
   ============================================================ */

/* ── Country / compare lists ─────────────────────────────── */
[data-country-list]::-webkit-scrollbar,
[data-compare-list]::-webkit-scrollbar{width:8px}
[data-country-list]::-webkit-scrollbar-thumb,
[data-compare-list]::-webkit-scrollbar-thumb{
  background:#e5e7eb;border-radius:999px;border:2px solid #fff;
}
.country-item,.compare-item{
  width:100%;text-align:left;padding:4px 10px;border-radius:10px;
  font-size:13px;line-height:1.3;color:#111827;background:transparent;
  border:1px solid transparent;cursor:pointer;
  transition:background .1s,border-color .1s;
}
.country-item:hover,.compare-item:hover{background:#f3f4f6}
.country-item.active{background:#e5e7eb;border-color:#d1d5db}
.country-empty,.compare-empty{padding:6px 10px;font-size:13px;color:#9ca3af}

/* ── TOC details (dashboard sidebar) ─────────────────────── */
#toc summary.active i{color:#fff}
#toc a:not(.active):hover,
#toc summary:not(.active):hover{background:#f3f4f6}
#toc summary::-webkit-details-marker{display:none}

/* ── Focus reset (dashboard controls) ────────────────────── */
input:focus,select:focus,button:focus{outline:none!important;box-shadow:none!important}
input[type=text]:focus,input[type=search]:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-ring),.12)!important;
}

/* ── Charts ──────────────────────────────────────────────── */
.js-chart{min-width:0}
.js-chart canvas{max-width:100%}

/* ── Mobile controls / sidebar ───────────────────────────── */
#mobileControlsBody{display:none}
#mobileControlsBody.open{display:block}
@media(max-width:1023px){#rightSidebar{display:none}}

/* ── Download modal ──────────────────────────────────────── */
#downloadModal{transition:opacity .2s}
#downloadModalBox{transition:transform .2s,opacity .2s}

/* ── Date-range slider (structure; colours are in main.css) ─ */
.noUi-target{background:#f3f4f6;border:none;border-radius:999px;box-shadow:none;height:4px}
#dateRangeLabels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#6b7280;font-weight:500}

/* ── Per-chart zoom buttons (base; .active is in main.css) ── */
.chart-zoom-btn{
  padding:3px 10px;font-size:11px;font-weight:500;border-radius:6px;
  border:1px solid #e5e7eb;background:#fff;color:#6b7280;cursor:pointer;
  transition:all .15s;
}
.chart-zoom-btn:hover{background:#f3f4f6;color:#111827}

/* ── Dashboard nav logo ──────────────────────────────────── */
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-mark{
  width:32px;height:32px;background:var(--ink);border-radius:var(--r,12px);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-logo-text{font-size:16px;letter-spacing:-.3px;line-height:1}


/* ── Chart fullscreen expand ─────────────────────────────── */
.chart-fs-expand{
  position:absolute;top:10px;right:10px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;width:30px;border-radius:8px;
  border:1px solid #e5e7eb;background:rgba(255,255,255,.9);
  color:#6b7280;font-size:12px;cursor:pointer;backdrop-filter:blur(4px);
  transition:all .15s;
}
.chart-fs-expand:hover{background:#fff;color:var(--accent);border-color:var(--accent)}


.chart-fs-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;flex-direction:column;
  background:rgba(17,24,39,.75);
  padding:0;
}

.chart-fs-overlay.open{display:flex}
.chart-fs-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;background:#fff;border-bottom:1px solid #e5e7eb;
}
.chart-fs-title{font-size:.95rem;font-weight:700;color:#111827;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-fs-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.chart-fs-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  height:34px;padding:0 .75rem;border-radius:9px;
  border:1px solid #e5e7eb;background:#fff;color:#374151;
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;
}
.chart-fs-btn:hover{background:#f9fafb;color:#111827}
.chart-fs-btn span{line-height:1}
.chart-fs-close{width:34px;padding:0;justify-content:center;color:#6b7280}
.chart-fs-close:hover{background:#fee2e2;color:#b91c1c;border-color:#fecaca}

.chart-fs-canvas-wrap{
  flex:1;min-height:0;background:#fff;
  padding:1rem 1.1rem 1.25rem;
  display:flex;
  justify-content:center;
  max-width:1100px;
  width:100%;
  align-self:center;
}

.chart-fs-canvas-wrap canvas{
  width:100%!important;
  height:100%!important;
  max-width:1000px;
  margin:0 auto;
}
@media(max-width:640px){
  .chart-fs-btn span{display:none}       /* icon-only buttons on mobile */
  .chart-fs-btn{width:34px;padding:0;justify-content:center}
  .chart-fs-canvas-wrap{padding:.75rem}
}