/* Row action-icon column — adopted by GridView ActionColumn contentOptions (Phase 2+).
   See docs/css-refactoring.md §8. */
.w5-action-col a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--gray-700);          /* was slate #64748b; reconciled to grey ramp per §6 */
    transition: background-color .15s ease, color .15s ease;
}

.w5-action-col a:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.w5-action-col a svg {
    width: 15px;
    height: 15px;
}

/* ========================================
   GridView — W5 distinctive style
   (moved from app.css in Phase 2; the container default in config/web.php
   applies .w5-grid to every GridView. See docs/css-refactoring.md §5/§8.)
   ======================================== */

/* Card-like wrapper */
.w5-grid {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 1.5rem;
}

/* Summary text above table */
.w5-grid > .text-muted.small {
    padding: 0.625rem 1rem 0;
}

/* Responsive container inside the wrapper */
.w5-grid > .table-responsive {
    margin: 0;
}

/* Table base */
.w5-grid .table {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

/* ---- Header row ---- */
.w5-grid .table > thead > tr > th {
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-color: var(--primary-dark);
    padding: 0.625rem 0.75rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Sort links in header */
.w5-grid .table > thead > tr > th a {
    color: var(--white);
    text-decoration: none;
}

.w5-grid .table > thead > tr > th a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Sort arrows — white on teal */
.w5-grid .table > thead a.asc:after,
.w5-grid .table > thead a.desc:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 0 0 1px 5px;
    vertical-align: middle;
}

.w5-grid .table > thead a.asc:after {
    border-bottom: solid 6px var(--white);
    border-top-width: 0;
}

.w5-grid .table > thead a.desc:after {
    border-top: solid 6px var(--white);
    border-bottom-width: 0;
}

/* ---- Filter row ---- */
.w5-grid .table > thead > tr.filters > td {
    background: var(--gray-50);
    padding: 0.375rem 0.5rem;
    border-bottom: 2px solid var(--gray-200);
}

.w5-grid .table > thead > tr.filters input,
.w5-grid .table > thead > tr.filters select {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: var(--white);
    color: var(--gray-800);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.w5-grid .table > thead > tr.filters input:focus,
.w5-grid .table > thead > tr.filters select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 155, 144, 0.15);
}

.w5-grid .table > thead > tr.filters input::placeholder {
    color: var(--gray-700);
    font-style: italic;
}

/* Rejected filter value (IDEA-100). Yii emits the message with Bootstrap 3's `.help-block`,
   which this app has no rule for, so it rendered as bare inline text — and a sentence in a
   90px column stretches that column under `table-layout: auto`. Absolute so it costs the
   column no width; scoped to .has-error so the sticky action cell keeps its own positioning. */
.w5-grid .table > thead > tr.filters > td.has-error {
    position: relative;
}

.w5-grid .table > thead > tr.filters > td.has-error input,
.w5-grid .table > thead > tr.filters > td.has-error select {
    border-color: var(--danger);
}

.w5-grid .table > thead > tr.filters .help-block {
    position: absolute;
    top: 100%;
    left: 0.5rem;
    z-index: 3;
    min-width: 12rem;
    margin-top: 0.15rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    color: var(--danger);
    background: var(--white);
    border: 1px solid var(--danger);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ---- Body rows ---- */
.w5-grid .table > tbody > tr > td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-color: var(--gray-200);
}

/* Striped rows — subtle teal tint */
.w5-grid .table-striped > tbody > tr:nth-of-type(odd) > td {
    --bs-table-bg-type: rgba(0, 155, 144, 0.025);
}

/* Hover — teal accent */
.w5-grid .table-hover > tbody > tr:hover > td {
    --bs-table-bg-type: rgba(0, 155, 144, 0.06);
}

