*{box-sizing:border-box}
:root{--bg:#ffffff;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--surface:#fff;--accent:#ffffff;--primary:#173435;--tint-a:#eefcff;--tint-b:#f4fbf9}
html,body{height:100%} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.header{background:var(--accent);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0;max-width:1170px;}
.logo{height:36px;width:auto;display:none}
.header-actions{display:flex;gap:10px;align-items:center}
.btn{height:36px;padding:0 14px;border:1px solid var(--line);background:#fff;cursor:pointer;border-radius:10px;font-weight:600}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.ghost{background:#fff}
h1{margin:0 0 6px 0;font-weight:900;font-size:24px} #siteSubtitle{margin:0;color:var(--muted);font-size:12px} .desc{margin:8px 0 0 0;color:#374151;font-size:13px}
.main-pad{padding-top:20px;padding-bottom:32px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.card.tint-a{background:var(--tint-a)} .card.tint-b{background:var(--tint-b)}
.label{font-size:12px;color:#374151;display:block;margin-bottom:8px;font-weight:800}
.questions-block .search{height:42px;padding:10px;border:1px solid var(--line);width:100%;border-radius:10px;background:#fff}
.questions-block select{width:100%;min-height:140px;border:1px solid var(--line);margin-top:8px;border-radius:10px;background:#fff}
.question-select-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.btn-group{display:flex;gap:10px}
.mobile-only{display:none}

.filters-row{display:flex;gap:12px;overflow:hidden}
.filters-row .filter{flex:1 1 0;min-width:240px}
.filter select{width:100%;min-height:140px;border:1px solid var(--line);background:#fff;border-radius:10px}

.filters-actions{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.filters-actions.under-range{margin-top:16px}
.stack-mobile{display:flex;gap:10px}

.date-row{display:flex;align-items:center;gap:8px}
.date-row input[type="date"]{height:38px;border:1px solid var(--line);border-radius:10px;padding:0 10px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 16px 0}
.kpi .kpi-label{color:#6b7280;font-size:12px} .kpi .kpi-value{font-weight:900;font-size:24px}

.charts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:8px 0 24px 0}
.chart-card{background:#fff;border:1px solid var(--line);padding:12px;border-radius:14px}
.chart-title{font-weight:800;margin-bottom:8px}
.canvas-wrap{position:relative;min-height:500px}
.chart-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:8px;height:30px;padding:0 8px;cursor:pointer;font-size:12px}

.footer{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px 0}
.muted{color:#6b7280;font-size:12px} .error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;padding:8px}

.scroll-hint{color:#6b7280;font-size:12px;margin:6px 2px 0 2px}

@media(max-width:900px){
  .mobile-only{display:inline-block}
  #questionSelect{display:none}
  .btn-group{display:flex;gap:10px;margin-top:10px}
  .filters-row{overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
  .filters-row .filter{min-width:85vw}
  .stack-mobile{flex-direction:column;align-items:stretch}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
  .questions-block .search{display:none!important}
}


/* --- quick alignment fix for action buttons under date range --- */
.filters-actions{align-items:flex-start!important}
.actions-right{display:flex;gap:10px;margin-top:6px}
@media(max-width:900px){
  .actions-right{margin-top:10px}
}


/* ===== Layout polish v2 ===== */
.header-inner{padding:18px 0}
.main-pad{padding-top:18px}

.questions-block{margin-bottom:14px}
.questions-block .search{margin-bottom:8px}
.questions-block select{
  width:100%;
  max-height:160px;            /* constrain tall list */
  min-height:120px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.question-select-row{align-items:stretch}
.question-select-row .btn-group{align-self:flex-start}

.filters-row-wrap{margin-top:6px}
.filters-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.filter{min-height:172px}
.filter select{min-height:120px;max-height:140px;overflow:auto}

@media(max-width:1100px){
  .filters-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .filters-row{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:6px;
  }
  .filter{min-width:85vw}
  .scroll-hint{display:block}
}
@media(min-width:901px){
  .scroll-hint{display:block}
}

.filters-actions{align-items:flex-end}
.filters-actions .date-range{flex:1}
.actions-right{display:flex;gap:10px;margin-top:0}
@media(max-width:900px){
  .filters-actions{align-items:stretch}
  .actions-right{margin-top:8px}
}

.kpis{margin-top:12px}

/* Chart card spacing */
.chart-card{padding-top:10px}
.chart-title{margin:4px 0 8px}

/* Footer stays tidy */
.footer{margin-top:10px}

/* --- Picker overlay visibility + layout --- */
.overlay{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.3);z-index:9999}
.overlay.active{display:flex}
.sheet{width:100%;max-width:720px;background:#fff;border-top-left-radius:14px;border-top-right-radius:14px;box-shadow:0 -8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;max-height:80vh}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.sheet-title{font-weight:800}
.x{border:1px solid var(--line);background:#fff;border-radius:8px;height:28px;padding:0 8px;cursor:pointer}
.sheet-body{padding:12px;overflow:auto}
.picker-list{display:flex;flex-direction:column;gap:8px}
.picker-item{display:flex;gap:10px;align-items:flex-start}
.picker-text{line-height:1.3}
.sheet-foot{display:flex;justify-content:flex-end;gap:10px;padding:10px 12px;border-top:1px solid var(--line);background:#fff;position:sticky;bottom:0}
@media(min-width:901px){
  /* Keep overlay usable on desktop when invoked, but never visible by default */
}

/* ===== Mobile polish v3 ===== */
@media(max-width:600px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .header-right{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap}
  .header-actions{width:100%;display:flex;gap:8px;flex-wrap:wrap}
  .btn{height:38px;padding:0 12px;border-radius:12px}
  .questions-block{padding:12px}
  .question-select-row{flex-direction:row;gap:10px}
  .question-select-row .btn-group{display:flex;gap:10px;width:100%}
  .question-select-row .btn-group .btn{flex:1}
  .filters-row-wrap{margin-top:8px}
  .filters-row{display:flex;gap:12px;overflow-x:auto;padding:6px 2px;scroll-snap-type:x mandatory}
  .filter{min-width:92vw;scroll-snap-align:start}
  .filter select{min-height:64px;max-height:120px}
  .filters-actions{flex-direction:column;align-items:stretch;gap:8px}
  .date-row{flex-wrap:wrap;gap:8px}
  .date-row input[type="date"]{width:100%}
  .actions-right{display:flex;gap:8px}
  .actions-right .btn{flex:1}
  .kpis{grid-template-columns:1fr; gap:10px}
  .charts{grid-template-columns:1fr;gap:12px}
  .chart-card{margin:0 2px}
  .footer{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== Mobile polish v4 ===== */
@media(max-width:600px){
  .container{padding:0 14px}                 /* softer gutter */
  .header-inner{padding:12px}              /* tighter header spacing */
  h1{font-size:28px;line-height:1.1}         /* reduce giant heading */
  #siteSubtitle{font-size:13px}
  .questions-block{margin-top:8px}
  .filter{min-height:auto}                   /* shrink tall filters */
  .filter select{min-height:56px;max-height:110px}
  .date-row{display:flex;gap:8px;flex-wrap:nowrap}
  .date-row input[type="date"]{width:48%}    /* inline dates */
  #clearDates{white-space:nowrap}
  .actions-right{display:block;gap:8px;margin-top:8px}
  .actions-right .btn{flex:1}
  /* keep KPI as 2-up on normal phones, 1-up only on tiny widths */
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:380px){
  .kpis{grid-template-columns:1fr}
}
/* Make mobile buttons inherit desktop look */
@media(max-width:600px){
  .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
  .btn.ghost{background:#fff;border-color:var(--line);color:inherit}
}


/* === Left rail (filters/questions) + Right rail (charts) layout === */
.dash-grid-left{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}
@media(max-width: 1100px){
  .dash-grid-left{ grid-template-columns: 320px 1fr; }
}
@media(max-width: 900px){
  .dash-grid-left{ display:block; }
}
.left-rail{
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow: auto;
  background: #f4f7f6;
  border: 1px solid #e6ecea;
  border-radius: 12px;
  padding: 16px;
}
@media(max-width: 900px){
  .left-rail{ position: static; max-height: none; background:#fff; border:none; padding: 16px; margin-bottom: 12px; margin-top: 12px; }
}
/* Make filters horizontally scrollable with hint */
.scroll-hint{
  font-size: 12px;
  color: #64748b;
  margin: 0 0 8px 2px;
}
.filters-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.filters-scroll .filters-row{ 
  display:flex;
  gap: 10px;
  padding-bottom: 6px;
  min-width: max-content; /* ensures horizontal scroll layout */
}
.filters-scroll .filter{
  background:#fff;
  border:1px solid #e6eaf0;
  border-radius:10px;
  padding:10px;
  min-width: 200px; /* each filter card has some width for horizontal scroll */
}
/* Desktop: prefer the wrapped picker; hide native multi-select by default */
@media(min-width: 1100px){
  #questionSelect{ display:none; }
  #openPicker.btn{ display:inline-flex; }
}
/* Charts always one per row for readability */
#chartsGrid, .charts, .charts-stack, .charts-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.chart-card{ min-width:0; }
/* Save PNG button subtle positioning */
.chart-card .icon-btn, .chart-card .save-png{
  position:absolute; top:8px; right:8px;
}