/* ============================================================
   FILE: Content/css/responsive.css
   Global Mobile & Tablet Responsiveness Overrides
   ============================================================ */

/* ── Prevent horizontal scroll on all screen sizes ───────── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Charts Grid (Admin Dashboard) ───────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

/* ── Form pages common responsive ────────────────────────── */
.admin-form-page .admin-section {
    margin: 0;
}

/* ============================================================
   TABLET — max-width: 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .charts-grid {
        gap: 16px;
    }

    /* Syncfusion grids: ensure horizontal scroll */
    .e-grid {
        font-size: 0.82rem !important;
    }
}

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

    /* ── Charts Grid stacks ──────────────────────────────── */
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .charts-grid .admin-section {
        margin-bottom: 0;
    }

    .charts-grid #statusChart,
    .charts-grid #teamChart {
        min-height: 250px !important;
    }

    /* ── Admin Header Actions ────────────────────────────── */
    .admin-header {
        overflow: visible !important;
    }

    .admin-header > div {
        width: 100%;
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .admin-header > div .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Admin Section title wrapping ────────────────────── */
    .admin-section-title {
        font-size: 0.95rem !important;
        flex-wrap: wrap;
    }

    /* ── Stats Grid on mobile (override inline styles) ───── */
    .stats-grid,
    .stats-grid[style] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* ── Syncfusion Grid Mobile ──────────────────────────── */
    .e-grid .e-toolbar {
        padding: 8px !important;
    }

    .e-grid .e-toolbar .e-input-group {
        width: 100% !important;
    }

    .e-grid .e-pager {
        padding: 8px !important;
    }

    .e-grid .e-pager .e-pagercontainer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .e-grid .e-pagesizes {
        display: none !important;
    }

    /* ── Dashboard grids: responsive on mobile ──────────────── */
    .admin-section {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }

    /* Let grids with hideAtMedia fit naturally without forced min-width */
    .admin-section .e-grid {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Only force min-width on grids that DON'T use hideAtMedia (training grid in checklist) */
    #trainingGrid .e-grid {
        min-width: 580px !important;
        width: auto !important;
    }

    /* Wider grids for pages with many columns - fallback if hideAtMedia not supported */
    #employeeGrid .e-grid,
    #supervisorGrid .e-grid {
        min-width: 0 !important;
    }

    #hrEmployeeGrid .e-grid {
        min-width: 0 !important;
    }

    /* Steps page grids */
    [id^="stepsGrid_"] .e-grid {
        min-width: 0 !important;
    }

    /* ── Checklist & ViewEmployee Page Mobile ─────────────── */
    .checklist-page,
    .admin-page {
        padding: 1rem 0.75rem 2rem !important;
        max-width: 100vw !important;
    }

    /* Only hide overflow on checklist pages, not admin grid pages */
    .checklist-page {
        overflow-x: hidden !important;
    }

    .checklist-page .checklist-header,
    .admin-page .checklist-header {
        padding: 1rem;
    }

    .checklist-page .emp-info,
    .admin-page .emp-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .checklist-page .emp-status,
    .admin-page .emp-status {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .checklist-page .emp-details,
    .admin-page .emp-details {
        width: 100%;
    }

    .checklist-page .emp-meta,
    .admin-page .emp-meta {
        flex-wrap: wrap;
    }

    .checklist-page .progress-info,
    .admin-page .progress-info {
        font-size: 0.8rem;
    }

    /* Steps list container */
    .steps-list {
        overflow: hidden !important;
    }

    .checklist-section {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Step rows on mobile */
    .step-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .step-row .step-icon {
        flex-shrink: 0;
    }

    .step-row .step-body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
        flex: 1 1 100% !important;
    }

    .step-row .step-header > div:first-child {
        flex-wrap: wrap;
    }

    .step-row .step-action {
        width: 100%;
    }

    .step-row .step-action .btn {
        width: 100%;
        justify-content: center;
    }

    /* Step meta wrapping */
    .step-meta {
        flex-wrap: wrap !important;
    }

    .step-desc {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ── Training assign form stacks on mobile ───────────── */
    #assignTrainingForm {
        grid-template-columns: 1fr !important;
    }

    #assignTrainingForm button[type="submit"] {
        width: 100%;
    }

    /* ── Training grid overflow ──────────────────────────── */
    #step-training-assignments {
        overflow: visible !important;
    }

    #step-training-assignments .step-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        min-width: 0 !important;
    }

    #trainingGrid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        width: 100% !important;
    }

    #trainingGrid .e-grid {
        min-width: 580px !important;
        width: auto !important;
        overflow: visible !important;
    }

    #trainingGrid .e-gridcontent {
        overflow: visible !important;
    }

    #trainingGrid .e-grid .e-gridheader,
    #trainingGrid .e-grid .e-gridcontent {
        overflow: visible !important;
    }

    /* ── Modals Mobile ───────────────────────────────────── */
    .modal-box {
        max-width: 95vw !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Home Page Hero ──────────────────────────────────── */
    .hero-section {
        padding: 2rem 1rem 1.5rem !important;
    }

    /* ── Form pages ──────────────────────────────────────── */
    .employee-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 1rem !important;
    }

    .back-button-mobile {
        padding: 0 0.75rem !important;
    }

    .info-banner-mobile,
    .security-banner-mobile {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        padding: 12px 1rem !important;
    }

    .form-actions-mobile {
        padding: 0 1rem 1.5rem !important;
        flex-wrap: wrap;
    }

    .form-actions-mobile .btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    /* ── Checklist step notes ────────────────────────────── */
    .step-notes {
        font-size: 0.72rem;
    }

    .step-meta {
        font-size: 0.72rem;
        gap: 0.3rem 0.6rem;
    }

    /* ── Image Viewer Dialog ─────────────────────────────── */
    .e-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
    }

    .e-dialog .e-dlg-content {
        padding: 0.75rem !important;
    }

    #imageViewerImg {
        max-height: 50vh !important;
    }
}

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

    /* ── Charts Grid ─────────────────────────────────────── */
    .charts-grid #statusChart,
    .charts-grid #teamChart {
        min-height: 200px !important;
    }

    /* ── Admin Header ────────────────────────────────────── */
    .admin-header {
        margin-bottom: 1rem;
    }

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

    .admin-header > p {
        font-size: 0.78rem;
    }

    .admin-header > div .btn {
        font-size: 0.78rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* ── Stats Grid — Show 2 cols on small mobile ────────── */
    .stats-grid,
    .stats-grid[style] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        display: grid !important;
    }

    .stat-card {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .stat-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .stat-info h2 {
        font-size: 1.2rem !important;
    }

    .stat-info p {
        font-size: 0.65rem !important;
    }

    /* ── Syncfusion Grid ─────────────────────────────────── */
    .e-grid .e-rowcell {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
    }

    .e-grid .e-headercell {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
    }

    .e-grid .e-toolbar .e-search {
        width: 100% !important;
    }

    /* ── Checklist Mobile ────────────────────────────────── */
    .checklist-page {
        padding: 1rem 0.5rem 2rem !important;
    }

    .checklist-header {
        padding: 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }

    .emp-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.85rem !important;
    }

    .emp-details h1 {
        font-size: 1rem !important;
    }

    .emp-meta {
        font-size: 0.7rem !important;
        gap: 0.3rem 0.6rem !important;
    }

    .checklist-section-title {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .badge-count {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.5rem !important;
    }

    .step-row {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .step-title {
        font-size: 0.85rem !important;
    }

    .step-desc {
        font-size: 0.75rem !important;
    }

    .step-order {
        font-size: 0.65rem !important;
        padding: 0.1rem 0.4rem !important;
    }

    /* ── Form pages ──────────────────────────────────────── */
    .employee-form-grid {
        padding: 0.75rem 0.5rem 0 !important;
        gap: 12px !important;
    }

    .form-actions-mobile {
        flex-direction: column !important;
        padding: 0 0.5rem 1rem !important;
        gap: 6px !important;
    }

    .form-actions-mobile .btn {
        width: 100% !important;
        min-width: auto !important;
    }

    .info-banner-mobile,
    .security-banner-mobile {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        padding: 10px 0.75rem !important;
        gap: 8px !important;
        font-size: 0.75rem !important;
    }

    .info-banner-mobile div,
    .security-banner-mobile div {
        font-size: 0.72rem !important;
    }

    /* ── Modals ──────────────────────────────────────────── */
    .modal-header {
        padding: 0.85rem 1rem !important;
    }

    .modal-header h3 {
        font-size: 0.95rem !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        padding: 0.85rem 1rem !important;
    }

    /* ── Home Page ───────────────────────────────────────── */
    .hero-section {
        padding: 1.5rem 0.75rem !important;
    }

    .hero-title {
        font-size: 1.4rem !important;
    }

    .hero-sub {
        font-size: 0.85rem !important;
    }

    /* ── Upload modal preview ────────────────────────────── */
    #uploadPreview img {
        max-height: 150px !important;
    }

    /* ── Training grid inside checklist ──────────────────── */
    #step-training-assignments .step-body {
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #trainingGrid .e-grid {
        font-size: 0.75rem !important;
        min-width: 450px !important;
    }

    #trainingGrid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Assign training form small mobile ───────────────── */
    #assignTrainingForm {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* ── Step row content on small screens ────────────────── */
    .step-row .step-body {
        width: 100% !important;
        min-width: 0 !important;
    }

    .step-header > div:first-child {
        flex-wrap: wrap !important;
        gap: 0.3rem !important;
    }

    /* ── Deleted steps mobile ────────────────────────────── */
    .step-row .step-action {
        width: 100%;
        margin-top: 8px;
    }

    .step-row .step-action .btn {
        width: 100%;
        justify-content: center;
    }

    /* ── ViewEmployee activation banners ─────────────────── */
    .admin-page > div[style*="display:flex"][style*="flex-wrap:wrap"] {
        flex-direction: column;
        text-align: center;
    }
}