/**
 * GreenHRM global responsive layer
 * Loaded after app.css — phone / tablet / desktop.
 * Desktop (≥901px) stays largely unchanged.
 */

/* ---------- Base: never clip scrollable regions ---------- */
html {
    max-width: 100%;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

.content,
.content-body,
.table-card,
.settings-content,
.settings-panel,
.settings-group-card {
    max-width: 100%;
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Touch-friendly scroll surfaces */
.table-wrap,
.table-responsive,
.dataTables_wrapper,
.bulk-days-table-wrap,
.bulk-misc-table-wrap,
.bulk-salary-table-wrap,
.bulk-entry-grid-wrap,
.leave-app-table-wrap,
.attendance-stats-table-wrap,
.report-table-wrap,
.permissions-table-wrap,
.payroll-preview-wrap,
.shift-calendar-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Mobile-stack card rows (opt-in via .mobile-stack + data-label) */
@media (max-width: 560px) {
    .table-wrap table.mobile-stack,
    table.mobile-stack {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    table.mobile-stack thead {
        display: none;
    }

    table.mobile-stack tbody,
    table.mobile-stack tr,
    table.mobile-stack td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    table.mobile-stack tbody tr {
        background: #fff;
        border: 1px solid var(--line, #d7e3da);
        border-radius: 14px;
        padding: 10px 12px;
        box-shadow: 0 8px 20px rgba(8, 72, 40, 0.06);
    }

    table.mobile-stack td {
        border: 0 !important;
        padding: 6px 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    table.mobile-stack td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 2px;
    }

    table.mobile-stack td.dtr-control,
    table.mobile-stack td:empty {
        display: none !important;
    }

    table.mobile-stack td[data-label=""]::before,
    table.mobile-stack td:not([data-label])::before {
        display: none;
    }
}

/* ---------- Tablet (≤1100px) ---------- */
@media (max-width: 1100px) {
    .compact-crud-form,
    .settings-form-grid,
    .employee-leave-fields,
    .fields-grid,
    .filter-grid,
    .job-filter-card,
    .candidate-filter-card,
    .report-layout {
        grid-template-columns: 1fr 1fr !important;
    }

    .report-layout {
        display: grid !important;
        gap: 14px !important;
    }
}

/* ---------- Mobile / small tablet (≤900px) — primary breakpoint ---------- */
@media (max-width: 900px) {
    .content-body {
        padding: 14px 12px 22px !important;
    }

    .table-card,
    .card-panel,
    .settings-group-card,
    .panel {
        padding-left: 12px !important;
        padding-right: 12px !important;
        border-radius: 14px !important;
    }

    .table-head-row,
    .action-wrap,
    .toolbar,
    .dt-toolbar,
    .bulk-days-toolbar,
    .attendance-stats-toolbar,
    .job-page-actions,
    .candidate-import-actions,
    .filter-actions,
    .form-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .filter-actions .btn-link,
    .filter-actions .btn-submit,
    .filter-actions button,
    .action-wrap .btn-link,
    .action-wrap .btn-submit,
    .action-wrap a.btn-link,
    .table-head-row > .btn-link,
    .table-head-row > a.btn-link {
        width: 100%;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* Touch targets */
    .btn-submit,
    .btn-link,
    a.btn-link,
    button.btn-link,
    .btn-ghost,
    .dt-button,
    .content button[type="submit"],
    .content .btn-mini,
    .filter-actions button,
    .form-actions button,
    .form-actions a {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    .content input[type="text"],
    .content input[type="email"],
    .content input[type="password"],
    .content input[type="number"],
    .content input[type="date"],
    .content input[type="time"],
    .content input[type="search"],
    .content input[type="tel"],
    .content input[type="file"],
    .content select,
    .content textarea,
    .form-field input,
    .form-field select,
    .form-field textarea,
    #employee-filter-form input,
    #employee-filter-form select {
        min-height: 44px;
        font-size: 16px !important; /* avoid iOS zoom */
    }

    .content textarea {
        min-height: 88px;
    }

    .dt-toolbar > *,
    .dataTables_wrapper .dt-toolbar,
    .dataTables_length,
    .dataTables_filter,
    .dt-buttons {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
    }

    .dataTables_filter label,
    .dataTables_length label {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
    }

    .dataTables_filter input,
    .dataTables_length select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-left: 0 !important;
    }

    .dt-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .dt-buttons .dt-button {
        margin: 0 !important;
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
    }

    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        padding-top: 10px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-height: 36px;
        min-width: 36px;
        padding: 6px 10px !important;
    }

    .dataTables_wrapper .dataTables_info {
        float: none !important;
        text-align: center !important;
        padding-top: 8px;
    }

    .dt-footer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Force single-column forms / filters */
    .compact-crud-form,
    .settings-form-grid,
    .compact-crud-form .compact-crud-grid-four,
    .compact-crud-form .form-grid,
    .travel-reimb-grid,
    .loan-advance-form-grid,
    .employee-leave-fields,
    .leave-core-grid,
    .fields-attendance-update,
    .fields-grid,
    .filter-grid,
    .attendance-stats-toolbar,
    .bulk-days-filters,
    .bulk-filter-grid,
    .bulk-salary-filter-grid,
    .candidate-filter-card,
    .job-filter-card,
    .candidate-import-card,
    .profile-import-card,
    .report-layout,
    .hierarchy-grid,
    .detail-grid,
    .auth-wrap,
    .leave-app-form-grid,
    .exit-form,
    #employee-filter-form .filter-grid,
    .employee-form .form-grid,
    .employee-form .fields-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

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

    .report-side {
        max-height: none !important;
    }

    .travel-reimb-span-full,
    .travel-reimb-actions,
    .travel-reimb-location,
    .settings-field-full {
        grid-column: 1 / -1 !important;
    }

    .btn-submit,
    .form-actions .btn-link,
    .form-actions button {
        width: 100%;
    }

    /* Alerts readable */
    .alert,
    .software-update-alert {
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
        padding: 12px 14px !important;
    }

    /* Settings / workspace side menus become chip scroller */
    .settings-workspace {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 12px !important;
    }

    .settings-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        max-height: none !important;
        height: auto !important;
        padding-bottom: 6px;
    }

    .settings-menu a,
    .settings-menu span,
    .settings-menu button {
        flex: 0 0 auto !important;
        white-space: nowrap;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    /* Bulk / matrix tables: keep H-scroll, shrink sticky cols */
    .bulk-days-table {
        min-width: 1100px !important;
    }

    .bulk-misc-table {
        min-width: 1100px !important;
    }

    .bulk-leave-table,
    .bulk-weekoff-table {
        min-width: 980px !important;
    }

    .leave-app-table {
        min-width: 920px !important;
    }

    .bulk-entry-grid-table {
        min-width: 900px !important;
    }

    /* Desktop matrix stays wide; mobile uses card list in attendance_stats.php */
    .attendance-stats-table-shell .attendance-stats-table,
    .attendance-stats-table-shell .attendance-time-table {
        min-width: 860px !important;
    }

    .shift-calendar-table th,
    .shift-calendar-table td {
        min-width: 150px !important;
    }

    .employee-info-col,
    .bulk-entry-sticky-col,
    .sticky-col-1,
    .sticky-col-2 {
        min-width: 120px !important;
        width: 120px !important;
        max-width: 130px !important;
    }

    /* Phone matrices: unfreeze sticky cols — they block H-scroll on narrow screens */
    .attendance-stats-table .sticky-col,
    .attendance-stats-table .summary-col-sticky,
    .attendance-stats-table thead .sticky-col,
    .attendance-stats-table thead .summary-col-sticky,
    .attendance-time-table .sticky-col,
    .attendance-time-table .summary-col-sticky,
    .bulk-days-table .employee-info-col,
    .bulk-days-table thead .employee-info-col,
    .bulk-misc-table .employee-info-col,
    .bulk-salary-table .employee-info-col,
    .bulk-salary-table thead .employee-info-col {
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    .attendance-stats-table .sticky-col-1,
    .attendance-stats-table .sticky-col-2,
    .attendance-time-table .sticky-col-1,
    .attendance-time-table .sticky-col-2 {
        min-width: 150px !important;
        max-width: 170px !important;
        width: 150px !important;
    }

    .attendance-stats-table .employee-info-cell strong,
    .attendance-stats-table .employee-info-cell small,
    .attendance-time-table .employee-info-cell strong,
    .attendance-time-table .employee-info-cell small {
        max-width: 150px !important;
    }

    /* Keep name + ID; hide long dept/designation/grade on very small sticky-feel cells */
    .attendance-stats-table .employee-info-cell small:nth-child(n+3),
    .attendance-time-table .employee-info-cell small:nth-child(n+3) {
        display: none !important;
    }

    .attendance-stats-table .summary-col-sticky-left,
    .attendance-stats-table .summary-col-sticky-right,
    .attendance-time-table .summary-col-sticky-left,
    .attendance-time-table .summary-col-sticky-right {
        right: auto !important;
    }

    .select-col {
        min-width: 40px !important;
        width: 40px !important;
    }

    /* Employee attendance/shift day calendars */
    .attendance-day-cell,
    .shift-day-cell,
    .calendar-day-col,
    td.day-col,
    th.day-col {
        min-width: 72px !important;
    }

    /* Recruitment wide tables */
    .job-posts-table,
    .candidates-table,
    .shortlisted-table {
        min-width: 720px !important;
    }

    /* Report result tables */
    .report-table {
        min-width: 640px !important;
    }

    /* Permissions matrix */
    .permissions-table {
        min-width: 720px !important;
        font-size: 12px;
    }

    .permissions-table th,
    .permissions-table td {
        padding: 6px 4px !important;
    }

    /* Modals / dialogs — near fullscreen on phone */
    .attendance-meta-dialog,
    .leave-approval-dialog,
    .attendance-update-modal .dialog,
    .modal-dialog,
    .wipe-modal > div,
    .bank-confirm > div,
    .modal .modal-panel,
    .modal > .dialog,
    .modal > .modal-content,
    .modal > div:not(.modal-backdrop) {
        width: min(100vw - 16px, 560px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 2vh auto !important;
        max-height: 92dvh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .attendance-meta-modal,
    .leave-approval-modal,
    .attendance-update-modal,
    .wipe-modal,
    .bank-confirm,
    .modal {
        padding: 8px !important;
        align-items: flex-start !important;
    }

    /* Dashboard grids */
    .cards-grid,
    .action-grid,
    .stats-grid,
    .grid-4,
    .sa-dashboard .cards-grid,
    .sa-dashboard .action-grid,
    .ops-dashboard .cards-grid,
    .ops-dashboard .action-grid,
    .employee-dashboard .kpi-grid,
    .employee-dashboard .quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .snapshot-table {
        min-width: 480px !important;
    }

    /* Inputs never overflow */
    input,
    select,
    textarea,
    .form-field input,
    .form-field select,
    .form-field textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Sticky primary submit on long ESS forms */
    .travel-reimb-actions,
    .loan-advance-form-grid + .form-actions,
    .employee-leave-fields + .form-actions,
    .settings-panel .form-actions.is-sticky-mobile {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: linear-gradient(180deg, rgba(248, 252, 249, 0), #f8fcf9 28%);
        padding-top: 12px;
        padding-bottom: 4px;
    }

    /* Bulk filter chrome */
    .bulk-days-filters,
    .bulk-filter-grid,
    .bulk-salary-filter-grid,
    .bulk-days-filter-grid,
    .attendance-stats-toolbar,
    .payroll-processing-filter-grid {
        gap: 10px !important;
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    .bulk-days-toolbar .btn-submit,
    .bulk-days-toolbar .btn-link,
    .bulk-days-actions .btn-submit,
    .bulk-days-actions .btn-link,
    .bulk-days-actions button,
    .attendance-stats-toolbar .btn-submit,
    .attendance-stats-toolbar .btn-link,
    .bulk-salary-toolbar-actions .btn-submit,
    .bulk-salary-toolbar-actions .btn-link {
        width: 100%;
        min-height: 44px;
    }

    .permissions-table-wrap {
        border: 1px solid #dbe5ef;
        border-radius: 12px;
        padding: 4px;
    }

    /* Scroll hint for wide matrices */
    .bulk-days-table-wrap::before,
    .bulk-misc-table-wrap::before,
    .attendance-stats-table-wrap::before,
    .leave-app-table-wrap::before,
    .bulk-salary-table-wrap::before,
    .bulk-entry-grid-wrap::before,
    .report-table-wrap::before,
    .permissions-table-wrap::before {
        content: "Swipe sideways to see more →";
        display: block;
        font-size: 11px;
        color: #64748b;
        padding: 6px 10px 0;
        font-weight: 600;
    }

    /* Login / auth */
    .career-top-link {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto;
        justify-content: center;
    }

    .login-card-logo,
    .auth-logo {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- Phone (≤560px) ---------- */
@media (max-width: 560px) {
    .content-body {
        padding: 10px 8px 18px !important;
    }

    .cards-grid,
    .action-grid,
    .stats-grid,
    .grid-4,
    .sa-dashboard .cards-grid,
    .sa-dashboard .action-grid,
    .ops-dashboard .cards-grid,
    .ops-dashboard .action-grid,
    .employee-dashboard .kpi-grid,
    .employee-dashboard .quick-grid {
        grid-template-columns: 1fr !important;
    }

    .dt-buttons .dt-button {
        min-width: 100%;
    }

    .employee-info-col,
    .bulk-entry-sticky-col,
    .sticky-col-1,
    .sticky-col-2 {
        min-width: 110px !important;
        width: 110px !important;
        max-width: 120px !important;
        font-size: 12px;
        position: static !important;
    }

    .bulk-days-table {
        min-width: 900px !important;
    }

    .app-topbar h2 {
        font-size: 16px !important;
    }

    .table-head h3,
    .section-title {
        font-size: 15px !important;
    }

    .btn-link,
    .btn-submit,
    button.btn-link {
        min-height: 44px;
    }

    .table-card,
    .card-panel,
    .settings-group-card {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Compact action cells in lists */
    .action-wrap {
        gap: 8px !important;
    }

    .action-wrap .btn-mini,
    #employees-table td .action-wrap .btn-mini {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12px;
        max-width: none;
    }

    #employees-table td .action-wrap {
        max-width: none;
    }
}

/* ---------- Large phones landscape / small tablets ---------- */
@media (min-width: 561px) and (max-width: 900px) {
    .cards-grid,
    .action-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* DataTables child rows readable on mobile */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
    padding: 10px 12px !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
    display: grid;
    gap: 6px;
}

table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 100px;
    font-weight: 700;
}

/* ---------- Mobile filters: collapsed behind icon (≤900px) ---------- */
.mobile-filters-bar {
    display: none;
}

@media (max-width: 900px) {
    .mobile-filters-bar {
        display: block;
        margin: 0 0 12px;
    }

    .mobile-filters-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        border: 1px solid #cfe4d6;
        border-radius: 12px;
        background: #fff;
        color: #0b5132;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(8, 72, 40, 0.06);
    }

    .mobile-filters-toggle svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .mobile-filters-toggle .mobile-filters-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: #118a4f;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-filters-toggle .mobile-filters-badge[hidden] {
        display: none !important;
    }

    .mobile-filters-bar.is-open .mobile-filters-toggle {
        background: #ecfdf3;
        border-color: #86efac;
    }

    .mobile-filter-panel:not(.is-open) {
        display: none !important;
    }

    .mobile-filter-panel.is-open {
        display: grid !important;
        margin-bottom: 14px;
    }

    /* Keep employee filter form chrome when opened */
    #employee-filter-form.mobile-filter-panel.is-open {
        display: block !important;
    }

    form.attendance-stats-toolbar.mobile-filter-panel.is-open,
    form.report-filter-bar.mobile-filter-panel.is-open {
        display: flex !important;
        flex-direction: column !important;
    }

    form.bulk-days-filter-grid.mobile-filter-panel.is-open,
    form.bulk-salary-filter-grid.mobile-filter-panel.is-open,
    form.leave-app-filter-grid.mobile-filter-panel.is-open,
    form.bulk-entry-filter-grid.mobile-filter-panel.is-open,
    .bulk-salary-filter-grid.mobile-filter-panel.is-open,
    .payroll-processing-filter-grid.mobile-filter-panel.is-open,
    .job-filter-card.mobile-filter-panel.is-open,
    .candidate-filter-card.mobile-filter-panel.is-open,
    .interview-filter-grid.mobile-filter-panel.is-open,
    .shortlist-filter-grid.mobile-filter-panel.is-open {
        display: grid !important;
    }
}

@media (min-width: 901px) {
    .mobile-filters-bar {
        display: none !important;
    }

    .mobile-filter-panel {
        /* desktop: never hide via mobile collapse */
    }
}