/* =========================================================
   Global Color System Refresh
   Bhuyar School Information & Management Portal
   ========================================================= */
:root{
  --navy:#0b2545;
  --navy2:#123b5d;
  --blue:#2563eb;
  --blue-2:#3b82f6;
  --indigo:#4f46e5;
  --teal:#0f766e;
  --teal-2:#14b8a6;
  --green:#16a34a;
  --emerald:#10b981;
  --gold:#d97706;
  --saffron:#f59e0b;
  --orange:#ea580c;
  --red:#dc2626;
  --rose:#e11d48;
  --purple:#7c3aed;
  --cyan:#0891b2;

  --ink:#122033;
  --muted:#667085;
  --line:#dfe7ef;
  --bg:#f4f8fc;
  --surface:#ffffff;
  --surface-blue:#f4f8ff;
  --surface-teal:#f0fdfa;
  --surface-green:#f2fbf6;
  --surface-gold:#fffaf0;
  --surface-purple:#f8f5ff;

  --shadow:0 16px 42px rgba(15,39,64,.085);
  --shadow-soft:0 8px 24px rgba(15,39,64,.06);
}

/* ---------- Page canvas ---------- */
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(37,99,235,.045),transparent 20%),
    radial-gradient(circle at 94% 14%,rgba(20,184,166,.045),transparent 22%),
    #f5f8fc;
}
.main-content{
  background:linear-gradient(180deg,#f7faff 0%,#f5f8fc 48%,#f8fbfd 100%);
}
.section.alt{
  background:
    radial-gradient(circle at 10% 10%,rgba(37,99,235,.035),transparent 22%),
    linear-gradient(180deg,#eef5fb,#f5f9fc);
}

/* ---------- Global headings / labels ---------- */
.eyebrow.dark,
.panel-kicker,
.coord-panel-kicker{
  background:linear-gradient(135deg,#e9f2ff,#ecfdf5);
  color:#1d4ed8;
  border:1px solid #d8e8ef;
}
.section-head h1,.section-head h2,.dashboard-head h1,.panel-head h3{
  color:var(--navy);
}

/* ---------- Buttons ---------- */
.btn-primary{
  background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 48%,#0f766e 120%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 9px 22px rgba(37,99,235,.22);
}
.btn-primary:hover{
  box-shadow:0 12px 28px rgba(37,99,235,.27);
  filter:saturate(1.06);
}
.btn-outline{
  background:linear-gradient(180deg,#fff,#f8fbff);
  border-color:#cfdbe6;
  color:#17324d;
}
.btn-outline:hover{
  border-color:#9db9cf;
  background:#f1f7ff;
  color:#1d4ed8;
}
.btn-light{background:linear-gradient(180deg,#fff,#f6fbff)}
.link-arrow,.breadcrumb a,.coord-open{color:#1d4ed8}

/* ---------- Cards / panels ---------- */
.panel,
.module-card,
.school-card,
.facility-card,
.facility-row-card,
.auth-card,
.readonly-box{
  border-color:#dfe8f0;
  box-shadow:var(--shadow-soft);
}
.panel{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.panel:nth-of-type(3n+1){border-top:3px solid rgba(37,99,235,.68)}
.panel:nth-of-type(3n+2){border-top:3px solid rgba(15,118,110,.64)}
.panel:nth-of-type(3n+3){border-top:3px solid rgba(245,158,11,.62)}

/* ---------- KPI cards: coordinated multi-color accents ---------- */
.kpi{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#fff,#fbfdff);
  border-color:#dde7ef;
}
.kpi:after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:18px 0 0 18px;
  background:#2563eb;
}
.kpi:nth-child(2):after{background:#0f766e}
.kpi:nth-child(3):after{background:#7c3aed}
.kpi:nth-child(4):after{background:#f59e0b}
.kpi:nth-child(1) .kpi-icon{background:linear-gradient(135deg,#dbeafe,#eff6ff)}
.kpi:nth-child(2) .kpi-icon{background:linear-gradient(135deg,#ccfbf1,#f0fdfa)}
.kpi:nth-child(3) .kpi-icon{background:linear-gradient(135deg,#ede9fe,#faf5ff)}
.kpi:nth-child(4) .kpi-icon{background:linear-gradient(135deg,#fef3c7,#fff7ed)}
.kpi.warn{background:linear-gradient(135deg,#fffaf5,#fff7ed);border-color:#fed7aa}

/* ---------- Module cards ---------- */
.module-card{
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.module-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,39,64,.10)}
.module-card:nth-child(4n+1){background:linear-gradient(145deg,#fff,#f3f7ff);border-top:3px solid #3b82f6}
.module-card:nth-child(4n+2){background:linear-gradient(145deg,#fff,#f0fdfa);border-top:3px solid #14b8a6}
.module-card:nth-child(4n+3){background:linear-gradient(145deg,#fff,#faf5ff);border-top:3px solid #8b5cf6}
.module-card:nth-child(4n+4){background:linear-gradient(145deg,#fff,#fff8ed);border-top:3px solid #f59e0b}

/* ---------- Tables ---------- */
table{background:#fff}
th{
  color:#30475f;
  background:linear-gradient(180deg,#eef5ff,#f7faff);
  border-bottom-color:#d8e4ee;
}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:#f5f9ff}
td{border-bottom-color:#e8eef4}
.row-total{background:linear-gradient(90deg,#eef5ff,#f0fdfa);color:#123b5d}

/* ---------- Forms ---------- */
input,textarea,select{
  border-color:#d3dee8 !important;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.13);
  background:#fff;
}
.form-stack label,.upload-grid label,.gallery-upload-grid label,.task-create-grid label,.report-form-grid label{
  color:#34495e;
}

/* ---------- Badges / statuses ---------- */
.badge.green,.status.yes,.status-pill{
  background:linear-gradient(135deg,#dcfce7,#ecfdf5);
  color:#166534;
  border:1px solid #bbf7d0;
}
.badge.amber,.status.repair{
  background:linear-gradient(135deg,#fef3c7,#fff7ed);
  color:#92400e;
  border:1px solid #fde68a;
}
.badge.red{
  background:linear-gradient(135deg,#fee2e2,#fff1f2);
  color:#b91c1c;
  border:1px solid #fecaca;
}
.status.no{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}

/* ---------- Alerts ---------- */
.alert{box-shadow:0 5px 16px rgba(15,39,64,.035)}
.alert-success{background:linear-gradient(90deg,#ecfdf5,#f7fffb);border-color:#86efac;border-left:4px solid #16a34a}
.alert-warning{background:linear-gradient(90deg,#fff7ed,#fffdf5);border-color:#fde68a;border-left:4px solid #f59e0b}
.alert-danger{background:linear-gradient(90deg,#fff1f2,#fff8f8);border-color:#fecaca;border-left:4px solid #dc2626}

/* ---------- School cards ---------- */
.school-card{
  background:linear-gradient(145deg,#fff,#f9fcff);
}
.school-card:nth-child(4n+1){border-top:3px solid #3b82f6}
.school-card:nth-child(4n+2){border-top:3px solid #14b8a6}
.school-card:nth-child(4n+3){border-top:3px solid #8b5cf6}
.school-card:nth-child(4n+4){border-top:3px solid #f59e0b}
.school-badge{
  background:linear-gradient(135deg,#eaf2ff,#ecfdf5);
  color:#155e75;
  border:1px solid #d7e8ed;
}

/* ---------- Infrastructure ---------- */
.facility-row-card,
.facility-edit{
  background:linear-gradient(145deg,#fff,#f8fbfd);
}
.progress{background:#e8eef3}
.progress i{background:linear-gradient(90deg,#2563eb,#14b8a6,#22c55e)}
.segmented span{background:#f8fafc}
.segmented input:checked+span{
  background:linear-gradient(135deg,#eaf2ff,#ecfdf5);
  border-color:#60a5fa;
  color:#1d4ed8;
}

/* ---------- Header / navigation colors ---------- */
.site-header{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #dce6ee;
}
.gov-strip{
  background:linear-gradient(90deg,#071d34 0%,#0b3555 50%,#0f5f63 100%) !important;
}
.nav a:not(.btn):hover{color:#1d4ed8}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 15%,rgba(45,212,191,.13),transparent 28%),
    linear-gradient(135deg,#071d34,#0d3655 55%,#0f5f63);
  border-top:3px solid #f59e0b;
}
.site-footer:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.12)
}
.site-footer .muted{color:#c3d7e2}

/* ---------- Authentication ---------- */
.auth-section{
  background:
    radial-gradient(circle at 18% 18%,rgba(37,99,235,.08),transparent 24%),
    radial-gradient(circle at 84% 78%,rgba(20,184,166,.08),transparent 25%);
}
.auth-card{
  background:linear-gradient(145deg,#fff,#f9fcff);
  border-top:4px solid #2563eb;
}
.auth-icon{
  width:58px;height:58px;display:grid;place-items:center;margin:auto;border-radius:18px;
  background:linear-gradient(135deg,#dbeafe,#ccfbf1);
}

/* ---------- Completion Status ---------- */
.completion-hero{
  background:
    radial-gradient(circle at 88% 18%,rgba(16,185,129,.11),transparent 28%),
    radial-gradient(circle at 12% 80%,rgba(37,99,235,.08),transparent 25%),
    linear-gradient(135deg,#eef5ff,#f8fbff 52%,#ecfdf5) !important;
}
.completion-kpi{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#fff,#fbfdff) !important;
}
.completion-kpi:nth-child(1){border-top:3px solid #2563eb}
.completion-kpi:nth-child(2){border-top:3px solid #16a34a}
.completion-kpi:nth-child(3){border-top:3px solid #f59e0b}
.completion-kpi:nth-child(4){border-top:3px solid #7c3aed}
.module-summary-card:nth-child(5n+1){border-left:4px solid #2563eb}
.module-summary-card:nth-child(5n+2){border-left:4px solid #0f766e}
.module-summary-card:nth-child(5n+3){border-left:4px solid #7c3aed}
.module-summary-card:nth-child(5n+4){border-left:4px solid #f59e0b}
.module-summary-card:nth-child(5n+5){border-left:4px solid #0891b2}

/* ---------- Headmaster dashboard ---------- */
.hm-completion-card{
  background:
    radial-gradient(circle at 94% 12%,rgba(16,185,129,.08),transparent 30%),
    linear-gradient(135deg,#fff,#f4f8ff 55%,#eefbf7) !important;
  border-color:#cfe1ea !important;
}
.hm-module:nth-child(1){border-top:3px solid #2563eb}
.hm-module:nth-child(2){border-top:3px solid #14b8a6}
.hm-module:nth-child(3){border-top:3px solid #8b5cf6}
.hm-module:nth-child(4){border-top:3px solid #f59e0b}
.hm-module:nth-child(5){border-top:3px solid #0891b2}
.hm-task-card{
  background:linear-gradient(135deg,#fffaf0,#fff 56%,#f4f8ff) !important;
}
.hm-month-card{
  background:linear-gradient(135deg,#eef5ff,#f8fbff 52%,#ecfdf5) !important;
}

/* ---------- Monthly report ---------- */
.monthly-hero{
  background:
    radial-gradient(circle at 85% 20%,rgba(16,185,129,.11),transparent 28%),
    linear-gradient(135deg,#eef5ff,#f8fbff 55%,#ecfdf5) !important;
}
.snapshot-card:nth-child(1),.month-kpi:nth-child(1){border-top:3px solid #2563eb}
.snapshot-card:nth-child(2),.month-kpi:nth-child(2){border-top:3px solid #0f766e}
.snapshot-card:nth-child(3),.month-kpi:nth-child(3){border-top:3px solid #7c3aed}
.snapshot-card:nth-child(4),.month-kpi:nth-child(4){border-top:3px solid #f59e0b}

/* ---------- Tasks / notices ---------- */
.task-group:nth-child(4n+1){border-left:4px solid #2563eb}
.task-group:nth-child(4n+2){border-left:4px solid #0f766e}
.task-group:nth-child(4n+3){border-left:4px solid #7c3aed}
.task-group:nth-child(4n+4){border-left:4px solid #f59e0b}
.my-task-card{box-shadow:var(--shadow-soft)}
.my-task-card.completed{background:linear-gradient(135deg,#f0fdf4,#fff) !important}
.my-task-card.overdue{background:linear-gradient(135deg,#fff1f2,#fff) !important}

/* ---------- Downloads ---------- */
.download-hero{
  background:
    radial-gradient(circle at 88% 20%,rgba(245,158,11,.08),transparent 24%),
    linear-gradient(135deg,#eef5ff,#f8fbff 50%,#ecfdf5) !important;
}
.download-card:nth-child(4n+1){border-top:3px solid #2563eb}
.download-card:nth-child(4n+2){border-top:3px solid #0f766e}
.download-card:nth-child(4n+3){border-top:3px solid #7c3aed}
.download-card:nth-child(4n+4){border-top:3px solid #f59e0b}
.download-icon{background:linear-gradient(135deg,#dbeafe,#ccfbf1) !important}

/* ---------- Gallery ---------- */
.gallery-hero{
  background:
    radial-gradient(circle at 10% 70%,rgba(124,58,237,.07),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(20,184,166,.09),transparent 26%),
    linear-gradient(135deg,#eef5ff,#faf7ff 48%,#ecfdf5) !important;
}
.gallery-card{border-color:#dce7ee !important}
.gallery-card:nth-child(4n+1){box-shadow:0 9px 26px rgba(37,99,235,.08)}
.gallery-card:nth-child(4n+2){box-shadow:0 9px 26px rgba(15,118,110,.08)}
.gallery-card:nth-child(4n+3){box-shadow:0 9px 26px rgba(124,58,237,.08)}
.gallery-card:nth-child(4n+4){box-shadow:0 9px 26px rgba(245,158,11,.08)}
.gallery-cat{background:linear-gradient(135deg,#eaf2ff,#ecfdf5) !important;color:#155e75 !important}

/* ---------- Admin upload / management cards ---------- */
.doc-admin-card,.gallery-admin-card{
  border-color:#dce6ee !important;
  box-shadow:var(--shadow-soft);
}
.doc-admin-card:nth-child(odd),.gallery-admin-card:nth-child(odd){
  border-top:3px solid #2563eb;
}
.doc-admin-card:nth-child(even),.gallery-admin-card:nth-child(even){
  border-top:3px solid #0f766e;
}

/* ---------- Coordinator dashboard refinements ---------- */
.coord-page{background:linear-gradient(180deg,#f1f6fb,#f7fafd 55%,#f4f8fc) !important}
.coord-kpi:nth-child(1):before{background:linear-gradient(90deg,#2563eb,#60a5fa) !important}
.coord-kpi:nth-child(2):before{background:linear-gradient(90deg,#0f766e,#2dd4bf) !important}
.coord-kpi:nth-child(3):before{background:linear-gradient(90deg,#7c3aed,#a78bfa) !important}
.coord-kpi:nth-child(4):before{background:linear-gradient(90deg,#f59e0b,#ef4444) !important}
.coord-kpi:nth-child(1) .coord-kpi-icon{background:linear-gradient(135deg,#dbeafe,#eff6ff)}
.coord-kpi:nth-child(2) .coord-kpi-icon{background:linear-gradient(135deg,#ccfbf1,#f0fdfa)}
.coord-kpi:nth-child(3) .coord-kpi-icon{background:linear-gradient(135deg,#ede9fe,#faf5ff)}
.coord-kpi:nth-child(4) .coord-kpi-icon{background:linear-gradient(135deg,#fef3c7,#fff7ed)}
.coord-panel{border-color:#dce6ee !important}

/* ---------- Home page extra richness ---------- */
.home-page .section:nth-of-type(odd){background-color:rgba(255,255,255,.38)}
.home-kpi:nth-child(1):before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.home-kpi:nth-child(2):before{background:linear-gradient(90deg,#0f766e,#2dd4bf)}
.home-kpi:nth-child(3):before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.home-kpi:nth-child(4):before{background:linear-gradient(90deg,#f59e0b,#f97316)}
.home-download-card:nth-child(odd){border-left:4px solid #2563eb}
.home-download-card:nth-child(even){border-left:4px solid #0f766e}

/* ---------- Selection / scrollbar ---------- */
::selection{background:#bfdbfe;color:#102a43}
*{scrollbar-color:#9db6ca #eef3f7;scrollbar-width:thin}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .nav.open{
    background:linear-gradient(180deg,#fff,#f8fbff);
    border-color:#d6e2ec;
  }
  .panel:nth-of-type(n){border-top-width:2px}
}