/* EdHelfy — Mobile responsive styles (max-width: 768px) */

  @media (max-width: 768px) {
    .dash-main-grid { grid-template-columns: 1fr !important; }
    #dash-float-panels { position: static !important; width: 100% !important; }
    #dashboard-teacher-info { margin-right: 0 !important; padding: 8px !important; margin-bottom: 8px !important; }
    /* Compact school profile */
    #dashboard-header { padding: 10px 12px !important; margin-bottom: 8px !important; }
    #dashboard-header img, #dashboard-header div[style*="width:64px"] { width: 40px !important; height: 40px !important; font-size: 16px !important; border-radius: 10px !important; }
    #dashboard-header div[style*="font-size:20px"] { font-size: 15px !important; }
    /* Compact greeting */
    #dashboard-header + div[style*="margin-bottom"] { margin-bottom: 6px !important; }
  }

  @media (max-width: 768px) {
    .dash-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  }

  @media (max-width: 768px) {
    .mobile-toggle { display: flex !important; }
    .sidebar { width: 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; overflow: hidden; transition: width 0.25s ease; }
    .sidebar.mobile-open { width: 260px; box-shadow: 4px 0 30px rgba(0,0,0,0.3); overflow-y: auto; }
    .sidebar.mobile-open .nav-label { opacity: 1; }
    .sidebar.mobile-open .logo-full { opacity: 1; }
    .sidebar-overlay.show { background: rgba(0,0,0,0.4); pointer-events: auto; }
    .main { margin-left: 0; }
    .toast-container { left: 10px !important; width: calc(100vw - 20px) !important; }
    .topbar { padding: 0 10px; height: 46px; max-width: none; }
    .topbar-right { gap: 4px; }
    .topbar-right > button.btn.btn-sm { display: none !important; }
    .content { padding: 8px; padding-bottom: 72px; }
    .global-search { padding: 4px 8px; }
    .global-search input { width: 60px; font-size: 13px; }
    .global-search input:focus { width: 130px; }
    .form-row { grid-template-columns: 1fr; }
    .ai-panel { position: static !important; }
    .ai-messages { max-height: 120px !important; }
    .chart-row { grid-template-columns: 1fr; }
    .profile-header { flex-direction: column; text-align: center; }
    .profile-tab { padding: 10px 8px; font-size: 13px; }
    .stud-toolbar-more { flex-wrap: wrap; }
    .mb-only { display:flex !important; }
    .mb-only.stud-toolbar-more { display:none !important; }
    .mb-only.stud-toolbar-more.stud-more-open { display:flex !important; }
    .dt-only { display:none !important; }
    .desktop-table { display: none !important; }
    .m-card-list { display: block !important; }
    .att-cell { width: 44px !important; height: 44px !important; font-size: 14px !important; }
    .bottom-nav { display: block; }
    .fab { display: flex; align-items: center; justify-content: center; }
    .modal { width: 95vw !important; max-height: 85vh !important; }
    .cal-day { min-height: 40px; font-size: 11px; }
    .cal-event { font-size: 8px; }
    h1, .topbar-title { font-size: 16px; }

    /* ── COMPACT STAT CARDS ── */
    .stats-row { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px !important; }
    .stat-card { padding: 10px 12px !important; }
    .stat-card::before { width: 3px; }
    .stat-eyebrow { font-size: 9px; margin-bottom: 2px; letter-spacing: 0.04em; }
    .stat-value { font-size: 20px !important; }
    .stat-delta { font-size: 10px; }

    /* ── COMPACT CARDS & PLACARDS ── */
    .card { border-radius: 10px; }
    .card-pad { padding: 8px 10px !important; }
    .dash-grid { grid-template-columns: 1fr !important; gap: 6px !important; }

    /* ── COMPACT SECTION HEADERS & FILTERS ── */
    .section-header { gap: 6px; margin-bottom: 10px; }
    .section-actions { flex-wrap: wrap; gap: 4px; }
    .section-actions .btn { font-size: 11px !important; padding: 5px 8px !important; }
    .section-actions select { font-size: 11px !important; padding: 5px 8px !important; height: 30px; }

    /* ── COMPACT FILTER ROWS ── */
    .section-header select,
    .section-actions select { font-size: 11px; padding: 4px 6px; min-width: 0; }
    .btn.btn-sm { font-size: 10px !important; padding: 4px 8px !important; }

    /* ── COMPACT INFO BANNERS ── */
    .card[style*="border-left:3px"] { padding: 6px 8px !important; margin-bottom: 8px !important; }
    .card[style*="border-left:3px"] [style*="font-size:12px"] { font-size: 11px !important; }

    /* ── TAB BAR COMPACT ── */
    .tab-bar { margin-bottom: 10px; }
    .tab-btn { padding: 8px 12px; font-size: 12px; }

    /* ── COMPACT MOBILE CARDS (student/fee/inventory) ── */
    .m-card-item { padding: 8px 10px !important; margin-bottom: 5px !important; }
    .m-card-item > div:first-child { gap: 8px !important; }
    .m-card-item > div:first-child img,
    .m-card-item > div:first-child > div[style*="width:36px"] { width: 32px !important; height: 32px !important; font-size: 13px !important; }
    .m-card-item a { font-size: 13px !important; }
    .m-card-actions { margin-top: 4px !important; padding-top: 4px !important; gap: 4px !important; }
    .touch-btn { min-width: 32px !important; min-height: 32px !important; padding: 4px !important; }

    /* ── FILTER ROWS — single compact strip ── */
    .section-header { gap: 4px !important; margin-bottom: 8px !important; }
    .section-header .btn { font-size: 11px !important; padding: 5px 8px !important; }
    .section-header select { font-size: 11px !important; padding: 5px 6px !important; }

    /* ── FEE OVERVIEW compact ── */
    .card[style*="Fee Overview"] { padding: 8px !important; }

    /* ── TEACHER / ATTENDANCE STATS GRIDS ── */
    .card[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
    .card[style*="grid-template-columns:1fr 1fr 1fr"] { gap: 4px !important; }

    /* ── SCHEDULE INFO BANNER compact ── */
    .card[style*="background:var(--accent-light)"] { padding: 6px 8px !important; }

    /* ── TIMETABLE compact on mobile ── */
    .tt-table th { padding: 5px 3px !important; font-size: 10px !important; }
    .tt-table td { padding: 4px 2px !important; font-size: 10px !important; }

    /* ── PULL TO REFRESH ── */
    .ptr-indicator {
      position: fixed; top: 52px; left: 50%; transform: translateX(-50%) translateY(-60px);
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--surface); border: 1px solid var(--border);
      box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center;
      z-index: 800; transition: transform 0.2s, opacity 0.2s; opacity: 0; pointer-events: none;
    }
    .ptr-indicator.active { opacity: 1; }
    .ptr-indicator.refreshing { animation: ptr-spin 0.6s linear infinite; }
    @keyframes ptr-spin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }

    /* ── SWIPE TAB INDICATOR ── */
    .swipe-tab-indicator {
      position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
      background: var(--accent); color: #fff; padding: 6px 16px; border-radius: 20px;
      font-size: 12px; font-weight: 600; font-family: var(--font-body);
      z-index: 800; opacity: 0; transition: opacity 0.2s;
      pointer-events: none; box-shadow: var(--shadow-md);
    }
    .swipe-tab-indicator.show { opacity: 1; }

    /* ── BOTTOM SHEET MODALS ── */
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal {
      width: 100vw !important; max-width: 100vw !important; max-height: 90vh !important;
      border-radius: 16px 16px 0 0 !important;
      transform: translateY(100%) !important;
    }
    .modal-overlay.open .modal { transform: translateY(0) !important; }
    .modal-drag-handle {
      display: flex !important; justify-content: center; padding: 10px 0 2px 0;
    }
    .modal-drag-handle span {
      width: 36px; height: 4px; border-radius: 2px; background: var(--border2);
    }
  }