/* Dashboard Common Styles - Shared across all dashboards */

/* ===== GLOBAL THEME TOKENS (shared) ===== */
:root {
  /* Questionnaire / light uniform table tokens */
  --q-row-bg: #f7f8fb;           /* soft light */
  --q-head-bg: #eef1f6;          /* slightly darker header */
  --q-border: rgba(17,24,39,.10);/* subtle neutral border */
  --q-text: #111827;             /* high-contrast text */
  --q-muted: #4b5563;            /* readable muted */
}

/* ===== REUSABLE UNIFORM LIGHT TABLE ===== */
.uniform-light-table { 
  width: 100%; 
  border-collapse: separate; 
  border-spacing: 0; 
  background: #fff; 
}
.uniform-light-table thead th { 
  position: sticky; top: 0; z-index: 1; 
  background: var(--q-head-bg) !important; 
  color: var(--q-text); 
  border-bottom: 1px solid var(--q-border); 
}
.uniform-light-table tbody tr td, 
.uniform-light-table tbody tr th { 
  background: var(--q-row-bg) !important; 
  color: var(--q-text); 
  border-bottom: 1px solid var(--q-border); 
}
.uniform-light-table tbody tr:hover td, 
.uniform-light-table tbody tr:focus-within td { 
  background: var(--q-row-bg) !important; /* no hover tint */
}

