/* ===== SA Apparel ERP — Mobile & Responsive Overrides ===== */

/* ===== TABLET (≤ 1024px) ===== */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

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

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {

    /* Sidebar: larger tap targets */
    .nav-item {
        padding: 14px var(--space-md);
        font-size: 0.95rem;
        min-height: 48px;
    }

    .nav-icon {
        font-size: 1.2rem;
    }

    .nav-section-title {
        font-size: 0.7rem;
        padding-left: var(--space-md);
    }

    /* Header */
    .top-header {
        height: 56px;
    }

    .header-left h2 {
        font-size: 1rem;
    }

    .header-right {
        display: none;
    }

    /* hide date on mobile */
    .mobile-toggle {
        font-size: 1.6rem;
        padding: 8px;
    }

    /* Page content: tighter padding */
    .page-content {
        padding: var(--space-md) var(--space-sm);
    }

    /* KPI grid stacks */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .kpi-card {
        padding: var(--space-md);
    }

    .kpi-value {
        font-size: 1.4rem;
    }

    .kpi-label {
        font-size: 0.65rem;
    }

    .kpi-sub {
        font-size: 0.7rem;
    }

    /* Tables: horizontal scroll */
    .table-wrapper,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-card {
        overflow: visible;
    }

    .data-table {
        min-width: 600px;
    }

    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    /* Filter bars: stack / wrap */
    .filter-bar {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .filter-bar .form-group,
    .filter-bar select,
    .filter-bar input[type="date"],
    .filter-bar input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .filter-bar>div[style*="margin-left:auto"] {
        margin-left: 0 !important;
        width: 100%;
        justify-content: stretch;
    }

    .filter-bar>div[style*="margin-left:auto"] .btn {
        flex: 1;
    }

    /* Forms: full width inputs */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-control {
        font-size: 16px !important;
    }

    /* prevent iOS zoom */
    .form-group {
        margin-bottom: var(--space-sm);
    }

    /* Buttons: bigger for touch */
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-height: 44px;
    }

    .btn-sm {
        padding: 10px 16px;
        font-size: 0.8rem;
        min-height: 40px;
    }

    .btn-lg {
        padding: 14px 24px;
        font-size: 1rem;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    /* Modals: nearly full width */
    .modal-overlay {
        padding: var(--space-sm);
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .modal-header {
        padding: var(--space-md);
    }

    .modal-body {
        padding: var(--space-md);
    }

    .modal-footer {
        padding: var(--space-md);
    }

    .modal-footer .btn {
        flex: 1;
    }

    /* Badges */
    .badge {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    /* Glass cards */
    .glass-card {
        border-radius: var(--radius-md);
    }

    /* 2-column grids → 1 column */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Bulk action bar */
    .bulk-action-bar {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .bulk-action-bar .btn {
        flex: 1;
        min-width: 0;
    }

    /* Wages nav tabs: scroll horizontally */
    .wages-nav,
    div[style*="display:flex"][style*="gap"]>.btn {
        font-size: 0.75rem;
    }

    /* Inline attendance table */
    .att-inline-table {
        min-width: 900px;
    }

    .att-inline-table td {
        padding: 6px 4px;
    }

    .att-inline-table .att-inp {
        font-size: 14px !important;
        /* prevent iOS zoom */
        padding: 6px 4px;
    }

    .att-inline-table select.att-inp {
        width: 80px !important;
    }

    .att-inline-table input[type="time"].att-inp {
        width: 85px !important;
    }

    .att-inline-table input[type="number"].att-inp {
        width: 55px !important;
    }

    /* Tab navigation pills */
    div[style*="display:flex"][style*="flex-wrap:wrap"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 4px;
    }

    /* Toast: full width */
    .toast-container {
        left: var(--space-sm);
        right: var(--space-sm);
    }

    .toast {
        min-width: unset;
        max-width: 100%;
    }

    /* Sidebar user footer */
    .sidebar-footer {
        padding: var(--space-sm) var(--space-md);
    }

    .sidebar-user .user-info .name {
        font-size: 0.9rem;
    }
}

/* ===== SMALL PHONE (≤ 480px) ===== */
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .kpi-value {
        font-size: 1.2rem;
    }

    .page-content {
        padding: var(--space-sm);
    }

    .top-header {
        padding: 0 var(--space-sm);
    }

    .header-left h2 {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    /* Modal nearly full screen */
    .modal {
        max-height: 90vh;
    }

    /* Charts smaller */
    .chart-wrapper {
        height: 200px;
    }
}

/* ===== Touch-friendly helpers ===== */
@media (hover: none) and (pointer: coarse) {

    /* Increase tap targets */
    .nav-item {
        min-height: 48px;
    }

    .btn {
        min-height: 44px;
    }

    .form-control {
        min-height: 44px;
    }

    select.form-control {
        min-height: 44px;
    }

    /* Disable hover effects that don't make sense on touch */
    .glass-card:hover {
        transform: none;
    }

    .nav-item:hover {
        background: transparent;
    }

    /* Better focus visibility */
    .form-control:focus {
        box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.3);
    }
}

/* ===== Print ===== */
@media print {

    .sidebar,
    .top-header,
    .mobile-toggle,
    .sidebar-overlay,
    .bulk-action-bar,
    .filter-bar,
    .btn {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .page-content {
        padding: 0;
    }
}