/* ============================================================================
   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.
   Background matches .b-layout-content's own var(--stas-bg-page) exactly (imported-style.css) -
   one flat page surface, not two competing near-identical grays. Depth comes from the white
   .stas-grid card's own border/shadow below, not from stacking a second "zone" background. */
.stas-page {
    padding: 22px 24px;
    background: var(--stas-bg-page);
    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;
    /* Midpoint between the original #e6eaf0 (too light to read as a boundary against the
       --stas-border header/footer bands) and --stas-border-strong (too dark/heavy at 1.5px).
       Back to 1px too - the extra width was adding to the "too dark" weight as much as the color. */
    border: 1px solid #ccd6e0;
    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 list-page chrome (header / toolbar / pager text / role chip / stat badge).

   Extracted from the Availability ("Dostupnost") page - STAS-3912's reference implementation
   for redesigned index/list pages. See .claude/skills/index-page-redesign/SKILL.md for the
   full process this was built from; that skill is the thing to update (and re-read) when this
   section changes, not just this comment.

   Workers/Index.razor.css still has its own older, separately-maintained equivalent (.wk-head,
   .wk-title, .wk-btn*, .wk-rolechip, etc.) predating this extraction - it was the direct model
   for these classes (values match it exactly) but hasn't been migrated to reference this shared
   version yet. Do that migration next time Workers itself is touched; don't do it opportunistically
   as a drive-by, it deserves its own visual regression check.
   ============================================================================ */

/* Page header: title + live count pill + primary actions on the left, secondary actions right. */
.stas-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.stas-list-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stas-list-title h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--stas-primary);
    letter-spacing: -0.4px;
}

/* Live total-count pill next to the page title - accent-tinted, not solid, per the established
   Workers convention. */
.stas-count-pill {
    background: var(--stas-accent-soft);
    color: var(--stas-accent);
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--stas-radius-pill);
}

.stas-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Header-level buttons (Create/Export/secondary nav actions). Raw <button> + class, not a
   Blazorise <Button>, matching the established Workers pattern for this specific chrome layer -
   see the skill doc for why. */
.stas-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border-radius: 7px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    /* Named properties, not "all" - forces the browser to watch only what actually changes. */
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}

.stas-btn:disabled {
    opacity: .6;
    cursor: default;
}

.stas-btn i {
    font-size: 13px;
}

.stas-btn-primary {
    background: var(--stas-primary);
    color: #fff;
    box-shadow: var(--stas-shadow-card);
}

.stas-btn-primary:hover:not(:disabled) {
    background: var(--stas-primary-hover);
}

.stas-btn-ghost {
    background: #fff;
    color: var(--stas-primary);
    border-color: var(--stas-border-strong);
    box-shadow: var(--stas-shadow-card);
}

.stas-btn-ghost:hover:not(:disabled) {
    border-color: var(--stas-primary);
}

.stas-btn-excel {
    background: var(--stas-success);
    color: #fff;
    box-shadow: var(--stas-shadow-card);
}

.stas-btn-excel:hover:not(:disabled) {
    background: #188047;
}

/* Small solid count badge on a header button (e.g. a pending-requests inbox counter) - matches
   the row-level .stas-act-count treatment (no gradient/glow), not a more decorative variant. */
.stas-header-badge-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--stas-danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid var(--stas-bg-page);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.stas-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.stas-toolbar > * {
    flex-shrink: 0;
}

/* Wrap a DatePicker's containing <Div> in this when it lives in a .stas-toolbar, so the radius/
   border/focus rules below can target its .form-control precisely without also catching
   SearchComponent's input (which needs different height/radius handling - see that rule's own
   comment). */
.stas-toolbar .search-component-container,
.stas-toolbar .slc-toggle,
.stas-toolbar .picker-div,
.stas-date-field .form-control {
    height: 40px !important;
    background: #fff !important;
    border-color: #e6eaf0 !important;
    border-radius: 9px !important;
}

/* Radius/border/focus match Workers' own ".wk-toolbar ::deep .form-control" rule exactly (9px
   radius, #e6eaf0 border, teal focus ring - not a hover-darken; Workers only reacts on focus).
   SearchComponent/SelectComponent/SelectSubsidiaryComponent aren't plain .form-control
   (SearchComponent hardcodes its own dark border + 36px height; the two Blazorise Outline buttons
   default to Bootstrap's own outline-button colors/radius/transparent background), so they need
   the equivalent spelled out explicitly. !important beats SearchComponent's inline style and
   Bootstrap's own .form-control/.btn rules.

   Height is only forced on the CONTAINER, not the input inside it: the container has a 1px border
   (border-box, so its content area is really 38px) - forcing the input to the same 40px made it
   2px taller than that, overflowing past the border and painting over it top/bottom. */
