/* Shared app responsiveness. Do not set sidebar offset — chrome CSS owns that. */

html {
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.page-header {
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
}

.page-header-right,
.page-header-actions,
.header-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.tab-bar {
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

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

iframe,
object,
embed {
    max-width: 100%;
}

#mainContent,
.main-content,
.main-content-wrapper,
.main-content-area,
.page-wrapper {
    min-width: 0;
    max-width: 100%;
}

.table-responsive,
.table-responsive-wrapper,
.table-card,
.section-card,
.panel,
.matrix-scroll,
.matrix-container {
    max-width: 100%;
}

.table-responsive,
.table-responsive-wrapper,
.matrix-scroll,
.table-card .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.card:has(> table),
.card:has(> .table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

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

.app-toast-stack {
    max-width: calc(100vw - 24px);
}

@media (max-width: 992px) {
    .stats-grid,
    .kpi-row,
    .interview-stats,
    .layout-grid,
    .card-grid,
    .filter-row,
    .matrix-stats,
    .roles-stats,
    .stats-row,
    .jobs-grid,
    .applicants-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .dashboard-grid,
    .two-column,
    .settings-layout,
    .form-row,
    .form-grid,
    .info-grid,
    .details-grid,
    .profile-grid,
    .content-grid,
    .create-role-grid,
    .permission-grid {
        grid-template-columns: 1fr !important;
    }

    .page-header,
    .page-header-right,
    .page-header-actions,
    .header-actions,
    .period-selector,
    .period-buttons,
    .tab-bar,
    .filter-row,
    .search-filter-bar,
    .filter-bar,
    .filter-card,
    .interview-card-head,
    .modal-footer,
    .app-dialog-actions {
        flex-wrap: wrap;
    }

    .table-card,
    .section-card,
    .panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-box,
    .app-dialog-box,
    .logout-modal-box {
        width: 94%;
        max-width: 94%;
        padding: 20px;
    }

    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-group {
        min-width: 0;
    }

    .tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-right,
    .page-header-actions,
    .header-actions {
        width: 100%;
    }

    .interview-stats,
    .layout-grid,
    .jobs-grid,
    .applicants-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .form-row,
    .form-grid,
    .info-grid,
    .details-grid,
    .status-options,
    .create-role-grid {
        grid-template-columns: 1fr !important;
    }

    .fc .fc-toolbar-title {
        font-size: 0.9rem;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px;
    }

    .search-filter-bar,
    .filter-bar,
    .period-selector,
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-filter-bar .filter-group,
    .filter-bar .filter-group,
    .period-selector .filter-group,
    .filter-group {
        width: 100%;
    }

    .info-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .stats-grid,
    .kpi-row,
    .interview-stats,
    .layout-grid,
    .card-grid,
    .stats-row,
    .jobs-grid,
    .applicants-grid,
    .matrix-stats,
    .roles-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    .page-header-left h2,
    .page-header-left h4,
    .page-header h1 {
        font-size: 1.05rem;
    }

    .page-header-right .header-btn,
    .page-header-actions .btn,
    .header-actions .btn {
        font-size: 12px;
        padding: 7px 12px;
    }

    .layout-grid,
    .dashboard-grid,
    .two-column {
        grid-template-columns: 1fr !important;
    }

    .stat-card .stat-number,
    .interview-stat .num {
        font-size: 1.15rem;
    }

    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-box,
    .app-dialog-box {
        padding: 16px;
    }

    .app-toast-stack {
        left: 12px;
        right: 12px;
        max-width: none;
    }

    .container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .tab-bar .tab,
    .tab-bar .btn {
        flex-shrink: 0;
    }
}