/* ============================================================================
   Shared STAS DataGrid look.

   Opt in per grid by wrapping the Blazorise <DataGrid> in <div class="stas-grid">.
   This stylesheet is loaded globally (see index.html), so plain `.table` selectors
   apply without ::deep. Grids that are NOT wrapped are completely unaffected, so
   this can be rolled out one grid at a time without breaking anything.

   Seeded from the Workers card theme (Pages/Workers/Index.razor.css) and the
   Expired Items tokens (#334155 text, hairline grid lines, colored action buttons).
   ============================================================================ */

/* Page wrapper — header/search/tabs sit here; only the table gets a white card. */
.stas-page {
    padding: 22px 24px;
    background: #eef1f5;
    border-radius: 14px;
}

/* Only the table sits in a white card; the header, search and tabs sit directly on the gray page
   (matches the Workers page). */
.stas-grid {
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05);
    margin-top: 4px;
}

/* ---- Shared grid tabs (used on any .stas-grid page: Expired, Workers, …) ----
   Underline-style tabs: no box borders, a 2px accent underline + bold text on the active tab,
   no background fill. Self-contained so the look is identical on every page. Blazorise puts the
   Class on the .nav-tabs <ul> in some versions and on a wrapper in others, so the container
   rules target both forms (only one matches; the other is inert). */
.stas-tabs.nav-tabs,
.stas-tabs .nav-tabs {
    border-bottom: 1px solid #e6eaf0;
    gap: 2px;
    /* Wrap onto extra lines when narrow (e.g. half-screen) so every tab stays visible — no
       hidden horizontal scroll. */
    flex-wrap: wrap;
}

.stas-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #5b6b7c;
    font-size: 13.5px;
    font-weight: 500;
    padding: 9px 14px;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.stas-tabs .nav-link:hover {
    color: #003951;
}

.stas-tabs .nav-link.active {
    color: #ED880E;
    border-bottom-color: #ED880E;
    background: transparent;
    font-weight: 600;
}

.stas-grid .table {
    margin-bottom: 0;
    /* Fill the card on wide screens; min-width is only a floor so narrow viewports scroll the grid
       horizontally (inside the fixed-header scroll area) instead of crushing columns until their
       content overlaps. Applies to every grid using this design; a genuinely narrow grid can
       override min-width per-page. */
    width: 100% !important;
    min-width: 1200px;
}

/* The fixed-header / responsive scroll wrappers must fill the card too, otherwise they shrink to
   the table's min-width and leave empty space on the right on wide screens. */
.stas-grid .table-fixed-header,
.stas-grid .table-responsive {
    width: 100% !important;
}

/* Scroll areas inside the grid (fixed-header vertical scroll, responsive horizontal scroll) get a
   gray thumb instead of the app's global teal/primary one. That global rule
   (::-webkit-scrollbar-thumb { background:#003951 !important } in imported-style.css) uses
   !important, so these overrides need !important too — the extra .stas-grid specificity then wins. */
.stas-grid ::-webkit-scrollbar {
    /* Thin bar on both axes. The app-global ::-webkit-scrollbar rule sets width with !important and
       no height, so a horizontal bar used the browser's thick default; set both here with
       !important so this rule wins the whole pseudo-element. */
    width: 6px !important;
    height: 6px !important;
}

.stas-grid ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 8px;
}

.stas-grid ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* ---- Header ---- */
.stas-grid .table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #64748b;
    background: #f1f5f9 !important;
    padding: 13px 14px;
    border-top: none;
    border-bottom: 1px solid #e6eaf0;
    border-left: 1px solid #f4f6f9;
    /* Sit above any absolutely-positioned cell badges so the fixed header
       covers rows scrolling underneath instead of bleeding through. */
    z-index: 5;
}

/* ---- Body ---- */
.stas-grid .table tbody td {
    font-size: 14px;
    color: #334155;
    padding: 11px 14px;
    vertical-align: middle;
    border-top: none;
    border-bottom: 1px solid #eef1f5;
    border-left: 1px solid #f4f6f9;
}

/* First column carries no left divider */
.stas-grid .table thead th:first-child,
.stas-grid .table tbody td:first-child {
    border-left: none;
}

