/*
 * GOLDEN JUBILEE SCHOOL, JALNA - PRE-PRIMARY STYLESHEET
 * High-Fidelity Theming for Jubilee Kids Nursery & CBSE HPC LKG/UKG
 */

:root {
  --navy: #0B2B5C;
  --gold: #F8B817;
  --crimson: #D32F2F;
  --green: #16A34A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Nunito', sans-serif;
  background: #EDF2F7;
  color: #1E293B;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header Branding */
.school-top-bar {
  background: #FFFFFF;
  border-bottom: 4px solid var(--gold);
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(11, 43, 92, 0.08);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.school-brand-cluster { display: flex; align-items: center; gap: 14px; }
.portal-main-logo { width: 85px; height: 85px; max-width: 85px; flex-shrink: 0; }
.school-heading { font-family: 'Cinzel', serif; font-size: 24px; font-weight: 800; color: var(--navy); }
.school-subheading { font-size: 12.5px; font-weight: 700; color: #64748B; }
.estd-badge { display: inline-block; background: var(--gold); color: #000; font-size: 11px; font-weight: 900; padding: 2px 10px; border-radius: 20px; margin-top: 3px; }

.main-body-wrapper { max-width: 1100px; width: 100%; margin: 20px auto; padding: 0 15px; flex-grow: 1; }

/* Auth Panel */
.auth-panel-card {
  max-width: 480px; margin: 30px auto; background: #FFF; border-radius: 14px;
  padding: 32px 28px; box-shadow: 0 12px 35px rgba(11, 43, 92, 0.12); border-top: 6px solid var(--navy); text-align: center;
}
.portal-auth-title { font-size: 20px; color: var(--navy); font-weight: 800; margin-bottom: 4px; }
.portal-auth-session { font-size: 13px; color: #64748B; font-weight: 700; margin-bottom: 20px; }

.form-group { text-align: left; margin-bottom: 15px; }
.form-grid-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 5px; color: #334155; }
.input-ctrl { width: 100%; padding: 10px 14px; border: 2px solid #CBD5E1; border-radius: 8px; font-size: 14px; }
.field-hint { display: block; font-size: 11px; color: #64748B; margin-top: 4px; }
.alert-box { background: #FEF2F2; color: #991B1B; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 700; margin-bottom: 14px; border: 1px solid #F87171; text-align: left; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; border-radius: 6px; cursor: pointer; border: none; }
.btn-submit-auth { width: 100%; background: var(--navy); color: #FFF; padding: 12px; font-size: 15px; margin-top: 8px; }
.btn-logout { background: #FEE2E2; color: #DC2626; border: 1.5px solid #F87171; padding: 6px 14px; font-size: 12px; }

/* Action Toolbar */
.action-dock-bar {
  background: #FFF; border-radius: 10px; padding: 12px 20px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.active-quarter-status { font-size: 14px; font-weight: 800; color: var(--navy); }
.action-button-cluster { display: flex; gap: 10px; }
.btn-action { padding: 8px 16px; color: #FFF; font-size: 13px; border-radius: 6px; }
.btn-print { background: #475569; }
.btn-download { background: var(--navy); }
.btn-share { background: var(--green); }

/* Persistent Identity Strip */
.student-identity-banner {
  background: #FFF; border: 2px solid var(--navy); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.identity-tag { font-size: 11px; font-weight: 800; color: #D97706; text-transform: uppercase; }
.identity-name { font-family: 'Cinzel', serif; font-size: 22px; color: var(--navy); font-weight: 800; }
.identity-meta { font-size: 13px; font-weight: 700; color: #475569; }

/* Page 1 Analytics Box */
.analytics-embedded-box {
  background: #FFF; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; border: 1.5px solid #E2E8F0;
}
.analytics-head { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.analytics-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: center; }
.chart-card { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; padding: 10px; }
.chart-card h5 { font-size: 11.5px; font-weight: 800; margin-bottom: 8px; color: #334155; text-align: center; }

.score-bar-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 11.5px; }
.sbr-label { width: 95px; font-weight: 700; color: #475569; }
.sbr-track { flex-grow: 1; height: 12px; background: #E2E8F0; border-radius: 6px; overflow: hidden; margin: 0 8px; }
.sbr-fill { height: 100%; background: var(--navy); border-radius: 6px; }
.sbr-val { width: 35px; font-weight: 800; color: var(--navy); text-align: right; }

.donut-legend-wrap { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; }
.legend-pill { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 4px; }
.lp-a { background: #DCFCE7; color: #15803D; }
.lp-b { background: #DBEAFE; color: #1D4ED8; }
.lp-c { background: #FEF3C7; color: #B45309; }
.lp-d { background: #FEE2E2; color: #B91C1C; }

/* =============================================================
   JUBILEE KIDS NURSERY CARD (Matches Nursery Sample Report Card)
   ============================================================= */
.nursery-page-sheet {
  background: #FFFDF5; border: 4px solid #FCD34D; border-radius: 14px; padding: 18px 22px; margin-bottom: 22px;
}
.nursery-hero-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #38BDF8 0%, #60A5FA 50%, #FBBF24 100%);
  border-radius: 12px; padding: 12px 18px; color: #FFF; margin-bottom: 14px;
}
.hero-mascot-lion {
  width: 65px; height: 65px; background: #FFF; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2.5px solid #F59E0B;
}
.hero-titles { text-align: center; }
.hero-title-main { font-family: 'Poppins', cursive; font-size: 28px; font-weight: 900; color: #FF2E93; text-shadow: 2px 2px 0px #FFF; }
.hero-title-sub { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 900; color: var(--navy); text-shadow: 1px 1px 0px #FFF; }
.hero-term-tag { display: inline-block; background: #FFF; color: var(--navy); font-weight: 800; font-size: 11px; padding: 2px 12px; border-radius: 14px; margin-top: 4px; }

.nursery-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.nursery-info-card { background: #FFF; border-radius: 10px; padding: 12px; }
.card-student { border: 2px solid #38BDF8; }
.card-about { border: 2px solid #F472B6; }
.nursery-pill-head { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 12px; border-radius: 14px; color: #FFF; margin-bottom: 8px; }
.pill-sky { background: #0284C7; }
.pill-magenta { background: #DB2777; }

.table-demog { width: 100%; font-size: 12px; border-collapse: collapse; }
.table-demog td { padding: 3px 0; }
.table-demog td:first-child { width: 44%; color: #64748B; font-weight: 700; }

.nursery-domain-container { background: #FFF; border-radius: 8px; overflow: hidden; margin-bottom: 12px; border: 1.5px solid #E2E8F0; }
.domain-head-strip { padding: 6px 12px; color: #FFF; font-weight: 800; font-size: 12px; }
.strip-orange { background: #F97316; }
.strip-green { background: #16A34A; }
.strip-blue { background: #0284C7; }
.strip-pink { background: #EC4899; }
.strip-yellow { background: #D97706; }
.strip-purple { background: #8B5CF6; }
.strip-teal { background: #0D9488; }
.strip-indigo { background: #4F46E5; }

.nursery-grid-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.nursery-grid-table th { background: #F8FAFC; padding: 5px 8px; font-weight: 800; border-bottom: 1.5px solid #E2E8F0; }
.col-grade-header { width: 38px; text-align: center; }
.gh-a { background: #DCFCE7; color: #15803D; }
.gh-b { background: #DBEAFE; color: #1D4ED8; }
.gh-c { background: #FEF3C7; color: #B45309; }
.gh-d { background: #FEE2E2; color: #B91C1C; }

.nursery-grid-table td { padding: 4.5px 8px; border-bottom: 1px solid #F1F5F9; }
.skill-desc-cell { font-weight: 700; color: #334155; }
.chk-mark-box { text-align: center; }
.check-glyph { color: #15803D; font-weight: 900; font-size: 14px; }
.empty-glyph { display: inline-block; width: 13px; height: 13px; border: 1.5px solid #CBD5E1; border-radius: 3px; }
.sub-divider td { background: #F1F5F9; font-weight: 800; font-size: 10.5px; text-transform: uppercase; color: #475569; padding: 4px 8px; }

.nursery-sign-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.sign-block-cell { background: #FFF; border: 1.5px solid #CBD5E1; border-radius: 8px; padding: 8px; text-align: center; }
.sign-caption { font-size: 10.5px; font-weight: 800; color: #475569; margin-bottom: 24px; }
.sign-underline { border-bottom: 1.5px dashed #94A3B8; }

.nursery-garden-foot { background: #DCFCE7; color: #15803D; text-align: center; padding: 6px; font-weight: 900; font-size: 12px; border-radius: 8px; }

/* =============================================================
   LKG & UKG CBSE HOLISTIC PROGRESS CARD
   ============================================================= */
.lkg-hpc-card {
  background: #FFF; border-radius: 14px; padding: 24px; border-top: 8px solid var(--navy); box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.hpc-head-strip { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid var(--navy); padding-bottom: 12px; margin-bottom: 14px; }
.hpc-main-crest { width: 85px; height: 85px; max-width: 85px; flex-shrink: 0; }
.hpc-head-meta { flex-grow: 1; text-align: center; }
.hpc-school-title { font-family: 'Cinzel', serif; font-size: 24px; font-weight: 800; color: var(--navy); }
.hpc-school-loc { font-size: 12.5px; font-weight: 700; color: #475569; }
.hpc-report-badge { font-size: 16px; font-weight: 900; color: var(--crimson); margin-top: 4px; }
.hpc-report-sub { font-size: 12px; font-weight: 800; color: #334155; }
.hpc-qtr-chip { display: inline-block; background: var(--navy); color: #FFF; font-size: 11px; font-weight: 800; padding: 2px 14px; border-radius: 12px; margin-top: 3px; }

.hpc-demog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #F8FAFC; border: 1.5px solid #CBD5E1; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; }
.hpc-cca-note { background: #EFF6FF; border-left: 4px solid var(--navy); padding: 8px 12px; font-size: 11px; border-radius: 4px; margin-bottom: 14px; }
.hpc-cca-note h5 { font-size: 11.5px; font-weight: 800; color: var(--navy); margin-bottom: 3px; }
.hpc-cca-note ol { padding-left: 16px; }

.hpc-profile-box { background: #F0F9FF; border: 1.5px solid #BAE6FD; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.hpc-profile-title { font-size: 12px; font-weight: 900; color: #0284C7; margin-bottom: 6px; }
.hpc-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 11.5px; }

.hpc-domain-block { border: 1.5px solid #CBD5E1; border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.domain-banner { background: var(--navy); color: #FFF; padding: 6px 12px; font-size: 12px; font-weight: 800; }
.hpc-eval-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.hpc-eval-table th { background: #F1F5F9; padding: 5px 10px; font-weight: 800; text-align: left; }
.hpc-eval-table td { padding: 5px 10px; border-bottom: 1px solid #F1F5F9; }
.hpc-goal-row th { background: #F8FAFC; color: var(--crimson); font-weight: 900; font-size: 11px; border-top: 1px solid #E2E8F0; }

.grade-badge-pill { display: inline-block; width: 26px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; font-weight: 900; font-size: 11.5px; }
.pill-A { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.pill-B { background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD; }
.pill-C { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.pill-D { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }

.hpc-rubric-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 14px; }
.hpc-rubric-table th, .hpc-rubric-table td { padding: 4.5px 8px; border: 1px solid #CBD5E1; }
.hpc-rubric-table th { background: #F8FAFC; font-weight: 800; }

.hpc-attendance-bar { background: #F8FAFC; border: 1px solid #CBD5E1; border-radius: 6px; padding: 8px 12px; font-size: 11.5px; display: flex; justify-content: space-between; margin-bottom: 16px; }

.hpc-signatures-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; text-align: center; }
.sig-line-mark { height: 28px; border-bottom: 1.5px solid #000; margin-bottom: 4px; }
.hpc-signatures-row p { font-size: 11px; font-weight: 800; color: #334155; }

/* Dynamic Footer */
.portal-audit-footer { background: #FFFFFF; border-top: 1px solid #CBD5E1; padding: 10px; text-align: center; font-size: 11.5px; color: #64748B; margin-top: auto; }
.dev-tag { font-weight: 800; color: var(--navy); }

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
  .header-inner { flex-direction: column; text-align: center; }
  .school-brand-cluster { flex-direction: column; }
  .form-grid-pair, .nursery-profile-grid, .hpc-demog-grid, .analytics-grid { grid-template-columns: 1fr; }
  .action-dock-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .action-button-cluster { flex-direction: column; }
}

/* Print Rules - Zero Gaps, Forced Mobile Colors, Clean Pagination */
/* ==============================================================
   PRINT ENGINE: COMPACT, NATURAL FLOW (NO 11-PAGE EXPLOSION)
   ============================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 5mm 6mm 5mm 6mm !important;
  }
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body {
    background: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .no-print, .action-dock-bar, .school-top-bar, .portal-audit-footer {
    display: none !important;
  }
  .main-body-wrapper, #reportCardPrintArea {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .nursery-page-sheet, .lkg-hpc-card {
    border: none !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
    margin: 0 !important;
  }
  .nursery-profile-grid, .hpc-demog-grid, .analytics-panel {
    margin-bottom: 6px !important;
    padding: 6px 10px !important;
  }
  .nursery-domain-container, .hpc-domain-block {
    margin-bottom: 5px !important;
  }
  .column-chart-container, .doughnut-container {
    height: 140px !important;
  }
  /* Continuous table flow: individual rows stay whole, domains flow naturally */
  table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .page-break-next {
    page-break-before: always !important;
    break-before: page !important;
  }
}
.school-logo, .portal-main-logo, .hpc-main-crest {
  width: 85px !important;
  height: 85px !important;
  max-width: 85px !important;
  max-height: 85px !important;
  object-fit: contain !important;
  display: block !important;
}
/* Fix Table Wrapping & Keep Grade Badges Visible */
.hpc-eval-table, .nursery-grid-table, .hpc-rubric-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  white-space: normal !important;
}
.hpc-eval-table td, .nursery-grid-table td {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: normal !important;
}
.hpc-eval-table th:last-child,
.hpc-eval-table td:last-child {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ==============================================================
   1. DESKTOP / LAPTOP LAYOUT: SIDE-BY-SIDE 2-COLUMN GRID (>= 769px)
   ============================================================== */
.analytics-panel {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  border: 2px solid #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

.analytics-panel-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0B2B5C !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 3fr (Column Chart) : 2fr (Doughnut Chart) */
.charts-row-pair {
  display: grid !important;
  grid-template-columns: 3fr 2fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
}

.chart-box {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.chart-box h6 {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  margin-bottom: 12px !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
  padding-bottom: 6px !important;
  text-align: center !important;
}

.column-chart-container {
  display: flex !important;
  justify-content: space-around !important;
  align-items: flex-end !important;
  height: 165px !important;
  padding-top: 30px !important;
  padding-bottom: 6px !important;
  border-bottom: 3px solid #94A3B8 !important;
  box-sizing: border-box !important;
}

.col-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: 50px !important;
}

.col-pct-label {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #0B2B5C !important;
}

.col-bar {
  width: 34px !important;
  background: linear-gradient(180deg, #1E40AF 0%, #0B2B5C 100%) !important;
  border-radius: 5px 5px 0 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  transition: height 0.3s ease !important;
}

.col-axis-tag {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  margin-top: 4px !important;
  text-align: center !important;
}

.doughnut-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  height: 165px !important;
}

.donut-visual {
  width: 120px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
}

.donut-pct-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-align: left !important;
  width: 100% !important;
  max-width: 160px !important;
}

/* ==============================================================
   2. MOBILE VIEW: CLEAN VERTICAL STACKING (< 768px)
   ============================================================== */
@media (max-width: 768px) {
  .charts-row-pair {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .chart-box {
    width: 100% !important;
    padding: 12px 10px !important;
  }

  .analytics-panel {
    padding: 12px 10px !important;
    width: 100% !important;
  }

  .column-chart-container {
    height: 155px !important;
    padding-top: 25px !important;
  }

  .col-group {
    width: auto !important;
    flex: 1 !important;
  }

  .col-bar {
    width: 26px !important;
  }

  .doughnut-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    gap: 10px !important;
    padding: 6px 0 !important;
  }

  .donut-visual {
    width: 105px !important;
    height: 105px !important;
  }

  .donut-pct-list {
    width: 100% !important;
    max-width: 240px !important;
  }

  .lkg-hpc-card, .nursery-page-sheet {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 14px 10px !important;
  }
}