/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
  --brand-primary:#0F6E7A;
  --brand-primary-dark:#0B5660;
  --brand-accent:#114B87;

  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;

  --success-bg:#e6ffed;
  --success-bd:#a9e7b2;
  --error-bg:#ffe3e3;
  --error-bd:#ffb3b3;
  --warn-bg:#fff7da;
  --warn-bd:#f3d28d;

  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;

  --sticky-shadow-left:10px 0 16px rgba(15,23,42,.05);
  --sticky-shadow-right:-10px 0 16px rgba(15,23,42,.06);

  /* ✅ Optional zone tint for Resolution (Timing & SLA) columns */
  --zone-resolve-bg:#f6fbff;
  --zone-resolve-bd:rgba(17,75,135,.10);

  /* ✅ Dark header tones for SLT table */
  --thead-dark-1:#0C2B4E;
  --thead-dark-2:#1D546C;
  --thead-dark-3:#249E94;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

a{ color:var(--brand-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================================================
   TOPBAR
========================================================= */

.topbar{
  background:#09637E;
  color:#fff;
  padding:12px 18px;
  box-shadow:0 2px 14px rgba(0,0,0,.12);
}

.topbar-inner{
  max-width:1600px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand img{
  height:46px;
  width:auto;
}

.brand-title{
  font-weight:900;
  letter-spacing:.2px;
}

.brand-sub{
  font-size:12px;
  opacity:.9;
  font-weight:700;
  margin-top:3px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#fff;
}

@media(max-width:900px){
  .brand-title{ display:none; }
}

/* =========================================================
   LAYOUT
========================================================= */

.container{
  max-width:1600px;
  margin:26px auto;
  padding:0 24px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 32px;
}

.card-title{
  font-size:28px;
  margin:0 0 16px 0;
}

/* =========================================================
   GRID
========================================================= */

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}

.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-6{grid-column:span 6;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-12{grid-column:span 12;}

@media(max-width:900px){
  .col-3,.col-4,.col-6,.col-8,.col-9{grid-column:span 12;}
}


/* =========================================================
   GLOBAL RESPONSIVE PATCH (APPLIES TO ALL PAGES)
   - Prevents overflow on laptop screens
   - Makes KPI rows + chart areas wrap nicely
   - Works with your existing 12-col .grid/.col-* system
========================================================= */

/* Stop horizontal scrolling surprises */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make grids and cards shrink correctly in narrow widths */
.grid,
.card,
.panel,
.kpi,
.kpi-mini,
.chart-card,
.table-wrap {
  min-width: 0;
}

/* Long headings / labels should wrap instead of pushing layout */
h1, h2, h3, .card-title, .reports-title, label, .pill, .chip, .chip-lite {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Container padding adapts on smaller screens */
@media (max-width: 1100px) {
  .container,
  .reports-wrap,
  .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card {
    padding: 20px 18px;
  }
}

@media (max-width: 640px) {
  .container,
  .reports-wrap,
  .footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .card {
    padding: 16px 14px;
  }
}

/* =========================================================
   UNIVERSAL KPI ROW WRAP (ANY PAGE USING KPI-LIKE GRIDS)
========================================================= */

/* Keep your reports .kpi-row, but make it smarter globally */
.kpi-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1400px) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* If any page uses col-3 KPIs in a 12-col grid (4 cards), keep them neat */
@media (max-width: 1100px) {
  .col-3.kpi,
  .col-3 .kpi {
    grid-column: span 6;
  }
}
@media (max-width: 640px) {
  .col-3.kpi,
  .col-3 .kpi {
    grid-column: span 12;
  }
}

/* =========================================================
   UNIVERSAL CHART BOX (FOR ANY PAGE WITH CANVAS CHARTS)
   Use: wrap each <canvas> with <div class="chart-box"></div>
========================================================= */

.chart-box {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 320px; /* default */
}

.chart-box.lg { height: 420px; }
.chart-box.sm { height: 260px; }

.chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Your existing reports chart-body is fine, just ensure it never collapses */
.chart-body {
  min-width: 0;
}



/* =========================================================
   FORMS
========================================================= */

label{
  display:block;
  font-weight:800;
  margin:14px 0 6px;
}

input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}

textarea{
  min-height:110px;
  resize:vertical;
}

input:focus, select:focus, textarea:focus{
  border-color:rgba(15,110,122,.55);
  box-shadow:0 0 0 4px rgba(15,110,122,.12);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:800;
}

.btn-primary{background:var(--brand-primary); color:#fff;}
.btn-primary:hover{background:var(--brand-primary-dark);}
.btn-muted{background:#455a64; color:#fff}

.btn-outline{
  background:#fff;
  color:var(--brand-primary);
  border:1px solid rgba(15,110,122,.35);
}
.btn-outline:hover{background:rgba(15,110,122,.06);}

.btn-danger{ background:#b42318; color:#fff; }

.btn-sm{
  padding:8px 12px;
  font-size:13px;
  font-weight:900;
}

/* ================= MESSAGES ================= */

.msg{
  margin:0 0 14px 0;
}
.msg .m{
  padding:10px 12px;
  border-radius:10px;
  margin:8px 0;
  border:1px solid var(--border);
}
.msg .success{background:var(--success-bg); border-color:var(--success-bd)}
.msg .error{background:var(--error-bg); border-color:var(--error-bd)}
.msg .warning{ background:var(--warn-bg); border-color:var(--warn-bd); }

/* =========================================================
   BADGES
========================================================= */

.badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid var(--border);
}

.badge-new{background:#e8f3ff; border-color:#b9dbff;}
.badge-review{background:#fff7da; border-color:#f3d28d;}
.badge-closed{background:#e6ffed; border-color:#a9e7b2;}
.badge-sg{background:#ffe3e3; border-color:#ffb3b3; color:#8a0f0f;}
.badge-muted{background:#eef2f7; border-color:#d7dee8;}
.badge-warn{background:var(--warn-bg); border-color:var(--warn-bd); color:#92400e;}

.badge-sla-ok{background:#dcfce7; border-color:#86efac; color:#065f46;}
.badge-sla-warn{background:#fef9c3; border-color:#fde047; color:#92400e;}
.badge-sla-over{background:#fee2e2; border-color:#fca5a5; color:#991b1b;}

/* =========================================================
   KPI
========================================================= */

.kpi{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  /* KPI ICONS add-on (kept) */
  position:relative;
  overflow:hidden;
}

.kpi-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#64748b;
}

.kpi-value{
  font-size:32px;
  font-weight:900;
  color:var(--brand-primary);
}

.kpi-danger{
  border:1px solid #ffb3b3;
  background:#fff5f5;
}
.kpi-danger .kpi-value{color:#b42318;}

/* KPI ICONS (ADD-ON) */
.kpi-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.kpi-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,110,122,.18);
  background:rgba(15,110,122,.06);
  flex:0 0 auto;
}

.kpi-icon svg{
  width:18px;
  height:18px;
  stroke:var(--brand-primary);
  stroke-width:2;
  fill:none;
}

.kpi-danger .kpi-icon{
  border-color:rgba(180,35,24,.20);
  background:rgba(180,35,24,.07);
}

.kpi-danger .kpi-icon svg{
  stroke:#b42318;
}

/* Optional: align month chip nicely if inside KPI */
.kpi .kpi-chip{
  align-self:flex-start;
}

/* =========================================================
   TABLE SYSTEM (CLEAN + SAFE WRAPPING)
========================================================= */

.table-wrap{
  overflow:auto;
  border-radius:14px;

  /* ✅ allows “table scroll” while keeping page KPIs visible */
  max-height: 72vh;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
}

.table th,
.table td{
  padding:12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
  font-size:14px;
}

/* Proper wrapping (NO broken words) */
.table th{
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:auto;
  line-height:1.2;
}

/* Fixed professional layout */
.table-prof{
  table-layout:fixed;
  min-width:1750px;
}

/* Default sticky header (single-row tables) */
.table-prof thead th{
  position:sticky;
  top:0;
  z-index:8;
  background:#f8fafc;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
}

/* Sticky columns (base) */
.sticky-left-1{
  position:sticky;
  left:0;
  z-index:6;
  background:#fff;
  box-shadow:var(--sticky-shadow-left);
}

.sticky-left-2{
  position:sticky;
  z-index:6;
  background:#fff;
  box-shadow:var(--sticky-shadow-left);
}

.sticky-right{
  position:sticky;
  right:0;
  z-index:7;
  background:#fff;
  box-shadow:var(--sticky-shadow-right);
}

/* Zebra */
.table-prof tbody tr:nth-child(even) td{
  background:#fbfdff;
}

/* Safeguarding row highlight (clean + consistent) */
.row-sg td{
  background:#fff3f3 !important;
}
.row-sg td:first-child{
  box-shadow:inset 4px 0 0 #b42318;
}

/* =========================================================
   RESOLUTION ZONE (Timing & SLA columns)
   ✅ Applies ONLY if your SLT table uses these classes:
   .w-age .w-closed .w-dtc .w-sla
========================================================= */

.table-prof tbody td.w-age,
.table-prof tbody td.w-closed,
.table-prof tbody td.w-dtc,
.table-prof tbody td.w-sla{
  background: var(--zone-resolve-bg);
}

.table-prof tbody tr:nth-child(even) td.w-age,
.table-prof tbody tr:nth-child(even) td.w-closed,
.table-prof tbody tr:nth-child(even) td.w-dtc,
.table-prof tbody tr:nth-child(even) td.w-sla{
  background: #f1f8ff;
}

/* Keep safeguarding dominant */
.row-sg td.w-age,
.row-sg td.w-closed,
.row-sg td.w-dtc,
.row-sg td.w-sla{
  background:#fff3f3 !important;
}

/* Subtle separators around the zone */
.table-prof thead th.w-age,
.table-prof tbody td.w-age{
  border-left:1px solid var(--zone-resolve-bd);
}
.table-prof thead th.w-sla,
.table-prof tbody td.w-sla{
  border-right:1px solid var(--zone-resolve-bd);
}

/* =========================================================
   STICKY COLUMN BLEND (SAFE OVERRIDE)
========================================================= */

/* Sticky body cells inherit row background */
.table-prof td.sticky-left-1{
  background: inherit !important;
  border-right: 1px solid rgba(15,23,42,.10);
  box-shadow: 8px 0 14px rgba(15,23,42,.06);
  z-index: 15;
}

/* Sticky header cell stays on header background */
.table-prof thead th.sticky-left-1{
  background:#f8fafc !important;
  z-index: 40;
}

/* Right-edge soft connector */
.table-prof tbody td.sticky-left-1{
  position: sticky;
  left: 0;
}
.table-prof tbody td.sticky-left-1::after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:18px;
  height:100%;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(15,110,122,0.00),
    rgba(15,110,122,0.06),
    rgba(17,75,135,0.05)
  );
}

/* Safeguarding sticky bar stays correct */
.row-sg td.sticky-left-1{
  box-shadow: inset 4px 0 0 #b42318, 8px 0 14px rgba(15,23,42,.06) !important;
}

/* =========================================================
   SLT TABLE: FIX STICKY HEADER OVERLAP + DARKER HEADER
   ✅ Works ONLY for the SLT Review dashboard table
   - table has class: .slt-table
   - header rows have classes: .thead-group and .thead-cols
========================================================= */

/* Dark group heading row */
.table-prof.slt-table thead tr.thead-group th{
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, var(--thead-dark-2), var(--thead-dark-1));
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Dark column header row — sits below group row */
.table-prof.slt-table thead tr.thead-cols th{
  position: sticky;
  top: 34px; /* ✅ adjust to 46/48 if your group row becomes taller */
  z-index: 25;
  background: linear-gradient(180deg, var(--thead-dark-3), var(--thead-dark-2));
  color: #fff;
}

/* Make header labels readable */
.table-prof.slt-table thead th{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
}

/* Sticky left header cell always above other header cells */
.table-prof.slt-table thead th.sticky-left-1{
  z-index: 45 !important;
}

/* Sticky left body cells above normal cells */
.table-prof.slt-table tbody td.sticky-left-1{
  z-index: 18 !important;
}



/* =========================================================
   REPORTS (POWER BI STYLE)
========================================================= */

.reports-wrap{
  max-width:1600px;
  margin:18px auto 30px;
  padding:0 24px;
}

.reports-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.reports-title{
  font-size:26px;
  font-weight:950;
  letter-spacing:-.2px;
  margin:0;
  color:#0f172a;
}

.reports-sub{
  margin-top:8px;
  font-size:12px;
  color:#64748b;
  font-weight:700;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
}

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0 14px;
}

.tab-btn{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  transition:all .15s ease;
}

.tab-btn:hover{ background:#f8fafc; }

.tab-btn.active{
  border-color: rgba(15,110,122,.35);
  box-shadow:0 0 0 4px rgba(15,110,122,.10);
  color:var(--brand-primary);
}

/* Panels */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Filters */
.filters{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.filters .field{ min-width:220px; }
.filters label{ margin:0 0 6px; }
.filters .actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* KPI row */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
  margin:14px 0;
}

@media(max-width:1100px){
  .kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:600px){
  .kpi-row{ grid-template-columns: 1fr; }
}

.kpi-mini{
  background:#fff;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.kpi-mini .left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.kpi-mini .label{
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#64748b;
  font-weight:900;
}

.kpi-mini .value{
  font-size:20px;
  font-weight:950;
  color:#0f172a;
  line-height:1.1;
}

.kpi-mini .hint{
  font-size:11px;
  font-weight:800;
  color:#475569;
}

/* Charts */
.chart-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

@media(max-width:1000px){
  .chart-grid{ grid-template-columns: 1fr; }
}

.chart-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:14px;
}

.chart-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.chart-title{
  margin:0;
  font-size:14px;
  font-weight:950;
  color:#0f172a;
}

.chart-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip-lite{
  border:1px solid var(--border);
  background:#f8fafc;
  /*color:#0f172a;*/
  color:#811844;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
}

.chart-body{ height:260px; }
.chart-body canvas{
  width:100% !important;
  height:100% !important;
}

/* ✅ More room for trend charts labels */
#panel-trends .chart-body{
  min-height: 360px;
}

/* =========================================================
   BREAKDOWN / EXEC NOTES (REPORTS)
========================================================= */

.breakdown-split{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  align-items:start;
  width:100%;
}

@media(max-width:1100px){
  .breakdown-split{ grid-template-columns: 1fr; }
}

.exec-notes{
  width:100%;
  min-height:180px;
  max-height:240px;
  resize:vertical;
}

/* Reusable helpers used in reports.html */
.help{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.section-divider{
  margin:12px 0 14px;
  padding-top:12px;
  border-top:1px solid var(--border);
  font-weight:900;
  font-size:14px;
  letter-spacing:.3px;
  color:#0f172a;
}

.summary-card{
  background:#f8fbff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.panel{
  background:#fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}


.mini-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#475569;
  font-weight:900;
}

.mini-value{
  margin-top:6px;
  font-weight:900;
  font-size:15px;
  color:var(--text);
}

/* =========================================================
   CELL HELPERS
========================================================= */

.cell-title{font-weight:950;}
.cell-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
  line-height:1.25;
}

/* =========================================================
   FOOTER
========================================================= */

.footer{
  max-width:1600px;
  margin:20px auto 30px;
  padding:0 24px;
  color:var(--muted);
  font-size:12px;
}

.kpi-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: .3px;
}

.chip-up {
  background: rgba(16,185,129,0.15);
  color: #047857;
}

.chip-down {
  background: rgba(239,68,68,0.15);
  color: #b91c1c;
}

.chip-neutral {
  background: rgba(100,116,139,0.15);
  color: #475569;
}

/* ================= QUICK LINKS ================= */

.quick-links{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid var(--border);
}

.quick-links-title{
  font-weight:900;
  margin-bottom:12px;
  color:#0f172a;
}

.quick-links-divider{
  height:1px;
  background:linear-gradient(to right, transparent, #e5e7eb, transparent);
  margin:16px 0;
}

/* ================= MISC UI ================= */

.section-divider{
  margin: 6px 0 10px;
  padding-top:12px;
  border-top: 1px solid var(--border);
  font-weight: 900;
  letter-spacing: .3px;
  color: #0f172a;
}

.summary-card{
  background:#f8fbff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

.mini-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#475569;
  font-weight:900;
}

.mini-value{
  margin-top:6px;
  font-weight:900;
  color:var(--text);
}

.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

/* =========================================================
   RECENT COMPLAINTS – MATCH SLT HEADER
========================================================= */

.dashboard-table thead th{
  background: linear-gradient(
    180deg,
    var(--thead-dark-3),
    var(--thead-dark-2)
  );
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Remove heavy vertical lines */
.dashboard-table th,
.dashboard-table td{
  border-right: 0 !important;
}

/* Light horizontal separators */
.dashboard-table tbody td{
  border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Clean hover effect (professional feel) */
.dashboard-table tbody tr:hover td{
  background: rgba(15,110,122,.04);
}

/* Blink only for OVERDUE */
.sla-blink{
  animation: slaPulse 1.2s ease-in-out infinite, slaBorder 1.2s ease-in-out infinite;
}

@keyframes slaBorder{
  0%, 100% { box-shadow: 0 0 0 rgba(239,68,68,0); }
  50%      { box-shadow: 0 0 0 4px rgba(239,68,68,.18); }
}

/* Pulse effect (visible but not ugly) */
@keyframes slaPulse{
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.06); filter: brightness(1.12); }
}

/* Respect accessibility: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .sla-blink{ animation: none; }
}
/* =========================================================
   GLOBAL RESPONSIVE FIX (NO DELETIONS)
   - Improves laptop (single screen) layout for ALL pages
   - Fixes grid ratios, prevents weird squeezing/overflow
========================================================= */

/* 1) Better mid-screen grid behavior (laptops) */
@media (max-width: 1200px){
  /* Make 3-up KPI cards become 2-up on laptop widths */
  .col-4{ grid-column: span 6; }
  .col-3{ grid-column: span 6; }
}

/* 2) Keep your existing 900px rule, but refine it so it doesn't kill layout too early */
@media (max-width: 900px){
  /* On true small screens, go single column */
  .col-3, .col-4, .col-6, .col-8, .col-9{ grid-column: span 12; }
}

/* 3) Fix the earlier non-working rule:
   Your CSS had .col-3.kpi / .col-3 .kpi which doesn’t reliably affect layout.
   This is the correct universal way: */
@media (max-width: 1200px){
  .grid > .col-3,
  .grid > .col-4{
    min-width: 0;
  }
}

/* 4) Make KPI numbers & labels wrap safely on narrow widths */
.kpi-label,
.kpi-value{
  overflow-wrap: anywhere;
}

.kpi-value{
  line-height: 1.05;
}

/* 5) Prevent “hidden overflow” from tables/charts pushing the page width */
.table-wrap,
.chart-grid,
.chart-card,
.panel,
.card{
  max-width: 100%;
}

/* 6) Make your container padding more laptop-friendly */
@media (max-width: 1100px){
  .container{ padding: 0 16px; margin: 18px auto; }
  .card{ padding: 20px 18px; }
}
@media (max-width: 640px){
  .container{ padding: 0 12px; }
  .card{ padding: 16px 14px; }
}

/* 7) Optional: keep charts readable when width reduces */
@media (max-width: 1100px){
  .chart-body{ height: 320px; }
}
@media (max-width: 700px){
  .chart-body{ height: 340px; }
}
/* =========================================================
   GLOBAL FIX: FILTERS + SIDE KPI GRID (REUSABLE)
   Works for reports.html AND any future pages.
========================================================= */

/* Generic two-block layout: form + side KPI (or any card) */
.filters-kpi-grid{
  display:grid;
  grid-template-columns: 1fr auto; /* form takes space, side card sticks */
  gap:14px;
  align-items:stretch;
  min-width:0;
}

/* Let form wrap nicely without forcing a 5-col grid */
.filters-kpi-grid .filters--grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  min-width:0;
}

/* Universal field sizing (prevents overflow on laptop) */
.filters-kpi-grid .filters--grid .field{
  flex: 1 1 220px;   /* grows + wraps */
  min-width: 180px;  /* don’t collapse too small */
  max-width: 320px;  /* prevents super wide fields */
}

/* Actions should never push layout off-screen */
.filters-kpi-grid .filters--grid .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

/* Side KPI card (optional) */
.kpi-mini--side{
  width: 100%;
  min-width: 240px;
  max-width: 360px;
}

/* Laptop: stack form + side KPI */
@media (max-width: 1200px){
  .filters-kpi-grid{
    grid-template-columns: 1fr;
  }
  .kpi-mini--side{
    max-width: none;
    min-width: 0;
  }
}

/* Small screens: reduce field min-width so date/grade/class fit */
@media (max-width: 700px){
  .filters-kpi-grid .filters--grid .field{
    min-width: 150px;
    flex-basis: 150px;
  }
}

/* =========================================================
   REPORTS ONLY: make 2-column chart grid behave on laptops
   (Your reports use .chart-grid)
========================================================= */
@media (max-width: 1200px){
  .chart-grid{
    grid-template-columns: 1fr; /* stack on laptop widths */
  }
  /* Any chart-card forcing span 2 should become normal */
  .chart-card[style*="grid-column: span 2"]{
    grid-column: auto !important;
  }
}

/* =========================================================
   REPORTS ONLY: Severity split should wrap on smaller widths
========================================================= */
@media (max-width: 1200px){
  .severity-split{
    flex-direction: column;
    align-items: stretch;
  }
  .severity-split .sev-canvas{
    min-width: 0 !important;
    width: 100%;
  }
  .severity-split .sev-side{
    min-width: 0 !important;
    width: 100%;
    border-left: none !important;
    border-top: 1px solid rgba(15,23,42,.08);
    padding-left: 0 !important;
    padding-top: 12px;
  }
}
/* =========================================================
   GLOBAL SLT/DASHBOARD RESPONSIVE PATCH
   - Fixes laptop-only layout without relying on inline <style>
   - Safe: only touches common layout classes
========================================================= */

/* Page header blocks should wrap nicely everywhere */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  min-width:0;
}
.page-sub{ color:var(--muted); margin-top:6px; }
.page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

/* Filter card is reusable across pages */
.filter-card{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  min-width:0;
}
.filter-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

/* =========================================================
   KPI GRID: 5 cards row (reusable)
   Use on any page with: <div class="grid kpi-grid"> ... </div>
========================================================= */
.kpi-grid{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:16px;
  min-width:0;
}
.kpi-col{ min-width:0; }

/* Laptop */
@media (max-width: 1200px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile */
@media (max-width: 720px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

/* KPI trend pill + blink can be used anywhere */
.kpi-trend-note{
  display:block;
  font-size:11px;
  color: var(--muted);
  margin-bottom:4px;
}
.kpi-trend{ margin-top:6px; }

.trend{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
}
.trend-up{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color:#065f46;
}
.trend-down{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.25);
  color:#991b1b;
}
.trend-neutral{
  background:#f8fafc;
  color:#0f172a;
}

@keyframes kpiBlink {
  0%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(239,68,68,.35)); }
}
.blink{ animation: kpiBlink 1.1s ease-in-out infinite; }

/* =========================================================
   TABLE SCROLL CONTAINER: safer max-height on laptop screens
========================================================= */
.table-scroll{
  overflow:auto;
  position:relative;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: #fff;

  /* ✅ safer than a fixed "420px" subtraction */
  max-height: min(72vh, 780px);
}

/* If your page has many KPIs/filters, allow more height on small screens */
@media (max-height: 800px){
  .table-scroll{
    max-height: 64vh;
  }
}

/* Ensure anything inside grids can shrink (prevents overflow) */
.grid, .kpi-bar, .filter-card, .table-scroll, .page-head { min-width:0; }
.kpi-grid--mt{ margin-top:16px; }

:root{ --slt-thead-row-h: 34px; } /* single source of truth */
.table-prof.slt-table thead tr.thead-cols th{ top: var(--slt-thead-row-h); }


/* =========================================================
   GLOBAL HEADER ROW (reusable across pages)
   Use: <div class="page-head"> ... </div>
========================================================= */

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  min-width:0;
}

/* right-side action area */
.page-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  min-width:0;
}

/* badge rows / meta rows that must wrap safely */
.badge-row,
.meta-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}

/* Panels inside headers must be allowed to shrink on laptop */
.page-actions .panel{
  min-width: 0 !important;     /* override inline min-width:320px safely */
  width: min(420px, 100%);     /* never exceed available width */
}

/* grid inside that panel should not overflow */
.page-actions .panel .grid{ min-width:0; }

/* =========================================================
   SLA BADGES - make consistent across ALL pages
   (replaces local <style> blocks safely)
========================================================= */
.badge-sla-ok{
  background:#dcfce7;
  border:1px solid #86efac;
  color:#065f46;
}
.badge-sla-warn{
  background:#fef9c3;
  border:1px solid #fde047;
  color:#92400e;
}
.badge-sla-over{
  background:#fee2e2;
  border:1px solid #fca5a5;
  color:#991b1b;
}
/* =========================================================
   GLOBAL PAGE HEADER UTILITIES (use on any page)
========================================================= */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  min-width:0;
}
.page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  min-width:0;
}
.page-sub{ color:var(--muted); margin-top:6px; }

