/* Global responsive layer for all application pages */

*,
*::before,
*::after {
    min-width: 0;
}

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

.main-content {
    width: 100%;
    overflow-x: hidden;
}

.chart-container canvas,
canvas {
    width: 100% !important;
}

.attendance-table,
.table-responsive,
.table-container,
.records-table,
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .chart-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .chart-container,
    .card,
    .stat-card,
    .team-card,
    .ministry-card,
    .assignment-card,
    .user-card,
    .cohort-card {
        width: 100% !important;
    }

    .stats-grid,
    .kpi-grid,
    .summary-grid,
    .team-grid,
    .ministry-grid,
    .assignment-grid,
    .cohort-grid,
    .week-grid,
    .users-grid,
    .user-grid,
    .cards-grid,
    .input-grid,
    .form-grid,
    .filter-grid {
        grid-template-columns: 1fr !important;
    }

    .header-flex,
    .filter-bar,
    .filters-section,
    .action-row,
    .button-row,
    .top-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .filter-select,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    textarea {
        width: 100%;
        max-width: 100%;
    }

    .btn,
    .filter-btn,
    .action-btn,
    .btn-purple,
    .btn-green {
        width: 100%;
        justify-content: center;
    }

    table {
        min-width: 680px !important;
    }
}

@media (max-width: 640px) {
    .main-content {
        padding: 10px !important;
        padding-top: calc(var(--header-offset, 170px) + 10px) !important;
    }

    h1 {
        font-size: 1.25rem !important;
    }

    h2 {
        font-size: 1.1rem !important;
    }

    .card,
    .chart-container,
    .stat-card,
    .assignment-card,
    .team-card,
    .ministry-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .metric-value,
    .stat-value,
    .kpi-number,
    .value {
        font-size: 1.1rem !important;
    }

    .chart-container canvas,
    canvas {
        max-height: 260px !important;
    }

    .badge,
    .badge-count {
        font-size: 0.65rem !important;
    }

    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    footer {
        margin-top: 24px !important;
        padding: 16px 0 !important;
    }

    footer > div {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}