/* =========================================================================
   ExcellMark — Global Responsive Safety Net
   Loaded AFTER style.css. Uses !important in media queries so it can override
   inline styles (an author !important rule beats an inline non-important one),
   which is necessary because most pages set grid/width via inline style="".
   Goal: nothing overflows or breaks down to ~360px, and it's PWA/notch-safe.
   ========================================================================= */

/* ---- 1. App-wide overflow guard ---------------------------------------- */
/* `clip` (not hidden) avoids creating a scroll container that would break the
   sticky top-nav. min-width:0 stops flex/grid children from forcing overflow. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}
img, video, canvas, svg, picture {
    max-width: 100%;
    height: auto;
}

/* ---- 2. PWA safe-area insets (notch / home indicator) ------------------ */
.sidebar {
    padding-left: env(safe-area-inset-left);
}
.top-nav {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-top: max(0.75rem, env(safe-area-inset-top));
}
.content-area {
    padding-bottom: max(2rem, calc(1rem + env(safe-area-inset-bottom)));
}

/* ---- 3. Tablet / small-desktop (<= 1024px) ----------------------------- */
@media (max-width: 1024px) {
    /* Collapse fixed 2-column "content + side panel" layouts (e.g. 1fr 340px,
       2fr 1fr) so the fixed side column never overflows a narrow viewport. */
    [style*="340px"][style*="grid-template-columns"],
    [style*="360px"][style*="grid-template-columns"],
    [style*="320px"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ---- 4. Phones / small tablets (<= 768px) ------------------------------ */
@media (max-width: 768px) {
    /* Stop flex/grid children from forcing horizontal overflow (mobile only,
       to avoid altering any desktop flex layout). Tables and their scroll
       wrappers are excluded so wide tables keep their min-width + scroll. */
    .content-area *:not(table):not([class*="table"]),
    .top-nav * {
        min-width: 0;
    }

    /* Collapse ALL inline & classed multi-column grids to a single column. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .grid-main,
    .grid-top,
    .grid-bottom,
    .dashboard-grid,
    .overdue-kpi-grid,
    .stage-summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cap oversized fixed-width elements to the viewport. max-width only bites
       when the element is actually wider than its container, so small fixed
       sizes (icons, avatars, buttons) are untouched. Tables are excluded so
       their horizontal-scroll wrappers keep working. */
    .content-area *:not(table):not(thead):not(tbody):not(tr):not(th):not(td) {
        max-width: 100%;
    }

    /* Reduce heavy desktop padding so content isn't squeezed. */
    .content-area {
        padding: 1rem 0.85rem max(1rem, env(safe-area-inset-bottom)) 0.85rem !important;
    }

    /* Wide flex rows should wrap instead of overflowing. */
    .top-nav-actions {
        flex-wrap: wrap !important;
    }

    /* Forms & inputs go full width for comfortable tapping. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100% !important;
    }

    /* Modals / dialogs fit the screen. */
    .modal, .modal-content, .modal-dialog, [class*="modal"] > div {
        max-width: 96vw !important;
    }

    /* Comfortable minimum touch target for icon-only controls. */
    button, .btn, a.btn, [role="button"] {
        min-height: 40px;
    }
}

/* ---- 5. Very small phones (<= 480px) ----------------------------------- */
@media (max-width: 480px) {
    /* Smooth momentum scrolling for the existing table scroll wrappers. */
    .table-container,
    .content-area [style*="overflow-x"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Tighten card padding. */
    .dash-card, .card, .settings-card, .export-card,
    .stage-summary-card, .overdue-kpi-card, .stage-table-card {
        padding: 1rem !important;
    }

    /* Big display numbers shouldn't overflow their cards. */
    .stage-summary-val, .overdue-kpi-val {
        font-size: 1.4rem !important;
    }

    /* Badges / status pills: keep their label on one line but never overflow
       the row — let the container wrap them onto the next line instead. */
    .badge, .status-pill, .role-badge,
    [class*="badge"], [class*="pill"] {
        max-width: 100%;
        white-space: nowrap;
    }
    .stage-actions-group,
    .top-nav-actions,
    .role-details h4 {
        flex-wrap: wrap;
    }
}

/* ---- 6. Mobile Job Cards & Feed Touch Responsiveness Guard -------------- */
@media (max-width: 640px) {
    .top-header {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    .search-box-row {
        gap: 0.5rem !important;
    }
    .search-input-wrapper input {
        height: 44px !important;
        font-size: 0.8rem !important;
        padding-left: 2.3rem !important;
    }
    .search-input-wrapper i {
        left: 0.8rem !important;
        font-size: 0.85rem !important;
    }
    .filter-btn {
        height: 44px !important;
        padding: 0 0.75rem !important;
        font-size: 0.78rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .job-feed-card {
        padding: 1rem !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .job-meta-row {
        gap: 0.4rem 0.75rem !important;
        font-size: 0.78rem !important;
        flex-wrap: wrap !important;
    }
    .job-meta-item {
        white-space: normal !important;
        word-break: break-word !important;
    }
    .job-keywords-row {
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
        overflow: hidden !important;
    }
    .job-keyword-chip {
        font-size: 0.72rem !important;
        padding: 0.25rem 0.55rem !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .recruiter-info {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
    .recruiter-name {
        font-size: 0.88rem !important;
        word-break: break-word !important;
    }
    .job-card-title {
        font-size: 1.15rem !important;
        word-break: break-word !important;
    }
    .job-card-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}