/* =========================
   School Page – Layout
   ========================= */
.school-card{
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:15px;
  margin-bottom:20px;
  background:#fff;
}

.school-meta p{
  margin:6px 0;
  font-size:14px;
  color:#333;
}

.school-map{
  width:100%;
  height:420px;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:15px;
}

.school-title{ margin:0 0 6px 0; }

.school-subtitle{
  font-size:18px;
  font-weight:700;
  color:#666;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:18px;
}

.school-header{
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid #eee;
}

/* =========================
   EQAO – Table (Compare)
   ========================= */
.eqao-table-wrap{
  margin-top:10px;
}

/* Table */
.eqao-table.eqao-compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

/* Base cells */
.eqao-table.eqao-compare th,
.eqao-table.eqao-compare td{
  padding:12px 14px;
  font-size:14px;
  vertical-align:middle;
  border-bottom:1px solid #f0f0f0;

  /* HARD RESET: remove ALL vertical borders from Bootstrap/theme */
  border-left:0 !important;
  border-right:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

.eqao-table.eqao-compare th{
  background:#fafafa;
  font-weight:700;
}

.eqao-table.eqao-compare tr:last-child td{ border-bottom:0; }

/* First column (Metric) */
.eqao-table.eqao-compare td:first-child{
  font-weight:700;
  color:#222;
  width:26%;
}

/* =========================
   ONLY the 2 vertical lines you want (DESKTOP)
   ========================= */

/* (1) Vertical line AFTER Metric column */
.eqao-table.eqao-compare thead th[rowspan="2"],
.eqao-table.eqao-compare tbody td:first-child{
  border-right:1px solid #ededed !important;
}

/* (2) Divider between Grade 3 and Grade 6 */

/* Header row 1: Metric | Grade 3 | Grade 6 -> line before Grade 6 */
.eqao-table.eqao-compare thead tr:first-child th:nth-child(3){
  border-left:2px solid #e2e2e2 !important;
}

/* Header row 2: 6 th's (Metric not here because rowspan)
   Grade 6 "School" is th #4 */
.eqao-table.eqao-compare thead tr:nth-child(2) th:nth-child(4){
  border-left:2px solid #e2e2e2 !important;
}

/* Body normal rows (7 cells): before Grade 6 School = td #5 */
.eqao-table.eqao-compare tbody tr:not(.eqao-legend-row):not(.eqao-divider-row) td:nth-child(5){
  border-left:2px solid #e2e2e2 !important;
}

/* Trend rows (3 cells): Metric | G3 block | G6 block -> line before G6 = td #3 */
.eqao-table.eqao-compare tbody tr.eqao-section-divider td:nth-child(3){
  border-left:2px solid #e2e2e2 !important;
}

/* Prevent accidental lines inside Grade 3 + Grade 6 subcolumns */
.eqao-table.eqao-compare thead tr:nth-child(2) th:nth-child(2),
.eqao-table.eqao-compare thead tr:nth-child(2) th:nth-child(3),
.eqao-table.eqao-compare thead tr:nth-child(2) th:nth-child(5),
.eqao-table.eqao-compare thead tr:nth-child(2) th:nth-child(6),
.eqao-table.eqao-compare tbody td:nth-child(2),
.eqao-table.eqao-compare tbody td:nth-child(3),
.eqao-table.eqao-compare tbody td:nth-child(6),
.eqao-table.eqao-compare tbody td:nth-child(7){
  border-left:0 !important;
  border-right:0 !important;
}

/* =========================
   Horizontal dividers (DESKTOP)
   ========================= */
.eqao-table.eqao-compare tbody tr.eqao-strong-divider > td{
  border-bottom:2px solid #e2e2e2 !important;
}

.eqao-divider-row td{
  padding:0 !important;
  height:12px;
  background:#f7f7f7;
  border-bottom:0 !important;
}

/* Trend rows bottom line (desktop) */
.eqao-section-divider td{
  border-bottom:1px solid #ededed !important;
}

/* =========================
   Legend rows (inside table)
   ========================= */
.eqao-legend-row td{
  background:#fff;
  padding:10px 14px;
  border-top:1px dashed #dcdcdc !important;
  border-bottom:1px solid #f0f0f0 !important;

  /* keep legend clean */
  border-left:0 !important;
  border-right:0 !important;
}

.eqao-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  font-size:12px;
  color:#666;
}

.eqao-legend .item{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.eqao-legend .dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
}

