/* Shared EPM interface scale and palette. Keep this after page-specific styles. */
:root {
  --epm-ink: #263d53;
  --epm-muted: #607387;
  --epm-blue: #116b91;
  --epm-blue-dark: #125474;
  --epm-border: #dbe4ec;
  --epm-surface: #ffffff;
  --epm-background: #f5f8fb;
  --epm-danger: #b4233a;
  --epm-danger-soft: #fff1f3;
  --epm-focus: #ffbe44;
}
html { font-size: 15px; }
body, body button, body input, body select, body textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--epm-ink);
}
body { background-color: var(--epm-background); }
body .header.bg-gradient-primary { background: var(--epm-blue) !important; }
body .bg-primary { background-color: var(--epm-blue) !important; }
body .text-primary { color: var(--epm-blue) !important; }
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: inherit;
  color: var(--epm-ink);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
}
body p, body li, body td, body .text-sm { line-height: 1.5; }
body .text-muted, body .mapping-help { color: var(--epm-muted) !important; }
body a { color: var(--epm-blue); }
body a:hover { color: var(--epm-blue-dark); }
body .btn { font-size: 13px; font-weight: 600; line-height: 1.35; border-radius: 6px; box-shadow: none; padding: 9px 14px; }
body .btn-sm { font-size: 12px; padding: 7px 11px; min-height: 32px; }
body .btn-primary, body .btn-info { background-color: var(--epm-blue); border-color: var(--epm-blue); }
body .btn-primary:hover, body .btn-info:hover { background-color: var(--epm-blue-dark); border-color: var(--epm-blue-dark); }
body .btn-outline-primary { color: var(--epm-blue); border-color: #8bacbe; }
body .btn-outline-primary:hover { background-color: var(--epm-blue); border-color: var(--epm-blue); }
body .btn-success { background: var(--epm-blue); border-color: var(--epm-blue); }
body .btn-success:hover, body .btn-success:focus { background: var(--epm-blue-dark); border-color: var(--epm-blue-dark); }
body .btn-danger { color: var(--epm-danger); background: var(--epm-danger-soft); border-color: #efb7c0; }
body .btn-danger:hover, body .btn-danger:focus { color: #fff; background: var(--epm-danger); border-color: var(--epm-danger); }
body .btn-warning { color: #644300; background: #fff5d8; border-color: #e7c76a; }
body .btn-default, body .btn-secondary { color: var(--epm-ink); background: #fff; border-color: #b9c8d4; }
body .btn.epm-action-primary, body input.btn.epm-action-primary { color: #fff; background: var(--epm-blue); border-color: var(--epm-blue); }
body .btn.epm-action-danger, body input.btn.epm-action-danger { color: var(--epm-danger); background: var(--epm-danger-soft); border-color: #efb7c0; }
body .btn.epm-action-secondary, body input.btn.epm-action-secondary { color: var(--epm-ink); background: #fff; border-color: #b9c8d4; }
body .form-control, body .custom-select, body select.form-control {
  min-height: 40px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 6px;
  border-color: #bdcbd7;
  color: var(--epm-ink);
  box-shadow: none;
}
body textarea.form-control { min-height: 90px; }
body .form-control:focus, body .custom-select:focus, body select.form-control:focus {
  border-color: #4c91ad;
  box-shadow: 0 0 0 3px rgba(17,107,145,.12);
}
body .form-group { margin-bottom: 16px; }
body .form-control-alternative { box-shadow: none; }
body .form-control-label, body label { font-size: 13px; font-weight: 600; color: #40566b; }
body .card, body .mapping-panel, body .mapping-metric, body .education-section {
  border: 1px solid var(--epm-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(25, 55, 78, .035);
}
body .card-header { border-bottom-color: var(--epm-border); }
body .card-header { background: #fff; padding: 18px 20px; }
body .card-header h2, body .card-header h3, body .card-header h4 { margin: 0; font-size: 18px; }
body .card-body { padding: 20px; }
body .table th, body .mapping-table th { color: #50657a; font-size: 11px; font-weight: 700; letter-spacing: .045em; }
body .table td, body .mapping-table td { color: var(--epm-ink); font-size: 13px; }
body .table { margin-bottom: 0; width: 100% !important; }
body .table thead th { background: #f3f7fa; border-top: 0; border-bottom: 1px solid #cad7e1; padding: 11px 12px; white-space: nowrap; }
body .table tbody td, body .table tbody th { border-color: #e5ebf0; padding: 11px 12px; vertical-align: top; font-weight: 400; }
body .table tbody tr:hover { background: #f8fbfd; }
body .table-responsive, body .epm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 8px 8px; }
body .table .media { align-items: flex-start !important; }
body .table .text-sm { white-space: normal; overflow-wrap: anywhere; }
body .navbar-vertical .navbar-nav .nav-link { font-size: 14px; color: #506478; }
body .navbar-vertical .navbar-nav .nav-link:hover,
body .navbar-vertical .navbar-nav .nav-link.active { color: var(--epm-blue-dark); }
body .epm-menu-heading { display: block; margin: 16px 16px 5px; padding: 0; color: #667b8c; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
body .navbar-vertical .nav-link i { color: #5a7890; }
body .navbar-vertical .nav-link.active { background: #edf5f9; border-radius: 5px; font-weight: 600; }
body .epm-detail-menu summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
body .epm-detail-menu summary::-webkit-details-marker { display: none; }
body .epm-detail-menu summary::after { content: "▾"; margin-left: auto; font-size: 11px; color: #678092; }
body .epm-submenu { margin-left: 14px; padding-left: 5px; border-left: 1px solid #dbe4ec; }
body .epm-submenu .nav-link { padding-top: 7px; padding-bottom: 7px; }

/* Legacy record pages share the same compact shell and controls. */
body .main-content > .header { padding-top: 22px !important; padding-bottom: 58px !important; background: var(--epm-blue) !important; }
body .main-content > .header h1, body .main-content > .header h2, body .main-content > .header h3,
body .main-content > .header .text-white { color: #fff !important; }
body .main-content > .container-fluid { padding-left: 24px; padding-right: 24px; }
body .main-content > .container-fluid.mt--7 { margin-top: -34px !important; }
body .dataTables_wrapper { color: var(--epm-muted); font-size: 13px; padding: 0 20px 16px; }
body .dataTables_wrapper .row:first-child { align-items: end; padding-top: 16px; }
body .dataTables_length label, body .dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
body .dataTables_filter { text-align: right; }
body .dataTables_filter label { justify-content: flex-end; }
body .dataTables_filter input, body .dataTables_length select {
  min-height: 38px; border: 1px solid #bdcbd7; border-radius: 6px; background: #fff; color: var(--epm-ink); padding: 7px 10px;
}
body .dataTables_filter input { width: min(260px, 52vw); margin-left: 0; }
body .dataTables_length select { min-width: 68px; }
body .dataTables_info { padding-top: 15px !important; }
body .dataTables_paginate { padding-top: 10px !important; }
body .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 36px; margin: 0 2px; padding: 7px 10px !important; border: 1px solid #d1dce5 !important; border-radius: 5px !important; background: #fff !important; color: #435b70 !important;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff !important; background: var(--epm-blue) !important; border-color: var(--epm-blue) !important;
}
body .dt-buttons { display: none !important; }
body .modal-content { border: 0; border-radius: 10px; box-shadow: 0 18px 55px rgba(20,49,72,.22); overflow: hidden; }
body .modal-dialog { max-width: min(920px, calc(100vw - 32px)); }
body .modal-header { align-items: center; padding: 17px 20px; background: #f7fafc; border-bottom: 1px solid var(--epm-border); }
body .modal-header .breadcrumb, body .modal-header h4 { margin: 0; padding: 0; background: transparent; font-size: 18px; }
body .modal-body { padding: 20px; max-height: calc(100vh - 180px); overflow-y: auto; }
body .modal-footer { padding: 14px 20px; background: #f7fafc; border-top: 1px solid var(--epm-border); gap: 8px; }
body .alert { border: 1px solid transparent; border-radius: 7px; box-shadow: none; font-size: 13px; }
body .alert-success { color: #22543d; background: #effaf4; border-color: #b9dfc9; }
body .alert-danger { color: #842033; background: #fff1f3; border-color: #efb7c0; }
body .alert-info { color: #24536a; background: #eff8fc; border-color: #bddde9; }
body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible,
body summary:focus-visible { outline: 3px solid var(--epm-focus); outline-offset: 2px; }

/* Coordination pages use the same scale as the rest of the application. */
body .mapping-header { background: var(--epm-blue); padding: 22px 28px 51px; }
body .mapping-header h1 { color: #fff; font-size: 23px; font-weight: 600; }
body .mapping-content { padding: 0 28px 28px; margin-top: -28px; }
body .mapping-panel { padding: 22px; margin-bottom: 18px; }
body .mapping-panel h2 { font-size: 18px; }
body .mapping-panel h3 { font-size: 16px; }
body .mapping-tabs { gap: 5px; margin-bottom: 18px; }
body .mapping-tabs a { padding: 8px 12px; border: 1px solid #d4e0e9; border-radius: 6px; font-size: 13px; color: #3b5870; }
body .mapping-tabs a.active { background: var(--epm-blue-dark); border-color: var(--epm-blue-dark); color: #fff; }
body .mapping-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 12px; color: var(--epm-muted); }
body .mapping-breadcrumb a { color: var(--epm-blue); }
body .epm-find-work { align-items: end; }
body .epm-find-work label { width: 100%; margin-bottom: 0; }
body .epm-find-work .form-control { flex: 1 1 300px; }
body .epm-find-results { border-top: 1px solid var(--epm-border); margin-top: 16px; padding-top: 14px; }
body .epm-find-result { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e9eef2; }
body .epm-find-result span { color: var(--epm-muted); font-size: 12px; }
body .epm-journey h2 { margin-bottom: 13px; }
body .epm-journey-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
body .epm-journey-links a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--epm-border); border-radius: 6px; color: var(--epm-ink); font-weight: 600; }
body .epm-journey-links a:hover { border-color: #8cb6c9; background: #f5fafc; text-decoration: none; }
body .epm-journey-links span { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; background: #e7f2f7; color: var(--epm-blue); font-size: 11px; }
@media (max-width: 650px) { body .epm-find-result { display: block; } body .epm-find-result span { display: block; margin-top: 3px; } }
@media (max-width: 900px) { body .epm-journey-links { grid-template-columns: 1fr; } }
body .mapping-metrics { gap: 14px; margin-bottom: 18px; }
body .mapping-metric { padding: 16px 18px; }
body .mapping-metric strong { color: #25445e; font-size: 23px; font-weight: 600; line-height: 1.2; }
body .mapping-metric span { color: var(--epm-muted); font-size: 12px; }
body .mapping-table td { padding: 12px; line-height: 1.5; }
body .mapping-table th { padding: 11px 12px; }
body .mapping-help { font-size: 13px; line-height: 1.5; }
body .mapping-badge { color: #245b78; background: #edf4f8; border-radius: 5px; font-size: 11px; }
body .section-kicker { color: var(--epm-blue); font-size: 11px; font-weight: 700; letter-spacing: .055em; }
body .sector-switcher { border: 1px solid #bed4e1; border-radius: 8px; padding: 16px 18px; box-shadow: none; }
body .sector-switcher label { color: var(--epm-ink); font-size: 15px; font-weight: 600; }
body .education-dashboard { border-top: 3px solid var(--epm-blue); }
body .education-heading { padding-bottom: 14px; margin-bottom: 16px; }
body .education-heading h2 { font-size: 21px; font-weight: 600; }
body .education-macro-grid { grid-template-columns:repeat(5,minmax(0,1fr));gap: 12px; margin-bottom: 16px; }
@media(max-width:1100px){body .education-macro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
body .implementation-locations-card{margin:0 0 16px;padding:18px}
body .implementation-location-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 16px}
body .implementation-location-metrics>div{border:1px solid #d8e7f0;border-radius:8px;background:#f2f8fc;padding:12px 14px}
body .implementation-location-metrics strong{display:block;color:#0b668f;font-size:24px;line-height:1.1}
body .implementation-location-metrics span{display:block;color:#52677f;font-size:13px;margin-top:4px}
body .location-summary-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:767px){body .implementation-location-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){body .location-summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
body .education-stat, body .gender-grid div, body .equipment-counts div { background: #f4f8fb; padding: 14px 16px; border-radius: 6px; }
body .education-stat strong, body .gender-grid strong, body .equipment-counts strong { color: #25445e; font-size: 21px; font-weight: 600; line-height: 1.25; }
body .education-stat span, body .gender-grid span, body .equipment-counts span { color: var(--epm-muted); font-size: 12px; }
body .education-section { padding: 16px; }
body .education-section h3 { font-size: 16px; margin-bottom: 12px; }
body .province-track i { background: #2b91b7; }
/* Dynamic home dashboard. */
body .dashboard-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
body .dashboard-intro h2 { margin-bottom: 4px; }
body .dashboard-custom-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
body .dashboard-custom-metric { padding: 17px 18px; background: #fff; border: 1px solid var(--epm-border); border-radius: 8px; }
body .dashboard-custom-metric strong { display: block; color: #25445e; font-size: 25px; line-height: 1.2; }
body .dashboard-custom-metric strong small { margin-left: 4px; color: var(--epm-muted); font-size: 12px; font-weight: 600; }
body .dashboard-custom-metric > span { display: block; margin-top: 6px; color: var(--epm-muted); font-size: 12px; }
body .dashboard-custom-metric p { margin: 9px 0 0; font-size: 11px; color: var(--epm-muted); }
body .dashboard-chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body .dashboard-chart-card { min-width: 0; margin-bottom: 0; }
body .dashboard-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body .dashboard-chart-heading h3 { margin: 0; }
body .dashboard-chart-heading > span { color: var(--epm-muted); font-size: 11px; text-align: right; }
body .dashboard-donut-layout { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center; }
body .dashboard-donut { width: 150px; height: 150px; margin: auto; border-radius: 50%; position: relative; }
body .dashboard-donut::after { content: ""; position: absolute; inset: 31px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--epm-border); }
body .dashboard-legend { min-width: 0; }
body .dashboard-legend a { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; color: var(--epm-ink); font-size: 12px; border-bottom: 1px solid #edf1f4; }
body .dashboard-legend a:hover { text-decoration: none; color: var(--epm-blue); }
body .dashboard-legend i { width: 9px; height: 9px; border-radius: 2px; }
body .dashboard-legend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .dashboard-bars-scroll { max-height: 325px; overflow-y: auto; padding-right: 5px; }
body .dashboard-bar-row { margin-bottom: 12px; }
body .dashboard-bar-row > div:first-child { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 12px; }
body .dashboard-bar-row span { min-width: 0; overflow-wrap: anywhere; }
body .dashboard-bar-track { height: 8px; overflow: hidden; background: #e8eff4; border-radius: 10px; }
body .dashboard-bar-track i { display: block; height: 100%; min-width: 3px; background: linear-gradient(90deg,var(--epm-blue),#22a7cc); border-radius: 10px; }
body .dashboard-rank-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e8eef2; font-size: 12px; }
body .dashboard-rank-list > div:last-child { border-bottom: 0; }
body .dashboard-custom-charts { margin-top: 16px; }
body .dashboard-map-card { margin-top: 16px; padding: 0; overflow: hidden; }
body .dashboard-map-card > .dashboard-chart-heading { padding: 18px 20px 0; }
body .deferred-map-frame { position: relative; min-height: 520px; background: #edf5f9; }
body .deferred-map-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #476277; font-size: 14px; font-weight: 650; }
body .deferred-map-status i { color: #159dc2; font-size: 24px; }
body .deferred-map-frame iframe { position: relative; z-index: 1; background: transparent; }
body .deferred-map-frame.is-loaded .deferred-map-status { display: none; }
body .dashboard-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
body .dashboard-settings-form .chart-setting { display: none; }
body.dashboard-chart-mode .dashboard-settings-form .chart-setting { display: block; }
body .dashboard-active { display: inline-flex; align-items: center; gap: 8px; }
body .dashboard-active input { width: 18px; height: 18px; }
/* Education summary supplied for the home dashboard. */
body .dashboard-overview-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 12px; padding: 14px 18px; border: 1px solid var(--epm-border); border-radius: 10px; background: #fff; }
body .dashboard-overview-heading h2 { margin: 0; color: var(--epm-ink); font-size: 23px; }
body .dashboard-topic-nav { display: flex; flex-wrap: wrap; gap: 8px; }
body .dashboard-topic-nav a { display: inline-flex; min-height: 36px; align-items: center; padding: 7px 12px; border: 1px solid #bad4e3; border-radius: 6px; color: #145c7e; background: #f6fbfe; font-size: 13px; font-weight: 700; text-decoration: none; }
body .dashboard-topic-nav a:hover, body .dashboard-topic-nav a:focus-visible { border-color: #176b91; color: #fff; background: #176b91; }
body .dashboard-topic-group { padding: 18px; margin-bottom: 12px; scroll-margin-top: 18px; }
body .dashboard-topic-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--epm-border); }
body .dashboard-topic-heading > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; color: #fff; background: #176b91; font-size: 12px; font-weight: 800; }
body .dashboard-topic-heading h3 { margin: 0; color: var(--epm-ink); font-size: 21px; font-weight: 750; }
body .dashboard-learning-grid { display: grid; grid-template-columns: 1.35fr .75fr 1.3fr; gap: 12px; align-items: stretch; }
body .dashboard-learning-grid > div, body .dashboard-resources-grid > div:not(.mapping-panel) { min-width: 0; padding: 15px; border: 1px solid #d9e5ec; border-radius: 9px; background: #fbfdfe; }
body .dashboard-learning-grid .education-callouts, body .dashboard-resources-grid .education-callouts { display: flex; align-items: center; }
body .dashboard-resources-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 12px; align-items: start; }
body .dashboard-grade-breakdown { margin-top: 12px; }
body .dashboard-resources-grid > .education-ratio-card { grid-column: 1; grid-row: 1; }
body .dashboard-resources-grid > .education-callouts { grid-column: 1; grid-row: 2; }
body .dashboard-resources-grid > .teacher-gender-panel { grid-column: 2; grid-row: 1/3; min-width: 0; margin: 0; padding: 15px; }
body .dashboard-resources-grid .teacher-gender-body { grid-template-columns: 150px minmax(0,1fr); gap: 14px; margin: 12px 0 8px; }
body .dashboard-resources-grid .teacher-gender-pie { width: 150px; }
body .dashboard-resources-grid .teacher-gender-legend { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
body .dashboard-resources-grid .teacher-gender-legend > div { grid-template-columns: 12px 1fr; gap: 3px 8px; padding: 9px; border-radius: 6px; background: #f5fafc; font-size: 12px; }
body .dashboard-resources-grid .teacher-gender-legend strong, body .dashboard-resources-grid .teacher-gender-legend b { grid-column: 2; min-width: 0; text-align: left; }
body .dashboard-resources-grid .school-province-heading { gap: 7px; padding-bottom: 9px; }
body .dashboard-resources-grid .school-province-heading h2 { font-size: 16px; }
body .dashboard-resources-grid .school-province-heading > strong { font-size: 18px; }
body .dashboard-resource-detail-grid { display: block; }
body .dashboard-geography-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(290px,1fr); gap: 12px; align-items: start; }
body .dashboard-geography-grid .education-urban-chart { height: 510px; }
body .dashboard-geography-grid .education-vertical-bars { height: 430px; }
body .dashboard-topic-group > .school-province-panel { margin-bottom: 12px; }
body .dashboard-topic-group > .dashboard-map-card { margin: 12px 0 0; }
body .education-summary { overflow: hidden; }
body .education-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--epm-border); }
body .education-summary-heading h2 { margin: 0; font-size: 24px; }
body .education-headline-grid { display: grid; grid-template-columns: 1.35fr 1.25fr 1.45fr 1.8fr; gap: 14px; align-items: stretch; padding: 20px 0; }
body .education-headline-grid > div { min-width: 0; border: 1px solid #d9e5ec; border-radius: 9px; background: #fbfdfe; padding: 16px; }
body .education-ring-card { display: flex; align-items: center; justify-content: center; gap: 17px; }
body .education-ring { position: relative; display: grid; place-content: center; width: 188px; height: 188px; flex: 0 0 188px; border-radius: 50%; text-align: center; }
body .education-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body .education-ring strong, body .education-ring span { position: relative; z-index: 1; pointer-events: none; }
body .education-ring strong { color: var(--epm-blue); font-size: 31px; line-height: 1; }
body .education-ring span { max-width: 112px; margin: 7px auto 0; color: var(--epm-ink); font-size: 14px; font-weight: 700; }
body .education-ring-key { display: grid; gap: 12px; color: #536b80; font-size: 11px; }
body .education-ring-key span { display: grid; grid-template-columns: 11px 34px auto; align-items: center; gap: 6px; white-space: nowrap; }
body .education-ring-key span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 2px; background: #087ca5; }
body .education-ring-key span:nth-child(2)::before { background: #66c1e2; } body .education-ring-key span:nth-child(3)::before { background: #273b4a; }
body .education-ring-key b { color: #2f4a61; font-size: 12px; }
body .education-callouts { display: grid; gap: 12px; }
body .education-callouts div { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; }
body .education-callouts i { color: #21a6cc; font-size: 35px; text-align: center; }
body .education-callouts p { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; margin: 0; }
body .education-callouts strong { color: var(--epm-blue); font-size: 25px; }
body .education-callouts span { color: #50677b; font-size: 12px; font-weight: 600; }
body .dashboard-resources-grid > .education-callouts { padding: 12px 16px; border-color: #79c6e2; border-left: 5px solid #159dc2; background: linear-gradient(110deg,#d7eef8 0%,#eaf7fc 100%); box-shadow: 0 2px 8px #14587512; }
body .dashboard-resources-grid > .education-callouts > div { grid-template-columns: 50px 1fr; gap: 12px; }
body .dashboard-resources-grid > .education-callouts i { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 9px; color: #0f86ab; background: #bfe5f3; font-size: 27px; }
body .dashboard-resources-grid > .education-callouts p { gap: 10px; }
body .dashboard-resources-grid > .education-callouts strong { color: #075f83; font-size: 32px; line-height: 1; }
body .dashboard-resources-grid > .education-callouts span { color: #35536a; font-size: 14px; line-height: 1.35; }
body .education-ratio-card h3 { margin: 0 0 16px; color: #344e65; font-size: 16px; font-weight: 700; line-height: 1.35; text-transform: none; letter-spacing: normal; }
body .education-ratio-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body .education-ratio-item { display: flex; min-height: 120px; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #79c3df; color: #50677b; text-align: center; }
body .education-ratio-value { display: flex; align-items: center; justify-content: center; gap: 9px; color: #21a6cc; }
body .education-ratio-value i { font-size: 19px; }
body .education-ratio-value b { color: var(--epm-blue); font-size: 25px; white-space: nowrap; }
body .education-ratio-item > strong { margin-top: 7px; color: #2e4a61; font-size: 11px; }
body .education-ratio-item > span { margin-top: 3px; color: #667b8e; font-size: 10px; }
body .education-competency-card { display: flex; flex-direction: column; justify-content: center; }
body .education-competency-card h3 { margin: 0 0 18px; color: #344e65; font-size: 16px; font-weight: 700; line-height: 1.35; }
body .education-people { display: flex; flex-wrap: nowrap; gap: 7px; color: #20a6d3; font-size: 22px; }
body .education-people i.muted { color: #c9dde7; }
body .education-competency-card p { margin: 15px 0 0; color: #50677b; font-size: 13px; font-weight: 600; }
body .education-competency-card strong { color: var(--epm-blue); font-size: 19px; }
body .education-detail-grid { display: grid; grid-template-columns: 1.35fr 1.25fr 1fr; gap: 16px; align-items: start; }
body .education-chart-card { min-width: 0; padding: 17px; border: 1px solid var(--epm-border); border-radius: 9px; }
body .education-chart-card h3 { min-height: 38px; margin: 0 0 16px; color: #344e65; font-size: 16px; font-weight: 700; }
body .education-grade-chart { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; height: 190px; padding: 10px 12px 0; border-bottom: 1px solid #b9cbd7; background: repeating-linear-gradient(to top,transparent 0,transparent 44px,#edf2f5 45px); }
body .education-grade-column { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; align-items: center; }
body .education-grade-bars { display: flex; width: 72px; height: 145px; align-items: flex-end; justify-content: center; gap: 3px; }
body .education-grade-bars i { display: block; width: 22px; min-height: 1px; }
body .education-grade-bars .schools { background: #5a9c52; }
body .education-grade-bars .students { background: #963084; }
body .education-grade-bars .teachers { background: #21a6cc; }
body .education-grade-column > strong { padding: 7px 2px; color: #536b80; text-align: center; font-size: 12px; }
body .education-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 13px; color: #536b80; font-size: 12px; }
body .education-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; background: currentColor; }
body .education-legend .schools { color: #5a9c52; } body .education-legend .students { color: #963084; } body .education-legend .teachers { color: #21a6cc; }
body .education-legend .primary { color: #21a6cc; } body .education-legend .secondary { color: #355dad; }
body .education-grade-table { margin-top: 12px; border-top: 1px solid var(--epm-border); }
body .education-grade-table > div { display: grid; grid-template-columns: 1.1fr repeat(3,1fr); gap: 6px; padding: 8px 0; border-bottom: 1px solid #edf1f4; color: #536b80; font-size: 11px; text-align: right; }
body .education-grade-table strong { text-align: left; }
body .education-grade-group-grid { display: grid; gap: 12px; }
body .education-grade-group-card { overflow: hidden; border: 1px solid #d9e5ec; border-radius: 8px; background: #fbfdfe; }
body .education-grade-group-card > h4 { margin: 0; padding: 10px 13px; background: #edf5f9; color: #294a63; font-size: 15px; font-weight: 750; }
body .education-grade-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #dfe8ee; border-bottom: 1px solid #dfe8ee; }
body .education-grade-metrics > div { display: grid; grid-template-columns: 27px 1fr; align-items: center; column-gap: 8px; padding: 11px; background: #fff; }
body .education-grade-metrics i { grid-row: 1/3; font-size: 21px; text-align: center; }
body .education-grade-metrics strong { color: #2f4b62; font-size: 15px; line-height: 1.15; }
body .education-grade-metrics span { color: #647a8d; font-size: 11px; }
body .education-grade-metrics .schools i { color: #4e9850; } body .education-grade-metrics .students i { color: #982b88; } body .education-grade-metrics .teachers i { color: #159dbf; }
body .education-grade-ratios { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #dfe8ee; }
body .education-grade-ratios > div { padding: 11px 10px; background: #f5fafc; text-align: center; }
body .education-grade-ratios strong { display: block; color: #087ca5; font-size: 18px; }
body .education-grade-ratios span { color: #516b80; font-size: 11px; font-weight: 650; }
body .education-grade-series { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
body .education-grade-series-block { min-width: 0; padding: 10px 8px 5px; border: 1px solid #e1e9ef; border-radius: 7px; background: #fbfdfe; }
body .education-grade-series-block h4 { margin: 0 0 9px; font-size: 12px; font-weight: 750; text-align: center; }
body .education-grade-series-block h4.schools { color: #4e9850; } body .education-grade-series-block h4.students { color: #982b88; } body .education-grade-series-block h4.teachers { color: #168fae; }
body .education-grade-mini-chart { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; height: 174px; align-items: end; border-bottom: 1px solid #b9cbd7; background: repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf2f5 40px); }
body .education-grade-mini-chart > div { display: flex; min-width: 0; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; }
body .education-grade-mini-bar { display: flex; width: 100%; height: 138px; align-items: flex-end; justify-content: center; }
body .education-grade-mini-bar i { position: relative; display: block; width: 27px; min-height: 5px; }
body .education-grade-mini-bar i.schools { background: #4e9850; } body .education-grade-mini-bar i.students { background: #982b88; } body .education-grade-mini-bar i.teachers { background: #21a6cc; }
body .education-grade-mini-bar b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); color: #344e65; font-size: 9px; white-space: nowrap; }
body .education-grade-mini-chart span { min-height: 28px; padding: 6px 1px 0; color: #536b80; font-size: 8px; font-weight: 650; line-height: 1.15; text-align: center; }
body .education-region-chart { display: grid; gap: 11px; }
body .education-region-row { display: grid; grid-template-columns: 122px 1fr; align-items: center; gap: 13px; }
body .education-region-row > span { overflow: hidden; color: #3f5a70; font-size: 13px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
body .education-region-row > div { display: grid; gap: 4px; }
body .education-region-row i { display: block; min-width: 42px; height: 20px; color: #fff; font-style: normal; text-align: right; }
body .education-region-row i.primary { background: #21a6cc; } body .education-region-row i.secondary { background: #355dad; }
body .education-region-row b { display: block; padding-right: 6px; font-size: 12px; font-weight: 750; line-height: 20px; }
body .education-urban-chart { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; height: 300px; align-items: end; padding: 18px 14px 0; border-bottom: 1px solid #b9cbd7; background: repeating-linear-gradient(to top,transparent 0,transparent 54px,#edf2f5 55px); }
body .education-urban-chart > div { display: flex; height: 100%; flex-direction: column; justify-content: flex-end; align-items: center; }
body .education-vertical-bars { display: flex; width: 104px; height: 242px; align-items: flex-end; justify-content: center; gap: 9px; }
body .education-vertical-bars i { position: relative; width: 40px; min-height: 4px; font-style: normal; }
body .education-vertical-bars .primary { background: #21a6cc; } body .education-vertical-bars .secondary { background: #355dad; }
body .education-vertical-bars b { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); color: #344c61; font-size: 11px; }
body .education-urban-chart > div > strong { padding: 9px 0; color: #536b80; font-size: 12px; }
body .education-chart-caption { margin: 10px 0 0; color: #64788a; text-align: center; font-size: 10px; font-weight: 600; }
body .education-settings-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 16px; }
body .dashboard-admin-footer { display: flex; justify-content: flex-end; padding: 4px 0 0; }
body .school-province-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--epm-border); }
body .school-province-heading h2 { margin: 0 0 4px; font-size: 20px; }
body .school-province-heading p { margin: 0; color: var(--epm-muted); font-size: 12px; }
body .school-province-heading > strong { color: #164e6d; font-size: 22px; white-space: nowrap; }
body .school-province-heading > strong span { color: var(--epm-muted); font-size: 12px; font-weight: 600; }
body .school-province-body { display: grid; grid-template-columns: minmax(250px,340px) 1fr; align-items: center; gap: 36px; max-width: 1000px; margin: 18px auto 4px; }
body .school-province-pie { width: min(100%,340px); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px #dce6ed; }
body .epm-chart-segment { cursor: help; transition: filter .15s ease, opacity .15s ease; }
body .epm-chart-segment:hover, body .epm-chart-segment:focus-visible, body .epm-chart-segment.epm-chart-active { filter: brightness(1.13); stroke: #fff; stroke-width: 1.6; outline: none; }
body [data-chart-tooltip]:not(.epm-chart-segment) { cursor: help; }
body .education-region-row i:hover, body .education-region-row i:focus-visible, body .education-region-row i.epm-chart-active,
body .education-vertical-bars i:hover, body .education-vertical-bars i:focus-visible, body .education-vertical-bars i.epm-chart-active { filter: brightness(1.16); outline: 2px solid #123f60; outline-offset: 2px; }
body .education-people:hover, body .education-people:focus-visible { outline: 2px solid #1687ac; outline-offset: 4px; }
body .epm-chart-tooltip { position: fixed; z-index: 10000; max-width: min(300px,calc(100vw - 24px)); padding: 9px 12px; border-radius: 7px; color: #fff; background: #183b53; box-shadow: 0 5px 18px #1a354533; font-size: 13px; font-weight: 650; line-height: 1.4; pointer-events: none; }
body .epm-chart-tooltip[hidden] { display: none; }
body .school-province-legend { display: grid; gap: 0; }
body .school-province-legend > div { display: grid; grid-template-columns: 12px minmax(110px,1fr) 74px 52px; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid #e8eef2; color: #415d73; font-size: 13px; }
body .school-province-legend > div:last-child { border-bottom: 0; }
body .school-province-legend i { width: 12px; height: 12px; border-radius: 2px; }
body .school-province-legend strong, body .school-province-legend small { text-align: right; font-size: 13px; }
body .school-province-legend small { color: #62798b; }
body .teacher-gender-body { display: grid; grid-template-columns: minmax(210px,260px) minmax(220px,420px); align-items: center; gap: 32px; margin: 18px 0 12px; }
body .teacher-gender-pie { width: min(100%,260px); aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px #dce6ed; }
body .teacher-gender-legend { display: grid; gap: 12px; }
body .teacher-gender-legend > div { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 12px; color: #415d73; font-size: 15px; }
body .teacher-gender-legend i { width: 14px; height: 14px; border-radius: 3px; }
body .teacher-gender-legend strong { color: var(--epm-ink); }
body .teacher-gender-legend b { min-width: 54px; color: var(--epm-blue); text-align: right; }
body .teacher-gender-source { display: inline-block; color: var(--epm-blue); font-size: 12px; text-decoration: underline; }
@media (max-width: 767px) {
  body .mapping-header { padding: 76px 16px 48px; }
  body .mapping-header h1 { font-size: 21px; }
  body .mapping-content { padding: 0 12px 22px; }
  body .mapping-panel { padding: 16px; }
  body .sector-switcher { padding: 14px; }
  body .main-content > .container-fluid { padding-left: 12px; padding-right: 12px; }
  body .card-header, body .card-body { padding: 16px; }
  body .dataTables_wrapper { padding-left: 12px; padding-right: 12px; }
  body .dataTables_wrapper .row:first-child > div { flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; }
  body .dataTables_filter, body .dataTables_filter label { justify-content: flex-start; text-align: left; }
  body .dataTables_filter input { flex: 1; width: auto; min-width: 0; }
  body .modal-dialog { margin: 10px; max-width: none; }
  body .modal-body { padding: 16px; max-height: calc(100vh - 145px); }
  body .modal .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  body .btn { min-height: 40px; }
  body .dashboard-intro { align-items: flex-start; flex-direction: column; }
  body .dashboard-custom-metrics, body .dashboard-chart-grid, body .dashboard-settings-grid { grid-template-columns: 1fr; }
  body .dashboard-donut-layout { grid-template-columns: 1fr; }
  body .dashboard-donut { width: 138px; height: 138px; }
  body .dashboard-legend span { white-space: normal; }
  body .education-headline-grid, body .education-detail-grid, body .education-settings-fields { grid-template-columns: 1fr; }
  body .education-grade-series { grid-template-columns: 1fr; }
  body .education-grade-series-block { padding: 12px; }
  body .education-grade-metrics { grid-template-columns: 1fr; }
  body .school-province-body { grid-template-columns: 1fr; gap: 20px; }
  body .teacher-gender-body { grid-template-columns: 1fr; gap: 20px; }
  body .teacher-gender-pie { width: min(70vw,240px); margin: auto; }
  body .school-province-pie { width: min(80vw,300px); margin: auto; }
  body .school-province-legend > div { grid-template-columns: 12px minmax(90px,1fr) 68px 48px; gap: 6px; font-size: 12px; }
  body .education-summary-heading h2 { font-size: 20px; }
}
@media (min-width:768px) and (max-width:1100px) { body .dashboard-custom-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width:768px) and (max-width:1200px) {
  body .dashboard-learning-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .dashboard-learning-grid .education-competency-card { grid-column: 1/-1; }
  body .dashboard-resources-grid { grid-template-columns: 1fr; }
  body .dashboard-resources-grid > .education-ratio-card, body .dashboard-resources-grid > .education-callouts, body .dashboard-resources-grid > .teacher-gender-panel { grid-column: auto; grid-row: auto; }
  body .dashboard-geography-grid { grid-template-columns: 1fr; }
  body .dashboard-geography-grid .education-urban-chart { height: 300px; }
  body .dashboard-geography-grid .education-vertical-bars { height: 242px; }
  body .education-headline-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .education-detail-grid { grid-template-columns: 1fr 1fr; }
  body .education-urban-card { grid-column: 1/-1; }
}
@media (min-width:1350px) {
  body .dashboard-grade-breakdown .education-grade-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1750px) {
  body .dashboard-grade-breakdown .education-grade-group-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:767px) {
  body .dashboard-overview-heading { padding: 15px; }
  body .dashboard-overview-heading h2 { font-size: 20px; }
  body .dashboard-topic-nav { width: 100%; }
  body .dashboard-topic-nav a { flex: 1 1 100%; }
  body .dashboard-topic-heading h3 { font-size: 18px; }
  body .dashboard-learning-grid, body .dashboard-resources-grid, body .dashboard-resource-detail-grid, body .dashboard-geography-grid { grid-template-columns: 1fr; }
  body .dashboard-resources-grid > .education-ratio-card, body .dashboard-resources-grid > .education-callouts, body .dashboard-resources-grid > .teacher-gender-panel { grid-column: auto; grid-row: auto; }
  body .dashboard-resources-grid .teacher-gender-body { grid-template-columns: 1fr; }
  body .dashboard-resources-grid .teacher-gender-pie { margin: auto; }
  body .dashboard-geography-grid .education-urban-chart { height: 300px; }
  body .dashboard-geography-grid .education-vertical-bars { height: 242px; }
}