/* =========================================================
   MOBILE.CSS — SREE VIDYA EM SCHOOL Dashboard
   Full Mobile Responsiveness (320px – 992px)
   ========================================================= */

/* ── Base Mobile Reset ───────────────────────────────────── */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ── 992px and below (Tablets & Phones) ────────────────── */
@media (max-width: 992px) {

    /* ── Layout ──────────────────────────────────────────── */
    .app-container {
        flex-direction: column;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
    }

    .content-area {
        padding: 12px 10px !important;
    }

    /* ── Sidebar ──────────────────────────────────────────── */
    .sidebar {
        width: 280px !important;
        max-width: 85vw;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        border-radius: 0 16px 16px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar.active {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.32);
    }

    .sidebar.sidebar-collapsed {
        width: 280px !important;
        transform: translateX(-100%);
    }

    .sidebar.sidebar-collapsed.active {
        transform: translateX(0);
    }

    .sidebar.sidebar-collapsed .school-name,
    .sidebar.sidebar-collapsed .menu-item-text,
    .sidebar.sidebar-collapsed .menu-item-badge {
        display: block !important;
    }

    .sidebar.sidebar-collapsed .menu-item {
        justify-content: flex-start !important;
        padding: 10px 12px 10px 16px !important;
    }

    .sidebar.sidebar-collapsed .sidebar-header {
        justify-content: space-between !important;
        padding: 18px 16px !important;
    }

    .sidebar.sidebar-collapsed .collapse-btn {
        position: static !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #c7d2fe !important;
        box-shadow: none !important;
        border-radius: 6px !important;
        width: 30px !important;
        height: 30px !important;
    }

    .sidebar-header {
        padding: 16px 14px;
        min-height: 56px;
    }

    .school-logo img {
        width: 32px;
        height: 32px;
    }

    .school-name {
        font-size: 13px;
    }

    .menu-item {
        padding: 12px 14px 12px 16px;
        margin: 2px 6px;
        min-height: 48px;
        border-radius: 10px;
    }

    .menu-item-text {
        font-size: 13.5px;
    }

    .menu-item-icon {
        font-size: 20px;
    }

    .menu-title {
        font-size: 9.5px;
        padding: 10px 14px 4px;
    }

    /* ── Sidebar Overlay ───────────────────────────────────── */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        z-index: 1000;
        transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        touch-action: none;
    }

    .sidebar-overlay.active {
        display: block;
        background: rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    /* ── Top Nav ───────────────────────────────────────────── */
    .top-nav {
        padding: 0 12px;
        height: 56px;
        gap: 6px;
    }

    #mobileMenuBtn {
        display: flex !important;
    }

    .search-bar {
        display: none;
    }

    .user-profile .user-name {
        display: none;
    }

    .user-profile .user-role {
        display: none;
    }

    .user-profile {
        padding: 4px 6px;
        border: none;
    }

    .user-avatar {
        width: 30px;
        height: 30px;
        font-size: 10px;
    }

    .nav-action-btn {
        width: 34px;
        height: 34px;
    }

    .nav-action-btn .material-icons {
        font-size: 20px;
    }

    /* ── Page Header ───────────────────────────────────────── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .page-title {
        font-size: 19px;
        font-weight: 700;
    }

    .page-subtitle {
        font-size: 12px;
    }

    .page-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .page-actions .btn {
        flex: 1;
        min-width: 80px;
        justify-content: center;
        font-size: 11.5px;
        padding: 8px 12px;
    }

    .page-actions .btn .material-icons {
        font-size: 15px;
    }

    /* ── Stats Cards ───────────────────────────────────────── */
    .stats-grid,
    .db-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 14px;
    }

    .stat-card {
        padding: 12px 12px 10px;
        border-radius: 12px;
    }

    .stat-value {
        font-size: 20px;
        line-height: 1.2;
    }

    .stat-label {
        font-size: 10px;
        margin-top: 2px;
    }

    .stat-card-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
        border-radius: 8px;
    }

    .stat-card-icon .material-icons {
        font-size: 16px;
    }

    .stat-change {
        font-size: 10px;
        padding: 2px 6px;
        margin-top: 6px;
    }

    .stat-change .material-icons {
        font-size: 12px;
    }

    /* ── Charts ────────────────────────────────────────────── */
    .chart-container {
        padding: 10px 12px;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .card-header {
        padding: 10px 12px 8px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .card-title {
        font-size: 12.5px;
        font-weight: 700;
    }

    .card-title .material-icons {
        font-size: 16px;
    }

    .card-body {
        padding: 12px 10px;
    }

    .db-charts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .db-bottom-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ── Quick Actions ────────────────────────────────────── */
    .quick-actions-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }

    .quick-action-card {
        padding: 10px 8px;
        border-radius: 10px;
    }

    .quick-action-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .quick-action-icon .material-icons {
        font-size: 16px;
    }

    .quick-action-label {
        font-size: 10px;
        font-weight: 600;
    }

    /* ── Tables ───────────────────────────────────────────── */
    .data-table {
        font-size: 11px;
    }

    .data-table th,
    .data-table td {
        padding: 6px 8px;
    }

    .data-table th {
        font-size: 9px;
        letter-spacing: 0.04em;
    }

    .data-table tbody td {
        font-size: 11px;
    }

    .table-wrapper {
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Action Buttons ────────────────────────────────────── */
    .action-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .action-btn .material-icons {
        font-size: 14px;
    }

    td:has(> .action-btn:nth-child(4)),
    td.action-cell--wrap {
        max-width: 60px;
        min-width: 60px;
    }

    td:has(> .action-btn) {
        gap: 3px;
        flex-wrap: wrap;
        max-width: 60px;
    }

    td:has(> .action-btn:nth-child(1):nth-last-child(1)),
    td:has(> .action-btn:nth-child(1):nth-last-child(2)),
    td:has(> .action-btn:nth-child(1):nth-last-child(3)) {
        max-width: none;
        flex-wrap: nowrap;
    }

    /* ── Pagination ────────────────────────────────────────── */
    .pagination-controls {
        padding: 8px 10px;
        justify-content: center;
        gap: 6px;
        border-radius: 10px;
        flex-wrap: wrap;
    }

    .pagination-controls button {
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 6px;
        min-height: 32px;
    }

    .pagination-controls span {
        font-size: 11px;
    }

    /* ── Filters ───────────────────────────────────────────── */
    .filter-controls {
        padding: 10px 12px;
        flex-direction: column;
        gap: 8px;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .filter-group {
        min-width: unset;
        width: 100%;
    }

    .filter-group label {
        font-size: 10px;
        margin-bottom: 3px;
    }

    .filter-group select,
    .filter-group input[type="text"],
    .filter-group input[type="date"] {
        font-size: 12px;
        padding: 7px 10px;
        border-radius: 6px;
        min-height: 38px;
    }

    .filter-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .filter-actions .btn {
        flex: 1;
        min-width: 70px;
        justify-content: center;
        font-size: 11px;
        padding: 7px 10px;
        min-height: 38px;
    }

    /* ── Modals ────────────────────────────────────────────── */
    .modal {
        max-width: 98%;
        max-height: 95vh;
        border-radius: 12px;
        width: 98%;
    }

    .modal-header {
        padding: 12px 14px 10px;
        border-radius: 12px 12px 0 0;
    }

    .modal-title {
        font-size: 15px;
        font-weight: 700;
    }

    .modal-body {
        padding: 12px 14px;
        max-height: calc(95vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 6px;
        border-radius: 0 0 12px 12px;
    }

    .modal-footer .btn {
        flex: 1;
        justify-content: center;
        min-width: 70px;
        font-size: 12px;
        padding: 8px 12px;
        min-height: 38px;
    }

    .modal-close {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    /* ── Forms ─────────────────────────────────────────────── */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-col {
        width: 100%;
        flex: none;
    }

    .form-group {
        margin-bottom: 12px;
    }

    .form-label {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .form-control {
        font-size: 13px;
        padding: 8px 10px;
        border-radius: 6px;
        min-height: 38px;
    }

    .form-actions {
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 12px;
        margin-top: 12px;
    }

    .form-actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 70px;
        font-size: 12px;
        padding: 8px 12px;
        min-height: 38px;
    }

    /* ── Student Profile Modal ────────────────────────────── */
    .student-profile-modal {
        max-width: 98%;
    }

    .student-view {
        padding: 8px;
        gap: 10px;
    }

    .sv-hero {
        padding: 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .sv-avatar {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .sv-name {
        font-size: 17px;
        font-weight: 700;
    }

    .sv-id {
        font-size: 11px;
    }

    .sv-tags {
        gap: 4px;
        margin-top: 6px;
    }

    .sv-tags span {
        font-size: 10px;
        padding: 2px 8px;
    }

    .sv-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .sv-metric {
        padding: 8px 10px;
        gap: 6px;
    }

    .sv-metric-icon {
        width: 28px;
        height: 28px;
    }

    .sv-metric-icon .material-icons {
        font-size: 14px;
    }

    .sv-metric-value {
        font-size: 15px;
    }

    .sv-metric-label {
        font-size: 9px;
    }

    .sv-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sv-panel {
        border-radius: 8px;
    }

    .sv-panel-head {
        padding: 8px 10px;
        font-size: 11px;
    }

    .sv-panel-head .material-icons {
        font-size: 14px;
    }

    .sv-details {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 8px;
    }

    .sv-detail-item {
        padding: 6px 8px;
        gap: 6px;
    }

    .sv-detail-item .material-icons {
        font-size: 14px;
    }

    .sv-detail-label {
        font-size: 9px;
    }

    .sv-detail-value {
        font-size: 11px;
    }

    .sv-fee-list,
    .sv-list {
        padding: 8px;
        gap: 4px;
    }

    .sv-fee-row,
    .sv-payment-row,
    .sv-prev-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 6px 8px;
    }

    .sv-fee-title,
    .sv-payment-title {
        font-size: 11px;
    }

    .sv-fee-amounts {
        justify-content: flex-start;
        flex-wrap: wrap;
        font-size: 10px;
        gap: 4px;
    }

    .sv-payment-sub {
        font-size: 10px;
    }

    .sv-payment-right {
        font-size: 11px;
    }

    .sv-totals {
        flex-direction: column;
        gap: 4px;
        font-size: 11px;
        padding: 8px 10px;
    }

    .sv-prev-summary {
        gap: 4px;
        padding: 8px 8px 0;
    }

    .sv-prev-summary span {
        font-size: 10px;
        padding: 4px 6px;
    }

    .sv-empty {
        font-size: 11px;
        padding: 10px;
    }

    /* ── Fees Pending ──────────────────────────────────────── */
    .fp-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }

    .fp-card {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .fp-card-value {
        font-size: 17px;
    }

    .fp-card-label {
        font-size: 9px;
    }

    .fp-filters {
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .fp-filter-group {
        width: 100%;
        flex-direction: column;
        gap: 3px;
    }

    .fp-filter-group label {
        font-size: 10px;
    }

    .fp-filter-group select,
    .fp-filter-group input {
        font-size: 12px;
        padding: 7px 10px;
        min-height: 38px;
    }

    .fp-table {
        font-size: 10px;
    }

    .fp-table th,
    .fp-table td {
        padding: 5px 6px;
    }

    .fp-table th {
        font-size: 8px;
    }

    .fp-bar-wrap {
        width: 60px;
        height: 5px;
    }

    /* ── Record Payment Modal ─────────────────────────────── */
    .rpm-modal {
        max-width: 98%;
    }

    .rpm-header {
        padding: 10px 14px 8px;
    }

    .rpm-header-icon {
        width: 32px;
        height: 32px;
    }

    .rpm-header-icon .material-icons {
        font-size: 16px;
    }

    .rpm-title {
        font-size: 14px;
    }

    .rpm-subtitle {
        font-size: 10px;
    }

    .rpm-body {
        padding: 10px 12px;
        gap: 10px;
    }

    .rpm-row-3 {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rpm-section {
        gap: 6px;
    }

    .rpm-section-label {
        font-size: 10px;
    }

    .rpm-step {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .rpm-input {
        font-size: 12px !important;
        padding: 7px 10px !important;
        min-height: 36px;
    }

    .rpm-label {
        font-size: 10px;
    }

    .rpm-student-card {
        padding: 8px 10px;
        gap: 4px;
    }

    .rpm-student-card-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .rpm-student-avatar {
        width: 30px;
        height: 30px;
    }

    .rpm-student-name {
        font-size: 12px;
    }

    .rpm-student-meta {
        font-size: 10px;
    }

    .rpm-student-due-badge,
    .rpm-student-cleared-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .rpm-due-pill {
        font-size: 9px;
        padding: 2px 8px;
    }

    .rpm-actions {
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
    }

    .rpm-actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 60px;
        font-size: 12px;
        padding: 8px 12px;
        min-height: 38px;
    }

    .rpm-qr-box {
        padding: 12px 10px;
    }

    .rpm-qr-label {
        font-size: 10px;
    }

    .rpm-autofill-bar {
        padding: 6px 10px;
        font-size: 11px;
        flex-wrap: wrap;
        gap: 4px;
    }

    .rpm-total-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    .rpm-paste-btn {
        font-size: 10px;
        padding: 3px 8px;
    }

    /* ── Fee Fixation ──────────────────────────────────────── */
    .ffx-struct-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ffx-class-card {
        border-radius: 10px;
    }

    .ffx-class-card-head {
        padding: 10px 14px;
        font-size: 13px;
    }

    .ffx-class-total {
        font-size: 11px;
        padding: 2px 8px;
    }

    .ffx-class-body {
        padding: 10px 12px 12px;
    }

    .ffx-fee-row {
        grid-template-columns: 24px 1fr 80px;
        gap: 4px;
        margin-bottom: 4px;
    }

    .ffx-fee-icon {
        font-size: 14px !important;
    }

    .ffx-fee-label {
        font-size: 11px;
    }

    .ffx-fee-input {
        font-size: 11px;
        padding: 4px 6px;
        min-height: 32px;
    }

    .ffx-save-btn {
        padding: 5px 14px;
        font-size: 11px;
        min-height: 32px;
    }

    .ffx-tabs {
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 14px;
    }

    .ffx-tab {
        font-size: 12px;
        padding: 7px 14px;
        flex: 1;
        justify-content: center;
        min-height: 38px;
    }

    .ffx-stu-filters {
        flex-direction: column;
        gap: 6px;
        padding: 10px 12px;
    }

    .ffx-fg {
        width: 100%;
    }

    .ffx-stu-table {
        font-size: 10px;
    }

    .ffx-stu-table th,
    .ffx-stu-table td {
        padding: 4px 6px;
        font-size: 9px;
    }

    .ffx-sum-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .ffx-sum-card {
        padding: 10px 12px;
    }

    .ffx-sum-card-val {
        font-size: 15px;
    }

    /* ── Transport Fee ─────────────────────────────────────── */
    .trf-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .trf-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .trf-add-btn {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    .trf-table {
        font-size: 11px;
    }

    .trf-table th,
    .trf-table td {
        padding: 6px 8px;
    }

    .trf-route-badge {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    /* ── Payment Verify ────────────────────────────────────── */
    .pv-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .pv-card {
        padding: 10px 12px;
    }

    .pv-card-value {
        font-size: 16px;
    }

    .pv-filters {
        flex-direction: column;
        gap: 6px;
    }

    .pv-filters select,
    .pv-filters input,
    .pv-filters .btn {
        width: 100%;
        min-height: 38px;
    }

    .pv-table {
        font-size: 10px;
    }

    .pv-table th,
    .pv-table td {
        padding: 4px 6px;
    }

    /* ── Bulk Upload ───────────────────────────────────────── */
    .bu-modal {
        max-width: 98%;
        max-height: 95vh;
    }

    .bu-modal-header {
        padding: 12px 14px 10px;
    }

    .bu-modal-header h2 {
        font-size: 14px;
    }

    .bu-modal-body {
        padding: 12px 14px;
    }

    .bu-steps {
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 14px;
    }

    .bu-step-label {
        font-size: 9px;
    }

    .bu-step-num {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .bu-col-map {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 6px 0;
        font-size: 11px;
    }

    .bu-table {
        font-size: 10px;
    }

    .bu-table th,
    .bu-table td {
        padding: 4px 6px;
    }

    .bu-drop-zone {
        padding: 20px 16px;
    }

    .bu-drop-zone .material-icons {
        font-size: 32px !important;
    }

    .bu-actions {
        flex-direction: column;
        gap: 6px;
    }

    .bu-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
    }

    /* ── Data Export ───────────────────────────────────────── */
    .de-chip-row {
        gap: 4px;
    }

    .de-chip {
        padding: 5px 10px;
        font-size: 11px;
        min-height: 32px;
    }

    .de-chip .material-icons {
        font-size: 14px;
    }

    .de-filter-row {
        flex-direction: column;
        gap: 6px;
    }

    .de-filter-group {
        width: 100%;
    }

    .de-table {
        font-size: 10px;
    }

    .de-table th,
    .de-table td {
        padding: 4px 6px;
    }

    .de-result-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }

    .de-export-btns {
        width: 100%;
        flex-wrap: wrap;
    }

    .de-export-btns .btn {
        flex: 1;
        justify-content: center;
        font-size: 11px;
        padding: 6px 10px;
        min-height: 36px;
    }

    /* ── Data Manager ──────────────────────────────────────── */
    .dm-op-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dm-steps {
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 14px;
    }

    .dm-step-label {
        font-size: 9px;
    }

    .dm-step-num {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .dm-card {
        padding: 14px 12px;
    }

    .dm-card-title {
        font-size: 13px;
    }

    .dm-filter-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dm-field-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .dm-field-btn {
        padding: 8px 10px;
        font-size: 11px;
    }

    .dm-table-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }

    .dm-table-card {
        padding: 8px 6px;
    }

    .dm-table-card .material-icons {
        font-size: 16px;
    }

    .dm-table-card-label {
        font-size: 9px;
    }

    .dm-preview-table {
        font-size: 10px;
    }

    .dm-preview-table th,
    .dm-preview-table td {
        padding: 4px 6px;
    }

    .dm-summary-bar {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        padding: 10px 12px;
    }

    .dm-count {
        font-size: 18px;
    }

    .dm-actions {
        flex-direction: column;
        gap: 6px;
    }

    .dm-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
    }

    /* ── System Settings ───────────────────────────────────── */
    .ss-tabs {
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 14px;
    }

    .ss-tab {
        font-size: 11px;
        padding: 6px 12px;
        flex: 1;
        justify-content: center;
        min-height: 36px;
    }

    .ss-tab .material-icons {
        font-size: 14px;
    }

    .ss-card {
        padding: 14px 14px;
        border-radius: 10px;
    }

    .ss-card-title {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .ss-card-title .material-icons {
        font-size: 16px;
    }

    .ss-form {
        max-width: 100%;
        gap: 10px;
    }

    .ss-health-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ss-profile-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ss-field input,
    .ss-field select {
        font-size: 12px;
        padding: 7px 10px;
        min-height: 36px;
    }

    .ss-field label {
        font-size: 10px;
    }

    .ss-btn {
        font-size: 12px;
        padding: 8px 14px;
        min-height: 38px;
        justify-content: center;
        width: 100%;
    }

    .ss-console {
        font-size: 10px;
        padding: 8px 10px;
        max-height: 150px;
    }

    .ss-info-row {
        font-size: 11px;
        padding: 6px 0;
        flex-wrap: wrap;
        gap: 4px;
    }

    .ss-badge {
        font-size: 9px;
        padding: 2px 8px;
    }

    /* ── Timetable ─────────────────────────────────────────── */
    .tt-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tt-header-left h1 {
        font-size: 20px;
    }

    .tt-toolbar {
        flex-direction: column;
        gap: 6px;
    }

    .tt-search-wrap {
        max-width: 100%;
        width: 100%;
    }

    .tt-filter-sel {
        width: 100%;
        min-height: 38px;
        font-size: 12px;
    }

    .tt-view-toggle {
        width: 100%;
        justify-content: center;
    }

    .tt-view-btn-toggle {
        flex: 1;
        justify-content: center;
        font-size: 12px;
        padding: 4px 8px;
        min-height: 34px;
    }

    .tt-stats-row {
        gap: 6px;
    }

    .tt-stat-chip {
        padding: 8px 12px;
        min-width: 80px;
        flex: 1;
    }

    .tt-stat-chip-val {
        font-size: 16px;
    }

    .tt-stat-chip-lbl {
        font-size: 9px;
    }

    .tt-stat-chip-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .tt-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .tt-card-body {
        padding: 12px 14px 10px;
    }

    .tt-card-title {
        font-size: 14px;
    }

    .tt-card-subjects {
        gap: 4px;
    }

    .tt-subj-pill {
        font-size: 10px;
        padding: 2px 8px;
    }

    .tt-list-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }

    .tt-list-title {
        font-size: 13px;
        flex: 1 1 100%;
    }

    .tt-list-actions {
        margin-left: auto;
    }

    /* ── Timetable Editor ──────────────────────────────────── */
    .tt-editor-top {
        padding: 12px 14px;
    }

    .tt-editor-top-row {
        flex-direction: column;
        gap: 8px;
    }

    .tt-editor-field {
        width: 100%;
    }

    .tt-editor-field input,
    .tt-editor-field select {
        width: 100%;
        min-width: unset;
        min-height: 36px;
        font-size: 12px;
    }

    .tt-period-config {
        padding: 10px 14px;
    }

    .tt-period-config-title {
        font-size: 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tt-period-chips {
        gap: 4px;
    }

    .tt-period-chip {
        font-size: 10px;
        padding: 4px 8px;
        min-height: 28px;
    }

    .tt-subject-grid-wrap {
        padding: 10px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tt-subject-grid {
        font-size: 10px;
        min-width: 400px;
    }

    .tt-subject-grid th {
        font-size: 9px;
        padding: 4px 6px;
    }

    .tt-subject-grid td {
        padding: 2px 3px;
    }

    .tt-subj-inp {
        font-size: 10px;
        padding: 4px 6px;
        min-width: 50px;
        min-height: 30px;
    }

    .tt-break-td {
        font-size: 9px;
        padding: 4px 2px;
    }

    .tt-day-tabs {
        gap: 3px;
        padding: 8px 12px 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tt-day-tab {
        font-size: 9px;
        padding: 4px 8px;
        white-space: nowrap;
        min-height: 30px;
    }

    .tt-grid-table {
        font-size: 10px;
        min-width: 400px;
    }

    .tt-grid-table th,
    .tt-grid-table td {
        padding: 3px 5px;
    }

    .tt-period-th .tt-period-name {
        font-size: 9px;
    }

    .tt-period-th .tt-period-time {
        font-size: 8px;
    }

    .tt-view-grid {
        padding: 10px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tt-period-popover {
        min-width: 180px;
        padding: 12px;
        max-width: 90vw;
    }

    /* ── Audit Logs ────────────────────────────────────────── */
    #al-filters {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    #al-filters .al-fg {
        width: 100%;
    }

    #al-filters input,
    #al-filters select {
        min-height: 38px;
        font-size: 12px;
        min-width: unset;
        width: 100%;
    }

    #al-filters .al-fg[style*="flex-direction:row"] {
        flex-direction: column !important;
        gap: 6px;
    }

    .al-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .al-stat-card {
        padding: 10px 12px;
    }

    .al-stat-val {
        font-size: 18px;
    }

    #al-table {
        font-size: 10px;
    }

    #al-table th,
    #al-table td {
        padding: 4px 6px;
    }

    .al-desc {
        max-width: 120px;
    }

    /* ── Attendance Modal ──────────────────────────────────── */
    #attendanceModal .modal {
        max-width: 98%;
        max-height: 95vh;
    }

    #attendanceModal .att-radio-group {
        flex-wrap: wrap;
        gap: 3px;
    }

    #attendanceModal .att-radio-group label {
        padding: 3px 8px;
        font-size: 10px;
        min-height: 28px;
    }

    #attendanceModal .att-reason-input {
        font-size: 10px;
        padding: 4px 6px;
        min-height: 30px;
    }

    #attendanceModal .att-remarks-input {
        font-size: 10px;
        padding: 4px 6px;
        min-height: 30px;
    }

    #attendanceTable {
        font-size: 10px;
    }

    #attendanceTable th,
    #attendanceTable td {
        padding: 4px 6px;
    }

    #attendanceTable .att-radio-group label {
        padding: 2px 6px;
        font-size: 9px;
    }

    /* ── Bulk Announcement ─────────────────────────────────── */
    #bulkAnnouncementModal .modal {
        max-width: 98%;
        max-height: 95vh;
    }

    #bulkAnnouncementModal .modal-body {
        padding: 10px 12px;
    }

    #bulkVarToolbar {
        gap: 4px;
        flex-wrap: wrap;
    }

    .bulk-var-tag {
        font-size: 9px;
        padding: 2px 6px;
        min-height: 28px;
    }

    #bulkStudentChips {
        max-height: 80px;
        padding: 6px 8px;
    }

    #bulkStudentChips span {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* ── Previous Dues ─────────────────────────────────────── */
    #pdSummaryCards {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    #pdTableWrap .data-table {
        font-size: 10px;
    }

    #pdTableWrap .data-table th,
    #pdTableWrap .data-table td {
        padding: 4px 6px;
    }

    .pd-edit-record-btn,
    .pd-delete-record-btn {
        width: 22px;
        height: 22px;
    }

    .pd-edit-record-btn .material-icons,
    .pd-delete-record-btn .material-icons {
        font-size: 12px;
    }

    /* ── Holidays ──────────────────────────────────────────── */
    .holiday-toggle {
        padding: 8px 10px;
        flex-wrap: wrap;
    }

    .holiday-toggle label {
        font-size: 11px;
    }

    .holiday-name-input {
        font-size: 11px;
        padding: 4px 8px;
        min-height: 32px;
        width: 100%;
    }

    /* ── Notifications ────────────────────────────────────── */
    #notificationDropdown {
        width: 300px;
        right: -60px;
        max-height: 400px;
    }

    #notificationDropdown .notif-item {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* ── Toast ─────────────────────────────────────────────── */
    .toast,
    .pv-toast {
        font-size: 12px;
        padding: 8px 16px;
        max-width: 90%;
        bottom: 70px;
    }

    /* ── Loading Overlay ───────────────────────────────────── */
    .loading-overlay .spinner {
        width: 32px;
        height: 32px;
        border-width: 3px;
    }

    /* ── Message Box ───────────────────────────────────────── */
    .message-box {
        padding: 24px 20px;
        max-width: 95%;
    }

    .message-box-icon {
        font-size: 40px;
    }

    .message-box-title {
        font-size: 17px;
    }

    .message-box-text {
        font-size: 13px;
    }
}

