/* responsive.css - System-wide Responsive Styles for MindConnect UKM */
/* Prevents ANY horizontal scrolling across the entire system */

/* ===== GLOBAL OVERFLOW PREVENTION ===== */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Table responsive wrapper */
.table-responsive-wrapper {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    /* Navbar */
    .navbar {
        padding: 15px 20px !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-links {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px !important;
        margin-top: 8px;
    }

    /* Student / Counselor 2-column grids */
    .grid {
        grid-template-columns: 1fr !important;
    }
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
    .grid-container {
        grid-template-columns: 1fr !important;
    }

    /* Admin Reports grid columns */
    .col-span-8, .col-span-4, .col-span-6, .col-span-3, .col-span-12 {
        grid-column: span 12 !important;
    }

    .grid-dashboard {
        gap: 15px !important;
    }

    /* Container & main-content padding */
    .container {
        padding: 20px 15px !important;
    }
    .main-content {
        padding: 20px 15px !important;
    }

    /* Counselor stats row */
    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* 2 column grids to 1 */
    .activity-grid {
        grid-template-columns: 1fr !important;
    }

    /* Search input */
    .search-container input, .search-input {
        width: 200px !important;
    }

    /* Top actions */
    .top-actions {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Filter bar */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .filter-actions {
        flex-wrap: wrap !important;
    }
}

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

    /* --- NAVBAR --- */
    .navbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 15px !important;
        gap: 0 !important;
    }

    /* Top row: Logo + Profile/Logout */
    .navbar h2 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        justify-content: center !important;
    }
    .navbar h2 img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Nav-right (student/counselor pages) */
    .nav-right {
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Profile pill */
    .profile-pill {
        justify-content: center !important;
        margin-bottom: 8px !important;
        flex-wrap: wrap !important;
    }
    .profile-pill span {
        display: none !important; /* Hide name to save space */
    }

    /* Nav links row */
    .nav-links {
        order: 3;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px 15px !important;
        justify-content: center !important;
        padding: 10px 0 5px 0 !important;
        margin-top: 5px !important;
        border-top: 1px solid rgba(255,255,255,0.15);
    }
    .nav-links a {
        font-size: 13px !important;
        padding-bottom: 2px !important;
    }

    /* --- CONTAINERS --- */
    .container {
        padding: 15px 12px !important;
        max-width: 100% !important;
    }

    /* --- HEADERS --- */
    .top-header, .header-row, .header-actions {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    h1 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }
    .top-header h1, .header-row h1 {
        font-size: 1.4rem !important;
    }

    .subtitle {
        font-size: 14px !important;
    }

    /* --- MAIN 2-COLUMN GRIDS (Student / Counselor / Booking) --- */
    .grid, .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* --- METRICS & QUICK ACTIONS --- */
    .metrics-grid, .actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Admin Reports KPI */
    .col-span-3, .col-span-4 {
        grid-column: span 6 !important;
    }
    .col-span-8, .col-span-6, .col-span-12 {
        grid-column: span 12 !important;
    }

    /* Activity grid */
    .activity-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- CARDS --- */
    .card, .metric-card, .activity-card, .side-card {
        padding: 15px !important;
        border-radius: 16px !important;
    }

    /* --- BOOKING ITEMS --- */
    .booking-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 15px !important;
    }
    .booking-info {
        width: 100% !important;
    }
    .btn-status {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    /* --- ACTION CARDS (Student) --- */
    .actions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .action-card {
        padding: 20px 15px !important;
    }

    /* --- KPI WIDGETS --- */
    .kpi-widget {
        gap: 12px !important;
    }
    .kpi-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }
    .kpi-value {
        font-size: 1.4rem !important;
    }
    .kpi-label {
        font-size: 0.75rem !important;
    }

    /* --- COUNSELOR PAGES --- */
    .main-content {
        padding: 15px 12px !important;
        max-width: 100% !important;
    }

    /* Counselor stats row */
    .stats-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .stat-card {
        padding: 15px !important;
    }
    .stat-card h3 {
        font-size: 1.4rem !important;
    }

    /* Grid container (slots, announcements) */
    .grid-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Search & filter inputs */
    .search-container input, .search-input {
        width: 100% !important;
    }
    .search-container, .search-input-wrapper {
        width: 100% !important;
    }
    .top-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .welcome-msg h1 {
        font-size: 1.3rem !important;
    }
    .welcome-msg p {
        font-size: 0.85rem !important;
    }

    /* Filter bar (sessions page) */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .filter-tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .filter-tabs .tab, .filter-tabs .tab-btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    .filter-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .date-input {
        width: 100% !important;
    }

    /* Counseling tables (horizontal scroll for normal data tables) */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .counseling-table {
        min-width: 500px !important;
    }
    .student-table td, .student-table th {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }

    /* --- SCHEDULE TABLE (Slots) - Stacking layout --- */
    .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td {
        display: block !important;
        width: 100% !important;
    }
    .schedule-table thead {
        display: none !important; /* Hide headers on mobile */
    }
    .schedule-table tr {
        margin-bottom: 20px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 12px !important;
        padding: 15px !important;
        background: #fafafa !important;
    }
    .schedule-table td {
        border: none !important;
        padding: 8px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        font-size: 0.9rem !important;
    }
    .schedule-table td::before {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: #888 !important;
        text-transform: uppercase !important;
    }
    .schedule-table td:nth-child(1)::before { content: 'Weekday'; }
    .schedule-table td:nth-child(2)::before { content: 'Status (Open/Close)'; }
    .schedule-table td:nth-child(3)::before { content: 'Start Time'; }
    .schedule-table td:nth-child(4)::before { content: 'End Time'; }
    .schedule-table td:nth-child(5)::before { content: 'Slot Duration'; }

    .schedule-table td:nth-child(1) {
        font-size: 1.1rem !important;
        color: #1b3a2f !important;
        border-bottom: 2px solid #ddd !important;
        padding-bottom: 12px !important;
        margin-bottom: 10px !important;
    }
    
    .time-select { width: 100% !important; }

    /* Content card */
    .content-card {
        padding: 15px !important;
        overflow: hidden !important;
    }

    /* Upcoming slots */
    .upcoming-slot {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Action buttons */
    .btn-action-db {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Announcement cards */
    .ann-card {
        padding: 12px !important;
    }

    /* Student info in tables */
    .student-info {
        gap: 6px !important;
    }
    .student-info img {
        width: 28px !important;
        height: 28px !important;
    }

    /* Notification button */
    .notif-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- BUTTONS --- */
    .btn-print {
        width: 100% !important;
        justify-content: center !important;
    }

    /* --- AUTH PAGES (Login / Signup) --- */
    body > .container {
        flex-direction: column !important;
    }
    .left {
        display: none !important;
    }
    .right {
        padding: 30px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- TABLES --- */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    table th, table td {
        font-size: 0.78rem !important;
        padding: 8px 6px !important;
    }

    /* --- CHARTS --- */
    canvas {
        max-height: 200px !important;
    }

    /* --- TABS --- */
    .tabs-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding-bottom: 5px;
        gap: 8px !important;
    }
    .tab-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
        border: 1px solid #e1ebe9 !important;
        border-radius: 6px !important;
    }

    /* --- MODALS --- */
    .modal-content {
        width: 95% !important;
        margin: 5% auto !important;
        padding: 20px 15px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* --- MOOD GRID (Student) --- */
    .mood-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .mood-card {
        padding: 10px 5px !important;
        border-radius: 12px !important;
    }

    /* --- FLOATING CHAT BUTTON --- */
    .floating-chat {
        width: 55px !important;
        height: 55px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
    .floating-chat img {
        width: 40px !important;
        height: 40px !important;
    }

    /* --- NOTIFICATION & ANNOUNCEMENT ITEMS --- */
    .notif-item, .ann-item {
        padding: 12px !important;
    }

    /* --- FILTER BUTTONS --- */
    .filter-group {
        flex-wrap: wrap !important;
    }

    /* --- ROBOT MASCOT --- */
    .robot-mascot {
        display: none !important; /* Hide on mobile */
    }

    /* --- AVATAR WRAP (Admin Reports tables) --- */
    .avatar-wrap {
        gap: 8px !important;
    }
    .avatar-img {
        width: 30px !important;
        height: 30px !important;
    }

    /* --- PROFILE PAGE --- */
    .profile-preview img {
        width: 90px !important;
        height: 90px !important;
    }
    .profile-preview h2 {
        font-size: 1.2rem !important;
    }
    .profile-preview p {
        font-size: 0.8rem !important;
        word-break: break-all !important;
    }
    .profile-form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .profile-bottom-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .card-title {
        font-size: 1.1rem !important;
    }
    .form-control {
        font-size: 0.9rem !important;
        padding: 10px 12px !important;
    }
    .info-block {
        padding: 15px !important;
    }

    /* --- ADMIN REPORTS PAGE --- */
    /* Tablet: stack dashboard cards */
    .grid-dashboard {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .card {
        padding: 20px !important;
    }
    /* Mobile: further reduce padding and ensure tables scroll */
    @media (max-width: 768px) {
        .grid-dashboard {
            gap: 12px !important;
        }
        .card {
            padding: 15px !important;
        }
        table {
            width: 100% !important;
            display: block !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }
        th, td {
            font-size: 0.8rem !important;
            padding: 8px !important;
        }
    }

    /* --- ASSESSMENT PAGE --- */
    .test-selector {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .selector-card {
        padding: 20px !important;
    }
    .selector-card h3 {
        font-size: 14px !important;
    }
    .rating-group {
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    .circle {
        width: 42px !important;
        height: 42px !important;
        font-size: 15px !important;
    }
    .question-text {
        font-size: 15px !important;
    }
    .submit-btn {
        padding: 12px 40px !important;
        font-size: 14px !important;
    }
}

/* ===== SMALL PHONE (max-width: 480px) ===== */
@media (max-width: 480px) {
    .navbar h2 {
        font-size: 0.9rem !important;
    }

    h1 {
        font-size: 1.3rem !important;
    }

    .metrics-grid, .actions-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .col-span-3, .col-span-4 {
        grid-column: span 12 !important;
    }

    .mood-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .nav-links a {
        font-size: 12px !important;
    }

    /* Profile extra small */
    .profile-preview img {
        width: 70px !important;
        height: 70px !important;
    }
}