/**
 * Dhanvi HRMS - Enterprise Responsive UI/UX Design System
 * Pixel-Perfect Mobile, Tablet, iPad & iPhone Viewport Architecture
 * Supports: 320px, 360px, 375px, 390px, 414px, 480px, 576px, 768px, 820px, 992px, 1024px, 1200px+
 */

/* ==========================================================================
   1. Root, Safe Area Insets & Anti-Distortion Foundation
   ========================================================================== */
: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);
}

html, body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
}

.app-main {
    flex: 1;
    min-width: 0;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Eliminate default CSS grid blowout caused by min-width: auto */
.card,
.stat-card,
.table-responsive,
.metrics-grid > *,
div[style*="display: grid"] > *,
div[style*="display:grid"] > *,
div[style*="grid-template-columns"] > * {
    min-width: 0;
}

/* Fluid Media & Images */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   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: 230px;
    }

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

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

    /* Stack 2fr 1fr and 1fr 2fr layouts gracefully */
    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, Tablets & Medium Screens (< 992px)
   ========================================================================== */
@media (max-width: 992px) {
    .app-sidebar {
        transform: translateX(-100%);
        width: 280px !important;
        max-width: 85vw !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);
    }

    .sidebar-header {
        justify-content: space-between !important;
        padding: 0.75rem 1.25rem !important;
    }

    .sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-color);
        background: var(--bg-surface);
        color: var(--text-secondary);
        font-size: 1rem;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .sidebar-close-btn:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

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

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

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

    .header-search {
        width: 180px;
    }

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

    .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-email-text {
        display: none !important;
    }

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

    /* Swipeable horizontal tab bar on tablet */
    .tabs-nav,
    .nav-tabs,
    div[style*="border-bottom: 1px solid var(--border-color)"][style*="display: flex"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.35rem !important;
        gap: 0.5rem !important;
    }

    .tabs-nav::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .tabs-nav .btn,
    .tabs-nav > a,
    .nav-tab-item {
        flex-shrink: 0 !important;
        white-space: nowrap !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: stretch;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .page-title {
        font-size: 1.28rem;
        line-height: 1.25;
    }

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

    .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"],
    input[type="search"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
        min-height: 42px;
    }

    /* Form rows stacking */
    .form-row {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Filter forms on mobile */
    .card-body form[method="GET"],
    form[style*="display: flex"][style*="align-items: flex-end"],
    form[style*="display: flex"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .card-body form[method="GET"] > div,
    form[style*="display: flex"] > div[style*="min-width"],
    form[style*="display: flex"] > div[style*="flex:"] {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .card-body form[method="GET"] select,
    .card-body form[method="GET"] input {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Filter Action Buttons Stretch */
    .card-body form[method="GET"] > div:last-child {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .card-body form[method="GET"] > div:last-child .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* All auto-fit grids collapse to single column on mobile */
    .metrics-grid,
    div[style*="grid-template-columns: repeat(auto-fit"],
    div[style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .header-search {
        display: none !important;
    }

    /* 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;
        z-index: 1050 !important;
    }

    /* Touch-friendly buttons & 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 kinetic momentum */
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-sm);
        margin-bottom: 0.5rem;
        display: block;
    }

    .table {
        min-width: 580px;
    }

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

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

    .card-header {
        padding: 0.85rem 1rem;
    }

    .card-footer {
        padding: 0.85rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Kanban pipeline horizontal swipe on mobile */
    .kanban-board-container,
    .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;
        max-width: 270px !important;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* Modal dialogs fill mobile viewport comfortably */
    .modal-backdrop,
    .modal-overlay {
        padding: 0.5rem;
    }

    .modal-container,
    .modal-dialog {
        width: calc(100% - 1rem) !important;
        max-width: 100% !important;
        margin: 0.5rem auto !important;
        max-height: calc(100vh - 1.5rem) !important;
        overflow-y: auto;
    }

    .modal-header {
        padding: 1rem 1.15rem;
    }

    .modal-body {
        padding: 1.15rem;
    }

    .modal-footer {
        padding: 0.85rem 1.15rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

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

    /* Organization Tree Chart Viewport & Nodes */
    .tree-viewport {
        padding: 1rem 0.5rem !important;
    }

    .company-card,
    .sbu-card,
    .branch-card {
        width: 100% !important;
        max-width: 100% !important;
    }

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

/* ==========================================================================
   6. Compact Smartphones (< 576px)
   ========================================================================== */
@media (max-width: 576px) {
    .header-left, .header-right {
        gap: 0.45rem;
    }

    /* User Profile Compact: Show only avatar */
    .user-info-text {
        display: none !important;
    }

    .user-profile-badge {
        padding: 2px;
    }

    /* Logout button compact on small screens */
    .header-logout-btn {
        padding: 0.35rem 0.55rem !important;
        font-size: 0.78rem !important;
    }

    .header-logout-btn .logout-text {
        display: none;
    }

    .header-logout-btn .logout-icon {
        display: inline !important;
    }

    /* Breadcrumbs on mobile */
    .breadcrumbs {
        font-size: 0.75rem;
        gap: 0.35rem;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    /* Toast Container Mobile Sizing */
    .toast-container {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Auth Page Mobile Sizing */
    .auth-container {
        padding: 1rem 0.75rem;
    }

    .auth-card {
        padding: 1.5rem 1.15rem;
        max-width: 100%;
        margin-top: 1.5rem;
    }

    .auth-theme-toggle {
        top: 0.75rem;
        right: 0.75rem;
    }

    .auth-logo img {
        height: 46px;
    }

    /* Stats Grid on small screens */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
    }

    .stats-grid .card {
        padding: 0.75rem !important;
    }

    /* KPI Stat value typography */
    .stat-value {
        font-size: 1.45rem;
    }
}

/* ==========================================================================
   7. 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;
        font-size: 0.95rem;
    }

    .btn {
        padding: 0.4rem 0.65rem;
        font-size: 0.82rem;
    }

    .app-content {
        padding: 0.75rem 0.55rem;
    }

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

/* ==========================================================================
   8. Module-Specific Responsive Refinements
   ========================================================================== */
/* Employee Profile Showcase */
@media (max-width: 768px) {
    .emp-profile-body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    .emp-profile-main {
        gap: 1rem !important;
    }
    .emp-profile-meta {
        border-left: none !important;
        border-top: 1px solid var(--border-color) !important;
        padding-left: 0 !important;
        padding-top: 1rem !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* Payslip Sheet */
@media (max-width: 768px) {
    .payslip-sheet {
        padding: 1.25rem 1rem !important;
    }
    .payslip-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    .payslip-header > div:last-child {
        text-align: left !important;
    }
    .payslip-info-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.85rem !important;
    }
    .payslip-info-grid span[style*="width: 130px"] {
        width: auto !important;
        min-width: 110px !important;
        margin-right: 0.5rem;
    }
    .payslip-breakdown-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* 7-Day Trend Chart on Dashboard */
@media (max-width: 576px) {
    div[style*="height: 180px; padding-top: 1rem; border-bottom: 2px solid var(--border-color)"] {
        gap: 0.35rem !important;
    }
    div[style*="height: 180px; padding-top: 1rem; border-bottom: 2px solid var(--border-color)"] span {
        font-size: 0.65rem !important;
    }
}

/* Role Permissions Matrix Sticky Column */
.module-row td[style*="position: sticky"] {
    background-color: var(--bg-card) !important;
}
[data-theme="dark"] .module-row td[style*="position: sticky"] {
    background-color: var(--bg-card) !important;
}