/* Requests page ("Opdrachten", js/portal/pages/requests.js): tabs, list and the detail dialog.
   Shared building blocks (.tabs, .table, .badge, .details, .field) come from portal.css and coas.css. */

/* ---------- Tabs ---------- */

/* One row that scrolls sideways on narrow screens instead of wrapping. */
.requests__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.requests__tabs .tab {
    flex-shrink: 0;
    white-space: nowrap;
}

.requests__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- List ---------- */

.requests-table tbody tr.is-clickable:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: -2px;
}

.requests-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.requests-deadline-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.requests-deadline--none {
    color: var(--color-text-light);
}

.requests-deadline--now {
    color: #c2410c;
    font-weight: 600;
}

.requests-deadline--late {
    color: var(--color-danger);
    font-weight: 600;
}

.requests-check {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

.requests-forwarded {
    color: var(--color-text-light);
    white-space: nowrap;
}

/* Phones: every row becomes a small card with the column name before each value. */
@media (max-width: 40rem) {
    .requests-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .requests-table,
    .requests-table tbody,
    .requests-table tr,
    .requests-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .requests-table tbody tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .requests-table tbody tr:last-child {
        border-bottom: 0;
    }

    .requests-table td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        align-items: start;
        gap: 0.75rem;
        padding: 0.3rem 0.85rem;
        border-bottom: 0;
        overflow-wrap: anywhere;
    }

    .requests-table td[data-label]::before {
        content: attr(data-label);
        color: var(--color-text-light);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .requests-deadline-cell {
        white-space: normal;
    }

    .requests-table__forward .btn {
        justify-self: start;
    }
}

/* ---------- Detail dialog ---------- */

.request-detail {
    display: grid;
    gap: 1.5rem;
}

.request-detail .section {
    margin: 0;
}

.request-detail .section__title {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.request-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.request-detail__meta {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.request-detail__email {
    color: var(--color-text-light);
    overflow-wrap: anywhere;
}

.request-detail__origin {
    color: var(--color-primary);
    font-weight: 600;
}

.request-detail__accept {
    padding: 1.25rem;
}

.request-detail__actions {
    margin-top: 0;
}

/* Files */

.requests-files {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.requests-files li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
}

.requests-files li:first-child {
    border-top: 0;
}

.requests-files__link {
    color: var(--color-brand);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Deadlines per phase */

.requests-deadlines {
    display: grid;
    gap: 0.5rem;
}

.requests-deadlines__row {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 8.5rem 7rem auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

.requests-deadlines__select {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}

.requests-deadlines__done {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    cursor: pointer;
}

.requests-deadlines__done input {
    accent-color: var(--color-brand);
}

@media (max-width: 40rem) {
    .request-detail .details {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .request-detail .details dd {
        margin-bottom: 0.5rem;
    }

    .requests-deadlines__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-border);
    }

    .requests-deadlines__row:last-child {
        border-bottom: 0;
    }

    .requests-deadlines__label,
    .requests-deadlines__done {
        grid-column: 1 / -1;
    }

    .requests-deadlines__label {
        font-weight: 600;
    }

    .request-detail__head .btn {
        width: 100%;
    }
}