/* Global responsive and offline hardening for PESO pages. */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    overflow-x: hidden;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

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

img {
    height: auto;
}

button, input, select, textarea {
    max-width: 100%;
    font: inherit;
}

textarea {
    resize: vertical;
}

:where(.container, .page, .main-content, .dashboard-content, .content, .wrapper, .portal, .app-shell) {
    max-width: 100%;
}

:where(.grid, .stats-grid, .cards-grid, .job-grid, .jobs-grid, .announcements-grid, .tutorials-grid, .filters-grid, .form-grid, .dashboard-grid, .quick-actions, .summary-grid) {
    min-width: 0;
}

:where(.card, .job-card, .stat-card, .announcement-card, .application-card, .applicant-card, .table-card, .profile-card, .info-card, .settings-card, .modal-content, .job-modal, .modal-container) {
    min-width: 0;
}

:where(.table-wrapper, .table-container, .applications-table, .reports-table, .admin-table, .data-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

td, th {
    word-break: normal;
}

.peso-responsive-table {
    max-width: 100%;
}

.peso-image-fallback,
img[data-peso-fallback="company"] {
    object-fit: contain;
    background: rgba(255, 255, 255, 0.08);
}

/* Font Awesome offline fallback. Enabled by js/peso-system.js only when FA is unavailable. */
html.peso-offline-icons :where(.fa, .fas, .far, .fab) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    min-height: 1em;
    font-family: Arial, "Segoe UI Symbol", sans-serif !important;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-rendering: auto;
}

html.peso-offline-icons :where(.fa, .fas, .far, .fab)::before {
    content: "*";
}

html.peso-offline-icons .fa-search::before { content: "?"; }
html.peso-offline-icons .fa-times::before,
html.peso-offline-icons .fa-times-circle::before { content: "x"; }
html.peso-offline-icons .fa-check::before,
html.peso-offline-icons .fa-check-circle::before,
html.peso-offline-icons .fa-check-double::before { content: "OK"; font-size: 0.72em; }
html.peso-offline-icons .fa-plus::before,
html.peso-offline-icons .fa-plus-circle::before { content: "+"; }
html.peso-offline-icons .fa-minus::before { content: "-"; }
html.peso-offline-icons .fa-arrow-left::before,
html.peso-offline-icons .fa-chevron-left::before,
html.peso-offline-icons .fa-angle-left::before,
html.peso-offline-icons .fa-angle-double-left::before { content: "<"; }
html.peso-offline-icons .fa-arrow-right::before,
html.peso-offline-icons .fa-chevron-right::before,
html.peso-offline-icons .fa-angle-right::before,
html.peso-offline-icons .fa-angle-double-right::before { content: ">"; }
html.peso-offline-icons .fa-chevron-down::before { content: "v"; }
html.peso-offline-icons .fa-arrow-up::before { content: "^"; }
html.peso-offline-icons .fa-bars::before { content: "="; }
html.peso-offline-icons .fa-home::before { content: "H"; }
html.peso-offline-icons .fa-user::before,
html.peso-offline-icons .fa-user-circle::before,
html.peso-offline-icons .fa-user-graduate::before,
html.peso-offline-icons .fa-user-tie::before,
html.peso-offline-icons .fa-user-check::before,
html.peso-offline-icons .fa-user-plus::before,
html.peso-offline-icons .fa-user-minus::before { content: "U"; }
html.peso-offline-icons .fa-users::before { content: "Us"; font-size: 0.72em; }
html.peso-offline-icons .fa-building::before { content: "B"; }
html.peso-offline-icons .fa-briefcase::before { content: "J"; }
html.peso-offline-icons .fa-calendar::before,
html.peso-offline-icons .fa-calendar-alt::before,
html.peso-offline-icons .fa-calendar-check::before,
html.peso-offline-icons .fa-calendar-day::before,
html.peso-offline-icons .fa-calendar-plus::before,
html.peso-offline-icons .fa-calendar-times::before,
html.peso-offline-icons .fa-calendar-week::before { content: "D"; }
html.peso-offline-icons .fa-clock::before,
html.peso-offline-icons .fa-hourglass-half::before,
html.peso-offline-icons .fa-hourglass-end::before { content: "T"; }
html.peso-offline-icons .fa-map-marker-alt::before,
html.peso-offline-icons .fa-map::before,
html.peso-offline-icons .fa-city::before,
html.peso-offline-icons .fa-globe::before { content: "@"; }
html.peso-offline-icons .fa-envelope::before,
html.peso-offline-icons .fa-envelope-open-text::before,
html.peso-offline-icons .fa-mail-bulk::before { content: "M"; }
html.peso-offline-icons .fa-phone::before,
html.peso-offline-icons .fa-phone-alt::before { content: "P"; }
html.peso-offline-icons .fa-lock::before,
html.peso-offline-icons .fa-shield-alt::before { content: "#"; }
html.peso-offline-icons .fa-bell::before,
html.peso-offline-icons .fa-bell-slash::before { content: "!"; }
html.peso-offline-icons .fa-info-circle::before,
html.peso-offline-icons .fa-question-circle::before { content: "i"; }
html.peso-offline-icons .fa-exclamation::before,
html.peso-offline-icons .fa-exclamation-circle::before,
html.peso-offline-icons .fa-exclamation-triangle::before { content: "!"; }
html.peso-offline-icons .fa-edit::before,
html.peso-offline-icons .fa-pen::before { content: "E"; }
html.peso-offline-icons .fa-trash-alt::before { content: "X"; }
html.peso-offline-icons .fa-save::before,
html.peso-offline-icons .fa-download::before,
html.peso-offline-icons .fa-upload::before { content: "S"; }
html.peso-offline-icons .fa-file-alt::before,
html.peso-offline-icons .fa-file-pdf::before,
html.peso-offline-icons .fa-file-csv::before,
html.peso-offline-icons .fa-file-signature::before { content: "F"; }
html.peso-offline-icons .fa-chart-line::before,
html.peso-offline-icons .fa-chart-bar::before,
html.peso-offline-icons .fa-chart-pie::before { content: "%"; }
html.peso-offline-icons .fa-star::before,
html.peso-offline-icons .fa-award::before,
html.peso-offline-icons .fa-trophy::before { content: "*"; }
html.peso-offline-icons .fa-fire::before,
html.peso-offline-icons .fa-bolt::before { content: "!"; }
html.peso-offline-icons .fa-money-bill-wave::before,
html.peso-offline-icons .fa-coins::before { content: "$"; }
html.peso-offline-icons .fa-spinner::before,
html.peso-offline-icons .fa-circle-notch::before,
html.peso-offline-icons .fa-sync::before,
html.peso-offline-icons .fa-sync-alt::before,
html.peso-offline-icons .fa-redo::before,
html.peso-offline-icons .fa-redo-alt::before { content: "..."; font-size: 0.7em; }