/* ── 480px and below (Small Phones) ────────────────────── */
@media (max-width: 480px) {

    /* Layout */
    .content-area {
        padding: 8px 6px !important;
    }

    /* Stats - 2 columns with smaller sizes */
    .stats-grid,
    .db-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .stat-card {
        padding: 8px 8px 6px;
        border-radius: 10px;
    }

    .stat-value {
        font-size: 16px;
    }

    .stat-label {
        font-size: 8px;
    }

    .stat-card-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }

    .stat-card-icon .material-icons {
        font-size: 13px;
    }

    .stat-change {
        font-size: 8px;
        padding: 1px 4px;
        margin-top: 4px;
    }

    /* Page Title */
    .page-title {
        font-size: 16px;
    }

    .page-actions .btn {
        font-size: 10px;
        padding: 6px 8px;
        min-height: 32px;
        min-width: 60px;
    }

    .page-actions .btn .material-icons {
        font-size: 13px;
    }

    /* Tables */
    .data-table {
        font-size: 9px;
    }

    .data-table th,
    .data-table td {
        padding: 4px 5px;
    }

    .data-table th {
        font-size: 8px;
    }

    /* Action buttons */
    .action-btn {
        width: 22px;
        height: 22px;
    }

    .action-btn .material-icons {
        font-size: 11px;
    }

    td:has(> .action-btn) {
        max-width: 48px;
        gap: 2px;
    }

    td:has(> .action-btn:nth-child(4)),
    td.action-cell--wrap {
        max-width: 48px;
        min-width: 48px;
    }

    /* Modals */
    .modal-header {
        padding: 8px 10px 6px;
    }

    .modal-title {
        font-size: 13px;
    }

    .modal-body {
        padding: 8px 10px;
    }

    .modal-footer {
        padding: 8px 10px;
    }

    .modal-footer .btn {
        font-size: 10px;
        padding: 6px 8px;
        min-height: 32px;
    }

    /* Forms */
    .form-control {
        font-size: 11px;
        padding: 6px 8px;
        min-height: 32px;
    }

    .form-label {
        font-size: 10px;
    }

    .form-actions .btn {
        font-size: 10px;
        padding: 6px 8px;
        min-height: 32px;
    }

    /* Filters */
    .filter-group select,
    .filter-group input {
        font-size: 11px;
        padding: 5px 8px;
        min-height: 32px;
    }

    .filter-actions .btn {
        font-size: 10px;
        padding: 5px 8px;
        min-height: 32px;
    }

    /* Student View */
    .sv-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .sv-metric {
        padding: 6px 8px;
    }

    .sv-metric-value {
        font-size: 13px;
    }

    .sv-name {
        font-size: 15px;
    }

    /* Fees Pending */
    .fp-cards {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .fp-card {
        padding: 6px 8px;
    }

    .fp-card-value {
        font-size: 14px;
    }

    .fp-card-label {
        font-size: 8px;
    }

    /* RPM */
    .rpm-title {
        font-size: 13px;
    }

    .rpm-btn-cancel,
    .rpm-btn-submit {
        font-size: 11px;
        padding: 6px 12px;
        min-height: 32px;
    }

    /* Fee Fixation */
    .ffx-fee-row {
        grid-template-columns: 20px 1fr 60px;
        gap: 3px;
    }

    .ffx-fee-input {
        font-size: 10px;
        padding: 3px 5px;
        min-height: 28px;
    }

    .ffx-fee-label {
        font-size: 10px;
    }

    /* Bulk Upload */
    .bu-col-map {
        font-size: 10px;
        padding: 4px 0;
    }

    .bu-table {
        font-size: 9px;
    }

    .bu-table th,
    .bu-table td {
        padding: 3px 4px;
    }

    /* Data Manager */
    .dm-field-grid {
        grid-template-columns: 1fr;
    }

    .dm-table-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .dm-table-card {
        padding: 6px 4px;
    }

    .dm-table-card .material-icons {
        font-size: 14px;
    }

    .dm-table-card-label {
        font-size: 8px;
    }

    /* Timetable */
    .tt-header-left h1 {
        font-size: 17px;
    }

    .tt-stat-chip {
        padding: 6px 8px;
    }

    .tt-stat-chip-val {
        font-size: 14px;
    }

    .tt-card-title {
        font-size: 13px;
    }

    .tt-subject-grid {
        min-width: 300px;
        font-size: 9px;
    }

    .tt-subj-inp {
        font-size: 9px;
        padding: 3px 4px;
        min-width: 40px;
        min-height: 26px;
    }

    .tt-grid-table {
        min-width: 300px;
        font-size: 9px;
    }

    /* Audit Logs */
    .al-stats {
        grid-template-columns: 1fr 1fr;
    }

    .al-stat-card {
        padding: 8px 10px;
    }

    .al-stat-val {
        font-size: 15px;
    }

    #al-table {
        font-size: 9px;
    }

    #al-table th,
    #al-table td {
        padding: 3px 4px;
    }

    .al-desc {
        max-width: 80px;
    }

    /* SVG/Chart containers */
    .apexcharts-canvas {
        max-width: 100% !important;
    }

    .apexcharts-legend-text {
        font-size: 10px !important;
    }
}

