/* ====================================================================================
   THEME TOKENS (edit these to change global look & feel)
   ==================================================================================== */
:root {
  --bg: #f7f7fb;      /* page background */
  --text: #1f2937;    /* default text color */
  --muted: #6b7280;   /* secondary text */

  --card: #ffffff;    /* generic card background */
  --radius: 14px;     /* rounded corners */
  --gap: 16px;        /* spacing between grid items */

  /* KPI card brand colors */
  --purple: #462C6B;  /* Volumes */
  --blue:   #4890C0;  /* Service Level */
  --red:    #CA1F47;  /* Duration */

  --white: #ffffff;   /* handy token */
}

/* ====================================================================================
   BASE / RESET
   ==================================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui,
               -apple-system, Segoe UI, Roboto,
               "Helvetica Neue", Arial;
}

/* ====================================================================================
   PAGE LAYOUT
   ==================================================================================== */
.page {
  display: grid;
  gap: var(--gap);
  /* unified padding (previously declared twice) */
  padding: 16px 32px;        /* top/bottom 16, left/right 32 */
}

/* slightly larger gutters on wider screens */
@media (min-width: 1200px) {
  .page { padding-left: 74px; padding-right: 74px; }
}
@media (min-width: 1600px) {
  .page { padding-left: 110px; padding-right: 110px; }
}

/* ====================================================================================
   SPLIT HEADER (left logo + title + right logo)
   ==================================================================================== */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.brand-left-wrap,
.brand-right-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.brand-left-logo,
.brand-right-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-title-main {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 34px);
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;  /* anchor for datepicker popover */
}

.header-title { margin: 0; font-size: 20px; }    /*MMMM 22 bood HHHH*/


/* ↓ Nudge the "Call Data" title slightly lower than the date picker */
@media (min-width: 1100px) {
  .header-title {
    position: relative;
    top: 12px;   /* adjust this value to fine-tune alignment */
  }
}


.header-right {
  text-align: right;
  max-width: 100%;
  overflow: visible;
}

.label {
  font-size: 12px;   /*MMMM 12 bood HHHH*/
  color: var(--muted);
  margin-bottom: 4px;
}

/* ---------- Grid helpers (shrink-safe) ---------- */
.grid-1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

/* Allow cards to shrink inside grid */
.card,
.chart.card { min-width: 0; }

/* ====================================================================================
   KPI CARDS
   ==================================================================================== */
.card {
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: 16px;
}

.card--purple { background: var(--purple); color: #fff; }
.card--blue   { background: var(--blue);   color: #fff; }
.card--red    { background: var(--red);    color: #fff; }

.card-title { margin: 0 0 10px 0; font-weight: 600; }

/* ====================================================================================
   KPI TYPOGRAPHY & MINI LAYOUTS
   ==================================================================================== */
.kpi-label  { font-size: 11px; opacity: 0.9; } /*MMMM 12 bood HHHH*/
.kpi-number { font-size: 18px; font-weight: 700; } /*MMMM 26 bood HHHH*/
.kpi-number.lg { font-size: 30px; }   /* big totals (e.g., 332) */ /*MMMM 40 bood HHHH*/
.kpi-number.xl { font-size: 30px; }   /* big percentages (e.g., 83.4%) */ /*MMMM 40 bood HHHH*/
.unit { font-size: 10px; opacity: 0.9; margin-left: 4px; } /*MMMM 12 bood HHHH*/

/* Three-across grid (kept for any future use) */
.kpi-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.kpi-mini-grid.three-rows { grid-template-columns: minmax(0, 1fr); }

/* Generic row (used when you need label-left/value-right in a single row) */
.label-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 6px;
}

.mini-label  { font-size: 10px; opacity: 0.9; }   /*MMMM 12 bood HHHH*/
.mini-number { font-size: 14px; font-weight: 700; }   /*MMMM 18 bood HHHH*/

/* ====================================================================================
   VERTICAL MINI KPIs (USED BY PURPLE & BLUE)
   - Ensures identical spacing and side-by-side rows (label left, number right)
   ==================================================================================== */
.kpi-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;                 /* gap below the big number */
}

/* Make each mini row a horizontal flex row for ALL cards using .kpi-vertical */
.kpi-vertical > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}

.kpi-vertical .mini-label  { font-size: 11px; opacity: 0.9; }  /*MMMM 13 bood HHHH male 3 ta title too box ha*/