/* Shared navigation behavior for the legacy Admin pages. Their full sidebar is
   already present on desktop, so the collapse control is only needed on mobile. */
.sidebar-toggle-btn {
    display: none !important;
}

:where(.profile-dropdown, .dropdown, .pd-menu) a:hover {
    border-radius: 8px;
}

:where(.sidebar, .side-nav) a[href="logout.php"],
:where(.profile-dropdown, .dropdown, .pd-menu) a[href="logout.php"] {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-radius: 8px;
}

:where(.sidebar, .side-nav) a[href="logout.php"]:hover,
:where(.profile-dropdown, .dropdown, .pd-menu) a[href="logout.php"]:hover {
    background: #b91c1c !important;
}

.peso-offline-calendar {
    border: 1px solid var(--card-border, rgba(15, 23, 42, 0.14));
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-bg, #fff);
}

.peso-offline-calendar__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border, rgba(15, 23, 42, 0.14));
    flex-wrap: wrap;
}

.peso-offline-calendar__title {
    font-weight: 800;
    color: var(--text-primary, #10231e);
}

.peso-offline-calendar__list {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.peso-offline-calendar__event {
    border: 1px solid var(--card-border, rgba(15, 23, 42, 0.14));
    border-left: 4px solid var(--accent, #0a4d3b);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-primary, #10231e);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.peso-offline-calendar__date {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary, #64748b);
    font-size: 0.82rem;
}

.peso-offline-calendar__empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-secondary, #64748b);
}

@media (max-width: 1024px) {
    .sidebar-toggle-btn {
        display: inline-flex !important;
    }
    :where(.stats-grid, .cards-grid, .job-grid, .jobs-grid, .announcements-grid, .tutorials-grid, .filters-grid, .form-grid, .dashboard-grid, .quick-actions, .summary-grid) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    }

    :where(.header-inner, .topbar, .toolbar, .filter-bar, .filter-actions, .page-header, .section-header, .job-card-header, .card-header) {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    body {
        min-width: 0 !important;
    }

    :where(.container, .page, .main-content, .dashboard-content, .content, .card-body, .modal-body) {
        padding-left: clamp(12px, 4vw, 20px) !important;
        padding-right: clamp(12px, 4vw, 20px) !important;
    }

    :where(.sidebar, .side-nav) {
        max-width: min(86vw, 320px) !important;
    }

    :where(.job-card, .application-card, .applicant-card, .announcement-card, .profile-card, .info-card, .settings-card) {
        width: 100% !important;
    }

    :where(.filters-grid, .form-grid, .grid, .job-meta-grid, .details-grid, .profile-grid) {
        grid-template-columns: 1fr !important;
    }

    :where(.filter-actions, .job-actions, .modal-footer, .form-actions, .button-row, .actions) {
        flex-direction: column;
        align-items: stretch;
    }

    :where(.filter-actions a, .filter-actions button, .job-actions a, .job-actions button, .modal-footer button, .modal-footer a, .form-actions button, .form-actions a) {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    :where(table) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    :where(.modal-content, .job-modal, .modal-container, .peso-confirm-dialog) {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    :where(.modal-overlay, .peso-confirm-backdrop) {
        padding: 12px !important;
    }

    :where(h1) {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
    }

    :where(h2) {
        font-size: clamp(1.35rem, 6vw, 2rem) !important;
    }
}

@media (max-width: 480px) {
    :where(.container, .page, .main-content, .dashboard-content, .content) {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    :where(.card, .job-card, .announcement-card, .application-card, .applicant-card, .profile-card, .info-card, .settings-card) {
        border-radius: 16px !important;
    }

    :where(.nav, .header-nav, .tabs, .tab-nav, .quick-filters, .filter-chips) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
}