/* ============================================================
   MOBILE RESPONSIVE CSS - HR Management System
   Include in all templates: <link rel="stylesheet" href="/static/css/mobile.css">
   ============================================================ */

/* ===== GLOBAL MOBILE RESETS ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
img, video, svg { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* ===== TABLE SCROLL WRAPPER ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.table-scroll table { min-width: 600px; }
.table-scroll::-webkit-scrollbar { height: 4px; }
.table-scroll::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 4px; }

/* ===== HAMBURGER MENU ===== */
.mobile-menu-btn {
    display: none; background: none; border: none; color: white; font-size: 24px;
    cursor: pointer; padding: 6px 10px; line-height: 1; border-radius: 6px; min-height: 40px;
}
.mobile-menu-btn:active { background: rgba(255,255,255,0.15); }

/* ===== BOTTOM SAFE AREA (notch phones) ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============================================================
   TABLET (768px)
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 14px; }

    /* --- Hamburger visible --- */
    .mobile-menu-btn { display: inline-flex; align-items: center; }

    /* --- Navbar --- */
    .navbar {
        padding: 10px 12px !important; flex-wrap: wrap !important; gap: 6px !important;
        position: sticky !important; top: 0; z-index: 1000;
    }
    .navbar h1 {
        font-size: 15px !important; flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        order: 1;
    }
    .navbar .user-info {
        order: 2; gap: 6px !important; font-size: 12px;
    }
    .navbar .user-info > span:not(.mobile-only) { display: none; }

    /* --- Category & Tab Navigation --- */
    .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 6px !important;
    }
    .cat-btn { padding: 10px 8px !important; font-size: 11px !important; }
    .cat-btn .cat-icon { font-size: 16px !important; width: 28px !important; height: 28px !important; }
    .cat-btn .cat-arrow { display: none !important; }
    .cat-btn .cat-text { font-size: 10px !important; }

    .subtab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
    .subtab-grid { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { padding: 8px 10px !important; font-size: 11px !important; white-space: nowrap; flex-shrink: 0; }
    .tab-btn .tab-icon { font-size: 13px !important; width: 24px !important; height: 24px !important; }

    /* --- Container & Cards --- */
    .container { padding: 0 8px !important; margin: 10px auto !important; }
    .card { padding: 12px !important; margin-bottom: 10px !important; border-radius: 10px !important; }
    .card h2 { font-size: 15px !important; word-break: break-word; }

    /* --- Tables inside cards --- */
    .card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    table { font-size: 11px; }
    table th, table td { padding: 7px 5px !important; }
    table td { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

    /* --- Stats Grid --- */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .stat-box { padding: 12px 8px !important; }
    .stat-box h3 { font-size: 20px !important; }
    .stat-box p { font-size: 11px !important; }

    /* --- Buttons: Touch Friendly (44px min) --- */
    button, .btn, [onclick], a.btn-logout, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning {
        min-height: 40px;
    }
    .btn-primary, .btn-secondary { padding: 10px 14px !important; font-size: 13px !important; }

    /* --- Modals: Near-fullscreen --- */
    .modal-content {
        width: 96% !important; max-width: none !important; margin: 2% auto !important;
        padding: 14px !important; max-height: 94vh !important; overflow-y: auto !important;
        border-radius: 12px !important;
    }
    .modal { padding: 8px !important; }

    /* --- Forms --- */
    .form-group { margin-bottom: 12px !important; }
    .form-group input, .form-group select, .form-group textarea {
        width: 100% !important; max-width: 100% !important;
        padding: 10px !important; font-size: 14px !important; min-height: 44px !important;
    }
    .form-group label { font-size: 12px !important; margin-bottom: 4px !important; }

    /* --- FORCE inline flex to wrap --- */
    div[style*="display: flex"], div[style*="display:flex"] { flex-wrap: wrap !important; }
    /* --- FORCE inline grids to responsive --- */
    div[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: repeat(2, 1fr) !important; }
    div[style*="grid-template-columns: repeat(auto-fill"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(3"], div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="grid-template-columns: repeat(4"], div[style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
    div[style*="grid-template-columns: repeat(5"], div[style*="grid-template-columns:repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
    div[style*="grid-template-columns: repeat(6"], div[style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
    div[style*="grid-template-columns:1fr 1fr 1fr 2fr"], div[style*="grid-template-columns: 1fr 1fr 1fr 2fr"] { grid-template-columns: 1fr 1fr !important; }

    /* --- Cap inline fixed widths --- */
    input[style*="width:"], select[style*="width:"], textarea[style*="width:"],
    div[style*="min-width: 200px"], div[style*="min-width:200px"],
    div[style*="min-width: 220px"], div[style*="min-width:220px"] {
        max-width: 100% !important; box-sizing: border-box !important;
    }

    /* --- Inline gap/padding reduction --- */
    div[style*="gap: 30px"], div[style*="gap:30px"] { gap: 10px !important; }
    div[style*="gap: 25px"], div[style*="gap:25px"] { gap: 10px !important; }
    div[style*="gap: 20px"], div[style*="gap:20px"] { gap: 8px !important; }
    div[style*="gap: 15px"], div[style*="gap:15px"] { gap: 8px !important; }
    div[style*="padding: 30px"], div[style*="padding:30px"] { padding: 14px !important; }
    div[style*="padding: 25px"], div[style*="padding:25px"] { padding: 12px !important; }

    /* --- Badges --- */
    .badge { padding: 3px 7px !important; font-size: 10px !important; }

    /* --- QR Code --- */
    .qr-display img { max-width: 180px !important; }

    /* --- Header bar (salary, other pages) --- */
    .header { padding: 10px 12px !important; flex-wrap: wrap !important; gap: 6px !important; }
    .header h1 { font-size: 14px !important; flex: 1 !important; min-width: 0 !important; }
    .header a, .header button { font-size: 11px !important; padding: 8px 12px !important; min-height: 36px !important; }

    /* --- Tenant / Client Cards --- */
    .tenant-grid, .client-grid { grid-template-columns: 1fr !important; }

    /* --- Action bar buttons stack --- */
    .actions-bar, div[style*="justify-content: flex-end"], div[style*="justify-content:flex-end"] {
        flex-wrap: wrap !important;
    }
    .actions-bar .btn, .actions-bar button { flex: 1 1 auto !important; min-width: 100px !important; text-align: center !important; }

    /* --- Print-friendly: hide on mobile --- */
    @media print { .mobile-menu-btn { display: none !important; } }

    /* --- Footer fix --- */
    footer[style*="position:fixed"] {
        font-size: 10px !important; padding: 8px 12px !important;
    }
}

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

    .navbar h1 { font-size: 13px !important; }
    .navbar .user-info > span { display: none !important; }
    .btn-logout { padding: 7px 12px !important; font-size: 11px !important; }

    /* --- Cats: 3-col on small phones --- */
    .cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; }
    .cat-btn { padding: 8px 6px !important; font-size: 10px !important; }
    .cat-btn .cat-icon { font-size: 14px !important; width: 24px !important; height: 24px !important; }

    .tab-btn { padding: 7px 9px !important; font-size: 10px !important; }
    .tab-btn .tab-icon { font-size: 12px !important; width: 20px !important; height: 20px !important; }

    /* --- Cards --- */
    .card { padding: 10px !important; }
    .card h2 { font-size: 14px !important; }

    /* --- Stats: 2-col --- */
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .stat-box h3 { font-size: 18px !important; }
    .stat-box p { font-size: 10px !important; }

    /* --- Tables --- */
    table { font-size: 10px !important; }
    table th, table td { padding: 5px 3px !important; }

    /* --- Modals: Fullscreen --- */
    .modal-content {
        margin: 0 !important; width: 100% !important; min-height: 100vh !important;
        border-radius: 0 !important; padding: 12px !important;
    }

    /* --- Buttons: Full width --- */
    .btn-primary, .btn-secondary { width: 100% !important; text-align: center !important; }

    /* --- ALL grids to single col or 2-col --- */
    div[style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(auto-fill"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(4"], div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }

    /* --- Full-width form elements --- */
    input[type="date"], input[type="month"], input[type="text"], input[type="number"],
    input[type="email"], input[type="password"], input[type="tel"], select, textarea {
        width: 100% !important; max-width: 100% !important; min-height: 44px !important; font-size: 16px !important;
    }

    /* --- Fix font-size 16px to prevent iOS zoom on focus --- */
    input, select, textarea { font-size: 16px !important; }

    /* --- Salary page specific --- */
    input[type="number"] { width: 55px !important; font-size: 12px !important; min-height: 34px !important; }

    /* --- New client wizard --- */
    .nc-mod-label, .nc-plan-opt { flex: 1 1 100% !important; }

    /* --- Employee detail form --- */
    div[style*="display: grid"][style*="2fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SMALL PHONE (360px)
   ============================================================ */
@media (max-width: 360px) {
    .navbar h1 { font-size: 11px !important; }
    .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cat-btn { padding: 6px 5px !important; font-size: 9px !important; }
    .cat-btn .cat-icon { font-size: 12px !important; width: 20px !important; height: 20px !important; }
    .tab-btn { padding: 6px 7px !important; font-size: 9px !important; }
    .stat-box { padding: 8px 4px !important; }
    .stat-box h3 { font-size: 16px !important; }
    table { font-size: 9px !important; }
    table th, table td { padding: 4px 2px !important; }
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar { padding: 6px 12px !important; }
    .modal-content { max-height: 90vh !important; }
    .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ============================================================
   TOUCH DEVICE ENHANCEMENTS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, .btn, [onclick], a[href], .tab-btn, .cat-btn, .badge {
        min-height: 38px; cursor: pointer;
    }
    /* Remove hover effects that stick on touch */
    button:hover, .btn:hover, .cat-btn:hover, .tab-btn:hover {
        transform: none !important;
    }
    /* Smooth scrolling */
    .card, .modal-content, .table-scroll, .subtab-grid {
        -webkit-overflow-scrolling: touch;
    }
    /* Prevent text selection on buttons */
    button, .btn, .tab-btn, .cat-btn {
        -webkit-user-select: none; user-select: none;
    }
    /* Scroll hint for tables */
    .card table { 
        position: relative;
    }
}

/* ============================================================
   PULL-TO-REFRESH INDICATOR (optional enhancement)
   ============================================================ */
.pull-indicator {
    display: none; text-align: center; padding: 8px; font-size: 12px; color: #667eea;
}

/* ============================================================
   MOBILE-FRIENDLY SCROLLBAR
   ============================================================ */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 4px; }
    
    /* Scroll indicator shadow for table cards */
    .card::after {
        content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px;
        background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
        pointer-events: none; opacity: 0; transition: opacity 0.3s;
    }
    .card { position: relative; }
    .card.scrollable::after { opacity: 1; }
}