.kpi-vertical .mini-number {
  font-size: 15px;   /*MMMM 20 bood HHHH*/
  font-weight: 700;
  margin-left: auto;                /* right-align the number */
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ====================================================================================
   CHARTS (containers + headers + radio tabs)
   ==================================================================================== */
.charts { margin-top: 12px; }


/* ====================================================================================
   TICKET SECTION SPACING
   ==================================================================================== */
.ticket-row {
  margin-top: 74px; /* increase gap between charts and Ticket Data boxes */
}




/* Reduce only the gap between the two ticket rows (KPI → charts) */
.ticket-row + .ticket-row {
  margin-top: 12px; /* adjust to taste to match the call chart spacing */
}




.chart.card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 12px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.chart-title { margin: 0;
  font-weight: 700;   /* was 600 */
  font-size: 12px;    /* <-- ADD THIS */
  line-height: 1.2;   /* optional, reduces spacing */
 }

/* Radio group (Daily/Weekly/Monthly) */
.radio-tabs .dash-radioitems label { margin-right: 10px; 
font-size: 10px;
}
.radio-tabs input[type="radio"] { margin-right: 6px; 
transform: scale(0.9);
}

/* Keep Plotly graphs inside their cards and responsive to zoom */
.chart .dash-graph,
.chart .js-plotly-plot {
  width: 100% !important;
  height: 320px !important;   /* matches figure.height in Python */
}

/* ====================================================================================
   DATE PICKER TWEAKS
   ==================================================================================== */
.DateRangePicker,
.DateRangePickerInput {
  position: relative;
  max-width: 100%;
  overflow: visible;
}
.DateRangePicker_picker {
  z-index: 9999 !important;
  right: 0 !important;
  left: auto !important;
}

/* consolidated: keep only the larger font-size (16px) */
.DateInput_input {
  font-size: 16px;
}

/* ===== Date Picker Styling (input area) ===== */
.DateRangePickerInput {
  background-color: #ffffff;          /* background of the input box */
  border: 2px solid #ccc;             /* border around it */
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: bold;                  /* make text bold */
  font-size: 14px;                    /* make text larger */   /*MMMM 16 bood HHHH*/
}

.DateInput_input {
  color: #2b2b2b;                     /* text color */
  font-weight: bold;
  background-color: transparent;      /* avoid white-on-white bug */
  border: none !important;            /* remove inner borders */
  box-shadow: none !important;
}

.DateInput_input__focused {
  outline: none;
  border: none;
  box-shadow: none;
  color: var(--purple);               /* color when active */
}

/* Arrow color between dates */
.DateRangePickerInput_arrow {
  color: var(--purple);
  font-weight: bold;
  font-size: 16px;    /*MMMM 18 bood HHHH*/
}

/* ===== Calendar Popup Colors ===== */

/* Selected start & end dates */
.CalendarDay__selected_start,
.CalendarDay__selected_end {
  background: var(--purple) !important;
  color: var(--white) !important;
}

/* Dates that are between the selected range */
.CalendarDay__selected_span {
  background: #6a5b8c !important;    /* lighter accent */
  color: var(--white) !important;
}

/* Hover effect for selectable dates */
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
  background: #8b7bae !important;
  color: var(--white) !important;
}

/* Remove green borders & make them white everywhere in selected range */
.CalendarDay__selected_span,
.CalendarDay__selected_start,
.CalendarDay__selected_end,
.CalendarDay__hovered_span,
.CalendarDay__selected,
.CalendarDay__selected:hover {
  border: 1px solid var(--white) !important;  /* white lines between cells */
}

/* Smooth corners on range edges */
.CalendarDay__selected_start {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.CalendarDay__selected_end {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Optional: header (month title, arrows, days of week) */
.DayPicker_weekHeader_li,
.DayPickerNavigation_button__horizontal,
.DayPickerNavigation_svg__horizontal,
.DayPickerNavigation_svg__vertical {
  color: var(--purple) !important;
  fill: var(--purple) !important;
}

/* ====================================================================================
   RESPONSIVE
   ==================================================================================== */
@media (max-width: 1100px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .header { flex-direction: column; align-items: flex-start; }
}

/* Responsive split header */
@media (max-width: 900px) {
  .brand-bar {
    gap: 12px;
  }

  .brand-left-logo,
  .brand-right-logo {
    height: 36px;
  }

  .brand-title-main {
    font-size: clamp(16px, 2vw, 22px);
  }
}

/* Auto-scaling chart heights */
@media (max-width: 1200px) {
  .chart .dash-graph,
  .chart .js-plotly-plot { height: 280px !important; }
}
@media (max-width: 768px) {
  .chart .dash-graph,
  .chart .js-plotly-plot { height: 240px !important; }
}

/* Align the first row in the blue card with the purple card */
.card--blue .kpi-number.xl{
  margin-bottom: 0 !important;  /* remove any space under 83.4% */
  line-height: 1.3;
  margin-top: 1.5px;
}
.card--blue .kpi-vertical{
  margin-top: 12px !important;  /* start "Abandons" immediately below */
}





/* ===== Top banner (header.png) ===== */
.banner { width: 100%; }

.banner-img {
  display: block;       /* remove inline-gap */
  width: 100%;          /* follow page width */
  height: auto;         /* keep aspect ratio */
  max-height: 72px;     /* control desktop height; tweak to taste */
  object-fit: contain;  /* never distort or crop */
  pointer-events: none; /* don't intercept clicks */
}

/* Smaller on narrow screens (keeps responsiveness) */
@media (max-width: 768px) {
  .banner-img { max-height: 48px; }
}








/* ===== Footer banner ===== */
.footer {
  width: 100%;
  margin-top: 24px;           /* space above footer */
}

.footer-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;           /* adjust as desired */
  object-fit: contain;        /* keep full image visible */
  pointer-events: none;       /* don’t block mouse events */
}

/* Responsive footer */
@media (max-width: 768px) {
  .footer-img { max-height: 48px; }
}





/* =========================
   LOCK PAGE GUTTERS (FIX)
   ========================= */
.page { padding: 16px 32px !important; }                 /* base gutters */

@media (min-width: 1200px) {
  .page { padding-left: 74px !important; padding-right: 74px !important; }
}
@media (min-width: 1600px) {
  .page { padding-left: 110px !important; padding-right: 110px !important; }
}