.stas-grid .table tbody tr {
    transition: background .15s ease;
}

/* Only grids whose rows navigate on click get the pointer cursor. Add `stas-clickable`
   alongside `stas-grid` on the wrapper when the DataGrid has a RowClicked handler. */
.stas-grid.stas-clickable .table tbody tr {
    cursor: pointer;
}

.stas-grid .table tbody tr:hover {
    background: #f8fafc;
}

.stas-grid .table tbody tr:last-child td {
    border-bottom: none;
}

/* Status-colored accent bar on the left edge of each row (set via RowStyling) */
.stas-grid .table tbody tr.stas-row-expired td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.stas-grid .table tbody tr.stas-row-urgent td:first-child { box-shadow: inset 3px 0 0 #ea580c; }
.stas-grid .table tbody tr.stas-row-soon td:first-child { box-shadow: inset 3px 0 0 #b45309; }

/* Round the toolbar + pager controls to match the card's rounded feel */
.stas-page .search-component-container,
.stas-page .search-component-container input {
    border-radius: 12px;
}

.stas-grid .pagination .page-item {
    margin: 0 3px;
}

.stas-grid .pagination .page-item .page-link {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 4px 10px;
    color: #475569;
    font-size: 12.5px;
    font-weight: 500;
    transition: background .15s, color .15s;
}

.stas-grid .pagination .page-item .page-link:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.stas-grid .pagination .page-item.active .page-link {
    background: #ED880E;
    border-color: #ED880E;
    color: #fff;
}

.stas-grid .pagination .page-item.disabled .page-link {
    color: #cbd5e1;
    background: transparent;
}

/* Pager band: full-width footer with the pagination centered and a top divider line (the line where
   the table ends, above the pager). Blazorise renders the pager as a Bootstrap .row of auto-width
   columns whose position:relative would anchor the absolute .pagination to a narrow column — reset
   them to static so it centers across the full row. Mirrors the Workers page pager. */
.stas-grid .row {
    position: relative;
    margin: 0;
    padding: 9px 16px;
    min-height: 52px;
    background: #f1f5f9;
    border-top: 1px solid #e6eaf0;
    align-items: center;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
}

.stas-grid .row > div {
    position: static;
}

.stas-grid .pagination {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* ---- Actions cell: always centers the action buttons in the column, wrapping them if they
   don't fit (never a horizontal scrollbar). Wraps the buttons in an Actions column. ---- */
.stas-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* Wider row-gap than column-gap: when the buttons wrap, the extra vertical room clears the
       count badges (which overhang the top of their button) so they don't overlap the row above.
       Column spacing stays 6px, so the single-line case is unchanged. */
    gap: 10px 6px;
    width: 100%;
}

/* ---- Action buttons: neutral gray icon buttons (no per-action colors) ---- */
.stas-act {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6eaf0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: background .15s, border-color .15s, color .15s;
}

/* Neutral at rest; each action reveals its semantic colour on hover (soft tint + coloured icon),
   matching the production Workers buttons. */
.stas-act-primary:hover:not(:disabled) {
    background: rgba(0, 57, 81, .08);
    border-color: #003951;
    color: #003951;
}

.stas-act-info:hover:not(:disabled) {
    background: #e0f5fa;
    border-color: #17a2b8;
    color: #17a2b8;
}

.stas-act-success:hover:not(:disabled) {
    background: #e7f6ee;
    border-color: #16855a;
    color: #16855a;
}

.stas-act-danger:hover:not(:disabled) {
    background: #fdeceb;
    border-color: #dc2626;
    color: #dc2626;
}

.stas-act:disabled {
    opacity: .4;
    cursor: default;
}

/* Top-right count badge on an action button (e.g. attachment count) */
.stas-act-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid #fff;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Status pill ---- */
.stas-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: normal;
}

.stas-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stas-rel {
    font-size: 11px;
    font-weight: 500;
    color: #334155;
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .stas-tabs .nav-link,
    .stas-grid .table tbody tr,
    .stas-grid .pagination .page-item .page-link,
    .stas-act {
        transition: none;
    }
}