.stas-toolbar .search-component-container:focus-within,
.stas-toolbar .slc-toggle:focus,
.stas-toolbar .picker-div:focus,
.stas-date-field .form-control:focus {
    border-color: #003951 !important;
    box-shadow: 0 0 0 3px rgba(0, 57, 81, 0.07) !important;
}

/* The search <input> itself has its own native Bootstrap :focus ring (a small-radius box-shadow
   that ignores the container's shape), which doesn't disappear just because the container also
   shows one - the two overlapped, and the input's square-ish ring didn't match the container's
   9px rounded corners. Suppress the input's own ring; the container's :focus-within one above is
   the only one that should show. */
.stas-toolbar .search-component-container input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Bootstrap's outline-button hover (.btn-outline-primary:hover etc.) fills the background solid,
   turns text/icons white, AND swaps the border to the solid fill color by default - neutralize
   all three (keep white bg, keep the light border, neutral gray-blue text); Workers doesn't add
   any other hover treatment to these controls either. Border-color needs restating here even
   though the rest-state rule above already sets it: Bootstrap's own :hover rule targets the same
   element and wins for that one property otherwise, which is why the border disappears on hover
   if this isn't repeated. Icon/text color comes from Blazorise's own descendant styling, which
   resists simple inheritance, so it needs its own override too. */
.stas-toolbar .slc-toggle:hover,
.stas-toolbar .picker-div:hover {
    background: #fff !important;
    border-color: #e6eaf0 !important;
    color: #40515f !important;
}

.stas-toolbar .slc-toggle:hover *,
.stas-toolbar .picker-div:hover * {
    color: #40515f !important;
}

.stas-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--stas-radius-md);
    border: 1px solid var(--stas-border-strong);
    background: #fff;
    color: var(--stas-danger);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.stas-clear-btn:hover {
    background: var(--stas-danger);
    border-color: var(--stas-danger);
    color: #fff;
}

/* Focus-visible ring, matching UIDesignAndGuidelines.md's documented accessibility baseline
   exactly (accent-colored outline + soft halo). These are raw <button> elements, not Blazorise
   <Button>, so they don't automatically inherit whatever focus treatment Blazorise's own
   components get - needs stating explicitly for every raw-button class in this shared system. */
.stas-btn:focus-visible,
.stas-act:focus-visible,
.stas-clear-btn:focus-visible {
    outline: 2px solid #ED880E;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(237, 136, 14, 0.2);
}

/* Sizing only (no `display`) so it can't fight .profile-initials-avatar's own `display: flex`
   centering - the shared .rounder-profile-image class also sets `display: inline-block`, which
   breaks centering on the initials fallback if reused directly for sizing instead of this.
   Values match .rounder-profile-image's default (2.5rem) so photo and initials render the same
   size. Add box-shadow: 0 0 0 2px #fff for a subtle ring against busy striped/hover rows. */
.stas-avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    box-shadow: 0 0 0 2px #fff;
}

/* Role chip - matches Workers' own .wk-rolechip exactly (soft teal tint). */
.stas-role-chip {
    display: inline-flex;
    background: rgba(0, 57, 81, 0.07);
    color: var(--stas-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--stas-radius-sm);
    white-space: nowrap;
    /* Matches .stas-pill's border treatment - currentColor picks up the teal text color above. */
    border: 1px solid currentColor;
}

/* Emphasized numeric/stat badge for a column that wants to stand out (e.g. a day count) - warm
   accent tint, bold figure. Not tied to any one page's vocabulary. */
.stas-stat-badge {
    display: inline-block;
    min-width: 30px;
    background: #fdf0e3;
    color: #c9740f;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--stas-radius-sm);
}

/* ---- Pager text templates: square page-number buttons + right-aligned item-count text.
   The shared pagination rule (below) pads every .page-link the same way (First/Previous/1/2/Next/
   Last all look alike); square numbered pages read more like an actual pager, with the text
   buttons at their natural width. Blazorise doesn't give these two kinds of button a
   distinguishing class on its own, so the page's PageButtonTemplate/First-Previous-Next-Last
   templates apply .stas-pager-num / .stas-pager-label themselves, and the shared link padding is
   zeroed out here so each span owns its own sizing instead. ---- */