/* legend dots */
.eqao-legend .good{ background:#117a3a; }
.eqao-legend .mid { background:#8a5a00; }
.eqao-legend .weak{ background:#a61b1b; }
.eqao-legend .up  { background:#1f6feb; }
.eqao-legend .down{ background:#d97706; }

/* =========================
   Pills / Text Colors
   ========================= */
.muted{ color:#777; }

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  border:1px solid #e8e8e8;
  background:#fcfcfc;
  line-height:1.2;
}

.badge.good{ background:#e9f7ef; border-color:#cdeedb; color:#117a3a; }
.badge.mid { background:#fff7e6; border-color:#ffe0a8; color:#8a5a00; }
.badge.weak{ background:#fdecec; border-color:#f7c2c2; color:#a61b1b; }

.diff{ font-weight:900; white-space:nowrap; }
.diff.up  { color:#1f6feb; }
.diff.down{ color:#d97706; }
.diff.flat{ color:#666; }

.trend{ font-weight:900; }
.trend.up  { color:#1f6feb; }
.trend.down{ color:#d97706; }
.trend.flat{ color:#666; }

.diff.up::before,
.trend.up::before{ content:"▲ "; font-size:11px; }
.diff.down::before,
.trend.down::before{ content:"▼ "; font-size:11px; }


/* ============================================================
   MOBILE: stack rows (NO horizontal scrolling) + iPhone SAFE lines
   ============================================================ */
@media (max-width: 600px){

  /* Hide table header */
  .eqao-table.eqao-compare thead{ display:none; }

  .eqao-table.eqao-compare,
  .eqao-table.eqao-compare tbody,
  .eqao-table.eqao-compare tr{
    display:block;
    width:100%;
  }

  /* Stop relying on TR borders (Safari breaks them) */
  .eqao-table.eqao-compare tr{
    border-bottom:0 !important;
  }

  /* Make each TD become one stacked row */
  .eqao-table.eqao-compare td{
    display:grid !important;
    grid-template-columns:120px 1fr;
    align-items:center;
    column-gap:12px;
    padding:10px 12px;

    border-left:0 !important;
    border-right:0 !important;
    border-bottom:1px solid #f0f0f0 !important;
  }

  /* Label column */
  .eqao-table.eqao-compare td::before{
    font-weight:600;
    color:#777;
    white-space:nowrap;
  }

  /* Value column */
  .eqao-table.eqao-compare td > *{
    justify-self:end;
    text-align:right;
    min-width:0;
  }

  /* Keep Metric text in one line */
  .eqao-table.eqao-compare tr.eqao-strong-divider td:first-child > *,
  .eqao-table.eqao-compare tr.eqao-section-divider td:first-child > *{
    white-space:nowrap !important;
    word-break:keep-all;
  }

  /* Legend rows */
  .eqao-table.eqao-compare tr.eqao-legend-row td{
    display:block !important;
    padding:10px 12px !important;
    border-bottom:1px solid #f0f0f0 !important;
  }

  /* Spacer row */
  .eqao-table.eqao-compare tr.eqao-divider-row td{
    display:block !important;
    height:10px;
    padding:0 !important;
    border-bottom:0 !important;
  }

  /* ===== Labels for performance rows (7 cells) ===== */
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(1)::before{ content:"Metric"; }
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(2)::before{ content:"G3 School"; }
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(3)::before{ content:"G3 Prov"; }
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(4)::before{ content:"G3 Diff"; }
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(5)::before{ content:"G6 School"; }
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(6)::before{ content:"G6 Prov"; }
  .eqao-table.eqao-compare tr.eqao-strong-divider td:nth-child(7)::before{ content:"G6 Diff"; }

  /* ===== Labels for trend rows (3 cells) ===== */
  .eqao-table.eqao-compare tr.eqao-section-divider td:nth-child(1)::before{ content:"Metric"; }
  .eqao-table.eqao-compare tr.eqao-section-divider td:nth-child(2)::before{ content:"Grade 3"; }
  .eqao-table.eqao-compare tr.eqao-section-divider td:nth-child(3)::before{ content:"Grade 6"; }

  /* =========================================================
     iPhone SAFE full-width divider (drawn from last TD)
     ========================================================= */

  .eqao-table.eqao-compare tr.eqao-strong-divider td:last-child,
  .eqao-table.eqao-compare tr.eqao-section-divider td:last-child{
    position:relative;
    padding-bottom:20px !important;
  }

  .eqao-table.eqao-compare tr.eqao-strong-divider td:last-child::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    border-bottom:2px solid #d8d8d8;
  }

  .eqao-table.eqao-compare tr.eqao-section-divider td:last-child::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:6px;
    border-bottom:1px solid #e2e2e2;
  }
}