/* Inputs aligned to uniform light scheme */
.input-contrast { 
  border: 1px solid var(--q-border); 
  background: #ffffff; 
  color: var(--q-text); 
}
.input-contrast::placeholder { color: var(--q-muted); opacity: 1; }
.input-contrast:focus { 
  outline: 2px solid var(--color-primary, #ffb800); 
  box-shadow: 0 0 0 3px rgba(255,184,0,.10); 
}

/* ===== LAYOUT COMPONENTS ===== */
.dashboard-layout { 
  display: grid; 
  grid-template-columns: 320px minmax(0, 1fr); 
  grid-template-areas: "settings main"; 
  gap: 1.5rem; 
  align-items: start; 
}

.settings-card { 
  background: var(--color-surface, #fff); 
  border: 1px solid var(--color-border, #ddd); 
  border-radius: var(--radius, 8px); 
  box-shadow: var(--shadow-lg, 0 4px 6px rgba(0,0,0,0.1)); 
  padding: 1rem; 
  position: sticky; 
  top: 5rem; 
  max-height: calc(100vh - 6rem); 
  overflow: visible; 
  z-index: 1500; 
  grid-area: settings; 
}

.settings-card h4 { 
  margin: 0 0 .75rem; 
  color: var(--color-secondary, #666); 
}

.settings-card .group { 
  display: grid; 
  gap: .5rem; 
  margin-bottom: 1rem; 
}

.settings-card .row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .5rem; 
  align-items: center; 
}

.settings-card label { 
  font-weight: 700; 
  color: var(--color-secondary, #666); 
}

/* ===== FORM COMPONENTS ===== */
.form-row { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  gap: .75rem; 
}

.form-row label { 
  margin: 0; 
}

.pill-select { 
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background: var(--color-surface, #f8f9fa); 
  border: 1px solid var(--color-border, #ddd); 
  border-radius: 8px; 
  padding: .45rem .7rem; 
  color: var(--color-contrast, #333); 
  font-weight: 600; 
  box-shadow: var(--shadow-lg, 0 2px 4px rgba(0,0,0,0.1)); 
}

.pill-select:hover { 
  border-color: var(--color-primary, #ffb800); 
}

.pill-select:focus { 
  outline: none; 
  border-color: var(--color-primary, #ffb800); 
  box-shadow: 0 0 0 3px rgba(255,184,0,.18); 
}

.btn-ghost-sm { 
  background: transparent; 
  border: 1px solid var(--color-border, #ddd); 
  color: var(--color-secondary, #666); 
  border-radius: 8px; 
  padding: .35rem .6rem; 
  font-weight: 600; 
  cursor: pointer; 
}

.btn-ghost-sm:hover { 
  border-color: var(--color-primary, #ffb800); 
  background: rgba(255,184,0,.08); 
}

/* ===== TABLE STYLES ===== */
.table-wrap { 
  width: 100%; 
  max-width: 100%; 
  overflow-x: auto; 
  isolation: isolate; /* prevent child z-index overlap with siblings */
}

.table-wrap table { 
  width: 100%; 
  border: 1px solid var(--color-border, #ddd); 
  border-radius: var(--radius, 8px); 
  box-shadow: var(--shadow-lg, 0 2px 4px rgba(0,0,0,0.1)); 
  background: var(--color-surface, #fff); 
  border-collapse: separate; 
  border-spacing: 0; 
}

.table-wrap thead th { 
  position: sticky; 
  top: 0; 
  z-index: 1; 
  background: var(--color-surface, #fbfcff); 
  border-bottom: 1px solid var(--color-border, #ddd); 
  color: var(--color-secondary, #666); 
  font-weight: 700; 
}

.table-wrap tbody tr:not(:last-child) td { 
  border-bottom: 1px solid var(--color-border, #ddd); 
}

.table-wrap table tbody tr td { 
  background-color: var(--color-surface, #f7f7f7); 
  transition: background-color .15s ease; 
}

.table-wrap table tbody tr:hover td, 
.table-wrap table tbody tr:focus-within td { 
  background-color: #f0f0f0; 
}

/* Force uniform row background across browsers */
.table-wrap table tbody tr td { 
  background-color: var(--color-surface, #f7f7f7) !important; 
  transition: background-color .15s ease; 
}

.table-wrap table tbody tr:nth-child(even) td { 
  background-color: var(--color-surface, #f7f7f7) !important; 
}

.table-wrap table tbody tr:nth-child(odd) td { 
  background-color: var(--color-surface, #f7f7f7) !important; 
}

.table-wrap table tbody tr:hover td,
.table-wrap table tbody tr:focus-within td { 
  background-color: #f0f0f0 !important; 
}

/* Stronger table borders for better contrast */
.table-wrap table { 
  border-color: #cfd3dc !important; 
  border-width: 2px !important; 
}

.table-wrap table thead th { 
  border-bottom-color: #cfd3dc !important; 
  border-bottom-width: 2px !important; 
}

.table-wrap table tbody tr:not(:last-child) td { 
  border-bottom-color: #d9dde6 !important; 
  border-bottom-width: 1.5px !important; 
}

table th, 
table td { 
  text-align: left; 
  vertical-align: middle; 
}

/* Table scrollbar styling */
.table-wrap::-webkit-scrollbar { 
  height: 10px; 
}

.table-wrap::-webkit-scrollbar-track { 
  background: transparent; 
}

.table-wrap::-webkit-scrollbar-thumb { 
  background: #d7dbe3; 
  border-radius: 6px; 
}

.table-wrap::-webkit-scrollbar-thumb:hover { 
  background: #c6ccd7; 
}

/* ===== CHART STYLES ===== */
.chart-wrap { position: relative; }
.chart-wrap canvas { 
  width: 100% !important; 
  height: 100% !important; 
  display: block; 
}

.chart-toolbar{ position:absolute; top:.4rem; right:.4rem; display:flex; gap:.25rem; background: rgba(255,255,255,1); border:1px solid rgba(0,0,0,.12); border-radius:8px; padding:.2rem; box-shadow: 0 2px 6px rgba(0,0,0,0.12); align-items:center; z-index: 9999; }
.chart-btn{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; border-radius:6px; color:#374151; }
.chart-btn:hover{ background: rgba(0,0,0,.05); }
.chart-btn[aria-pressed="true"]{ background: rgba(255,184,0,.18); }
/* Inline SVG icons inside toolbar buttons */
.chart-btn svg{ width:20px; height:20px; display:inline-block; visibility: visible; }
.chart-toolbar svg { width:20px; height:20px; display:inline-block; }
.chart-toolbar svg path, 
.chart-toolbar svg rect, 
.chart-toolbar svg polyline, 
.chart-toolbar svg line { stroke: #111827; fill: #111827; }
.chart-toolbar .chart-btn[data-type="line"] svg path,
.chart-toolbar .chart-btn[data-type="line"] svg polyline { fill: none; stroke: #111827; }
.chart-toolbar .chart-btn[data-type="area"] svg polyline { fill: none; stroke: #111827; }
.chart-btn .lbl { font-size: 11px; font-weight: 700; color: #374151; margin-left: 4px; }
.chart-toolbar{ color: #1f2937; }

canvas { 
  border-color: var(--color-border, #ddd); 
  border-radius: var(--radius, 8px); 
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1)); 
}

/* Chart grid layouts */
#chartsGrid[data-cols="1"] .chart-wrap { 
  height: 500px; 
}

#chartsGrid[data-cols="2"] .chart-wrap { 
  height: 400px; 
}

#chartsGrid[data-cols="3"] .chart-wrap { 
  height: 320px; 
}

/* Campaign charts grid */
#campaignChartsGrid[data-cols="1"] .chart-wrap { 
  height: 500px; 
}

#campaignChartsGrid[data-cols="2"] .chart-wrap { 
  height: 400px; 
}

#campaignChartsGrid[data-cols="3"] .chart-wrap { 
  height: 320px; 
}

/* ===== TYPOGRAPHY ===== */
h2 { 
  color: var(--color-secondary, #666); 
  margin: 1.5rem 0 1rem; 
  border-bottom: 3px solid var(--color-primary, #ffb800); 
  display: inline-block; 
  padding-bottom: .25rem; 
}

h3.section-title { 
  color: var(--color-secondary, #666); 
  margin: 2rem 0 .75rem; 
  border-left: 4px solid var(--color-primary, #ffb800); 
  padding-left: .5rem; 
}

/* ===== UTILITY COMPONENTS ===== */
.columns-flyout { 
  position: relative; 
  display: inline-block; 
}

.muted-badge { 
  background: #eee; 
  padding: .08rem .35rem; 
  border-radius: 6px; 
  font-size: .8rem; 
}

.table-hint { 
  margin: .4rem 0 .6rem; 
  color: var(--color-secondary, #666); 
  opacity: .75; 
  font-weight: 600; 
}

/* ===== RESPONSIVE DESIGN ===== */
/* When there's not enough space for side-by-side layout, stack vertically with settings on top */
@media (max-width: 1400px) { 
  .dashboard-layout { 
    grid-template-columns: 1fr; 
    grid-template-areas: 
      "settings"
      "main"; 
    grid-template-rows: auto 1fr; /* Settings first, then charts */
  } 
  .settings-card { 
    order: -1; /* Move settings above charts */
    position: static; 
    max-height: none; 
    margin-bottom: 1rem;
  }
  .main-col {
    order: 1; /* Charts come after settings */
  }
}

/* Additional mobile optimizations */
@media (max-width: 768px) {
  .table-wrap table th, 
  .table-wrap table td { 
    font-size: .85rem; 
    padding: .4rem .3rem; 
  }
  
  #chartsGrid[data-cols="1"] .chart-wrap { 
    height: 420px; 
  }
  
  #chartsGrid[data-cols="2"] .chart-wrap,
  #chartsGrid[data-cols="3"] .chart-wrap { 
    height: 300px; 
  }
  
  #campaignChartsGrid[data-cols="1"] .chart-wrap { 
    height: 420px; 
  }
  
  #campaignChartsGrid[data-cols="2"] .chart-wrap,
  #campaignChartsGrid[data-cols="3"] .chart-wrap { 
    height: 300px; 
  }
}

/* ===== INTERACTION STATES ===== */
#campaignsTbody tr.campaign-row { 
  cursor: pointer; 
}

/* Ensure main content doesn't overlap with menu button */
#main-content { 
  margin-left: 0; 
  transition: margin-left .3s ease; 
}

/* ===== STAT CARDS ===== */
.stat { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  padding: 1rem; 
  background: var(--color-surface, #fff); 
  border: 1px solid var(--color-border, #ddd); 
  border-radius: var(--radius, 8px); 
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1)); 
}

.stat > div { 
  font-size: 1.4rem; 
  font-weight: 700; 
  margin-top: auto; 
}

/* ===== PHONE-ONLY OVERRIDES (exclude iPad 768px) ===== */
@media (max-width: 767px) {
  /* Prevent sideways scrolling and ensure proper viewport sizing */
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

  /* Force one chart per row on phones */
  #chartsGrid { 
    grid-template-columns: 1fr !important; 
  }
  #campaignChartsGrid { 
    grid-template-columns: 1fr !important; 
  }
  /* Lock the per-row selectors on phones */
  .settings-card select#chartsPerRowSelect,
  .settings-card select#campaignChartsPerRowSelect { 
    pointer-events: none; 
    opacity: .6; 
  }
  /* Ensure KPI stats render two per row on phones */
  .kpi-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: .75rem; 
  }
  /* Ensure generic stats containers render two per row on phones */
  .stats { 
    display: grid !important; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: .75rem !important; 
  }

  /* Make top bar and controls stack nicely */
  .topbar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .topbar .left, .topbar .right { width: 100%; justify-content: space-between; }
  main.container, main { padding-left: .5rem; padding-right: .5rem; padding-top: 3.5rem; }

  /* Inputs/selects should not overflow viewport */
  .pill-select { width: 100%; max-width: 100%; }
  .form-row { gap: .5rem; }

  /* Tabs should fit and wrap gracefully */
  .tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
  .tabs .tab-btn { flex: 1 1 auto; min-width: calc(50% - .4rem); }

  /* Tables: enable smooth horizontal scroll if needed, remove accidental overflow */
  .table-wrap { margin: 0 -0.5rem; padding: 0 0.5rem; -webkit-overflow-scrolling: touch; }
  .table-wrap table { width: 100%; }

  /* Ensure sticky cards don’t overlap and flow in document */
  .settings-card { position: static; top: auto; max-height: none; z-index: auto; }
}