/* =========================================================
   GLOBAL TABLE WRAPPER (safe scrolling on laptop)
========================================================= */
.table-wrap,
.table-scroll,
.my-complaints-table{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-width:0;
  max-width:100%;
}

/* Make any table behave nicely inside scroll containers */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

/* ✅ Important: prevent “header pushes width” on narrow screens */
.table th{
  white-space: normal;
  overflow-wrap: anywhere; /* wraps long headers safely */
  word-break: normal;
  hyphens: auto;
}

/* ✅ Ensure wide tables scroll instead of crushing columns */
.table-responsive{
  min-width: 1200px; /* safe default; adjust if you want */
}

/* =========================================================
   GLOBAL ROW HIGHLIGHT (you use row-danger in templates)
========================================================= */
.row-danger td{
  background:#fff3f3 !important;
}
.row-danger td:first-child{
  box-shadow: inset 4px 0 0 #b42318;
}

/* ================================
   Safeguarding alignment fix
================================ */

.sg-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.sg-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}

.sg-label input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;             /* remove browser default offset */
  vertical-align:middle;
}

/* =========================================================
   ✅ ADDITIONS (NO DELETIONS): FIXES REQUESTED
   1) Reports: overlap blank area on the right
   2) Tables: header words squeezing into vertical letters
========================================================= */

