/* ==========================================================================
   v16 — timetable, smart wallet, interactive dashboards, cursor locator ring,
   education doodles and a final site-wide mobile responsiveness sweep.
   Loaded ABSOLUTELY LAST.
   ========================================================================== */

/* -------- 1. Animated mouse locator ring -------- */
.v16-ring, .v16-dot {
  position: fixed; top: 0; left: 0; z-index: 99998; pointer-events: none;
  border-radius: 50%; will-change: transform; mix-blend-mode: normal;
}
.v16-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 2px solid color-mix(in srgb, var(--brand-accent, #d4af37) 85%, transparent);
  box-shadow: 0 0 18px -4px var(--brand-accent, #d4af37), inset 0 0 12px -6px var(--brand-accent, #d4af37);
  transition: width .18s ease, height .18s ease, margin .18s ease, opacity .25s ease, border-color .2s ease;
  opacity: .85;
}
.v16-dot {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--brand-secondary, #143a7a);
  box-shadow: 0 0 12px -2px var(--brand-secondary, #143a7a);
}
.v16-ring::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-accent, #d4af37) 35%, transparent);
  animation: v16Pulse 2.2s ease-out infinite;
}
@keyframes v16Pulse { 0%{transform:scale(.7);opacity:.7} 100%{transform:scale(1.25);opacity:0} }
body.v16-hot .v16-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--brand-secondary, #143a7a); }
body.v16-click .v16-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@media (hover: none), (prefers-reduced-motion: reduce) { .v16-ring, .v16-dot { display: none !important; } }

/* -------- 2. Education doodles (every page, behind the content) -------- */
.edu-doodles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.app, .main, .card, .sidebar, .header, .footer { position: relative; z-index: 1; }
.edu-doodle, .edu-bubble {
  position: absolute; bottom: -60px; opacity: .18; pointer-events: none;
  animation: eduRise linear infinite;
}
.edu-doodle.falling, .edu-bubble.falling { bottom: auto; top: -60px; animation-name: eduFall; }
.edu-bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), color-mix(in srgb, var(--brand-secondary, #143a7a) 35%, transparent));
  opacity: .16;
}
@keyframes eduRise { from{transform:translateY(0) rotate(0)} to{transform:translateY(-115vh) rotate(320deg)} }
@keyframes eduFall { from{transform:translateY(0) rotate(0)} to{transform:translateY(115vh) rotate(-320deg)} }
@media (prefers-reduced-motion: reduce) { .edu-doodles { display: none; } }

/* -------- 3. Interactive dashboard widgets -------- */
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dash-tile {
  border-radius: 18px; padding: 16px; background: var(--card-bg, rgba(255,255,255,.9));
  border: 1px solid rgba(15,23,42,.08); box-shadow: 0 14px 30px -22px rgba(11,37,69,.55);
  transition: transform .22s ease, box-shadow .22s ease;
}
.dash-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -20px rgba(11,37,69,.5); }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 10px; }
.mini-bars .bar {
  flex: 1; border-radius: 8px 8px 0 0; min-height: 4px;
  background: linear-gradient(180deg, var(--brand-secondary, #143a7a), var(--brand-primary, #0b1e3f));
  transition: height .8s cubic-bezier(.22,.9,.24,1), filter .2s ease; position: relative;
}
.mini-bars .bar:hover { filter: brightness(1.25); }
.mini-bars .bar span {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%) scale(.85);
  font-size: .7rem; font-weight: 800; opacity: 0; transition: opacity .2s ease, transform .2s ease; white-space: nowrap;
}
.mini-bars .bar:hover span { opacity: 1; transform: translateX(-50%) scale(1); }
.mini-bars-x { display: flex; gap: 6px; margin-top: 6px; font-size: .68rem; color: var(--muted, #64748b); }
.mini-bars-x span { flex: 1; text-align: center; }
.ring-stat { display: flex; align-items: center; gap: 12px; }
.ring-stat .ring {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .9rem;
  background: conic-gradient(var(--brand-accent, #d4af37) calc(var(--pct, 0) * 1%), rgba(148,163,184,.25) 0);
}
.ring-stat .ring i { background: var(--card-bg, #fff); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }

/* -------- 4. Tabs, chips & filters (wallet + dashboards) -------- */
.tab-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.tab-btn {
  flex: 0 0 auto; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.75);
  padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: .86rem; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.tab-btn:hover { transform: translateY(-2px); }
.tab-btn.active { background: linear-gradient(135deg, var(--brand-primary, #0b1e3f), var(--brand-secondary, #143a7a)); color: #fff; border-color: transparent; }
.tab-pane { display: none; animation: v16Fade .35s ease; }
.tab-pane.active { display: block; }
@keyframes v16Fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.chip { border: 1px dashed rgba(15,23,42,.25); background: transparent; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
.chip:hover { border-style: solid; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-row input, .filter-row select { flex: 1 1 190px; }

/* -------- 5. Smart wallet -------- */
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.wallet-card {
  grid-column: span 2; min-height: 168px; border-radius: 22px; padding: 20px; color: #fff;
  background: linear-gradient(135deg, var(--brand-primary, #0b1e3f), var(--brand-secondary, #143a7a) 60%, #0f766e);
  box-shadow: 0 24px 45px -26px rgba(11,37,69,.9); position: relative; overflow: hidden;
}
.wallet-card::after {
  content: ""; position: absolute; width: 240px; height: 240px; right: -70px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent, #d4af37) 55%, transparent), transparent 70%);
}
.wc-label { text-transform: uppercase; letter-spacing: 1.2px; font-size: .72rem; opacity: .82; }
.wc-balance { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 900; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.wc-code { display: flex; align-items: center; gap: 8px; font-size: .85rem; flex-wrap: wrap; }
.wc-code b { letter-spacing: 2px; }
.wc-copy { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: .74rem; cursor: pointer; }
.wc-owner { margin-top: 10px; font-size: .82rem; opacity: .85; }
.stat-tile {
  display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 18px;
  background: rgba(255,255,255,.85); border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 14px 30px -24px rgba(11,37,69,.6); transition: transform .2s ease;
}
.stat-tile:hover { transform: translateY(-3px); }
.st-ic { font-size: 1.4rem; }
.st-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted, #64748b); }
.st-value { font-weight: 900; font-size: 1.05rem; }
.wallet-form { display: grid; gap: 6px; max-width: 460px; }
.wallet-form label { font-weight: 700; font-size: .84rem; }
.wallet-form button { margin-top: 10px; justify-self: start; }
.desk-grid, .kid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.kid-card { border-radius: 18px; padding: 16px; border: 1px solid rgba(15,23,42,.1); background: rgba(255,255,255,.85); }
.kid-name { font-weight: 900; }
.kid-meta { font-size: .78rem; color: var(--muted, #64748b); }
.kid-balance { font-size: 1.3rem; font-weight: 900; margin: 8px 0; }
.kid-form { display: flex; gap: 8px; }
.kid-form input { flex: 1; }
.tx-credit { color: #047857; font-weight: 800; }
.tx-debit  { color: #b91c1c; font-weight: 800; }

/* -------- 6. Timetable -------- */
.tt-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tt-check { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; }
.tt-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.tt-day-btn {
  flex: 0 0 auto; border: 1px solid rgba(15,23,42,.14); background: rgba(255,255,255,.8);
  border-radius: 999px; padding: 8px 15px; font-weight: 800; cursor: pointer; transition: transform .18s ease;
}
.tt-day-btn:hover { transform: translateY(-2px); }
.tt-day-btn.active { background: linear-gradient(135deg, var(--brand-primary, #0b1e3f), var(--brand-secondary, #143a7a)); color: #fff; border-color: transparent; }
.tt-day-btn.today { border-color: var(--brand-accent, #d4af37); }
.tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.tt-col { border-radius: 18px; border: 1px solid rgba(15,23,42,.09); background: rgba(255,255,255,.75); padding: 10px; }
.tt-col.is-today { border-color: var(--brand-accent, #d4af37); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent, #d4af37) 25%, transparent); }
.tt-col-head { font-weight: 900; padding: 6px 8px 10px; letter-spacing: .4px; }
.tt-empty { font-size: .82rem; color: var(--muted, #64748b); padding: 8px; }
.tt-slot {
  border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; background: #fff;
  border-left: 5px solid var(--brand-secondary, #143a7a); box-shadow: 0 10px 22px -20px rgba(11,37,69,.8);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tt-slot:hover { transform: translateX(3px); box-shadow: 0 14px 26px -18px rgba(11,37,69,.7); }
.tt-slot.tt-break { border-left-color: #f59e0b; }
.tt-slot.tt-assembly { border-left-color: #d4af37; }
.tt-slot.tt-games { border-left-color: #059669; }
.tt-slot.tt-prep { border-left-color: #0ea5e9; }
.tt-time { font-size: .74rem; font-weight: 800; color: var(--muted, #64748b); font-variant-numeric: tabular-nums; }
.tt-subject { font-weight: 900; margin: 2px 0 4px; }
.tt-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .76rem; color: var(--muted, #64748b); }
.tt-actions { display: flex; gap: 6px; margin-top: 8px; }
.tt-actions form { margin: 0; }
.btn.tiny { padding: 3px 10px; font-size: .72rem; border-radius: 999px; }
.btn.danger { background: #b91c1c; color: #fff; }
.tt-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tt-form label { font-weight: 700; font-size: .82rem; display: block; }
.tt-form-actions { display: flex; gap: 10px; align-items: flex-end; }

/* -------- 7. Dark mode -------- */
[data-theme="dark"] .tab-btn, [data-theme="dark"] .tt-day-btn { background: rgba(255,255,255,.08); color: #f8fafc; border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .stat-tile, [data-theme="dark"] .kid-card, [data-theme="dark"] .tt-col, [data-theme="dark"] .dash-tile { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f1f5f9; }
[data-theme="dark"] .tt-slot { background: rgba(15,23,42,.75); color: #f1f5f9; }
[data-theme="dark"] .ring-stat .ring i { background: #0f172a; color: #f8fafc; }

/* -------- 8. Site-wide mobile responsiveness sweep -------- */
@media (max-width: 1024px) {
  .wallet-card { grid-column: span 2; }
  .tt-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 720px) {
  .wallet-grid { grid-template-columns: 1fr 1fr; }
  .wallet-card { grid-column: 1 / -1; }
  .tt-grid { grid-template-columns: 1fr; }
  .tt-form { grid-template-columns: 1fr; }
  .desk-grid, .kid-grid, .dash-tiles { grid-template-columns: 1fr; }
  .wallet-form { max-width: none; }
  .wallet-form button, .tt-form-actions .btn { width: 100%; justify-self: stretch; text-align: center; }
  .tab-bar, .tt-days { position: sticky; top: 0; z-index: 3; background: inherit; }
  /* Any wide table collapses into readable cards */
  table.responsive-cards thead, .card table thead { display: none; }
  .card table, .card tbody, .card tr, .card td { display: block; width: 100%; }
  .card tr { border: 1px solid rgba(15,23,42,.1); border-radius: 14px; margin-bottom: 10px; padding: 6px 10px; background: rgba(255,255,255,.8); }
  .card td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 0; text-align: right; }
  .card td::before { content: attr(data-label); font-weight: 800; text-align: left; color: var(--muted, #64748b); }
  .card td:not([data-label]) { justify-content: flex-start; text-align: left; }
  [data-theme="dark"] .card tr { background: rgba(255,255,255,.05); }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  .card { padding: 14px; border-radius: 16px; }
  input, select, textarea, .btn { font-size: 16px; } /* stops iOS zoom-on-focus */
  .btn { min-height: 44px; }
}
@media (max-width: 420px) {
  .wallet-grid { grid-template-columns: 1fr; }
  .wc-balance { font-size: 1.6rem; }
  .chip { padding: 8px 12px; }
}
@media print {
  .v16-ring, .v16-dot, .edu-doodles, .tab-bar, .tt-days, .tt-actions, .tt-form, .filter-row { display: none !important; }
  .tab-pane { display: block !important; }
  .tt-grid { grid-template-columns: repeat(3, 1fr); }
}