/*
 * Shared responsive record windows for Organization and Reports.
 * Layout changes are based on the record panel width, not device names or the
 * viewport, so the same page also responds when the sidebar or browser changes.
 */

.responsive-records-window {
    --records-surface: #ffffff;
    --records-surface-muted: #f8fafc;
    --records-surface-accent: #edfafa;
    --records-border: #dce6ee;
    --records-border-soft: #e7eef4;
    --records-text: #172033;
    --records-text-secondary: #475569;
    --records-muted: #64748b;
    --records-accent: #0f766e;
    --records-accent-border: #a7ded8;
    --records-shadow: 0 10px 24px rgba(15, 23, 42, .07);
    container-name: hris-records;
    container-type: inline-size;
    min-width: 0;
    max-width: 100%;
}

html[data-theme="dark"] .responsive-records-window {
    --records-surface: #132229;
    --records-surface-muted: #101e25;
    --records-surface-accent: #173a35;
    --records-border: #344c57;
    --records-border-soft: #304852;
    --records-text: #eef5f7;
    --records-text-secondary: #c5d5db;
    --records-muted: #a8bac3;
    --records-accent: #9aeee6;
    --records-accent-border: #36766f;
    --records-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

.responsive-records-window :is(.records-toolbar, .report-header, .table-responsive) {
    min-width: 0;
    max-width: 100%;
}

.responsive-records-window :is(.employee-records-table-wrap, .reference-list-table-wrap, .report-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Medium record windows keep a table but remove nonessential columns. */
@container hris-records (min-width: 46.01rem) and (max-width: 70rem) {
    .responsive-records-window .responsive-records-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }

    .responsive-records-employees .responsive-records-table :is(th:nth-child(6), td[data-label="Basic Salary"]),
    .responsive-records-departments .responsive-records-table :is(th:nth-child(5), td[data-label="SSL - TRANCHE"]),
    .responsive-records-positions .responsive-records-table :is(th:nth-child(5), td[data-label="SSL - Tranche"]) {
        display: none !important;
    }

    .responsive-records-window .responsive-records-table :is(th, td) {
        padding-inline: clamp(.45rem, 1cqi, .75rem) !important;
    }
}

/* Compact record windows become concise, touch-friendly cards. */
@container hris-records (max-width: 46rem) {
    .responsive-records-window :is(.employee-records-table-wrap, .reference-list-table-wrap, .report-table-wrap) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .responsive-records-window .responsive-records-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
    }

    .responsive-records-window .responsive-records-table thead {
        display: none !important;
    }

    .responsive-records-window .responsive-records-table tbody {
        display: grid !important;
        width: 100% !important;
        gap: clamp(.65rem, 2cqi, .9rem) !important;
    }

    .responsive-records-window .responsive-records-table tbody tr {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem .7rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(.78rem, 2.5cqi, 1rem) !important;
        color: var(--records-text) !important;
        border: 1px solid var(--records-border) !important;
        border-radius: 16px !important;
        background: var(--records-surface) !important;
        box-shadow: var(--records-shadow) !important;
    }

    .responsive-records-window .responsive-records-table tbody tr:hover {
        border-color: var(--records-accent-border) !important;
        background: var(--records-surface) !important;
    }

    .responsive-records-window .responsive-records-table td,
    .responsive-records-window .responsive-records-table td[data-label] {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        color: var(--records-text-secondary) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .responsive-records-window .responsive-records-table td::before {
        content: none !important;
        display: none !important;
    }

    .responsive-records-window .responsive-records-table td[data-label="#"],
    .responsive-records-employees .responsive-records-table :is(td[data-label="SG-SI"], td[data-label="Basic Salary"]),
    .responsive-records-departments .responsive-records-table td[data-label="SSL - TRANCHE"],
    .responsive-records-positions .responsive-records-table td[data-label="SSL - Tranche"] {
        display: none !important;
    }

    .responsive-records-window .responsive-records-table :is(
        td[data-label="ID No."],
        td[data-label="CODE"],
        td[data-label="Item No."]
    ) {
        position: absolute !important;
        top: clamp(.78rem, 2.5cqi, 1rem) !important;
        right: clamp(.78rem, 2.5cqi, 1rem) !important;
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        max-width: 38% !important;
        min-height: 28px !important;
        padding: .25rem .55rem !important;
        color: var(--records-text-secondary) !important;
        font-size: .74rem;
        font-weight: 800;
        white-space: nowrap !important;
        border: 1px solid var(--records-border) !important;
        border-radius: 999px !important;
        background: var(--records-surface-muted) !important;
    }

    .responsive-records-window .responsive-records-table :is(
        td[data-label="Employee Name"],
        td[data-label="DEPARTMENT"],
        td[data-label="Position"],
        td[data-label="Annex"]
    ) {
        grid-column: 1 / -1 !important;
        padding-right: min(38%, 7rem) !important;
        color: var(--records-text) !important;
        font-size: clamp(.9rem, 2.4cqi, 1rem);
        line-height: 1.3;
    }

    .responsive-records-window .responsive-records-table :is(
        td[data-label="Employee Name"] .employee-link,
        td[data-label="Employee Name"] strong,
        td[data-label="DEPARTMENT"] strong,
        td[data-label="Position"] strong
    ) {
        color: var(--records-text) !important;
    }

    .responsive-records-window .responsive-records-table :is(
        td[data-label="Position / Department"],
        td[data-label="DEPARTMENT HEAD"],
        td[data-label="Department"]
    ) {
        grid-column: 1 / -1 !important;
        padding: .62rem .7rem !important;
        border: 1px solid var(--records-border-soft) !important;
        border-radius: 11px !important;
        background: var(--records-surface-muted) !important;
    }

    .responsive-records-window .responsive-records-table :is(
        td[data-label="SG-SI"],
        td[data-label="Status"],
        td[data-label="Effective Date"],
        td[data-label="Hired Date / Years"],
        td[data-label="Birthdate"],
        td[data-label="Age"],
        td[data-label="Appointment Date"]
    ) {
        width: max-content !important;
        max-width: 100% !important;
        padding: .32rem .6rem !important;
        color: var(--records-accent) !important;
        font-size: .76rem;
        font-weight: 800;
        border: 1px solid var(--records-accent-border) !important;
        border-radius: 999px !important;
        background: var(--records-surface-accent) !important;
    }

    .responsive-records-window .responsive-records-table td.action-cell {
        grid-column: 1 / -1 !important;
        padding-top: .6rem !important;
        border-top: 1px solid var(--records-border-soft) !important;
    }

    .responsive-records-window .responsive-records-table td.action-cell :is(.row-actions, .inline-action-form) {
        min-width: 0;
    }

    .responsive-records-window .responsive-records-table td.action-cell .row-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
        gap: .45rem !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    .responsive-records-window .responsive-records-table td.action-cell :is(.action-button, .report-print-button, .inline-action-form) {
        width: 100% !important;
    }

    .responsive-records-window .responsive-records-table td.action-cell :is(.action-button, .report-print-button) {
        min-width: 44px !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    .responsive-records-window .pagination-row-with-jump,
    .responsive-records-window .pagination-jump-form {
        max-width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }
}

/* Graceful fallback for browsers without container-query support. */
@supports not (container-type: inline-size) {
    @media (max-width: 780px) {
        .responsive-records-window {
            overflow-x: auto;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .responsive-records-window *,
    .responsive-records-window *::before,
    .responsive-records-window *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}