/* 1) Reports layout: make side KPI + form ALWAYS fit, no empty overlap */
.filters-kpi-grid{
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}
.filters-kpi-grid .filters--grid{
  width: 100%;
  max-width: 100%;
}
.kpi-mini--side{
  justify-self: stretch;
  align-self: stretch;
}

/* 1b) Severity split: use grid so it never creates an extra “ghost column” */
.severity-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 16px;
  align-items: center;
}
.severity-split .sev-canvas,
.severity-split .sev-side{
  min-width: 0;
}
.severity-split .sev-side{
  border-left: 1px solid rgba(15,23,42,.08);
  padding-left: 14px;
}
@media (max-width: 1200px){
  .severity-split{ grid-template-columns: 1fr; }
  .severity-split .sev-side{
    border-left: none;
    border-top: 1px solid rgba(15,23,42,.08);
    padding-left: 0;
    padding-top: 12px;
  }
}

/* 2) My Complaints + Recent Complaints: stop header letters stacking */
.my-complaints-table table,
.dashboard-table{
  table-layout: fixed;
  width: 100%;
}
.my-complaints-table thead th,
.dashboard-table thead th{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.15;
  padding: 10px 10px;
  font-size: 12px;
}

/* keep long student names tidy */
.my-complaints-table td:nth-child(4),
.dashboard-table td:nth-child(4){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* make small columns compact */
.my-complaints-table td,
.dashboard-table td{
  padding: 10px 10px;
  font-size: 13px;
}

/* Optional: if table still overflows, reduce header font a touch on smaller screens */
@media (max-width: 1100px){
  .my-complaints-table thead th,
  .dashboard-table thead th{
    font-size: 11px;
  }
}