/* ====================================================================
   METI Admin Dashboard — Mobile Responsive Fixes
   Add this AFTER all other CSS files in your HTML
   ==================================================================== */

/* ─── Tablet (≤1024px) ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .content {
        padding: 16px;
        padding-bottom: 100px;
    }
    .header {
        padding: 0 16px;
        height: 60px;
    }
    .header-actions .btn span { display: none; }
    .header-actions .btn { padding: 8px; min-width: 36px; }
}

/* ─── Mobile (≤768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Base layout — disable the 0.8 scale zoom on mobile */
    .app-container {
        height: 100vh;
        width: 100vw;
        transform: none;
    }

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .content {
        padding: 12px;
        padding-bottom: 110px; /* Space for dock */
    }

    .header {
        height: 54px;
        padding: 0 12px;
        gap: 8px;
    }

    .page-title { font-size: 16px; }

    .header-actions {
        gap: 6px;
    }

    .header-actions .btn {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 32px;
    }

    .header-actions .btn span { display: none; }

    /* Breadcrumbs */
    .nav-breadcrumbs {
        font-size: 11px;
        gap: 4px;
    }
    .nb-crumb { padding: 2px 6px; font-size: 11px; }

    /* Cards */
    .card {
        padding: 14px;
        margin-bottom: 12px;
        border-radius: 10px;
    }
    .card-title { font-size: 16px; }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .stat-card { padding: 12px; }
    .stat-value { font-size: 22px; }

    /* Filters */
    .filters {
        flex-direction: column;
        gap: 8px;
    }
    .filter-group { width: 100%; }
    .filter-select, .filter-input { width: 100%; }

    /* Tables */
    .employee-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table { font-size: 12px; }
    th, td { padding: 10px 8px; }

    /* Tabs */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { min-width: fit-content; white-space: nowrap; font-size: 12px; }

    /* Modals */
    .modal-content, .modal-body { 
        max-width: calc(100vw - 24px); 
        max-height: 85vh;
        margin: 12px;
    }
    .modal-body { padding: 14px; }

    /* Quick actions */
    .quick-actions { flex-direction: column; gap: 8px; }
    .quick-action { width: 100%; }

    /* Notification dropdown */
    .notification-dropdown {
        width: calc(100vw - 24px);
        right: -8px;
    }

    /* ─── Overview page ─── */
    .ov-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .ov-kpi { padding: 12px !important; }
    .ov-kpi-value { font-size: 20px !important; }

    /* ─── Floor Plan page ─── */
    .fp-grid { grid-template-columns: 1fr !important; }

    /* ─── Screen Tracking ─── */
    .st-stats { grid-template-columns: repeat(2, 1fr); }
    .st-employee-grid { grid-template-columns: 1fr; }
    .st-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .st-config-grid { grid-template-columns: 1fr; }
    .st-filters { flex-direction: column; }

    /* ─── Project Timer ─── */
    .pt-admin-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .pt-admin-tabs::-webkit-scrollbar { display: none; }

    /* ─── Overtime ─── */
    .ot-filters { flex-direction: column !important; align-items: stretch !important; }

    /* ─── Records/Calendar ─── */
    .cal-kpi-row { flex-wrap: wrap; gap: 6px; }
    .cal-kpi { min-width: calc(50% - 5px); flex: none; padding: 8px 10px; }
    .cal-kpi-num { font-size: 16px; }
    .cal-cell { min-height: 70px; padding: 4px 5px; }
    .cal-pill { font-size: 8px; padding: 0 3px; }
    .cal-pill::before { display: none; }
    .cal-hol-badge { display: none; }
    .cal-filters { flex-direction: column; }

    /* ─── Requests ─── */
    .req-kpi-row { flex-direction: column; }
    .req-filters { flex-direction: column; }

    /* ─── Settings/Permissions ─── */
    .perm-user-grid { grid-template-columns: 1fr; }
    .perm-level-grid { grid-template-columns: repeat(2, 1fr); }
    .perm-pages-grid { grid-template-columns: 1fr; }
    .perm-cap-grid { grid-template-columns: 1fr; }

    /* ─── PC Inventory ─── */
    .pci-grid { grid-template-columns: 1fr !important; }
}

/* ─── Small phone (≤480px) ───────────────────────────────────────── */
@media (max-width: 480px) {
    .content {
        padding: 8px;
        padding-bottom: 100px;
    }

    .header {
        height: 48px;
        padding: 0 10px;
    }

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

    .stats-grid { grid-template-columns: 1fr; }

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

    /* Dock adjustments */
    #navDock, .bottom-dock {
        bottom: 8px;
        padding: 6px 8px;
        gap: 1px;
        border-radius: 16px;
    }
    .ns-dock-item, .bd-item { width: 38px; height: 38px; font-size: 18px; }
    .ns-dock-logo, .bd-logo { width: 38px; height: 38px; font-size: 15px; }
    .ns-dock-group .ns-dock-item { width: 34px; height: 34px; font-size: 16px; }

    /* Calendar */
    .cal-cell { min-height: 50px; }
    .cal-day-num { font-size: 11px; }
    .cal-kpi { min-width: 100%; }

    /* Overview KPIs single column */
    .ov-kpi-grid { grid-template-columns: 1fr !important; }
}

/* ─── Landscape phone ────────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    .content { padding: 10px; padding-bottom: 90px; }
    .header { height: 44px; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ─── Touch-friendly targets ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn, .tab, .stat-card, .quick-action,
    .yk-pill, .yk-btn, .yk-pag-btn,
    .cal-nav-btn, .cal-view-btn,
    .req-tab, .req-act-btn,
    .st-btn, .st-emp-card {
        min-height: 44px;
    }

    .modal-close,
    .yk-drawer-close {
        width: 44px;
        height: 44px;
    }

    /* Larger tap targets for table rows */
    table tbody td { padding: 12px 8px; }
    .yk-td { padding: 14px 12px; }
}