/* ===========================
   AttendX — Comprehensive Responsive / Mobile
   Breakpoints: Desktop (>1024), Tablet (≤1024), Phone (≤768), Small (≤480)
   =========================== */

/* ===== TABLET: ≤ 1024px ===== */
@media (max-width: 1024px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .admin-charts { grid-template-columns: 1fr !important; }
    .add-employee-form { grid-template-columns: repeat(2, 1fr) !important; }
    .dashboard-grid { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }

    div[style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
    div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

    #leaveBalances { grid-template-columns: repeat(4, 1fr) !important; }

    #calendarGrid > div, #dashCalendarGrid > div { gap: 4px !important; }

    #notifDropdown { width: 300px !important; }
}

/* ===== PHONE: ≤ 768px ===== */
@media (max-width: 768px) {
    /* ---- Base ---- */
    body { font-size: 14px; }
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }

    /* ---- Login ---- */
    .login-page { flex-direction: column !important; height: auto !important; min-height: 100vh; }
    .login-left { display: none !important; }
    .login-right { flex: 1 !important; width: 100% !important; padding: 24px 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .login-card { max-width: 100% !important; width: 100% !important; padding: 36px 24px 28px !important; }
    .login-form-title { font-size: 1.35rem !important; }
    .login-form-subtitle { font-size: 0.82rem !important; margin-bottom: 30px !important; }
    .cl-input { font-size: 16px !important; }
    .cl-login-btn { height: 46px !important; font-size: 0.88rem !important; }
    .cl-social-btn { padding: 10px 22px !important; font-size: 0.84rem !important; }
    .cl-demo-hint { font-size: 0.68rem !important; padding: 8px 12px !important; }

    /* ---- Admin sidebar ---- */
    .admin-sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 260px !important;
        transform: translateX(-100%);
        z-index: 200 !important;
        transition: transform 0.3s ease;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-content { margin-left: 0 !important; width: 100% !important; }
    .hamburger-btn { display: flex !important; }
    .sidebar-overlay.open { display: block !important; }

    /* ---- Admin topbar ---- */
    .admin-topbar { padding: 10px 14px !important; }
    .admin-topbar h1 { font-size: 1.05rem !important; }
    .admin-topbar-actions { gap: 4px !important; }
    #liveSyncBadge { display: none !important; }

    /* ---- Admin main ---- */
    .admin-main { padding: 12px !important; }

    /* ---- Stat cards ---- */
    .admin-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .admin-stat-card {
        padding: 14px !important;
        gap: 12px !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    .admin-stat-card .stat-icon-lg { width: 40px !important; height: 40px !important; min-width: 40px !important; }
    .admin-stat-card .stat-icon-lg svg { width: 20px !important; height: 20px !important; }
    .admin-stat-card .stat-info h3 { font-size: 1.3rem !important; }

    /* ---- Charts ---- */
    .admin-chart-container { height: 240px !important; }

    /* ---- Employee add form ---- */
    .add-employee-form { grid-template-columns: 1fr !important; padding: 12px !important; gap: 12px !important; }

    /* ---- Employee search bar ---- */
    #page-employees .card-header { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    #page-employees .card-header > div { width: 100% !important; }
    #page-employees .card-header > div > div { width: 100% !important; }
    #empSearch { width: 100% !important; padding-left: 36px !important; }
    #empFilterDept, #empFilterStatus { width: 100% !important; }
    #page-employees .card-header > div[style*="flex"] { flex-direction: column !important; }

    /* ---- Tables: horizontal scroll ---- */
    .table-wrapper, .history-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .data-table { font-size: 0.78rem !important; min-width: 600px; }
    .data-table thead th, .data-table tbody td { padding: 10px 8px !important; }

    /* ---- Cards ---- */
    .card { padding: 14px !important; margin-bottom: 14px !important; }
    .card-header { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    .card-header > div[style*="flex"] { flex-wrap: wrap !important; }

    /* ---- Inline grids → 1 col ---- */
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns:repeat(2,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Calendar ---- */
    #calendarGrid > div, #dashCalendarGrid > div {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 3px !important;
    }
    #calendarGrid > div > div, #dashCalendarGrid > div > div {
        min-height: 42px !important; padding: 3px !important;
    }
    #calendarGrid > div > div > div:first-child,
    #dashCalendarGrid > div > div > div:first-child { font-size: 0.65rem !important; }
    #calendarGrid > div > div > div:nth-child(2),
    #dashCalendarGrid > div > div > div:nth-child(2) { font-size: 0.5rem !important; }

    /* ---- Department stats ---- */
    #deptStatsGrid { grid-template-columns: 1fr !important; gap: 10px !important; }

    /* ---- Workforce ---- */
    .wf-grid { grid-template-columns: 1fr !important; }

    /* ---- Reports ---- */
    .report-actions { flex-direction: column !important; gap: 8px !important; }
    .report-actions .btn, .report-actions a { width: 100% !important; }

    /* ---- Modals (inline) ---- */
    #leaveModal > .card, #passwordModal > .card {
        width: 94% !important; max-width: none !important; padding: 18px !important;
        max-height: 85vh !important; overflow-y: auto !important;
    }
    #leaveModal, #passwordModal { padding: 0 !important; }
    #leaveModal[style*="display:flex"], #passwordModal[style*="display:flex"],
    #leaveModal[style*="display: flex"], #passwordModal[style*="display: flex"] {
        align-items: flex-start !important; padding-top: 5vh !important;
    }

    /* Admin modals */
    .modal-overlay { padding: 0 !important; align-items: flex-start !important; }
    .modal-content { max-width: 94% !important; max-height: 85vh !important; }
    .modal-header, .modal-body, .modal-footer { padding: 14px !important; }

    /* ---- Notification dropdown ---- */
    #notifDropdown {
        position: fixed !important;
        top: auto !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        width: 100% !important; max-width: none !important;
        max-height: 65vh !important; margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        animation: slideUp 0.3s ease;
    }

    /* ---- Toast ---- */
    .toast {
        top: auto !important; bottom: 16px !important;
        right: 12px !important; left: 12px !important;
        max-width: none !important; width: auto !important;
        padding: 12px 16px !important; font-size: 0.82rem !important;
    }

    /* ---- Change logs page ---- */
    #page-changelogs .card-header > div[style*="flex"] { flex-direction: column !important; }
    #clActionFilter, #clEntityFilter, #clDateFrom, #clDateTo { width: 100% !important; }
    #clTable { min-width: 700px; }

    /* ---- Settings ---- */
    #page-settings div[style*="grid-template-columns:1fr 1fr"],
    #page-settings div[style*="display:grid;grid-template-columns:1fr 1fr"],
    #page-settings div[style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Leaves page ---- */
    #page-leaves div[style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* ---- Emp reports ---- */
    .emp-report-grid { gap: 8px !important; }

    /* ---- Activity items ---- */
    .activity-item { flex-direction: column !important; align-items: flex-start !important; gap: 6px; }

    /* ---- Remote monitor ---- */
    #remoteMonitorList { flex-direction: column !important; }
    #remoteMonitorList > div { width: 100% !important; min-width: 0 !important; }

    /* ===== DASHBOARD ===== */
    .dashboard-main { padding: 12px !important; }
    .welcome-section h1 { font-size: 1.3rem !important; }
    .welcome-section p { font-size: 0.82rem !important; }

    /* Checkin card */
    .checkin-card { flex-direction: column !important; gap: 16px !important; padding: 16px !important; }
    .checkin-actions { flex-direction: row !important; width: 100% !important; }
    .checkin-btn { flex: 1 !important; min-width: 0 !important; min-height: 48px !important; font-size: 0.85rem !important; padding: 12px 8px !important; }

    /* Stats grid: 2 cols */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-card { padding: 14px !important; }
    .stat-card .stat-value { font-size: 1.35rem !important; }
    .stat-card .stat-icon { width: 36px !important; height: 36px !important; }
    .stat-card .stat-label { font-size: 0.72rem !important; }

    /* Dashboard grid → 1 col */
    .dashboard-grid { grid-template-columns: 1fr !important; }
    .chart-container { height: 220px !important; }

    /* History table */
    .history-table { max-height: 320px !important; }
    .history-filters { flex-direction: column !important; width: 100% !important; }
    .history-filters .input { width: 100% !important; min-width: 0 !important; }

    /* Leave balances */
    #leaveBalances { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 10px !important; }

    /* Calendar selectors */
    #dashCalMonth, #dashCalYear { font-size: 0.78rem !important; }

    /* Leave form dates → 1 col */
    .leave-date-grid { grid-template-columns: 1fr !important; }

    /* Navbar */
    .navbar { padding: 8px 12px !important; }
    .navbar-brand { font-size: 1rem !important; gap: 6px !important; }
    .navbar-brand .logo { width: 28px !important; height: 28px !important; font-size: 0.85rem !important; }
    .navbar-brand span { font-size: 0.95rem !important; }
    .navbar-actions { gap: 2px !important; flex-wrap: wrap !important; }
    .navbar-actions .btn-sm { padding: 5px 6px !important; }
    .user-profile { gap: 6px !important; }
    .user-info { display: none !important; }
    .user-avatar { width: 28px !important; height: 28px !important; font-size: 0.8rem !important; }

    /* Scanner */
    .scanner-container, .kiosk-container { padding: 16px !important; }
}