/* ---- Checkbox column ---- */
.w5-grid .table input[type="checkbox"] {
    accent-color: var(--primary);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ---- Action column buttons ---- */
.w5-grid .table .btn-sm {
    padding: 0.2rem 0.45rem;
    font-size: 0.78rem;
    border-radius: 4px;
}

/* ---- Pinned action column (IDEA-086, helpdesk #5272) ----

   A wide grid scrolls sideways inside its own scrollport (`.w5-grid` / `.table-responsive`,
   both `overflow-x: auto`), and the action icons are rendered LAST — so they are the first
   thing to leave the viewport, and users report the actions as "missing". Pinning the column
   to the right edge keeps them reachable without touching any of the 70-odd views that use
   `.w5-action-col`.

   Only pinned when the action cell is genuinely the LAST cell in the row. A grid that puts
   the action column elsewhere would otherwise be dragged to the right edge on top of the
   columns that follow it; such a grid simply keeps today's behaviour.

   THE PINNED CELLS DECLARE NO BACKGROUND AND NO BOX-SHADOW, and both omissions are load
   bearing:

    - **Background.** A pinned cell must show exactly the colour its row already shows, and
      that colour comes from several places. Bootstrap 5.3 puts `background-color:
      var(--bs-table-bg)` (opaque `#fff`) on every `.table` cell at specificity (0,1,1), and
      page CSS colours rows by hitting the `td` harder — `.w5-travel tr.submitted td`,
      `.w5-grid tr.status-error td`, `.edit-days .week-even td`, and a dozen more. Declaring
      a background here at all means outranking every one of them and painting the action
      cell a different colour from its own row, which on `administrative/travel/index` would
      erase that page's entire status signal. Declaring nothing lets the existing cascade
      decide, with Bootstrap's opaque default as the floor.

      The one thing this does require of page CSS: a `td` in a grid that has an action column
      must not be given a **transparent** background, or scrolled cells show through the
      pinned one. `.w5-travel tr.empty td` was the single such rule and now says
      `var(--white)`, which is what it always rendered as.

    - **Box-shadow.** Bootstrap 5.3 paints BOTH the `.table-striped` stripe and the
      `.table-hover` tint as `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state,
      var(--bs-table-bg-type, …))` on the cell itself — not as a background on the row. A
      box-shadow declared here replaces that shadow outright (shadows do not accumulate
      across rules), so the pinned column would stop being striped and stop reacting to
      hover with its own row. The edge affordance is therefore a pseudo-element.

   The header carries no class of its own — `.w5-action-col` is only ever set through
   `contentOptions` — so it is selected positionally, and the two header rows that can reach
   the last column are named individually rather than as `thead > tr`:

    - `tr:first-child`, which is always the row that reaches the far right (every column's
      topmost header cell is in the first row, `rowspan` or not);
    - `tr.filters`, GridView's filter row, which repeats the full column set.

   A `thead` can have MORE rows than that: `timetable/days/edit_days.php` has a two-row header
   whose second row holds four sub-headers under two `colspan="2"` groups, and its last cell is
   the "EAs" sub-header around column 9 of 11. `thead > tr > *:last-child` would pin that one
   too and ride it over the Notes and Custom headers. `:has()` guards the whole thing so a grid
   with no pinned action column never gets a floating header cell at all. */
@media (min-width: 768px) { /* BS5 `md` — tablet portrait and up. Deliberately NOT pinned on
                               phones: the helpdesk reporter of #5272, after seeing the fix
                               described, asked for "only tablet and desktop" — on a phone
                               viewport the pinned column costs a much larger share of the
                               width than it does on a tablet. Decided, not forgotten: widen
                               this only with the reporter's agreement. */
    .w5-grid .table > tbody > tr > td.w5-action-col:last-child,
    .w5-grid .table:has(> tbody > tr > td.w5-action-col:last-child) > thead > tr:first-child > *:last-child,
    .w5-grid .table:has(> tbody > tr > td.w5-action-col:last-child) > thead > tr.filters > td:last-child {
        position: sticky;
        right: 0;
        /* Above the sibling cells it overlaps, and far below the app chrome it must never
           cover: .top-header is 100, dropdowns/popovers 1100, the lightbox 2050. */
        z-index: 2;
    }

    /* Edge affordance: a soft shadow cast to the LEFT of the pinned column, so it reads as
       overlapping the scrolled content rather than as an ordinary final column. Drawn just
       outside the cell (`right: 100%`); `position: sticky` makes the cell the containing
       block. A pseudo-element, for the box-shadow reason above. */
    .w5-grid .table > tbody > tr > td.w5-action-col:last-child::after,
    .w5-grid .table:has(> tbody > tr > td.w5-action-col:last-child) > thead > tr:first-child > *:last-child::after,
    .w5-grid .table:has(> tbody > tr > td.w5-action-col:last-child) > thead > tr.filters > td:last-child::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 100%;
        width: 6px;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
        pointer-events: none;
    }
}

/* ---- Empty state ---- */
.w5-grid .empty {
    padding: 2.5rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* ---- Pagination area ---- */
.w5-grid > ul.pagination,
.w5-grid > nav > ul.pagination {
    padding: 0.75rem 1rem;
    margin: 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.w5-grid .pagination .page-link {
    color: var(--primary);
    border-color: var(--gray-300);
    font-size: var(--font-size-sm);
    padding: 0.35rem 0.65rem;
    transition: all 0.15s ease;
}

.w5-grid .pagination .page-link:hover {
    background: rgba(0, 155, 144, 0.08);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.w5-grid .pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.w5-grid .pagination .page-item.disabled .page-link {
    color: var(--gray-700);
    background: var(--white);
}

/* ---- Mobile adjustments ---- */
@media (max-width: 767.98px) {
    .w5-grid .table {
        font-size: 0.78rem;
    }

    .w5-grid .table > thead > tr > th {
        font-size: 0.72rem;
        padding: 0.5rem;
    }

    .w5-grid .table > tbody > tr > td {
        padding: 0.4rem 0.5rem;
    }

    .w5-grid .table > thead > tr.filters input,
    .w5-grid .table > thead > tr.filters select {
        font-size: 0.75rem;
        padding: 0.25rem 0.375rem;
    }
}