/**
 * Nexus 26 - Mobile App Experience
 * Makes the web app feel like a native mobile app on phones.
 * All styles are scoped within @media (max-width: 768px).
 * Desktop design is NOT affected.
 */

/* ============================================
   MOBILE VIEWPORT & BODY
   ============================================ */
@media (max-width: 768px) {

    html {
        overflow-x: hidden;
        overscroll-behavior-y: none;
        /* Prevent bounce effect */
        -webkit-text-size-adjust: 100%;
        height: 100%;
    }

    body {
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        min-height: 100%;
        position: relative;
    }

    /* Lock body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* ============================================
       COMPACT HEADER (App-like Top Bar)
       ============================================ */
    .header {
        height: 52px;
        padding: 0 var(--space-3);
        gap: var(--space-2);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    /* Mobile hamburger - always visible */
    .header-toggle {
        display: flex !important;
        width: 36px;
        height: 36px;
    }

    .header-toggle svg {
        width: 18px;
        height: 18px;
    }

    /* Search bar - hidden by default, expandable */
    .header-search {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 52px;
        max-width: 100%;
        z-index: 1201;
        background: var(--bg-primary);
        padding: 6px 12px;
        box-shadow: var(--shadow-md);
    }

    .header-search.mobile-search-active {
        display: flex !important;
        align-items: center;
    }

    .header-search.mobile-search-active input {
        padding-left: 40px;
        height: 40px;
        font-size: 16px;
        /* Prevent iOS zoom on focus */
    }

    /* Mobile search toggle button */
    .mobile-search-btn {
        display: flex !important;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-lg);
        color: var(--text-secondary);
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .mobile-search-btn:active {
        background: var(--bg-secondary);
    }

    .mobile-search-close {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        color: var(--text-muted);
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 2;
    }

    /* Punch Widget - Compact */
    .punch-widget {
        padding: 2px 6px;
        margin-right: 0;
    }

    .punch-clock {
        font-size: var(--text-xs) !important;
        min-width: auto !important;
    }

    .punch-status {
        display: none !important;
    }

    .punch-btn {
        padding: 2px 6px !important;
        font-size: 10px !important;
    }

    /* Header Actions - Compact */
    .header-actions {
        gap: 0;
    }

    .header-action {
        width: 36px;
        height: 36px;
    }

    .header-action svg {
        width: 18px;
        height: 18px;
    }

    /* Physics toggle - hide on mobile */
    #physicsToggle {
        display: none !important;
    }

    /* User Menu - Avatar only */
    .header-user {
        padding: var(--space-1);
        margin-left: 0;
    }

    .header-user-info {
        display: none !important;
    }

    .header-user .avatar {
        width: 32px;
        height: 32px;
        font-size: var(--text-xs);
    }

    /* Notification dropdown - full width on mobile */
    .dropdown-menu {
        position: fixed !important;
        top: 52px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-2xl);
        transform: none !important;
    }

    .dropdown.active .dropdown-menu {
        transform: none !important;
    }

    /* ============================================
       SIDEBAR - Swipe Drawer Overlay
       ============================================ */
    .sidebar {
        display: flex !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        transform: translateX(-105%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1300;
        box-shadow: none;
        background: var(--bg-primary);
        will-change: transform;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.15);
    }

    /* Sidebar backdrop */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        z-index: 1299;
        transition: background 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-backdrop.active {
        display: block;
        background: rgba(0, 0, 0, 0.45);
    }

    /* Mobile Close Button for Sidebar */
    .sidebar-close-btn {
        display: flex !important;
        position: absolute;
        top: 16px;
        right: 12px;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        color: var(--text-muted);
        background: var(--bg-tertiary);
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .sidebar-close-btn:active {
        background: var(--border-default);
    }

    .sidebar-header {
        padding-right: 48px;
        /* Space for close button */
    }

    /* Sidebar Nav Items - Larger touch targets */
    .nav-item {
        padding: 11px 12px;
        font-size: 15px;
        border-radius: var(--radius-md);
    }

    .nav-icon {
        width: 22px;
        height: 22px;
    }

    .nav-item svg {
        width: 22px;
        height: 22px;
    }

    .nav-section-title {
        font-size: 11px;
        padding: 0 var(--space-3);
        margin-top: var(--space-2);
    }

    /* ============================================
       BOTTOM TAB BAR (Native App Feel)
       ============================================ */
    .bottom-tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-light);
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        z-index: 1200;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
        will-change: transform;
    }

    .bottom-tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 500;
        text-decoration: none;
        gap: 3px;
        position: relative;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 0;
    }

    .bottom-tab-item svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.8px;
        transition: transform 0.2s ease;
    }

    .bottom-tab-item span {
        line-height: 1;
        letter-spacing: 0.01em;
    }

    .bottom-tab-item.active {
        color: var(--accent);
    }

    .bottom-tab-item.active svg {
        transform: scale(1.08);
    }

    /* Active indicator dot */
    .bottom-tab-item.active::before {
        content: '';
        position: absolute;
        top: 2px;
        width: 4px;
        height: 4px;
        background: var(--accent);
        border-radius: var(--radius-full);
    }

    /* Tap effect */
    .bottom-tab-item:active {
        opacity: 0.7;
    }

    .bottom-tab-item:active svg {
        transform: scale(0.92);
    }

    /* App main - make room for bottom bar */
    .app-main {
        margin-left: 0 !important;
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
        min-height: 100vh;
        min-height: 100dvh;
        /* Use dynamic viewport height if supported */
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* ============================================
       CONTENT AREA - Mobile Optimized
       ============================================ */
    .content {
        padding: var(--space-3) !important;
    }

    .content-header {
        margin-bottom: var(--space-4);
        gap: var(--space-3);
    }

    .content-header h1 {
        font-size: var(--text-xl) !important;
        line-height: 1.3;
    }

    .content-header p {
        font-size: var(--text-xs);
    }

    .content-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .content-actions .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        font-size: var(--text-xs);
    }

    /* Page header breadcrumbs */
    .breadcrumb {
        font-size: var(--text-xs);
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* ============================================
       STATS GRID - Mobile 2-Column
       ============================================ */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
        margin-bottom: var(--space-4) !important;
    }

    .stat-card {
        padding: var(--space-3) !important;
        gap: var(--space-2) !important;
        /* Reduced gap */
        border-radius: var(--radius-lg);
        min-width: 0 !important;
        /* Allow shrinking */
    }

    .stat-icon {
        width: 36px;
        /* Slightly smaller */
        height: 36px;
        border-radius: var(--radius-md);
        margin-bottom: 4px;
    }

    .stat-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .stat-value {
        font-size: 16px !important;
        /* Adjusted size */
        line-height: 1.2;
    }

    .stat-label {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ============================================
       CARDS - Mobile Optimized
       ============================================ */
    .card {
        padding: var(--space-3);
        border-radius: var(--radius-lg);
    }

    .card-header {
        margin-bottom: var(--space-3);
    }

    .card-title {
        font-size: var(--text-base);
    }

    /* ============================================
       FORMS - Touch Friendly
       ============================================ */
    .form-control {
        min-height: 44px;
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
        padding: var(--space-3) var(--space-3);
        border-radius: var(--radius-md);
    }

    select.form-control {
        min-height: 44px;
    }

    .form-label {
        font-size: var(--text-sm);
        margin-bottom: var(--space-1);
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .form-group {
        margin-bottom: var(--space-3);
    }

    .btn {
        min-height: 44px;
        font-size: var(--text-sm);
        border-radius: var(--radius-md);
    }

    .btn-sm {
        min-height: 36px;
    }

    .btn-lg {
        min-height: 50px;
        font-size: var(--text-base);
    }

    /* ============================================
       FILTER BAR - Horizontal Scroll
       ============================================ */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: var(--space-2);
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-bar .form-group {
        min-width: 130px;
        flex-shrink: 0;
    }

    .filter-bar .form-control {
        height: 38px;
        font-size: 13px !important;
        min-height: 38px;
    }

    .filter-bar .btn {
        min-height: 38px;
        flex-shrink: 0;
        white-space: nowrap;
        padding: var(--space-2) var(--space-3);
    }

    /* ============================================
       TABLES - Enhanced Card View
       ============================================ */
    .table-container {
        border: none;
        background: transparent;
        border-radius: 0;
        overflow-x: auto;
    }

    /* ============================================
       MODALS - Bottom Sheet Style
       ============================================ */
    .modal-backdrop {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
        margin-bottom: 0 !important;
        margin-top: auto;
        animation: none;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal-backdrop.active .modal {
        transform: translateY(0);
        opacity: 1;
        margin-top: auto;
    }

    /* Drag handle for bottom-sheet */
    .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border-dark);
        border-radius: var(--radius-full);
    }

    .modal-header {
        position: relative;
        padding-top: 24px;
        padding-bottom: var(--space-3);
    }

    .modal-body {
        padding: var(--space-4);
        max-height: calc(92vh - 140px) !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0));
    }

    .modal-footer .btn {
        flex: 1;
    }

    .modal-sm,
    .modal-lg {
        max-width: 100% !important;
    }

    /* ============================================
       TABS - Scrollable
       ============================================ */
    .tabs {
        gap: var(--space-4);
        margin-bottom: var(--space-4);
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        font-size: var(--text-sm);
        padding: var(--space-2) 0;
        white-space: nowrap;
    }

    /* ============================================
       KANBAN - Horizontal Scroll
       ============================================ */
    .kanban-board {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: var(--space-3);
        padding-bottom: var(--space-3);
        scrollbar-width: none;
    }

    .kanban-board::-webkit-scrollbar {
        display: none;
    }

    .kanban-column {
        min-width: 85vw;
        max-width: 85vw;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* ============================================
       ALERTS - Mobile
       ============================================ */
    .alert {
        font-size: var(--text-sm);
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }

    /* ============================================
       TOAST CONTAINER - Above Bottom Bar
       ============================================ */
    #toast-container {
        bottom: calc(68px + env(safe-area-inset-bottom, 0)) !important;
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
    }

    #toast-container .alert {
        min-width: auto !important;
        width: 100%;
    }

    /* ============================================
       EMPTY STATE
       ============================================ */
    .empty-state {
        padding: var(--space-10) var(--space-4);
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
    }

    .empty-state-icon svg {
        width: 32px;
        height: 32px;
    }

    /* ============================================
       CONFIRMATION MODAL
       ============================================ */
    #confirmationModal .modal {
        max-height: 50vh !important;
    }

    /* ============================================
       MISC MOBILE UTILITIES
       ============================================ */

    /* Hide elements on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show elements only on mobile */
    .show-mobile {
        display: flex !important;
    }

    /* Mobile-friendly inline styles override */
    [style*="display: flex"][style*="gap"] {
        flex-wrap: wrap;
    }

    /* Progress bar */
    .progress {
        height: 6px;
    }

    /* Avatar sizes */
    .avatar {
        width: 36px;
        height: 36px;
    }

    .avatar-lg {
        width: 48px;
        height: 48px;
    }

    /* Select2 on mobile */
    .select2-container .select2-selection--single {
        min-height: 44px !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
    }

    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }

    .select2-dropdown {
        border-radius: var(--radius-lg) !important;
    }

    .select2-results__option {
        padding: 10px 12px !important;
        font-size: 15px !important;
    }

    /* ============================================
       MOBILE "MORE" MENU (Full-screen overlay)
       ============================================ */
    .more-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: var(--bg-primary);
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: mobileSlideUp 0.3s ease;
    }

    .more-menu-overlay.active {
        display: flex;
    }

    .more-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4);
        border-bottom: 1px solid var(--border-light);
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 1;
    }

    .more-menu-header h3 {
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
        margin: 0;
    }

    .more-menu-body {
        padding: var(--space-3);
        flex: 1;
    }

    .more-menu-section {
        margin-bottom: var(--space-4);
    }

    .more-menu-section-title {
        font-size: 11px;
        font-weight: var(--font-semibold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
        padding: var(--space-2) var(--space-3);
    }

    .more-menu-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 12px var(--space-3);
        color: var(--text-secondary);
        font-size: 15px;
        font-weight: var(--font-medium);
        text-decoration: none;
        border-radius: var(--radius-md);
        transition: background 0.15s ease;
    }

    .more-menu-item:active {
        background: var(--bg-tertiary);
    }

    .more-menu-item.active {
        color: var(--accent);
        background: var(--accent-light);
    }

    .more-menu-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .more-menu-footer {
        padding: var(--space-4);
        border-top: 1px solid var(--border-light);
    }

    /* ============================================
       ANIMATIONS
       ============================================ */
    @keyframes mobileSlideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    @keyframes mobileFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ============================================
       TOUCH RIPPLE EFFECT
       ============================================ */
    .touch-ripple {
        position: relative;
        overflow: hidden;
    }

    .touch-ripple::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(99, 102, 241, 0.15);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .touch-ripple:active::after {
        width: 200%;
        height: 200%;
        opacity: 1;
        transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    }

    /* ============================================
       MOBILE TABLE - Card View (Fixes Overflow)
       ============================================ */
    .table-responsive {
        overflow-x: hidden;
        /* Hide horizontal scroll on container to force cards */
    }

    .leads-table,
    .table,
    .leads-table tbody,
    .table tbody,
    .leads-table tr,
    .table tr,
    .leads-table td,
    .table td {
        display: block;
        width: 100%;
    }

    .leads-table thead,
    .table thead {
        display: none;
        /* Hide header */
    }

    .leads-table tr,
    .table tr {
        background: var(--bg-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        border: 1px solid var(--border-light);
        position: relative;
    }

    .leads-table td,
    .table td {
        padding: 4px 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
    }

    /* Special styling for the first cell (Name/ID) */
    .leads-table td:first-child,
    .table td:first-child {
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border-light);
        text-align: left;
        display: block;
    }

    /* View button - absolute position */
    .leads-table td:last-child,
    .table td:last-child {
        position: static;
        /* Let actions flow naturally or adjust specific tables */
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--border-light);
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
    }

    /* Specific override for leads-table actions if needed */
    .leads-table td:last-child {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 0;
        border: none;
        width: auto;
    }

    /* ============================================
       MOBILE FORMS & FILTERS
       ============================================ */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        background: transparent;
        padding: 0;
        margin-bottom: var(--space-4);
    }

    .filter-bar .form-group {
        width: 100% !important;
        min-width: 0;
        margin-right: 0;
    }

    .filter-bar .form-control,
    .filter-bar select {
        width: 100% !important;
        max-width: nonebox;
    }

    .filter-bar .btn {
        width: 100%;
        justify-content: center;
    }

    /* Fix Select Text Overlap */
    select.form-control,
    .form-select {
        padding-right: 32px !important;
        /* Space for arrow/clear icon */
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: var(--bg-surface);
    }

    /* Select2 Mobile Fixes */
    .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    .select2-container .select2-selection--single {
        height: 44px;
        /* Mobile touch target */
        border-radius: var(--radius-md);
        border: 1px solid var(--border-light);
        display: flex;
        align-items: center;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px;
        padding-left: 12px;
        padding-right: 30px;
        /* Prevent overlap with arrow */
        font-size: 15px;
        color: var(--text);
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
        width: 30px;
    }

    /* ============================================
       MODULE SPECIFIC STACKS (Students & Accounts)
       ============================================ */

    /* --- Students Stack --- */
    .table-students tr {
        display: grid;
        grid-template-columns: 1fr auto;
        /* Name space + Status badge */
        grid-template-rows: auto auto auto auto;
        gap: 8px 12px;
        padding: 16px;
        background: var(--bg-surface);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 12px;
    }

    /* Name/Avatar (Row 1, Full Width) */
    .table-students td:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 8px;
        padding-bottom: 12px;
        padding-left: 0;
    }

    /* College (Row 2, Col 1) */
    .table-students td:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 2;
        display: block;
        text-align: left;
        font-size: 13px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Course (Row 2, Col 2) */
    .table-students td:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 2;
        text-align: right;
        font-size: 13px;
        color: var(--text-secondary);
    }

    /* Fee Progress (Row 3, Full Width) */
    .table-students td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        padding: 4px 0;
    }

    /* Loan Status (Row 4, Col 1) */
    .table-students td:nth-child(5) {
        grid-column: 1 / 2;
        grid-row: 4;
        text-align: left;
        align-self: center;
        font-size: 12px;
        padding-top: 8px;
    }

    /* Actions (Row 4, Col 2) */
    .table-students td:nth-child(6) {
        grid-column: 2 / 3;
        grid-row: 4;
        border: none;
        padding: 8px 0 0 0;
        margin: 0;
        justify-self: end;
        display: flex;
        gap: 8px;
    }

    /* --- Accounts Transactions Stack --- */
    .table-transactions tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
        padding: 16px;
        background: var(--bg-surface);
        /* Pure white card */
        border: 1px solid var(--border-light);
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        /* Subtler shadow */
        margin-bottom: 12px;
        position: relative;
    }

    /* Remove generic row styles if conflicting */
    .table-transactions tr:last-child {
        margin-bottom: 80px;
        /* Space for bottom nav */
    }

    /* Date (Row 1, Top Left, Muted) */
    .table-transactions td:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-tertiary);
        border: none;
        padding: 0;
        text-align: left;
        display: block;
    }

    /* Category Badge (Row 1, Top Right) */
    .table-transactions td:nth-child(3) {
        grid-column: 2 / 3;
        grid-row: 1;
        text-align: right;
        padding: 0;
        display: flex;
        justify-content: flex-end;
    }

    .table-transactions td:nth-child(3) .status-badge {
        font-size: 10px;
        padding: 2px 6px;
        height: auto;
    }

    /* Description (Row 2, Main Left) */
    .table-transactions td:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 2;
        font-weight: 600;
        font-size: 15px;
        text-align: left;
        color: var(--text);
        display: block;
        padding: 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Amount (Row 2, Main Right) */
    .table-transactions td:nth-child(6) {
        grid-column: 2 / 3;
        grid-row: 2;
        text-align: right;
        font-weight: 700;
        font-size: 16px;
        padding: 4px 0;
        display: block;
        align-self: center;
    }

    /* Account & Student info (Row 3, Context) */
    .table-transactions td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: 12px;
        color: var(--text-secondary);
        text-align: left;
        padding: 2px 0 0 0;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Student Name - Append to Row 3 or new Row */
    .table-transactions td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 4;
        font-size: 12px;
        color: var(--text-secondary);
        text-align: left;
        padding: 0;
        border: none;
        display: block;
        /* If empty, it collapses */
    }

    /* Action (Absolute Bottom Right) */
    .table-transactions td:nth-child(7) {
        position: absolute;
        bottom: 12px;
        right: 12px;
        border: none;
        margin: 0;
        padding: 0;
        opacity: 0.6;
    }

    /* --- Reports Stack --- */
    .report-cards {
        grid-template-columns: 1fr !important;
        /* Stack vertically */
    }

    .overview-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2x2 grid */
    }


    /* Hide Kanban on Mobile */
    .kanban-board {
        display: none !important;
    }

    /* Show a message if they land on pipeline.php */
    .kanban-board+.mobile-kanban-notice {
        display: block;
        padding: var(--space-8);
        text-align: center;
        color: var(--text-secondary);
    }

    /* Bottom Tab Bar */
    .bottom-tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-light);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 999;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
    }

    .bottom-tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-tertiary);
        font-size: 10px;
        gap: 4px;
        background: none;
        border: none;
        padding: 4px 0;
        cursor: pointer;
        transition: color 0.2s;
    }

    .bottom-tab-item svg {
        width: 24px;
        height: 24px;
        stroke-width: 2px;
    }

    .bottom-tab-item.active {
        color: var(--accent);
    }

    /* Center Add Button */
    .bottom-tab-add {
        position: relative;
        top: -20px;
        /* Float above */
        overflow: visible;
        flex: 0 0 60px;
    }

    .add-icon-circle {
        width: 56px;
        height: 56px;
        background: var(--accent-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 91, 234, 0.4);
        border: 4px solid var(--bg-primary);
        /* Cutout effect */
        transition: transform 0.2s;
    }

    .bottom-tab-add:active .add-icon-circle {
        transform: scale(0.95);
    }

    .bottom-tab-add svg {
        width: 28px;
        height: 28px;
        stroke: white;
    }
}

/* ============================================
   DESKTOP: Hide Mobile-Only Elements
   ============================================ */
@media (min-width: 769px) {

    .bottom-tab-bar,
    .sidebar-backdrop,
    .sidebar-close-btn,
    .mobile-search-btn,
    .mobile-search-close,
    .more-menu-overlay,
    .show-mobile {
        display: none !important;
    }
}

/* ============================================
   LOGIN PAGE - Mobile Overrides
   ============================================ */
@media (max-width: 768px) {
    .login-container {
        max-width: 100% !important;
    }

    .login-card {
        padding: var(--space-6) var(--space-4) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: var(--shadow-lg) !important;
    }

    .login-logo {
        width: 60px !important;
        height: 60px !important;
    }

    .login-title {
        font-size: var(--text-xl) !important;
    }

    .login-subtitle {
        font-size: var(--text-sm) !important;
        margin-bottom: var(--space-6) !important;
    }

    .login-form .form-control {
        padding: var(--space-3) var(--space-4) !important;
        min-height: 48px;
        font-size: 16px !important;
    }

    .login-form .btn-lg {
        min-height: 50px;
    }
}