/* ===== SMALL PHONE: ≤ 480px ===== */
@media (max-width: 480px) {
    html { font-size: 13px; }

    /* Stat cards → 1 col */
    .admin-stats, .stats-grid { grid-template-columns: 1fr !important; }

    /* All grids → 1 col */
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:repeat(2"],
    div[style*="grid-template-columns:1fr 1fr"],
    #leaveBalances, #deptStatsGrid,
    #page-leaves div[style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* Check-in buttons stack */
    .checkin-actions { flex-direction: column !important; }
    .checkin-btn { min-width: 100% !important; }

    /* Calendar tiny */
    #calendarGrid > div > div, #dashCalendarGrid > div > div { min-height: 34px !important; padding: 2px !important; }
    #calendarGrid > div > div > div:first-child,
    #dashCalendarGrid > div > div > div:first-child { font-size: 0.6rem !important; }
    #calendarGrid > div > div > div:nth-child(2),
    #dashCalendarGrid > div > div > div:nth-child(2) { display: none !important; }

    /* Table compact */
    .data-table { font-size: 0.72rem !important; min-width: 500px; }
    .data-table thead th, .data-table tbody td { padding: 8px 6px !important; }

    /* Login */
    .login-card { padding: 28px 18px 22px !important; }
    .login-form-title { font-size: 1.2rem !important; }
    .login-form-subtitle { font-size: 0.78rem !important; }
    .login-form-logo { width: 48px !important; height: 48px !important; font-size: 1.4rem !important; }
    .cl-input-wrap { margin-bottom: 24px !important; }
    .cl-demo-hint { display: none !important; }

    /* Topbar */
    .admin-topbar h1 { font-size: 0.95rem !important; }
    .navbar-brand span { font-size: 0.88rem !important; }

    /* Calendar legend */
    #calendarLegend, .dash-cal-legend { gap: 6px !important; }
    #calendarLegend span, .dash-cal-legend span { font-size: 0.64rem !important; }
}

/* ===== Animations ===== */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===== Touch targets ===== */
@media (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; }
    .admin-nav-item { min-height: 44px; }
    .data-table tbody td { padding: 12px 8px !important; }
    input, select, textarea { font-size: 16px !important; }
}

/* ===== Safe area insets ===== */
@supports (padding: env(safe-area-inset-top)) {
    .admin-topbar { padding-top: max(14px, env(safe-area-inset-top)); }
    .navbar { padding-top: max(10px, env(safe-area-inset-top)); }
    .admin-sidebar-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .toast { bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}

/* ===== Print ===== */
@media print {
    .admin-sidebar, .admin-topbar, .navbar, .btn, .action-btns,
    #notifDropdown, #liveSyncBadge, .hamburger-btn, .sidebar-overlay {
        display: none !important;
    }
    .admin-content { margin-left: 0 !important; }
    .card { break-inside: avoid; box-shadow: none !important; }
}