/* ========================================
   GreenStep Hub - Mobile Responsive Overrides
   Loaded last to override all other styles
   ======================================== */

/* ===== TABLET/MOBILE: hamburger button space ===== */
@media (max-width: 1024px) {
    /* Add top padding so hamburger button doesn't overlap page title + side padding */
    .main-content {
        padding-top: 4.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

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

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

    /* --- System Headers: stack vertically --- */
    .system-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .system-header h1 {
        font-size: 1.2rem;
    }

    .header-right {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .header-actions .btn,
    .header-right .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Stats Bars: 2 per row --- */
    .stats-bar {
        gap: 0.5rem;
    }

    .stat-box {
        min-width: 0;
        flex: 1 1 calc(50% - 0.5rem);
        padding: 0.6rem 0.8rem;
    }

    .stat-value {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* Onboarding stats */
    .onboarding-stats-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    /* --- Filters: stack vertically --- */
    .filters-section {
        padding: 0.75rem;
    }

    .filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .filter-group {
        min-width: 100% !important;
        flex: 1 1 100%;
    }

    .filter-input,
    .filter-select {
        min-width: 100%;
        width: 100%;
        min-height: 44px;
    }

    /* Onboarding header bar */
    .onboarding-header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .header-title-section h1 {
        font-size: 1.2rem;
    }

    .header-filters-section {
        flex-direction: column;
        gap: 0.5rem;
    }

    .header-filters-section .filter-input,
    .header-filters-section .filter-select {
        min-width: 100%;
    }

    /* --- CANDIDATES TABLE: 12 → 6 columns --- */
    /* Hide: source(3), email(5), nearby-cities(7), training(8), knowledge(9), form(10) */
    #candidatesSystem .data-table {
        table-layout: auto;
    }

    #candidatesSystem .data-table th:nth-child(3),
    #candidatesSystem .data-table td:nth-child(3),
    #candidatesSystem .data-table th:nth-child(5),
    #candidatesSystem .data-table td:nth-child(5),
    #candidatesSystem .data-table th:nth-child(7),
    #candidatesSystem .data-table td:nth-child(7),
    #candidatesSystem .data-table th:nth-child(8),
    #candidatesSystem .data-table td:nth-child(8),
    #candidatesSystem .data-table th:nth-child(9),
    #candidatesSystem .data-table td:nth-child(9),
    #candidatesSystem .data-table th:nth-child(10),
    #candidatesSystem .data-table td:nth-child(10) {
        display: none;
    }

    #candidatesSystem .data-table th,
    #candidatesSystem .data-table td {
        padding: 0.5rem 0.3rem;
        font-size: 0.8rem;
    }

    #candidatesSystem .data-table th {
        font-size: 0.75rem;
    }

    #candidatesSystem .data-table td:nth-child(2) {
        white-space: normal;
    }

    /* --- PROGRAMS TABLE: 14 → 6 columns --- */
    /* Hide: #(1), warming(3), topic(6), audience(7), budget(8), kinder(9), classes(10), manager(13) */
    .programs-table {
        table-layout: auto;
    }

    .programs-table th:nth-child(1),
    .programs-table td:nth-child(1),
    .programs-table th:nth-child(3),
    .programs-table td:nth-child(3),
    .programs-table th:nth-child(6),
    .programs-table td:nth-child(6),
    .programs-table th:nth-child(7),
    .programs-table td:nth-child(7),
    .programs-table th:nth-child(8),
    .programs-table td:nth-child(8),
    .programs-table th:nth-child(9),
    .programs-table td:nth-child(9),
    .programs-table th:nth-child(10),
    .programs-table td:nth-child(10),
    .programs-table th:nth-child(13),
    .programs-table td:nth-child(13) {
        display: none;
    }

    .programs-table th,
    .programs-table td {
        padding: 0.5rem 0.3rem;
        font-size: 0.8rem;
    }

    .programs-table th {
        font-size: 0.75rem;
        white-space: normal;
    }

    /* --- ONBOARDING TABLE: 10 → 6 columns --- */
    /* Hide: WhatsApp-checkbox(1), #(2), שיחת-סיכום(8), סיום-חוזה(9) */
    .onboarding-table th:nth-child(1),
    .onboarding-table td:nth-child(1),
    .onboarding-table th:nth-child(2),
    .onboarding-table td:nth-child(2),
    .onboarding-table th:nth-child(8),
    .onboarding-table td:nth-child(8),
    .onboarding-table th:nth-child(9),
    .onboarding-table td:nth-child(9) {
        display: none;
    }

    .onboarding-table th,
    .onboarding-table td {
        padding: 0.4rem 0.3rem;
        font-size: 0.8rem;
    }

    .onboarding-table th {
        font-size: 0.75rem;
    }

    /* Onboarding bulk actions bar */
    .coord-bulk-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        text-align: center;
    }

    /* --- Table containers: keep horizontal scroll as fallback --- */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        margin-top: 0.75rem;
    }

    /* --- Pagination --- */
    .pagination-container {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
        text-align: center;
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-info {
        font-size: 0.8rem;
    }

    .pagination-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* --- Touch Targets: minimum 44px --- */
    .btn-actions-toggle {
        padding: 8px 14px;
        min-height: 44px;
        min-width: 44px;
    }

    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }

    .pipe-btn {
        width: 40px;
        height: 40px;
    }

    .status-tab {
        padding: 0.6rem 0.8rem;
        min-height: 44px;
    }

    .nav-item {
        min-height: 44px;
    }

    /* --- Modals: full-width from bottom --- */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
    }

    .program-details-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
    }

    /* Modal forms: single column */
    .details-grid {
        grid-template-columns: 1fr;
    }

    .prog-tab-content .details-grid {
        grid-template-columns: 1fr;
    }

    /* Program tabs: scroll horizontally */
    .prog-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .prog-tab {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Modal form actions: full width */
    .form-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* --- View Toggle --- */
    .view-toggle {
        width: 100%;
        justify-content: center;
    }

    .view-btn {
        flex: 1;
        text-align: center;
        min-height: 44px;
    }

    /* Pipeline status tabs: horizontal scroll */
    .pipeline-status-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }

    .pipeline-status-tabs .status-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .pipeline-search-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pipeline-search-box {
        max-width: 100%;
        width: 100%;
    }

    /* --- Actions Dropdown --- */
    .actions-dropdown-menu {
        min-width: 200px;
        max-width: calc(100vw - 16px);
    }

    .actions-dropdown-menu button {
        padding: 10px 12px;
        font-size: 0.85rem;
        min-height: 44px;
    }

    /* --- Column Filter Dropdowns: bottom sheet style --- */
    .column-filter-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 50vh;
        border-radius: 12px 12px 0 0;
        z-index: 10001;
    }

    /* --- System view padding --- */
    .system-view {
        padding: 1rem;
    }

    .dashboard-view {
        padding: 1rem;
    }

    /* --- Kanban board: stack columns --- */
    .kanban-board {
        flex-direction: column;
    }

    .kanban-column {
        min-width: 100%;
        max-width: 100%;
        max-height: none;
    }
}

/* ===== SMALL PHONE: 480px ===== */
@media (max-width: 480px) {

    /* Even less padding */
    .system-view {
        padding: 0.5rem;
    }

    .dashboard-view {
        padding: 0.5rem;
    }

    /* Candidates: also hide date column (1) */
    #candidatesSystem .data-table th:nth-child(1),
    #candidatesSystem .data-table td:nth-child(1) {
        display: none;
    }

    /* Programs: also hide district column (5) */
    .programs-table th:nth-child(5),
    .programs-table td:nth-child(5) {
        display: none;
    }

    /* Smaller table fonts */
    #candidatesSystem .data-table th,
    #candidatesSystem .data-table td,
    .programs-table th,
    .programs-table td,
    .onboarding-table th,
    .onboarding-table td {
        font-size: 0.75rem;
        padding: 0.4rem 0.2rem;
    }

    /* Stats: single column */
    .stat-box {
        flex: 1 1 100%;
    }

    /* Header actions: full width */
    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Status options: stack */
    .status-options {
        grid-template-columns: 1fr;
    }

    .stage-form .form-row {
        grid-template-columns: 1fr;
    }
}