/* ============================================================================
   approvals.css
   Approvals worklist. The Fluent data grid, the Fluent paginator and the
   Bootstrap nav tabs bring their own styling, so this file only covers the
   scroll container, the link cells and the two page-level states.

   Values match the inline block on the pending applications page, so the two
   grids look identical. Kept out of the .razor deliberately: an inline
   <style> block is duplicated into every render of the component and blocks a
   strict Content-Security-Policy. When you are ready, the same classes can be
   removed from the inline blocks on the other grids and served from here.

   Loaded from Components/App.razor AFTER application-review.css.
   ========================================================================= */

.obs-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.obs-fluent-grid {
    min-width: 1000px;
}

.fui-DataGrid-table th,
.fui-DataGrid-table td {
    white-space: nowrap;
}

.grid-link {
    color: #2074d4 !important;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    vertical-align: middle;
    box-shadow: none;
    display: inline;
}

    .grid-link:hover {
        color: #145199 !important;
        text-decoration: underline;
    }

.page-size-chooser {
    font-size: 0.85rem;
}

.apq-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 0;
    font-size: 0.9rem;
    color: var(--arv-label, #6b7a70);
}

.apq-denied {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px dashed var(--arv-line-strong, #c9d4cc);
    border-radius: 0.5rem;
    background-color: var(--arv-surface-alt, #f7f9f7);
    font-size: 0.9rem;
    color: var(--arv-label, #6b7a70);
}

/* --------------------------------------------------------- Breadcrumb */

.arv-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.arv-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--arv-accent, #198754);
    text-decoration: none;
}

    .arv-breadcrumb__link:hover {
        text-decoration: underline;
    }

.arv-breadcrumb__note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid #bcdcc8;
    border-radius: 999px;
    background-color: var(--arv-accent-soft, #e8f3ec);
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f5132;
}

/* ============================================================================
   Enhanced Approvals Worklist
   ========================================================================== */

.approvals-worklist {
    margin-top: 0.75rem;
    margin-bottom: 2rem;
    padding: 0;
    border: 1px solid #ddd2b8;
    border-radius: 0.65rem;
    background-color: #ffffff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(22, 52, 31, 0.06);
}

    /* Navigation tabs */

    .approvals-worklist .nav-tabs {
        padding: 0.75rem 1rem 0;
        border-bottom: 1px solid #ddd2b8;
        background-color: #f7f2e7;
        gap: 0.25rem;
    }

        .approvals-worklist .nav-tabs .nav-link {
            padding: 0.7rem 1.1rem;
            border: 1px solid transparent;
            border-bottom: 0;
            border-radius: 0.45rem 0.45rem 0 0;
            color: #466052;
            font-size: 0.9rem;
            font-weight: 600;
            transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

            .approvals-worklist .nav-tabs .nav-link:hover {
                color: #146c43;
                background-color: #eee5d2;
                border-color: #ddd2b8;
            }

            .approvals-worklist .nav-tabs .nav-link.active {
                color: #146c43;
                background-color: #ffffff;
                border-color: #ddd2b8;
                border-bottom-color: #ffffff;
                font-weight: 700;
            }

    /* Tab content */

    .approvals-worklist .tab-content {
        padding: 0 1rem 1rem;
    }

    /* Search and page-size toolbar */

    .approvals-worklist .tab-pane > .row.pt-3 {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 1rem 0 !important;
        border-bottom: 1px solid #edf0ed;
    }

    .approvals-worklist fluent-search {
        width: 100%;
        max-width: 34rem;
    }

    .approvals-worklist .page-size-chooser {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.45rem;
        color: #526158;
        font-size: 0.85rem;
        font-weight: 500;
    }

        .approvals-worklist .page-size-chooser select {
            min-width: 4rem;
            padding: 0.3rem 1.6rem 0.3rem 0.5rem;
            border: 1px solid #bdc9c0;
            border-radius: 0.35rem;
            background-color: #ffffff;
            color: #173d27;
            font-size: 0.85rem;
            cursor: pointer;
        }

            .approvals-worklist .page-size-chooser select:focus {
                border-color: #198754;
                outline: 0;
                box-shadow: 0 0 0 0.15rem rgba(25, 135, 84, 0.15);
            }

    /* Grid container */

    .approvals-worklist .obs-scroll-container {
        margin-top: 0.75rem;
        border: 1px solid #dfe6e1;
        border-radius: 0.45rem;
        background-color: #ffffff;
        overflow: auto;
    }

    .approvals-worklist .obs-fluent-grid {
        min-width: 1000px;
        width: 100%;
        --accent-fill-rest: #198754;
        --neutral-layer-1: #ffffff;
        --neutral-layer-2: #f7f2e7;
        --neutral-stroke-rest: #dfe6e1;
    }

    /* Fluent grid rendered elements */

    .approvals-worklist fluent-data-grid-row[role="row"] {
        border-bottom: 1px solid #e5ebe7;
    }

        .approvals-worklist fluent-data-grid-row[role="row"]:not([row-type="header"]):hover {
            background-color: #f3f8f5;
        }

    .approvals-worklist fluent-data-grid-row[row-type="header"] {
        min-height: 3rem;
        background-color: #eee5d2;
        color: #173d27;
        font-weight: 700;
    }

    .approvals-worklist fluent-data-grid-cell {
        padding: 0.65rem 0.75rem;
        color: #26362c;
        font-size: 0.875rem;
    }

    /* Grid links */

    .approvals-worklist .grid-link {
        color: #146c43 !important;
        font-weight: 600;
        text-decoration: none;
    }

        .approvals-worklist .grid-link:hover {
            color: #0d4f30 !important;
            text-decoration: underline;
        }

    /* Paginator */

    .approvals-worklist fluent-paginator {
        display: block;
        margin-top: 0.85rem;
        padding-top: 0.75rem;
        border-top: 1px solid #edf0ed;
    }

/* Responsive toolbar */

@media (max-width: 767.98px) {
    .approvals-worklist .tab-content {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .approvals-worklist .tab-pane > .row.pt-3 {
        gap: 0.75rem;
    }

        .approvals-worklist .tab-pane > .row.pt-3 > .col-9,
        .approvals-worklist .tab-pane > .row.pt-3 > .col-3 {
            width: 100%;
            padding-right: 0;
            padding-left: 0;
        }

    .approvals-worklist .page-size-chooser {
        justify-content: flex-start;
    }

    .approvals-worklist .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

        .approvals-worklist .nav-tabs .nav-link {
            white-space: nowrap;
        }
}