/* ── Touch-friendly improvements ────────────────────────── */
@media (pointer: coarse) {

    .btn,
    .action-btn,
    .menu-item,
    .nav-action-btn,
    .status-btn,
    .quick-action-card,
    .tab,
    .filter-group select,
    .filter-group input,
    .modal-close,
    .rpm-close,
    .ffx-tab,
    .bu-drop-zone,
    .de-chip,
    .ss-tab,
    .tt-day-tab,
    .tt-view-btn-toggle,
    .tt-period-chip {
        min-height: 44px;
        min-width: 44px;
    }

    .action-btn {
        min-height: 36px;
        min-width: 36px;
    }

    .btn-sm {
        min-height: 32px;
        min-width: 32px;
    }

    /* Better scrolling on touch devices */
    .modal-body,
    .sidebar,
    .db-stats-grid,
    .table-wrapper,
    .data-table,
    .fp-table,
    .sv-grid,
    .dm-preview-wrap,
    .tt-subject-grid-wrap,
    .tt-view-grid,
    .al-table-wrap,
    .bu-table-wrap,
    .ss-console {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Prevent text zoom on inputs */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Print styles ────────────────────────────────────────── */
@media print {
    .sidebar,
    .top-nav,
    .page-actions,
    .filter-controls,
    .pagination-controls,
    .modal-overlay,
    .loading-overlay,
    .floating-save,
    .app-bar,
    .sidebar-overlay,
    #mobileMenuBtn {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .content-area {
        padding: 10px !important;
    }

    .stat-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .chart-container {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .data-table {
        font-size: 9pt;
    }

    .data-table th,
    .data-table td {
        padding: 4px 6px;
    }
}
/* ── Charts Responsive ────────────────────────────────────── */
@media (max-width: 992px) {
    /* Student Distribution Chart */
    #studentClassDistributionChart {
        min-height: 280px !important;
        height: 280px !important;
        width: 100% !important;
    }
    
    .apexcharts-canvas {
        max-width: 100% !important;
    }
    
    /* Legend wrap on mobile */
    .apexcharts-legend {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        max-height: none !important;
        height: auto !important;
    }
    
    .apexcharts-legend-series {
        display: inline-flex !important;
        align-items: center !important;
        padding: 2px 8px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        background: var(--surface-2, #f8fafc) !important;
        border: 1px solid var(--border, #e2e8f0) !important;
    }
    
    .apexcharts-legend-text {
        font-size: 10px !important;
        padding: 2px 4px !important;
        font-weight: 500 !important;
        color: var(--text-secondary, #475569) !important;
    }
    
    .apexcharts-legend-marker {
        width: 10px !important;
        height: 10px !important;
        margin-right: 4px !important;
        border-radius: 50% !important;
    }
    
    /* Donut center text */
    .apexcharts-datalabels-group text {
        font-size: 12px !important;
    }
    
    .apexcharts-datalabel-value {
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    
    .apexcharts-datalabel-label {
        font-size: 10px !important;
        fill: var(--text-muted, #94a3b8) !important;
    }
    
    /* Tooltip */
    .apexcharts-tooltip {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 768px) {
    #studentClassDistributionChart {
        min-height: 260px !important;
        height: 260px !important;
    }
    
    .apexcharts-legend {
        gap: 3px !important;
        padding: 6px 2px !important;
    }
    
    .apexcharts-legend-series {
        padding: 1px 6px !important;
        font-size: 9px !important;
    }
    
    .apexcharts-legend-text {
        font-size: 9px !important;
    }
    
    .apexcharts-legend-marker {
        width: 8px !important;
        height: 8px !important;
    }
    
    /* Hide data labels on smaller screens for cleaner look */
    .apexcharts-datalabels-group {
        display: none !important;
    }
}

@media (max-width: 480px) {
    #studentClassDistributionChart {
        min-height: 200px !important;
        height: 200px !important;
    }
    
    .apexcharts-legend {
        gap: 2px !important;
        padding: 4px 2px !important;
    }
    
    .apexcharts-legend-series {
        padding: 1px 4px !important;
        font-size: 8px !important;
        border-radius: 8px !important;
    }
    
    .apexcharts-legend-text {
        font-size: 8px !important;
        padding: 1px 2px !important;
    }
    
    .apexcharts-legend-marker {
        width: 6px !important;
        height: 6px !important;
        margin-right: 2px !important;
    }
    
    /* Chart container padding */
    .chart-container {
        padding: 8px 6px !important;
    }
    
    .chart-container .card-header {
        padding: 6px 4px 4px !important;
    }
    
    .chart-container .card-title {
        font-size: 11px !important;
    }
    
    .chart-container .card-title .material-icons {
        font-size: 14px !important;
    }
}

/* ── Dashboard charts grid responsive ────────────────────── */
@media (max-width: 768px) {
    .db-charts-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .db-charts-grid .chart-container {
        padding: 10px !important;
    }
}

/* ── Fees Status Chart ────────────────────────────────────── */
@media (max-width: 768px) {
    #feesStatusChart {
        min-height: 240px !important;
        height: 240px !important;
    }
}

@media (max-width: 480px) {
    #feesStatusChart {
        min-height: 180px !important;
        height: 180px !important;
    }
}

/* ── All charts container ─────────────────────────────────── */
@media (max-width: 768px) {
    .apexcharts-canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix chart overflow */
    .apexcharts-svg {
        overflow: visible !important;
    }
}


/* ── Student Distribution Chart Fix ──────────────────────── */
@media (max-width: 992px) {
    
    /* Chart container - remove table styles */
    .dashboard-grid .chart-container {
        padding: 12px 10px !important;
        overflow: hidden !important;
    }
    
    .dashboard-grid .chart-container .card-header {
        padding: 6px 10px 8px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        border-bottom: 1px solid var(--border, #e2e8f0) !important;
    }
    
    .dashboard-grid .chart-container .card-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .dashboard-grid .chart-container .card-title .material-icons {
        font-size: 18px !important;
        color: #6366f1 !important;
    }
    
    /* Chart wrapper - prevent table styles */
    #studentClassDistributionChart {
        min-height: 280px !important;
        height: 280px !important;
        width: 100% !important;
        display: block !important;
        padding: 4px 0 !important;
    }
    
    /* Override any table styles on chart */
    .dashboard-grid .chart-container table {
        display: none !important;
    }
    
    .dashboard-grid .chart-container .data-table {
        display: none !important;
    }
    
    /* Legend wrap on mobile */
    .apexcharts-legend {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        max-height: none !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
    }
    
    .apexcharts-legend-series {
        display: inline-flex !important;
        align-items: center !important;
        padding: 2px 8px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        background: var(--surface-2, #f8fafc) !important;
        border: 1px solid var(--border, #e2e8f0) !important;
    }
    
    .apexcharts-legend-text {
        font-size: 10px !important;
        padding: 2px 4px !important;
        font-weight: 500 !important;
        color: var(--text-secondary, #475569) !important;
    }
    
    .apexcharts-legend-marker {
        width: 10px !important;
        height: 10px !important;
        margin-right: 4px !important;
        border-radius: 50% !important;
    }
    
    /* Donut center text */
    .apexcharts-datalabels-group text {
        font-size: 12px !important;
    }
    
    .apexcharts-datalabel-value {
        font-size: 16px !important;
        font-weight: 700 !important;
    }
    
    .apexcharts-datalabel-label {
        font-size: 10px !important;
        fill: var(--text-muted, #94a3b8) !important;
    }
    
    /* Fix chart overflow */
    .apexcharts-canvas {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .apexcharts-svg {
        overflow: visible !important;
    }
}

@media (max-width: 768px) {
    .dashboard-grid .chart-container {
        padding: 8px 6px !important;
    }
    
    .dashboard-grid .chart-container .card-header {
        padding: 4px 6px 6px !important;
    }
    
    .dashboard-grid .chart-container .card-title {
        font-size: 11px !important;
    }
    
    .dashboard-grid .chart-container .card-title .material-icons {
        font-size: 16px !important;
    }
    
    #studentClassDistributionChart {
        min-height: 240px !important;
        height: 240px !important;
    }
    
    .apexcharts-legend {
        gap: 3px !important;
        padding: 4px 2px !important;
    }
    
    .apexcharts-legend-series {
        padding: 1px 6px !important;
        font-size: 9px !important;
    }
    
    .apexcharts-legend-text {
        font-size: 9px !important;
    }
    
    .apexcharts-legend-marker {
        width: 8px !important;
        height: 8px !important;
    }
    
    /* Hide data labels on smaller screens for cleaner look */
    .apexcharts-datalabels-group {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .dashboard-grid .chart-container {
        padding: 6px 4px !important;
        border-radius: 8px !important;
    }
    
    .dashboard-grid .chart-container .card-header {
        padding: 3px 4px 4px !important;
    }
    
    .dashboard-grid .chart-container .card-title {
        font-size: 10px !important;
        gap: 4px !important;
    }
    
    .dashboard-grid .chart-container .card-title .material-icons {
        font-size: 14px !important;
    }
    
    #studentClassDistributionChart {
        min-height: 180px !important;
        height: 180px !important;
        padding: 0 !important;
    }
    
    .apexcharts-legend {
        gap: 2px !important;
        padding: 2px 2px !important;
    }
    
    .apexcharts-legend-series {
        padding: 1px 4px !important;
        font-size: 8px !important;
        border-radius: 8px !important;
    }
    
    .apexcharts-legend-text {
        font-size: 8px !important;
        padding: 1px 2px !important;
    }
    
    .apexcharts-legend-marker {
        width: 6px !important;
        height: 6px !important;
        margin-right: 2px !important;
    }
}

/* ── Fees Status Chart ────────────────────────────────────── */
@media (max-width: 768px) {
    #feesStatusChart {
        min-height: 240px !important;
        height: 240px !important;
    }
}

@media (max-width: 480px) {
    #feesStatusChart {
        min-height: 180px !important;
        height: 180px !important;
    }
}

/* ── Dashboard charts grid ────────────────────────────────── */
@media (max-width: 768px) {
    .db-charts-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .db-charts-grid .chart-container {
        padding: 10px !important;
        border-radius: 10px !important;
    }
}

/* ── Hide table styles from chart container ───────────────── */
.dashboard-grid .chart-container .data-table,
.dashboard-grid .chart-container table,
.dashboard-grid .chart-container thead,
.dashboard-grid .chart-container tbody,
.dashboard-grid .chart-container tr,
.dashboard-grid .chart-container td,
.dashboard-grid .chart-container th {
    display: none !important;
}

/* Only show chart inside chart container */
.dashboard-grid .chart-container #studentClassDistributionChart {
    display: block !important;
}

.dashboard-grid .chart-container .apexcharts-canvas {
    display: block !important;
}

/* ── Dialer page: single column on small screens ── */
@media (max-width: 768px) {
  .dialer-list {
    grid-template-columns: 1fr;
  }
  .dialer-card {
    flex-wrap: wrap;
  }
  .dialer-phone-text {
    max-width: 160px;
  }
}