.stas-grid .pagination .page-item .page-link {
    padding: 0;
}

.stas-pager-label {
    display: inline-block;
    padding: 8px 12px;
}

.stas-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
}

/* "X - Y of Z items" text, right-aligned in the pager band - set via TotalItemsShortTemplate/
   TotalItemsTemplate on the DataGrid, computed from CurrentPage/CurrentPageSize/TotalResults. */
.stas-pager-total {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    font-weight: 500;
    color: #56606a;
}

/* ---- 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: var(--stas-radius-sm);
}

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

/* ---- Header/row/select surface system ----
   Pure neutral grays, reusing the app's existing --stas-* surface tokens rather than raw hex or a
   brand-color tint - no primary/accent color in this system. The earlier attempt failed because
   every step (page-zone #eef1f5, old header #f1f5f9, Bootstrap's own selected-row rgba(0,0,0,.075))
   sat within about 2% of each other in lightness - indistinguishable, and the kind of gap that
   washes out worst on older/cheaper monitors with poor gray discrimination. Fixed by picking real,
   several-percent lightness jumps between each step instead of nudging by one unit:
     white (rows) 100% -> --stas-bg-muted 96% -> --stas-border 91% -> --stas-border-strong 83%
   Intensity order, lightest to strongest: hover (bg-muted, a transient touch) < header (border, a
   permanent structural band) < selected (border-strong + left bar, the user's own explicit choice
   - the most prominent state, deliberately). The selected-row accent bar is a dark neutral shape
   cue, not a color one, so it stays legible regardless of how grays render. */
.stas-grid .table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--stas-text-secondary);
    background: var(--stas-border) !important;
    padding: 13px 14px;
    border-top: none;
    border-bottom: 2px solid var(--stas-border-strong);
    /* border-strong, not border: the header's own background already sits on --stas-border, so a
       same-tone divider would be invisible against it - needs the next step darker to show up. */
    border-left: 1px solid var(--stas-border-strong);
    /* Sit above any absolutely-positioned cell badges so the fixed header
       covers rows scrolling underneath instead of bleeding through. */
    z-index: 5;
}

/* ---- Body ---- */
/* Row/column dividers bumped from #eef1f5/#f4f6f9 (near-white, barely visible) to --stas-border -
   still a light, unobtrusive rule, but one users can actually see to tell rows/columns apart. */
.stas-grid .table tbody td {
    font-size: 14px;
    color: #334155;
    padding: 11px 14px;
    vertical-align: middle;
    border-top: none;
    border-bottom: 1px solid var(--stas-border);
    border-left: 1px solid var(--stas-border);
}

/* 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;
}

/* Striped rows (Blazorise's Striped param, Bootstrap's .table-striped): use --stas-bg-muted for
   odd rows instead of Bootstrap's default rgba(0,0,0,.05) - same gray family as the rest of this
   system. This is the lightest step; hover needs to be one step stronger than it (below), or
   hovering an already-striped row would show no visible change at all.

   Cells are also targeted explicitly (> td), not just the row, as defensive belt-and-braces in
   case any cell ever renders its own opaque background that would otherwise sit in front of the
   row's own color. */
.stas-grid .table.table-striped tbody tr:nth-of-type(odd),
.stas-grid .table.table-striped tbody tr:nth-of-type(odd) > td {
    background-color: var(--stas-bg-muted) !important;
}

/* One step stronger than the stripe color, so hover stays visible on both striped and plain rows. */
.stas-grid .table tbody tr:hover,
.stas-grid .table tbody tr:hover > td {
    background: var(--stas-border) !important;
}

/* Clicking a DataGrid row selects it by default (a built-in Blazorise behavior, not something we
   opted into) - Blazorise's Bootstrap provider marks the selected row with Bootstrap's own
   .table-primary class (confirmed via devtools; an earlier guess at .table-active was wrong).
   Replace it with the darkest step (--stas-border-strong) plus a solid dark-neutral left accent
   bar - a shape cue, not just a color one, so the selected state stays legible even on displays
   with poor gray reproduction. This CSS is a baseline fallback for any .stas-grid page; pages that
   also wire up SelectedCellStyling (see Availability/Index.razor.cs) get the more reliable,
   Blazorise-documented fix on top, since provider CSS can still override plain row-level CSS here. */
