/*
 * portal.css — Noble Schools Support Portal shared styles
 * Loaded by header_nav.php on every page.
 * Override per-page via a <style> block after this loads.
 *
 * Contents:
 *   1. Reset
 *   2. Base body + background overlay
 *   3. Layout wrappers
 *   4. Glass card
 *   5. Alerts
 *   6. Buttons
 *   7. Forms (shared inputs)
 *   8. Badges
 *   9. Footer
 */

/* ─── 1. Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── 2. Base body + background overlay ──────────────────────────────────── */
body{
  font-family:Nunito,sans-serif;
  font-size:14px;
  color:#fff;
  min-height:100vh;
  background:url('/assets/bg.jpg') center/cover no-repeat fixed;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(4,10,35,.82);
  z-index:0;
  pointer-events:none;
}

/* ─── 3. Layout wrappers ──────────────────────────────────────────────────── */
.wrap,
.page-wrap{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px 60px;
}

/* ─── 4. Glass card ───────────────────────────────────────────────────────── */
.card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  margin-bottom:16px;
}
.card-title{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(192,132,252,.85);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.card-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,.07);
  margin:14px 0;
}

/* ─── 5. Alerts ───────────────────────────────────────────────────────────── */
.alert{
  border-radius:12px;
  padding:12px 16px;
  font-size:13px;
  margin-bottom:16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.alert-success,.al-s{
  background:rgba(74,222,128,.08);
  border:1px solid rgba(74,222,128,.3);
  color:#86efac;
}
.alert-error,.al-e{
  background:rgba(248,113,113,.09);
  border:1px solid rgba(248,113,113,.3);
  color:#fca5a5;
}
.alert-info,.al-i{
  background:rgba(99,179,237,.08);
  border:1px solid rgba(99,179,237,.3);
  color:#90cdf4;
}
.alert-warn,.al-w{
  background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.3);
  color:#fde68a;
}

/* ─── 6. Buttons ──────────────────────────────────────────────────────────── */
.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  padding:10px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,#6200ff,#b10ef1);
  color:#fff;
  font:700 14px Nunito,sans-serif;
  cursor:pointer;
  transition:opacity .15s;
}
.btn-submit:hover{opacity:.87}
.btn-submit:disabled{opacity:.45;cursor:not-allowed}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.7);
  font:600 12px Nunito,sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.btn-ghost:hover{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}

.btn-danger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:9px;
  border:1px solid rgba(248,113,113,.3);
  background:rgba(248,113,113,.1);
  color:#f87171;
  font:600 12px Nunito,sans-serif;
  cursor:pointer;
  transition:background .15s;
}
.btn-danger:hover{background:rgba(248,113,113,.2)}

/* ─── 7. Forms (shared inputs) ────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group label,
.form-lbl{
  display:block;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:rgba(255,255,255,.38);
  margin-bottom:5px;
}
.form-input,
.form-control,
.form-select,
.form-textarea{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  color:#fff;
  padding:9px 12px;
  font:13px Nunito,sans-serif;
  outline:none;
  transition:border-color .15s,background .15s;
}
.form-input:focus,
.form-control:focus,
.form-select:focus,
.form-textarea:focus{
  border-color:rgba(192,132,252,.55);
  background:rgba(192,132,252,.06);
}
.form-input::placeholder,
.form-control::placeholder,
.form-textarea::placeholder{color:rgba(255,255,255,.28)}
.form-select option,
.form-control option{background:#1a0a2e;color:#fff}
.form-textarea{resize:vertical;min-height:90px;line-height:1.6}

/* ─── 8. Badges ───────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 9px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
}
.badge-green {background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3); color:#4ade80}
.badge-red   {background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:#f87171}
.badge-amber {background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.3); color:#fbbf24}
.badge-blue  {background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.3); color:#60a5fa}
.badge-purple{background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.3);color:#c084fc}
.badge-gray  {background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.45)}

/* ─── 9. Footer ───────────────────────────────────────────────────────────── */
footer{
  text-align:center;
  padding:24px 16px;
  font-size:11px;
  color:rgba(255,255,255,.22);
  position:relative;
  z-index:1;
}
footer a{color:rgba(192,132,252,.5);text-decoration:none}
footer a:hover{color:#c084fc}

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.text-muted{color:rgba(255,255,255,.4)}
.text-accent{color:#c084fc}
.sect{border:none;border-top:1px solid rgba(255,255,255,.07);margin:16px 0}