/**
 * Dhanvi HRMS - Comprehensive Mobile, Tablet, iPad & iPhone Responsive UI/UX
 */

/* ==========================================================================
   1. Touch Target, Safe Areas & Base Optimizations
   ========================================================================== */
html, body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ==========================================================================
   2. Desktop Collapsed Mini-Sidebar (data-sidebar="collapsed")
   ========================================================================== */
body[data-sidebar="collapsed"] .app-sidebar {
    width: var(--sidebar-collapsed-width);
}

body[data-sidebar="collapsed"] .app-main {
    margin-left: var(--sidebar-collapsed-width);
}

body[data-sidebar="collapsed"] .brand-text-wrapper,
body[data-sidebar="collapsed"] .menu-header,
body[data-sidebar="collapsed"] .menu-item a span:not(.menu-icon) {
    display: none;
}

body[data-sidebar="collapsed"] .sidebar-header {
    justify-content: center;
    padding: 0;
}

body[data-sidebar="collapsed"] .menu-item a {
    justify-content: center;
    padding: 0.75rem 0;
}

/* ==========================================================================
   3. iPad Pro & Large Tablet Breakpoint (< 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
    .app-sidebar {
        width: 240px;
    }

    .app-main {
        margin-left: 240px;
    }

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

    /* Stack 2fr 1fr grids on smaller desktop/iPad Pro */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 2fr"],
    div[style*="grid-template-columns: 3fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   4. iPad, iPad Mini & Medium Tablet Breakpoint (< 992px)
   ========================================================================== */
@media (max-width: 992px) {
    .app-sidebar {
        transform: translateX(-100%);
        width: 280px !important;
        box-shadow: var(--shadow-xl);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .app-header {
        padding: 0 1.25rem;
        padding-top: var(--safe-area-top);
    }

    .nav-toggle-btn {
        display: flex !important;
        min-width: 40px;
        min-height: 40px;
    }

    .header-search {
        width: 200px;
    }

    .header-search input:focus {
        width: 240px;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 990;
        display: none;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    /* User badge compact on iPad */
    .user-profile-badge span:last-child {
        display: none;
    }

    /* Two-column grids stack gracefully */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   5. Smart Phones, iPhone & Mobile Breakpoint (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
    .app-content {
        padding: 1rem 0.85rem;
        padding-bottom: calc(2rem + var(--safe-area-bottom));
    }

    .app-header {
        padding: 0 0.85rem;
        height: 60px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .page-title {
        font-size: 1.3rem;
    }

    .page-subtitle {
        font-size: 0.82rem;
    }

    .page-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    /* Prevent iOS Safari 16px auto-zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
        min-height: 42px;
    }

    .form-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem;
    }

    .header-search {
        display: none;
    }

    /* Dropdowns positioning on mobile screen edges */
    .notification-dropdown,
    .theme-menu {
        position: fixed !important;
        top: 64px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Touch-friendly buttons & table action controls */
    .btn {
        min-height: 38px;
        padding: 0.5rem 0.85rem;
        font-size: 0.88rem;
    }

    .btn-sm {
        min-height: 32px;
        padding: 0.35rem 0.65rem;
        font-size: 0.82rem;
    }

    /* Horizontally scrollable tables with smooth iOS touch kinetic momentum */
    .table-responsive {
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-sm);
        margin-bottom: 0.5rem;
    }

    .table {
        min-width: 620px;
    }

    .table th, .table td {
        padding: 0.75rem 0.85rem;
        font-size: 0.82rem;
    }

    /* Card padding optimization for smaller screens */
    .card-body {
        padding: 1rem 0.85rem;
    }

    .card-header {
        padding: 0.85rem;
    }

    /* Kanban pipeline horizontal swipe on mobile */
    .kanban-board,
    div[style*="display: flex; gap: 1rem; overflow-x: auto"] {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem;
    }

    .kanban-column {
        min-width: 270px !important;
        scroll-snap-align: start;
    }

    /* Modal dialogs fill mobile viewport comfortably */
    .modal-container {
        width: calc(100% - 1.5rem) !important;
        margin: 0.75rem auto !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto;
    }

    .drawer-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Footer wrap */
    .app-footer {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
        padding: 1rem 0.85rem;
    }
}

/* ==========================================================================
   6. Compact iPhone SE & Small Devices (< 380px)
   ========================================================================== */
@media (max-width: 380px) {
    .page-title {
        font-size: 1.15rem;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .theme-switch-btn,
    .notification-bell-btn,
    .nav-toggle-btn {
        width: 34px;
        height: 34px;
    }
}