.stas-grid .table-primary,
.stas-grid .table-primary > td,
.stas-grid .table-primary > th {
    background-color: var(--stas-border-strong) !important;
}

.stas-grid .table-primary > td:first-child,
.stas-grid .table-primary > th:first-child {
    box-shadow: inset 3px 0 0 var(--stas-text-primary);
}

.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: var(--stas-radius-sm);
    padding: 4px 10px;
    /* !important: Bootstrap's own .page-link sets color:#007bff: since pages that use the text-label
       First/Previous/Next/Last templates nest the text one level deeper (inside a Span), matching
       specificity alone was reading lighter than intended in practice. */
    color: #334155 !important;
    font-size: 12.5px;
    font-weight: 500;
    transition: background .15s, color .15s;
}

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

/* !important: the general .page-item .page-link rule above also sets color !important (needed to
   beat Bootstrap's own text color) - since !important always wins over specificity regardless of
   which selector is more specific, that rule was also winning here, keeping the active page's
   number dark instead of white. font-weight bumped to match the mockup's bolder active-page digit. */
.stas-grid .pagination .page-item.active .page-link {
    background: #ED880E;
    border-color: #ED880E;
    color: #fff !important;
    font-weight: 800;
}

.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.
   Background/border match the header exactly (same --stas-border / --stas-border-strong pairing)
   so the two structural bands - top and bottom of the table - read as one consistent frame. */
.stas-grid .row {
    position: relative;
    margin: 0;
    padding: 9px 16px;
    min-height: 52px;
    background: var(--stas-border);
    border-top: 2px solid var(--stas-border-strong);
    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: var(--stas-radius-sm);
    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;
}

/* Opt-in "raised card" variant - a gray-blue button with an inset highlight + soft shadow that
   lifts on hover, instead of the flat, shadow-less default .stas-act look. Add
   `stas-actions-raised` alongside `stas-actions` on the wrapper to opt in (Availability/Dostupnost
   does; Workers/ExpiredItems don't, and are unaffected since this only fires when the modifier
   class is present). Semantic per-action hover tints (info/primary/success/danger above) still
   apply on top - these rules only add size/radius/shadow/lift, they don't set background/color. */
.stas-actions-raised .stas-act {
    width: 36px;
    height: 36px;
    border-radius: var(--stas-radius-md);
    border-color: #dbe1e8;
    background: var(--stas-bg-muted);
    color: #5b6c7d;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .08), inset 0 1px 0 #fff;
    /* box-shadow deliberately NOT animated - up to 5 of these can exist per row, and :hover keeps
       re-triggering on whatever button happens to pass under a stationary cursor as rows scroll
       past underneath it. Animating box-shadow (a paint-triggering property, unlike transform)
       across that many elements simultaneously during a scroll gesture causes real scroll lag.
       transform still animates (cheap, GPU-composited) so the lift still feels smooth; the shadow
       itself just snaps to its hover value instantly instead of interpolating. */
    transition: transform .12s ease, background .15s, border-color .15s, color .15s;
}

.stas-actions-raised .stas-act:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20, 40, 60, .14);
}

/* Restate the semantic hover tint explicitly at this scope (same values as the plain .stas-act-*
   rules above) rather than relying on cross-rule cascade - the raised variant's own base rule sets
   a neutral color/border/background, and the lift+shadow visually competes for attention, so the
   color change needs to be unambiguous here rather than just "should still apply in theory". */
.stas-actions-raised .stas-act-primary:hover:not(:disabled) {
    background: rgba(0, 57, 81, .08);
    border-color: #003951;
    color: #003951;
}

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

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

.stas-actions-raised .stas-act-danger:hover:not(:disabled) {
    background: #fdeceb;
    border-color: #dc2626;
    color: #dc2626;
    box-shadow: 0 4px 10px rgba(197, 40, 45, .18);
}

/* 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;
}

/* Plain unread/attention dot (no number) on an action button - e.g. an unresolved linked request. */
.stas-act-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #e5484d;
    border: 2px solid #fff;
    pointer-events: none;
}

/* ---- 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;
    /* currentColor resolves to whatever `color` each tone modifier (e.g. av-pill-sick) sets, so
       every tone gets a matching 1px border automatically without repeating its hex a second time. */
    border: 1px solid currentColor;
}

.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;
    }
}