/* ============================================================
   VELOS GLOBAL RESPONSIVE — DO NOT ADD SIDEBAR RULES HERE
   index.html controls its own sidebar via mobile.js
   ============================================================ */

/* ── GLOBAL BASE ─────────────────────────────────────────────*/
html, body { overflow-x: hidden !important; }

/* ── LARGE SCREENS 1400px+ ───────────────────────────────────*/
@media (min-width: 1400px) {
  .stat-value, .sv { font-size: clamp(1.2rem, 2vw, 1.8rem) !important; }
  h1 { font-size: clamp(1.2rem, 2.2vw, 1.9rem) !important; }
  h2 { font-size: clamp(1rem, 1.8vw, 1.4rem) !important; }
}

/* ── TABLET 768–1024px ───────────────────────────────────────*/
@media (max-width: 1024px) {
  .mbox { max-width: 94vw !important; }
  .fr2 { grid-template-columns: 1fr !important; }
  .sg2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* students.html topbar */
  .topbar-stats { display: none !important; }
  .brand-name { font-size: 1.3rem !important; }
  .brand-sub { font-size: .82rem !important; }
}

/* ── MOBILE 768px ────────────────────────────────────────────*/
@media (max-width: 768px) {

  /* ── index.html ── */
  .main-content {
    margin-left: 0 !important;
    padding: 1rem !important;
    width: 100% !important;
  }
  .quick-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cards-grid { grid-template-columns: 1fr !important; }

  /* ── students.html ── */
  .topbar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .topbar-row1 {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: .5rem 0 !important;
    gap: .5rem !important;
  }
  .brand-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
  }
  .brand-name { font-size: 1.1rem !important; }
  .brand-sub { display: none !important; }
  .topbar-stats { display: none !important; }
  .topbar-actions {
    gap: .4rem !important;
    flex-wrap: wrap !important;
  }
  .topbar-actions .btn { font-size: .78rem !important; padding: .4rem .7rem !important; }
  .topbar-row2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
  }
  .page { padding: 1rem !important; }
  .fin-grid {
    grid-template-columns: 1fr 1fr !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .fin-card-val { font-size: 1.1rem !important; }
  .search-wrap { min-width: unset !important; width: 100% !important; }
  .class-select { min-width: unset !important; width: 100% !important; }

  /* ── general nav pages (timetable, academics, finance etc) ── */
  .nav-back { font-size: .82rem !important; }
  .tabs, .tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem !important;
  }
  .tab, .tab-btn { white-space: nowrap !important; font-size: .8rem !important; }

  /* ── tables ── */
  .tw, .table-section, [class*="table-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: .76rem !important; min-width: 500px; }
  th, td { padding: .4rem .5rem !important; }

  /* ── modals ── */
  .mbox { max-width: 98vw !important; border-radius: 12px !important; margin: 1rem !important; }

  /* ── staff management ── */
  .sm-layout, .staff-layout { grid-template-columns: 1fr !important; }
}

/* ── PHONE 480px ─────────────────────────────────────────────*/
@media (max-width: 480px) {
  .sg2, .quick-stats { grid-template-columns: 1fr 1fr !important; }
  .btn { font-size: .78rem !important; padding: .42rem .7rem !important; }
  .fin-grid { grid-template-columns: 1fr !important; }

  /* students topbar actions - stack */
  .topbar-actions { width: 100% !important; justify-content: flex-start !important; }

  /* Timetable - allow horizontal scroll */
  .tt-wrap, .timetable-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ── FLUID FONT SIZES ────────────────────────────────────────*/
.stat-value, .sv { font-size: clamp(1.1rem, 2.5vw, 1.8rem); }
.topbar-stat-val { font-size: clamp(1.1rem, 3vw, 1.85rem) !important; }