/* ==========================================================================
   Enhancements: education doodles/bubbles, dark-mode white text,
   and site-wide mobile responsiveness. Loaded after every other stylesheet.
   ========================================================================== */

/* ---------------- Rising & falling doodles + bubbles ---------------- */
.edu-doodles{
  position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.edu-doodle,.edu-bubble{
  position:absolute;top:100%;pointer-events:none;user-select:none;
  animation-name:eduRise;animation-timing-function:linear;animation-iteration-count:1;
  will-change:transform,opacity;
}
.edu-doodle{opacity:.35;filter:saturate(1.1)}
.edu-bubble{
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.85),rgba(212,175,55,.28) 60%,rgba(20,58,122,.18));
  border:1px solid rgba(255,255,255,.5);opacity:.30;
}
.edu-doodle.falling,.edu-bubble.falling{top:-8%;animation-name:eduFall}
html[data-theme="dark"] .edu-doodle{opacity:.28}
html[data-theme="dark"] .edu-bubble{opacity:.22;border-color:rgba(212,175,55,.35)}

@keyframes eduRise{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  10%{opacity:.4}
  90%{opacity:.35}
  100%{transform:translate3d(30px,-115vh,0) rotate(320deg);opacity:0}
}
@keyframes eduFall{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  10%{opacity:.4}
  90%{opacity:.3}
  100%{transform:translate3d(-30px,115vh,0) rotate(-320deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .edu-doodles{display:none} }
@media (max-width:520px){ .edu-doodle{font-size:16px !important} }

/* keep real content above the decoration */
.app,.sidebar,.main,.header,.content,.footer,.bday-bar{position:relative;z-index:1}

/* ---------------- Dark mode: white text everywhere ---------------- */
html[data-theme="dark"]{
  --text:#ffffff;
  --muted:#e2e8f0;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .vibrant-hero,
html[data-theme="dark"] .bday-bar,
html[data-theme="dark"] .bday-bar .track,
html[data-theme="dark"] .bday-bar .item,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .header,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6,
html[data-theme="dark"] p,html[data-theme="dark"] span,html[data-theme="dark"] li,
html[data-theme="dark"] label,html[data-theme="dark"] small,html[data-theme="dark"] b,
html[data-theme="dark"] strong,html[data-theme="dark"] td,html[data-theme="dark"] th,
html[data-theme="dark"] div,html[data-theme="dark"] summary,html[data-theme="dark"] legend,
html[data-theme="dark"] .pill,html[data-theme="dark"] .badge,html[data-theme="dark"] .role-badge,
html[data-theme="dark"] .card h1,html[data-theme="dark"] .card h2,html[data-theme="dark"] .card h3,
html[data-theme="dark"] .glass-card h1,html[data-theme="dark"] .glass-card h2,html[data-theme="dark"] .glass-card h3,
html[data-theme="dark"] .chart-card h3,
html[data-theme="dark"] .stat-card h3,html[data-theme="dark"] .stat-card .v,
html[data-theme="dark"] .sidebar h4,html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .user-card .uc-name,html[data-theme="dark"] .user-card .uc-role,
html[data-theme="dark"] .user-card .uc-term,html[data-theme="dark"] .user-card .uc-clock,
html[data-theme="dark"] .content table td,html[data-theme="dark"] .card table td,
html[data-theme="dark"] .content table th,html[data-theme="dark"] .card table th,
html[data-theme="dark"] .hero-title,html[data-theme="dark"] .hero-title span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html[data-theme="dark"] a{color:#ffffff !important;text-decoration-color:rgba(255,255,255,.5)}
html[data-theme="dark"] a:hover{color:var(--gold-soft) !important;-webkit-text-fill-color:var(--gold-soft) !important}
html[data-theme="dark"] .sidebar a.active,html[data-theme="dark"] .sidebar a:hover{color:var(--gold-soft) !important;-webkit-text-fill-color:var(--gold-soft) !important}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  color:#ffffff !important;background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.22) !important;
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:rgba(255,255,255,.6) !important}
html[data-theme="dark"] option{color:#0b1e3f}
html[data-theme="dark"] .btn,html[data-theme="dark"] button{color:#ffffff !important;-webkit-text-fill-color:#ffffff !important}
html[data-theme="dark"] .alert{color:#ffffff !important}
html[data-theme="dark"] .alert.success,html[data-theme="dark"] .alert-success{background:rgba(16,185,129,.18) !important}
html[data-theme="dark"] .alert.error,html[data-theme="dark"] .alert-danger{background:rgba(239,68,68,.18) !important}
/* Alumni cards & other hardcoded white panels */
html[data-theme="dark"] .card [style*="background:#fff"]{background:rgba(11,30,63,.6) !important;border-color:rgba(212,175,55,.25) !important}

/* ---------------- Mobile responsiveness (site-wide) ---------------- */
*{min-width:0}
img,table,pre,video{max-width:100%}

/* Any inline 2/3/4-column grid collapses on small screens */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.class-add-form{display:grid;grid-template-columns:2fr 3fr 1fr;gap:10px;align-items:end}

/* Scrollable tables on phones */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}

@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .class-add-form{grid-template-columns:1fr}
  .class-add-form button,.class-add-form .btn{width:100%}
}

@media (max-width:768px){
  .content{padding:14px !important}
  .grid-2,.grid-3{grid-template-columns:1fr}
  /* Collapse any inline repeat() grid used across pages */
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:2fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="display:flex"]{flex-wrap:wrap}
  .header{gap:8px;flex-wrap:wrap;padding:10px 12px !important}
  .header .title{font-size:1rem;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header .brand-logo{width:32px;height:32px}
  .hide-sm{display:none !important}
  .vibrant-hero{padding:18px !important;text-align:left}
  .vibrant-hero h1{font-size:1.4rem !important}
  h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.08rem}
  .card{padding:14px !important;border-radius:14px !important}
  .btn{padding:10px 14px;font-size:.92rem}
  input,select,textarea{width:100%;font-size:16px} /* 16px stops iOS zoom */
  .footer{text-align:center;padding:14px;font-size:.85rem}
}

@media (max-width:520px){
  .content{padding:10px !important}
  .btn{width:auto}
  .table{font-size:.85rem}
  .table th,.table td{padding:8px 6px !important}
  .stat,.stat-card{padding:12px !important}
}

/* Stacked card-style tables on very small screens for wide data tables */
@media (max-width:520px){
  table.table.stacked thead{display:none}
  table.table.stacked tr{display:block;margin-bottom:12px;border:1px solid var(--card-bd);border-radius:12px;padding:8px}
  table.table.stacked td{display:flex;justify-content:space-between;gap:10px;border:0 !important}
  table.table.stacked td::before{content:attr(data-label);font-weight:700;opacity:.75}
}