/*
 * HRMS responsive density helpers.
 *
 * This file is loaded after all framework and tenant styles. Bootstrap
 * breakpoints continue to control layout; these desktop bands control density.
 */

/*
 * Desktop density bands. Metronic already handles widths below 992px; these
 * declarations only graduate the desktop root and must override the loaded
 * bundles' !important root declarations.
 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    html,
    body {
        font-size: 12px !important;
    }
}

@media (min-width: 1400px) {
    html,
    body {
        font-size: 13px !important;
    }
}

/*
 * KPI scoring workflow stepper.
 *
 * The scoring page once declared generic .stepper-* selectors in its Blade
 * partial. Those fixed 40px utilities and large vertical margins caused the
 * fifth stage to wrap at laptop widths. Scope the component here so other
 * Metronic steppers remain untouched. The base rules reproduce the current
 * desktop treatment; only the 992–1399.98px bands compact the workflow.
 */
.dsi-scoring-stepper .dsi-scoring-stepper__nav {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: center;
    margin-bottom: 10px;
}

.dsi-scoring-stepper .stepper-item {
    align-items: center;
    display: flex;
    margin: 0 2px 4px;
}

.dsi-scoring-stepper .stepper-line {
    background-color: #ebedf2;
    flex-grow: 1;
    height: 2px;
}

.dsi-scoring-stepper .stepper-icon {
    align-items: center;
    background-color: #ebedf2;
    border-radius: 50%;
    display: flex;
    height: 30px;
    justify-content: center;
    position: relative;
    width: 30px;
}

.dsi-scoring-stepper .stepper-check {
    color: #ffffff;
    font-size: 18px;
    position: absolute;
}

.dsi-scoring-stepper .stepper-number {
    color: #ffffff;
    font-size: large;
    font-weight: bolder;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dsi-scoring-stepper .stepper-label {
    margin-left: 8px;
}

.dsi-scoring-stepper .stepper-title {
    font-size: 14px;
    margin: 0;
}

.dsi-scoring-stepper .stepper-desc {
    color: #6c757d;
    font-size: 12px;
}

.dsi-scoring-stepper .current .stepper-check,
.dsi-scoring-stepper .pending .stepper-check {
    display: none;
}

.dsi-scoring-stepper .current .stepper-icon {
    background-color: #fac002;
}

.dsi-scoring-stepper .completed .stepper-icon {
    background-color: green;
}

.dsi-scoring-stepper .completed .stepper-number {
    display: none;
}

.dsi-scoring-stepper .pending .stepper-number {
    color: var(--dsi-scoring-tenant-primary, #006341);
}

.dsi-scoring-stepper .pending .stepper-icon {
    background-color: #ffffff;
    border: 1px solid var(--dsi-scoring-tenant-primary, #006341);
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .dsi-scoring-stepper .card-body {
        padding-block: 1rem;
        padding-inline: 1.25rem;
    }

    .dsi-scoring-stepper .dsi-scoring-stepper__nav {
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        margin-bottom: 0;
        width: 100%;
    }

    .dsi-scoring-stepper .stepper-item {
        align-items: flex-start;
        flex: 1 1 0;
        margin: 0 !important;
        min-width: 0;
    }

    .dsi-scoring-stepper .stepper-line {
        flex: 0 1 1.5rem;
        margin-top: calc((2.75rem - 2px) / 2);
        min-width: 1rem;
        width: auto !important;
    }

    .dsi-scoring-stepper .stepper-icon {
        flex: 0 0 2.75rem;
        height: 2.75rem !important;
        width: 2.75rem !important;
    }

    .dsi-scoring-stepper .stepper-label {
        flex: 1 1 auto;
        margin-left: 0.5rem;
        min-width: 0;
    }

    .dsi-scoring-stepper .stepper-title {
        font-size: 1rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .dsi-scoring-stepper .stepper-desc {
        font-size: 0.875rem;
        line-height: 1.2;
        overflow-wrap: break-word;
        white-space: normal;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .dsi-scoring-stepper .card-body {
        padding-block: 0.75rem;
        padding-inline: 0.75rem;
    }

    .dsi-scoring-stepper .dsi-scoring-stepper__nav {
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        margin-bottom: 0;
        width: 100%;
    }

    .dsi-scoring-stepper .stepper-item {
        align-items: flex-start;
        flex: 1 1 0;
        margin: 0 !important;
        min-width: 0;
    }

    .dsi-scoring-stepper .stepper-line {
        flex: 0 1 0.9rem;
        margin-top: calc((2.35rem - 2px) / 2);
        min-width: 0.6rem;
        width: auto !important;
    }

    .dsi-scoring-stepper .stepper-icon {
        flex: 0 0 2.35rem;
        height: 2.35rem !important;
        width: 2.35rem !important;
    }

    .dsi-scoring-stepper .stepper-label {
        flex: 1 1 auto;
        margin-left: 0.35rem;
        min-width: 0;
    }

    .dsi-scoring-stepper .stepper-title {
        font-size: 0.9167rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .dsi-scoring-stepper .stepper-desc {
        font-size: 0.84rem;
        line-height: 1.15;
        overflow-wrap: break-word;
        white-space: normal;
    }
}

/*
 * Graduated expanded sidebar.
 *
 * Metronic fixes the desktop aside, aside menu, wrapper offset, and header
 * offset at 265px. That width occupies a disproportionate share of a laptop
 * viewport (and of a zoomed-in desktop's reduced CSS viewport). Keep the full
 * navigation visible, but compact the whole shell only below Bootstrap's xxl
 * breakpoint. Wide screens fall back to Metronic's original 265px sidebar and
 * its normal menu proportions. All four geometry values must move together to
 * prevent overlap.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.aside-enabled {
        --dsi-aside-width: 210px;
        --dsi-aside-logo-height: 11rem;
        --dsi-aside-logo-max-height: 8.5rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body.aside-enabled {
        --dsi-aside-width: 220px;
        --dsi-aside-logo-height: 12rem;
        --dsi-aside-logo-max-height: 9.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside,
    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside .aside-menu {
        width: var(--dsi-aside-width);
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_wrapper {
        padding-left: var(--dsi-aside-width);
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_header {
        left: var(--dsi-aside-width);
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside_logo {
        height: var(--dsi-aside-logo-height) !important;
        padding-inline: 1rem;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside_logo > a {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside_logo .default-logo {
        width: 100% !important;
        height: auto !important;
        max-height: var(--dsi-aside-logo-max-height);
        object-fit: contain;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside_logo .aside-toggle {
        flex: 0 0 auto;
        margin-left: 0.35rem;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside > .fw-bolder {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.9rem;
        line-height: 1.35;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside_menu_wrapper {
        margin-block: 0.75rem !important;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside .aside-menu .menu > .menu-item > .menu-link {
        padding: 0.55rem 1rem;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside .aside-menu .menu-link .menu-icon {
        width: 1.75rem;
        margin-right: 0.55rem;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside .aside-menu .menu-link .menu-icon i {
        font-size: 1.35rem !important;
    }

    body.aside-enabled:not([data-kt-aside-minimize=on]) #kt_aside .aside-menu .menu-link .menu-title {
        font-size: 0.95rem;
        line-height: 1.25;
    }
}

/*
 * Collapsed sidebar (icon rail) logo switching.
 *
 * The rail is activated by assets/js/dsi-responsive.js, which sets
 * Metronic's own [data-kt-aside-minimize=on] on <body> at small-laptop
 * widths. The aside also carries .aside-hoverable, so Metronic expands it
 * back to 265px on hover; rules are scoped with :not(:hover) so the full
 * sidebar returns untouched while hovered.
 *
 * NOTE for future work: target the [data-kt-aside-minimize=on] ATTRIBUTE,
 * not a ".aside-minimize" class. No such class is ever applied - keying off
 * it is why the logo previously vanished (clipped, not swapped) in
 * collapsed mode.
 */

/* Show the full logo by default; swap to the compact mark only in the rail. */
.aside-logo .minimize-logo {
    display: none;
}

[data-kt-aside-minimize=on] .aside:not(:hover) .aside-logo .default-logo {
    display: none;
}

[data-kt-aside-minimize=on] .aside:not(:hover) .aside-logo .minimize-logo {
    display: block;
    height: auto !important;
    max-height: 2.6rem;
    max-width: 100%;
    object-fit: contain;
}

/*
 * The brand block carries a tall inline height for the expanded sidebar.
 * Collapse it in the rail so the logo is centred and visible rather than
 * clipped by the 75px column. !important is required to beat the inline style.
 */
[data-kt-aside-minimize=on] .aside:not(:hover) .aside-logo {
    height: auto !important;
    min-height: 3.8rem;
    padding: 0.5rem 0.25rem;
    justify-content: center;
}

.dsi-icon-chip {
    width: 3.076923rem;
    height: 3.076923rem;
    flex: 0 0 3.076923rem;
    flex-shrink: 0;
    background-color: color-mix(in srgb, var(--tenant-dashboard-title-color) 10%, transparent);
    color: var(--tenant-dashboard-title-color);
}

.dsi-icon-chip > i,
.dsi-icon-chip .bi {
    color: inherit !important;
}

/*
 * Responsive data-table shell.
 *
 * Use this opt-in wrapper for data tables that can exceed their card width.
 * Scrolling stays inside the table region instead of widening the document.
 * Column visibility and table-cell behavior remain owned by the page.
 */
.dsi-responsive-table {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.dsi-responsive-table > .table {
    min-width: 100%;
    margin-bottom: 0;
}

/*
 * Strategic objectives has eight information-dense columns. At laptop
 * widths, preserve readable column measures and contain horizontal scrolling
 * inside the table region instead of compressing text character by character.
 * The desktop presentation at 1400px and above remains unchanged.
 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .strategic-objectives-table-wrap > .strategic-objectives-table {
        min-width: 100rem;
    }

    .strategic-objectives-table > :not(caption) > * > * {
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/*
 * Metronic's semantic symbol utilities are pixel-fixed. These rem equivalents
 * compute to their original 40px/50px dimensions at the current 13px root and
 * will track the laptop density tiers when those tiers are activated.
 */
@media (min-width: 992px) and (max-width: 1799.98px) {
    .symbol.symbol-40px > img {
        width: 3.076923rem !important;
        height: 3.076923rem !important;
    }

    .symbol.symbol-40px .symbol-label {
        width: 3.076923rem !important;
        height: 3.076923rem !important;
    }

    .symbol.symbol-40px.symbol-fixed .symbol-label {
        width: 3.076923rem !important;
        height: 3.076923rem !important;
    }

    .symbol.symbol-40px.symbol-fixed > img {
        width: 3.076923rem !important;
        height: 3.076923rem !important;
        max-width: none !important;
    }

    .symbol.symbol-40px.symbol-2by3 .symbol-label {
        width: 4.615385rem !important;
        height: 3.076923rem !important;
    }

    .symbol.symbol-40px.symbol-2by3 > img {
        width: 4.615385rem !important;
        height: 3.076923rem !important;
        max-width: none !important;
    }

    .symbol.symbol-50px > img {
        width: 3.846154rem !important;
        height: 3.846154rem !important;
    }

    .symbol.symbol-50px .symbol-label {
        width: 3.846154rem !important;
        height: 3.846154rem !important;
    }

    .symbol.symbol-50px.symbol-fixed .symbol-label {
        width: 3.846154rem !important;
        height: 3.846154rem !important;
    }

    .symbol.symbol-50px.symbol-fixed > img {
        width: 3.846154rem !important;
        height: 3.846154rem !important;
        max-width: none !important;
    }

    .symbol.symbol-50px.symbol-2by3 .symbol-label {
        width: 5.769231rem !important;
        height: 3.846154rem !important;
    }

    .symbol.symbol-50px.symbol-2by3 > img {
        width: 5.769231rem !important;
        height: 3.846154rem !important;
        max-width: none !important;
    }
}

/*
 * Dashboard quick-nav subnav (small screens only).
 *
 * Markup: resources/views/layouts/module_subnavs/dashboard.blade.php. It
 * reuses the same .module-subnav / .module-subnav__* classes (defined in
 * app.blade.php's shared <style> block) as every other module subnav - same
 * horizontal link row + dropdown look. The only thing specific to this one
 * is visibility: every other module subnav is visible at all widths, but
 * this one is small-screen only (the sidebar is still usable above
 * 1399.98px). The extra "dashboard-subnav-bar" class on its <nav> is what
 * lets this rule target only this instance of .module-subnav.
 */
.dashboard-subnav-bar {
    display: none;
}

@media (max-width: 1399.98px) {
    .dashboard-subnav-bar {
        display: block;
    }
}

/* ==========================================================================
 * PMS MODULE SUBNAV - PHONES
 *
 * Markup: resources/views/layouts/module_subnavs/performance-management.blade.php.
 * app.blade.php sets this subnav's .module-subnav__primary to
 * overflow: visible (so the Dashboard split-button menu is not clipped) and
 * .module-subnav__actions to flex-shrink: 0. Below 768px the two rows cannot
 * fit side by side, so the primary links spilled over the dropdown buttons
 * and pushed the page ~39px wider than a 390px phone. Here the links and the
 * dropdown buttons wrap onto full-width rows instead - every destination
 * stays visible, nothing scrolls sideways and no dropdown is clipped.
 * Scoped to the PMS subnav only; tablet and desktop are unchanged.
 * ========================================================================== */
@media (max-width: 767.98px) {
    [data-testid="performance-management-module-subnav"] .module-subnav__links,
    [data-testid="performance-management-module-subnav"] .module-subnav__primary,
    [data-testid="performance-management-module-subnav"] .module-subnav__actions {
        flex-wrap: wrap;
    }

    [data-testid="performance-management-module-subnav"] .module-subnav__links {
        gap: 0.35rem;
    }

    [data-testid="performance-management-module-subnav"] .module-subnav__primary,
    [data-testid="performance-management-module-subnav"] .module-subnav__actions {
        flex: 1 1 100%;
        gap: 0.35rem;
    }

    [data-testid="performance-management-module-subnav"] .module-subnav__link {
        font-size: 1.1rem;
        min-height: 44px;
    }

    [data-testid="performance-management-module-subnav"] .module-subnav__menu {
        max-width: calc(100vw - 2rem);
    }

    [data-testid="performance-management-module-subnav"] .module-subnav__menu .dropdown-item {
        font-size: 1.1rem;
        min-height: 44px;
        white-space: normal;
        display: flex;
        align-items: center;
    }
}

/* ==========================================================================
 * DASHBOARD SURFACES
 *
 * Reusable, fluid dashboard components. Any dashboard page can opt in by
 * adding `.dsi-dashboard` to its content container - no page-specific CSS,
 * no inline styles, no <style> blocks in Blade.
 *
 * DESIGN INTENT (read before changing the numbers):
 * Standard Bootstrap columns solve narrow screens by REARRANGING - a 4-up
 * row becomes 2-up then 1-up, so the composition a user learned on a large
 * monitor is gone by the time they reach a laptop. These components instead
 * SCALE: every size below is a clamp() that interpolates smoothly with the
 * viewport, so cards, numbers, icons and padding shrink together and hold
 * the large-screen layout much further down before any reflow happens.
 *
 * The clamp() bounds are expressed in rem on purpose. The desktop density
 * bands at the top of this file move the root font-size (12 / 13px),
 * so rem-based bounds inherit that density work rather than fighting it.
 *
 * Colour comes from the tenant tokens defined in layouts/app.blade.php
 * (--tenant-dashboard-header-bg, --tenant-dashboard-title-color), so the
 * existing grey/navy design system is preserved and stays themeable.
 * ========================================================================== */

.dsi-dashboard {
    /* Single source of truth for this page's rhythm. Override on a child to
       retune one section without touching the rest. */
    --dsi-gap: clamp(0.75rem, 0.55rem + 0.55vw, 1.5rem);
    --dsi-card-pad: clamp(0.85rem, 0.6rem + 0.7vw, 1.6rem);
    --dsi-radius: 0.75rem;
    --dsi-accent: var(--tenant-dashboard-title-color, #193660);
    --dsi-hairline: #e9edf3;
}

/* Vertical rhythm between the page's major cards. */
.dsi-dashboard .dsi-section + .dsi-section {
    margin-top: var(--dsi-gap);
}

/* --------------------------------------------------------------------------
 * Page header
 * ------------------------------------------------------------------------ */

.dsi-page-head__title {
    color: var(--dsi-accent);
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.dsi-page-head__meta {
    color: #7e8299;
    font-size: clamp(0.7rem, 0.66rem + 0.15vw, 0.85rem);
    margin: 0.25rem 0 0;
}

/* --------------------------------------------------------------------------
 * Panels (cards)
 *
 * .dsi-panel__head pairs with Metronic's .card-header and the shared
 * .tenant-dashboard-header/.tenant-dashboard-title classes, adding fluid
 * padding so the header shrinks with everything else instead of keeping a
 * fixed 70px block on a small screen.
 * ------------------------------------------------------------------------ */

.dsi-panel {
    border: 1px solid var(--dsi-hairline);
    border-radius: var(--dsi-radius);
    overflow: hidden;
}

.dsi-dashboard .dsi-panel__head {
    align-items: center;
    column-gap: var(--dsi-gap);
    flex-wrap: wrap;
    min-height: 0;
    padding: clamp(0.65rem, 0.45rem + 0.5vw, 1.15rem) var(--dsi-card-pad);
    row-gap: 0.4rem;
}

.dsi-dashboard .dsi-panel__body {
    padding: var(--dsi-card-pad);
}

/* --------------------------------------------------------------------------
 * Scroll panel
 *
 * Replaces inline `max-height: 300px; overflow-y: auto`. The height is
 * viewport-relative and clamped, so tall screens show more rows and short
 * screens don't get a panel taller than the space available.
 * ------------------------------------------------------------------------ */

.dsi-scroll-panel {
    max-height: clamp(13rem, 32vh, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
 * List rows (notifications, checklists)
 * ------------------------------------------------------------------------ */

.dsi-list-row {
    align-items: center;
    border-radius: 0.55rem;
    display: flex;
    gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.9rem);
    padding: clamp(0.45rem, 0.35rem + 0.25vw, 0.7rem);
    transition: background-color 0.15s ease;
}

.dsi-list-row:hover {
    background: #f7f9fc;
}

.dsi-list-row + .dsi-list-row {
    margin-top: 0.15rem;
}

/* Accent bar. currentColor-free so it can be recoloured per row. */
.dsi-list-row__marker {
    align-self: stretch;
    background: var(--dsi-accent);
    border-radius: 999px;
    flex: 0 0 auto;
    min-height: 1.9rem;
    opacity: 0.75;
    width: 0.2rem;
}

.dsi-list-row--danger .dsi-list-row__marker { background: #f85f53; }

.dsi-list-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.dsi-list-row__title {
    color: #3f4254;
    display: block;
    font-size: clamp(0.76rem, 0.7rem + 0.2vw, 0.95rem);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

a.dsi-list-row__title:hover {
    color: var(--dsi-accent);
}

.dsi-list-row__meta {
    color: #a1a5b7;
    display: block;
    font-size: clamp(0.66rem, 0.62rem + 0.15vw, 0.8rem);
    line-height: 1.35;
    margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
 * Empty states
 * ------------------------------------------------------------------------ */

.dsi-empty {
    align-items: center;
    color: #a1a5b7;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.25rem, 1rem + 1.2vw, 2.75rem) 1rem;
    text-align: center;
}

.dsi-empty > i {
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2.4rem);
    opacity: 0.55;
}

.dsi-empty__text {
    font-size: clamp(0.76rem, 0.7rem + 0.2vw, 0.95rem);
}

/* --------------------------------------------------------------------------
 * Data tables
 *
 * Only typography/density is touched here. Layout, sorting and the
 * horizontal scroll of .table-responsive are left to Bootstrap/DataTables.
 * ------------------------------------------------------------------------ */

.dsi-dashboard .dsi-table {
    font-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.9rem);
}

.dsi-dashboard .dsi-table > thead > tr > th {
    background: #f7f9fc;
    color: #7e8299;
    font-size: clamp(0.65rem, 0.61rem + 0.15vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dsi-dashboard .dsi-table > tbody > tr > td {
    vertical-align: middle;
}

/* One-line workplan activity preview (opt-in via $clampActivityLines on the
 * shared activity cell). Wrapping is still allowed so the column does not
 * widen to fit the text; the box simply stops after the first line. The full
 * name is in the title attribute and in the View All modal. */
.dsi-activity-line {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    overflow-wrap: anywhere;
}

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

.dsi-dashboard .dsi-tabs {
    flex-wrap: nowrap;
    gap: 0.15rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
}

.dsi-dashboard .dsi-tabs::-webkit-scrollbar {
    display: none;
}

.dsi-dashboard .dsi-tabs .nav-link {
    font-size: clamp(0.74rem, 0.68rem + 0.2vw, 0.92rem);
    padding: 0.55rem 0.8rem;
}

/* --------------------------------------------------------------------------
 * Context drawers
 *
 * Shared, Metronic-backed side panels. Pages provide their own authorised
 * content through x-ui.side-drawer; positioning, accessibility affordances,
 * tenant colour tokens and responsive presentation remain central here.
 * ------------------------------------------------------------------------ */

.dsi-side-drawer-shell {
    display: contents;
}

.dsi-side-drawer {
    box-shadow: -0.5rem 0 1.75rem rgba(25, 54, 96, 0.16);
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* HTML starts closed; hide before KTDrawer initialises, then reveal at its show event. */
.dsi-side-drawer[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}

.dsi-side-drawer[aria-hidden="false"] {
    visibility: visible;
}

.dsi-side-drawer__header {
    align-items: center;
    background: var(--tenant-dashboard-header-bg, #e7eaef);
    border-bottom: 1px solid var(--dsi-hairline, #e9edf3);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
}

.dsi-side-drawer__icon {
    align-items: center;
    background: color-mix(in srgb, var(--tenant-dashboard-title-color, #193660) 10%, transparent);
    border-radius: 50%;
    color: var(--tenant-dashboard-title-color, #193660);
    display: inline-flex;
    flex: 0 0 auto;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.dsi-side-drawer__icon > i {
    font-size: 1.25rem;
}

.dsi-side-drawer__title {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.35rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.dsi-side-drawer__subtitle {
    color: #7e8299;
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0.2rem 0 0;
}

.dsi-side-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.dsi-side-drawer__tabs {
    flex-wrap: nowrap;
    gap: 0.2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    white-space: nowrap;
}

.dsi-side-drawer__tabs .nav-link {
    color: #7e8299;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.7rem 0.45rem;
}

.dsi-side-drawer__tabs .nav-link.active {
    color: var(--tenant-dashboard-title-color, #193660);
}

.dsi-side-drawer__section-heading {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.dsi-side-drawer__trigger {
    align-items: center;
    background: var(--tenant-dashboard-title-color, #193660);
    border: 0;
    border-radius: 0.6rem 0 0 0.6rem;
    box-shadow: -0.2rem 0 0.8rem rgba(25, 54, 96, 0.18);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    justify-content: center;
    min-height: 10.5rem;
    padding: 0.8rem 0.55rem;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    z-index: 1030;
}

/* Keep KPI approval modals on the shared grey dashboard-header surface. */
.dsi-kpi-approval-modal__header {
    background-color: var(--tenant-dashboard-header-bg, #e7eaef) !important;
}

.dsi-side-drawer__trigger:hover,
.dsi-side-drawer__trigger:focus-visible {
    background: var(--tenant-primary, #006341);
    box-shadow: -0.3rem 0 1rem rgba(25, 54, 96, 0.28);
    color: #fff;
    outline: 0;
}

.dsi-side-drawer__trigger:focus-visible {
    outline: 0.2rem solid #fff;
    outline-offset: -0.35rem;
}

.dsi-side-drawer__trigger > i {
    font-size: 1.05rem;
}

.dsi-side-drawer__trigger-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    writing-mode: vertical-rl;
}

.dsi-side-drawer__trigger-count {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: var(--tenant-dashboard-title-color, #193660);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 700;
    height: 1.25rem;
    justify-content: center;
    min-width: 1.25rem;
}

/* The session switcher is a visible header control, not a floating edge tab. */
.dsi-side-drawer-shell--inline {
    display: inline-flex;
}

.dsi-side-drawer-shell--inline .dsi-side-drawer__trigger {
    background: #f5f6f8;
    border: 1px solid #d8dde5;
    border-radius: 0.5rem;
    box-shadow: none;
    color: #3f4858;
    flex-direction: row;
    gap: 0.4rem;
    min-height: 2.6rem;
    padding: 0.45rem 0.8rem;
    position: static;
    transform: none;
    white-space: nowrap;
}

.dsi-side-drawer-shell--inline .dsi-side-drawer__trigger:hover,
.dsi-side-drawer-shell--inline .dsi-side-drawer__trigger:focus-visible {
    background: #e9edf2;
    border-color: #b7c0cd;
    box-shadow: none;
    color: #193660;
    outline: 2px solid transparent;
}

.dsi-side-drawer-shell--inline .dsi-side-drawer__trigger:focus-visible {
    outline-color: #193660;
    outline-offset: 2px;
}

.dsi-side-drawer-shell--inline .dsi-side-drawer__trigger-label {
    font-size: 0.82rem;
    letter-spacing: 0;
    writing-mode: horizontal-tb;
}

/* Keep the trigger rendered in place, but below the open drawer and its overlay. */
.dsi-side-drawer-shell--inline .dsi-side-drawer__trigger[aria-expanded="true"] {
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .dsi-side-drawer__trigger {
        border-radius: 0.55rem 0 0 0.55rem;
        gap: 0.4rem;
        min-height: 0;
        padding: 0.6rem 0.45rem;
        top: auto;
        transform: none;
        bottom: 1rem;
    }

    .dsi-side-drawer__trigger-label {
        font-size: 0.7rem;
    }

    .dsi-side-drawer__header {
        padding: 1rem;
    }
}

/* ---------------------------------------------------------------------------
 * Rich text editor (x-ui.rich-text-editor + assets/js/dsi-rich-text.js)
 *
 * Lives here rather than in the Blade component because the responsive
 * source-debt ratchet fails the suite on a new <style> block in a view.
 * ------------------------------------------------------------------------- */
.dsi-rich-text__editor .ql-editor {
    min-height: inherit;
    font-size: 0.925rem;
    /* Match the tenant body colour rather than Quill's near-black default. */
    color: #3f4254;
}

.dsi-rich-text__editor .ql-editor.ql-blank::before {
    color: #a1a5b7;
    font-style: normal;
}

/* Quill draws its own hairline; the form-control border around it would double
   up, and its toolbar needs the tenant's radius rather than Quill's square. */
.dsi-rich-text__editor.form-control {
    border: 0;
    padding: 0;
    background-color: transparent;
}

.dsi-rich-text .ql-toolbar.ql-snow {
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem 0.475rem 0 0;
    background-color: #f9f9f9;
}

.dsi-rich-text .ql-container.ql-snow {
    border: 1px solid #e4e6ef;
    border-top: 0;
    border-radius: 0 0 0.475rem 0.475rem;
    background-color: #ffffff;
}

/* The toolbar's active state uses the tenant navy, not Quill's stock blue. */
.dsi-rich-text .ql-snow .ql-toolbar button.ql-active,
.dsi-rich-text .ql-snow.ql-toolbar button.ql-active,
.dsi-rich-text .ql-snow .ql-toolbar button:hover,
.dsi-rich-text .ql-snow.ql-toolbar button:hover {
    color: var(--tenant-dashboard-title-color, #193660);
}

.dsi-rich-text .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.dsi-rich-text .ql-snow.ql-toolbar button:hover .ql-stroke {
    stroke: var(--tenant-dashboard-title-color, #193660);
}

/* Progressive enhancement: a working textarea is the first paint. Quill is
   revealed only after the bridge has created and hydrated the editor. */
.dsi-rich-text__enhancement {
    display: none;
}

.dsi-rich-text__fallback {
    display: block;
    resize: vertical;
}

.dsi-rich-text[data-rich-text-enhanced='true'] .dsi-rich-text__enhancement {
    display: block;
}

.dsi-rich-text[data-rich-text-enhanced='true'] .dsi-rich-text__fallback {
    display: none;
}

/* Read-only bodies render as prose, so the editor chrome would be misleading. */
.dsi-rich-text__editor[data-readonly='true'] .ql-editor {
    padding-left: 0;
    padding-right: 0;
}

/* Enterprise question modal: Workplan's compact banner and split decision
   surface, expressed through the shared tenant tokens. */
.interview-question-modal {
    background-color: rgba(0, 0, 0, .42);
}

.interview-question-modal .modal-content {
    border-radius: .75rem;
    box-shadow: 0 1rem 3rem rgba(25, 54, 96, .2);
    overflow: hidden;
}

.interview-question-modal__header {
    border-bottom: 2px solid var(--tenant-primary, #006341);
    flex: 0 0 auto;
    min-height: 5.25rem;
    padding: 1rem 1.5rem;
}

.interview-question-modal__icon {
    align-items: center;
    background: color-mix(in srgb, var(--tenant-dashboard-title-color, #193660) 10%, transparent);
    border-radius: .65rem;
    color: var(--tenant-dashboard-title-color, #193660);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.interview-question-modal__icon > i {
    font-size: 1.15rem;
}

.interview-question-modal__body {
    min-height: 0;
    overflow-x: hidden;
    padding: clamp(1rem, .7rem + 1vw, 1.75rem);
}

.interview-question-modal__settings {
    background-color: var(--tenant-surface-hover, #f7f9fc);
    border: 1px solid var(--bs-gray-200, #e4e6ef);
    border-radius: .65rem;
    padding: 1.25rem;
}

.interview-question-modal__footer {
    background-color: #fff;
    flex: 0 0 auto;
    padding: .9rem 1.5rem;
}

@media (max-width: 991.98px) {
    .interview-question-modal__settings {
        height: auto !important;
    }
}

@media (max-width: 767.98px) {
    .interview-question-modal .modal-content {
        border-radius: 0;
    }

    .interview-question-modal__header,
    .interview-question-modal__footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .interview-question-modal__footer .btn {
        flex: 1 1 0;
    }
}

/* ---------------------------------------------------------------------------
 * Interview surfaces (the Interviews workspace tab, the template library, the
 * builder, and interview configuration).
 *
 * Moved here from an @once <style> block in
 * livewire/modules/recruitment/partials/interview-theme.blade.php: four pages now
 * use these classes, and page CSS in a Blade file is what the responsive
 * source-debt ratchet exists to prevent. The selectors and values are unchanged.
 * ------------------------------------------------------------------------- */
.interview-outline-btn {
    background-color: #ffffff;
    border: 1px solid #193660;
    color: #193660;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.interview-outline-btn:hover,
.interview-outline-btn:focus {
    background-color: #193660;
    border-color: #193660;
    color: #ffffff;
}

/* Split-button caret for the outline variant, following the same grammar as
   .btn-tenant-primary.dropdown-toggle-split in the layout: the caret sits one
   step quieter than the segment it is joined to, with an inset divider so the
   seam stays visible at rest. On an outline button "quieter" is a light grey
   fill rather than the white one, since there is no dark fill to lighten. */
.interview-outline-btn.dropdown-toggle-split {
    background-color: #eff2f5;
    border-color: #193660;
    color: #5e6278;
    box-shadow: inset 1px 0 0 rgba(25, 54, 96, .25);
}

.interview-outline-btn.dropdown-toggle-split:hover,
.interview-outline-btn.dropdown-toggle-split:focus,
.interview-outline-btn.dropdown-toggle-split.show {
    background-color: #e4e6ef;
    border-color: #193660;
    color: #193660;
}

/* Still clearly a navy control, just visibly out of reach — a plain grey
   pill would read as decoration rather than a coming action. */
.interview-outline-btn.disabled,
.interview-outline-btn[aria-disabled="true"] {
    background-color: #ffffff;
    border-color: rgba(25, 54, 96, .35);
    color: rgba(25, 54, 96, .55);
    font-weight: 500;
}

.interview-outline-btn.disabled:hover,
.interview-outline-btn[aria-disabled="true"]:hover {
    background-color: #ffffff;
    color: rgba(25, 54, 96, .55);
}

/* Setup sequence: the current step is the one instruction on the page,
   so it carries a solid navy edge and a solid badge instead of the
   light-tint treatment used for the settled steps. */
.interview-setup-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid #eff2f5;
    border-radius: 0.475rem;
    padding: 0.9rem 1rem;
    background-color: #ffffff;
    height: 100%;
}

.interview-setup-step--current {
    border: 2px solid #193660;
    background-color: #ffffff;
    box-shadow: 0 .25rem .75rem rgba(25, 54, 96, .12);
}

.interview-setup-step--locked {
    opacity: .72;
}

.interview-setup-step__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    background-color: #f5f8fa;
    color: #7e8299;
}

.interview-setup-step--done .interview-setup-step__num {
    background-color: #e8fff3;
    color: #0f7a46;
}

.interview-setup-step--current .interview-setup-step__num {
    background-color: #193660;
    color: #ffffff;
}

.interview-setup-step--current .interview-setup-step__title {
    color: #193660;
    font-weight: 700;
}

.interview-step-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: .425rem;
    padding: .35em .6em;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
}

.interview-step-badge--next {
    background-color: #193660;
    color: #ffffff;
}

.interview-readiness-row {
    display: flex;
    align-items: center;
    /* Wraps rather than overflowing: four children (state dot, text,
       pills, actions) do not fit a phone-width card in one line. */
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid #eff2f5;
}

.interview-readiness-row__text {
    flex: 1 1 14rem;
    min-width: 0;
}

.interview-readiness-row:last-child {
    border-bottom: 0;
}

.interview-state-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.interview-state-dot--done { background-color: #e8fff3; color: #0f7a46; }
.interview-state-dot--pending { background-color: #fff8dd; color: #b58100; }
.interview-state-dot--active { background-color: #f1faff; color: #009ef7; }
.interview-state-dot--idle { background-color: #f5f8fa; color: #a1a5b7; }

.interview-progress {
    max-width: 150px;
}

.interview-progress__bar {
    height: 6px;
    border-radius: 3px;
    background-color: #eff2f5;
    overflow: hidden;
    display: flex;
}

.interview-progress__bar span {
    height: 100%;
    transition: width 0.25s ease;
}

/* The app ships no global [x-cloak] rule, so without this the panel
   renders expanded until Alpine initializes and then snaps shut. */
[x-cloak] { display: none !important; }

/* Interview builder question card.
 *
 * The marks badge and the row actions must sit to the right of every question,
 * whatever the length of its model answer. With `flex-grow-1` alone the body's
 * flex basis is its content width, so a long answer pushed the aside column onto
 * its own line — two cards side by side ended up laid out differently. A zero
 * basis makes the body shrink instead, so every card matches. */
.interview-question-card__body {
    flex: 1 1 0;
    min-width: 0;
}

.interview-question-card__aside {
    flex: 0 0 auto;
}

.wp-question-number {
    /* Sized in em so the circle tracks its own font-size: identical to the
       previous 1.75rem at the base .75rem, and it grows with the large-screen
       scale below instead of crowding a two-digit number. */
    width: 2.3333em;
    height: 2.3333em;
    flex: 0 0 2.3333em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: #f5f8fa;
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: .75rem;
    font-weight: 700;
}

.wp-scoring-status__detail::before {
    content: "\00b7";
    margin-right: .5rem;
}

/* Disabled candidates are intentionally obvious rather than washed out by
   Bootstrap's disabled-button opacity. They remain non-interactive, while the
   pale danger treatment communicates that attendance must be resolved first. */
.wp-candidate-pill--unavailable,
.wp-candidate-pill--unavailable.disabled,
.wp-candidate-pill--unavailable:disabled {
    border: 1px solid #fbd3de;
    background-color: #fff5f8;
    color: #a61e4d;
    opacity: 1 !important;
    cursor: not-allowed;
}

.wp-protocol-check {
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.wp-protocol-check:hover {
    border-color: var(--tenant-primary, #193660) !important;
}

.wp-protocol-check:focus-within {
    box-shadow: 0 0 0 .2rem rgba(25, 54, 96, .12);
}

.wp-protocol-check .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
}

.wp-score-range .form-range {
    min-width: 10rem;
}

/* The tick scale sits under the track, inside the slider's own column, so the
   max tick cannot line up beneath the readout and read as a second score. */
.wp-score-range__ticks {
    display: flex;
    justify-content: space-between;
    color: #a1a5b7;
    font-size: .75rem;
    line-height: 1;
}

/* The mark the panellist gave is the reading on this row; "out of 20" is the
   scale it sits on. Sizing them the same made the panellist read the pair as
   one small label, so the score carries the weight and the denominator recedes.
   Shared by both input styles — the button row and the slider — so a mark looks
   the same wherever it was entered.

   The colour is the same low/mid/high band the slider animates through:
   inherited from .wp-score-range on a slider row, set from data-band by the
   component on a button row. */
.wp-score-readout {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .15rem;
    min-width: 5rem;
}

.wp-score-readout[data-band="low"] { --wp-range-band: #f1416c; }

.wp-score-readout[data-band="mid"] { --wp-range-band: #ffc700; }

.wp-score-readout[data-band="high"] { --wp-range-band: #50cd89; }

.wp-score-readout[data-band="none"] { --wp-range-band: #b5b5c3; }

.wp-score-readout__score {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wp-range-band, #b5b5c3);
    font-variant-numeric: tabular-nums;
    transition: color .25s ease;
}

.wp-score-readout__max {
    font-size: .8125rem;
    font-weight: 600;
    color: #a1a5b7;
    white-space: nowrap;
}

/* Autosave briefly locks score inputs to serialize complete-draft writes. Keep
   their appearance stable: saving one mark must not make the sheet flash or
   suggest that unrelated questions changed. */
.wp-score-option {
    transition: color .12s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.wp-score-buttons.is-saving .wp-score-option:disabled,
.wp-score-range.is-saving .form-range:disabled {
    opacity: 1;
}

.recruitment-rich-text > :last-child {
    margin-bottom: 0;
}

.recruitment-rich-text ul,
.recruitment-rich-text ol {
    margin-bottom: .5rem;
    padding-left: 1.4rem;
}

/* Below sm there is no room for a side column, so it drops under the question
   rather than squeezing the text into a sliver. */
@media (max-width: 575.98px) {
    .wp-scoring-status__detail {
        flex-basis: 100%;
        padding-left: 1.5rem;
    }

    .wp-scoring-status__detail::before {
        content: none;
    }

    .interview-question-card {
        flex-wrap: wrap;
    }

    .interview-question-card__aside {
        width: 100%;
        align-items: flex-start !important;
    }
}

/* Recruitment Final Scores: one quiet navigation surface above the existing results. */
.final-scores-table th { white-space: nowrap; }
.final-scores-page .recruitment-standard-table-card { border-radius: 10px; }
.final-scores-compact thead th { padding: .6rem .75rem; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: #7e8299; font-weight: 600; border-bottom: 1px solid #e4e6ef; }
.final-scores-compact tbody td { padding: .65rem .75rem; border-bottom: 1px solid #f1f3f6; }
.final-scores-compact thead th:first-child, .final-scores-compact tbody td:first-child { padding-left: 1.5rem; }
.final-scores-compact thead th:last-child, .final-scores-compact tbody td:last-child { padding-right: 1.5rem; }
.final-scores-compact tbody tr:last-child td { border-bottom: 0; }
.final-scores-compact tbody tr:hover td { background: #fafbfc; }
.final-score-candidate-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 50%; font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--tenant-primary-color, #193660); }
.final-score-candidate-avatar--success { background: #198754; }
.final-score-candidate-avatar--warning { background: #b76e00; }
.final-score-candidate-avatar--secondary { background: #a1a5b7; }
.final-scores-page .min-w-0 { min-width: 0; }
.final-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tenant-primary-color, #193660); color: #fff; font-weight: 700; }
.final-score-stat { display: flex; flex-direction: column; align-items: center; padding: .85rem .5rem; border-radius: .6rem; background: #fff; border: 1px solid #e4e6ef; color: var(--tenant-primary-color, #193660); }
.final-score-stat strong { font-size: 1.35rem; line-height: 1; }
.final-score-stat span { font-size: .7rem; margin-top: .35rem; color: #6b7280; }
.final-score-stat--success strong { color: #198754; }
.final-score-stat--warning strong { color: #b76e00; }
.final-scores-blind-pill { display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 999px; background: #fdf3e3; color: #b76e00; font-size: .75rem; font-weight: 600; }
.final-score-progress { height: .5rem; background: #e4e6ef; border-radius: 999px; }
.final-score-panellist { border: 1px solid #e4e6ef; border-radius: .6rem; padding: .7rem .75rem; }
.final-score-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tenant-primary-color, #193660); color: #fff; font-size: .7rem; font-weight: 700; }
.final-score-pill { display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: 999px; background: #fdf3e3; color: #b76e00; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.final-score-chip { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: .4rem; border: 1px solid #e4e6ef; background: #fff; color: #3f4254; font-size: .72rem; }
/* Keep rank and candidate visible while the panellist columns scroll. */
.final-scores-matrix-scroll { overflow-x: auto; }
.final-scores-matrix__rank, .final-scores-matrix__name { position: sticky; background: #fff; z-index: 2; }
.final-scores-matrix__rank { left: 0; width: 4.5rem; }
.final-scores-matrix__name { left: 4.5rem; min-width: 14rem; box-shadow: 1px 0 0 #f1f3f6; }
.final-scores-matrix thead .final-scores-matrix__rank, .final-scores-matrix thead .final-scores-matrix__name { z-index: 3; }
.final-scores-compact tbody tr:hover .final-scores-matrix__rank, .final-scores-compact tbody tr:hover .final-scores-matrix__name { background: #fafbfc; }
.final-scores-matrix__absent td { color: #a1a5b7; }
.final-scores-caret { transition: transform .15s ease; display: inline-block; }
.final-scores-caret.is-open { transform: rotate(90deg); }
.bi-chevron-down.final-scores-caret.is-open { transform: rotate(180deg); }
.final-score-action--view { background-color: #eef2f8; border-color: transparent; color: var(--tenant-primary-color, #193660); }
.final-score-action--view:hover, .final-score-action--view:focus { background-color: var(--tenant-primary-color, #193660); border-color: var(--tenant-primary-color, #193660); color: #fff; }
.final-score-summary-card__label { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: #7e8299; font-weight: 600; margin-bottom: .35rem; }
.final-score-breakdown-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .85rem 1.15rem; background: transparent; border: 0; text-align: left; color: inherit; }
.final-score-breakdown-head:hover { background: #fafbfc; }
.final-score-tier-heading { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: #3f4254; margin-bottom: .75rem; }
.final-score-tier-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.final-score-audit-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #f1f3f6; color: var(--tenant-primary-color, #193660); font-size: .75rem; }
.final-score-details summary { list-style: none; cursor: pointer; }
.final-score-details summary::-webkit-details-marker { display: none; }
.final-score-details__panel { min-width: 15rem; }

.final-scores-overview .card-body {
    background: var(--bs-body-bg, #fff);
}

.final-scores-overview__top {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
}

.final-scores-overview__heading {
    min-width: 0;
}

.final-scores-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
}

.final-scores-header-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.final-scores-overview .final-scores-session-picker {
    width: min(100%, 18rem);
}

.final-scores-overview .final-scores-overview__tabs {
    min-height: 0 !important;
    border-top: 1px solid var(--bs-gray-300, #d8dee6);
    background: var(--bs-gray-100, #f5f8fa) !important;
}

.final-scores-overview .final-scores-overview__tabs .nav-link {
    padding: 0.75rem 1rem;
    border-bottom: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.final-scores-overview .final-scores-overview__tabs .nav-link.active {
    background: var(--bs-body-bg, #fff);
    border-bottom-color: var(--tenant-primary-color, #193660);
}

.final-scores-round-context {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bs-gray-200, #e2e8f0);
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.final-scores-decision .card-body {
    padding: 1.25rem 1.5rem;
}

.final-scores-decision__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.final-scores-decision__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-gray-200, #e2e8f0);
}

.final-scores-decision__fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding-right: 1rem;
}

.final-scores-decision__fact + .final-scores-decision__fact {
    padding-left: 1rem;
    border-left: 1px solid var(--bs-gray-200, #e2e8f0);
}

.final-scores-decision__fact strong {
    overflow-wrap: anywhere;
}

.final-scores-breakdown-heading {
    margin: 0;
    scroll-margin-top: 1.5rem;
}

.final-scores-breakdown-heading:focus-visible {
    outline: 2px solid var(--tenant-primary-color, #193660);
    outline-offset: 2px;
}

.final-scores-recommendations {
    scroll-margin-top: 1.5rem;
}

@media (max-width: 1399.98px) {
    .final-scores-overview__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .final-scores-header-actions {
        justify-content: flex-start;
    }

    .final-scores-header-actions__buttons {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .final-score-details__panel { min-width: 12rem; }

    .final-scores-decision__facts {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .final-scores-decision__fact,
    .final-scores-decision__fact + .final-scores-decision__fact {
        padding: 0;
        border-left: 0;
    }

    .final-scores-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .final-scores-overview .final-scores-session-picker {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
 * Live scoring console (manager interview work package): candidate pills,
 * the >10-mark score slider, and the sticky rail.
 *
 * Page CSS in a Blade @once block is what the responsive source-debt ratchet
 * exists to prevent, so these live here with the rest of the interview theme.
 * ------------------------------------------------------------------------- */

/* Three pill states the panellist must tell apart at a glance: the sheet that
   is open, the candidates they can switch to, and the ones attendance has not
   cleared yet (--unavailable, above). */
.wp-workspace-overview__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.wp-workspace-overview__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}

.wp-workspace-overview__meta {
    line-height: 1.5;
}

.wp-candidate-picker {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.wp-panel-progress .card-header {
    min-height: 3.5rem;
}

.wp-panel-progress .card-body > div {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

/* The schedule has a visible workspace action; keep the shared drawer's
   programmatic toggle available without the second floating rail trigger. */
.wp-package #wp_schedule_toggle {
    display: none;
}

@media (max-width: 767.98px) {
    .wp-workspace-overview__top {
        flex-direction: column;
        gap: 1rem;
    }

    .wp-workspace-overview__actions {
        justify-content: flex-start;
        width: 100%;
    }
}

.wp-candidate-pill {
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* The open sheet. Solid navy with a ring: "whose marks am I entering" has to be
   answerable at a glance, and a white pill on a white card could not answer it. */
.wp-candidate-pill--active,
.wp-candidate-pill--active:hover,
.wp-candidate-pill--active:focus {
    background-color: #193660;
    border: 1px solid #193660;
    color: #ffffff;
    box-shadow: 0 0 0 .2rem rgba(25, 54, 96, .18);
}

/* Attended and switchable — the page's primary control, so it carries a tinted
   fill rather than sitting white-on-white and reading as decoration. */
.wp-candidate-pill--ready {
    background-color: #eaf0f8;
    border: 1px solid #c2d0e4;
    color: #193660;
}

.wp-candidate-pill--ready:hover,
.wp-candidate-pill--ready:focus {
    background-color: #193660;
    border-color: #193660;
    color: #ffffff;
}

/* The >10-mark slider. The track fills through the tenant's danger → warning →
   success ramp, so the colour under the thumb IS the reading: a mark low in the
   range is red, a strong one green. Both the fill and the thumb colour animate,
   which is what makes dragging feel like scoring rather than typing.
   No band until the panellist has actually moved it — a red thumb resting at
   zero would assert a mark nobody gave. */
.wp-score-range {
    --wp-range-pct: 0%;
    --wp-range-band: #b5b5c3;
}

.wp-score-range[data-band="low"] { --wp-range-band: #f1416c; }

.wp-score-range[data-band="mid"] { --wp-range-band: #ffc700; }

.wp-score-range[data-band="high"] { --wp-range-band: #50cd89; }

/* Two layers: the full ramp underneath, and a grey cover shrinking from the
   right. The track follows the native thumb without a transition: delaying
   only the fill makes a committed mark briefly look higher than it is. */
.wp-score-range .form-range::-webkit-slider-runnable-track {
    height: .5rem;
    border-radius: 1rem;
    background-color: #eff2f5;
    background-image:
        linear-gradient(#eff2f5, #eff2f5),
        linear-gradient(90deg, #f1416c 0%, #ffc700 50%, #50cd89 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right center, left center;
    background-size: calc(100% - var(--wp-range-pct)) 100%, 100% 100%;
}

.wp-score-range .form-range::-moz-range-track {
    height: .5rem;
    border-radius: 1rem;
    background-color: #eff2f5;
    background-image:
        linear-gradient(#eff2f5, #eff2f5),
        linear-gradient(90deg, #f1416c 0%, #ffc700 50%, #50cd89 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right center, left center;
    background-size: calc(100% - var(--wp-range-pct)) 100%, 100% 100%;
}

.wp-score-range .form-range::-webkit-slider-thumb {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: -.3rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: var(--wp-range-band);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    transition: background-color .25s ease, transform .12s ease;
}

.wp-score-range .form-range::-moz-range-thumb {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: var(--wp-range-band);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    transition: background-color .25s ease, transform .12s ease;
}

/* Grabbing the thumb enlarges it, so the control acknowledges the drag. */
.wp-score-range .form-range:active::-webkit-slider-thumb { transform: scale(1.18); }

.wp-score-range .form-range:active::-moz-range-thumb { transform: scale(1.18); }

/* Respect a reduced-motion preference: the colours still change, they just
   arrive rather than travel.
   Split one rule per vendor pseudo-element on purpose — a selector list that
   mixes ::-webkit- and ::-moz- is invalid in BOTH engines, so grouping them
   would silently discard the whole block. */
@media (prefers-reduced-motion: reduce) {
    .wp-score-range .form-range::-webkit-slider-runnable-track {
        transition: none;
    }

    .wp-score-range .form-range::-moz-range-track {
        transition: none;
    }

    .wp-score-range .form-range::-webkit-slider-thumb {
        transition: none;
    }

    .wp-score-range .form-range::-moz-range-thumb {
        transition: none;
    }

    .wp-score-readout__score,
    .wp-candidate-pill {
        transition: none;
    }
}

.wp-rail {
    position: sticky;
    top: 90px;
}

/* Bootstrap columns default to min-width:auto through their contents. A long
   one-line section rail can therefore enlarge the score column and the browser
   then follows the active chip sideways. Keep both grid tracks shrinkable;
   only the section rail itself is allowed to scroll horizontally. */
.wp-score-layout,
.wp-score-layout__main,
.wp-score-layout__aside,
.wp-score-layout__main > .card {
    min-width: 0;
}

.wp-score-layout__main > .card {
    max-width: 100%;
}

/* Below lg the rail is a stacked card, not a companion column. */
@media (max-width: 1199.98px) {
    .wp-rail {
        position: static;
    }
}

/* -------------------------------------------------------------------------
 * Score-sheet section rail (manager interview work package).
 *
 * A sheet routinely carries eight or more sections. As wrapped two-line chips
 * they occupied three rows and pushed the first question below the fold, so
 * the panellist scrolled before they could score. One scrolling line keeps the
 * whole run visible as context while Previous/Next at the foot of the sheet
 * does the actual stepping.
 * ------------------------------------------------------------------------- */
.wp-section-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* A horizontal flick inside the rail must not become a page-level swipe. */
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* Room for the scrollbar, so it never sits on top of a chip's border. */
    padding-bottom: .35rem;
    scrollbar-width: thin;
    scrollbar-color: #d6dae0 transparent;
}

.wp-section-rail::-webkit-scrollbar {
    height: 6px;
}

.wp-section-rail::-webkit-scrollbar-track {
    background: transparent;
}

.wp-section-rail::-webkit-scrollbar-thumb {
    background-color: #d6dae0;
    border-radius: 3px;
}

.wp-section-chip {
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 22rem;
    padding: .4rem .75rem;
    border: 1px solid #e4e6ef;
    border-radius: .475rem;
    background-color: #ffffff;
    color: #5e6278;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Navy, not --tenant-primary: that token is the brand green, while every active
   control on this sheet — btn-tenant-primary, the Next button, the candidate
   pills, the running-total card — is navy. The rail has to agree with them. */
.wp-section-chip:hover {
    border-color: var(--tenant-dashboard-title-color, #193660);
    color: var(--tenant-dashboard-title-color, #193660);
}

.wp-section-chip:focus-visible {
    outline: 2px solid var(--tenant-dashboard-title-color, #193660);
    outline-offset: 2px;
}

/* The section being scored. Solid navy so the rail answers "where am I" at a
   glance, which is the only job it still has now that Previous/Next steps. */
.wp-section-chip.is-active {
    background-color: var(--tenant-dashboard-title-color, #193660);
    border-color: var(--tenant-dashboard-title-color, #193660);
    color: #ffffff;
}

/* Finished sections stay legible rather than going grey — the panellist reads
   this rail to see what is left. */
.wp-section-chip.is-complete {
    border-color: #c8e7d5;
    background-color: #f2fbf6;
    color: #2f6b4f;
}

.wp-section-chip__index {
    display: grid;
    place-items: center;
    /* em for the same reason as .wp-question-number: 1.25rem at the base .6875rem. */
    flex: 0 0 1.8182em;
    width: 1.8182em;
    height: 1.8182em;
    border-radius: 50%;
    background-color: #f1f3f8;
    color: #7e8299;
    font-size: .6875rem;
    font-weight: 700;
}

.wp-section-chip.is-active .wp-section-chip__index {
    background-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.wp-section-chip.is-complete .wp-section-chip__index {
    background-color: #dcf3e6;
    color: #2f6b4f;
}

/* The label is what gets sacrificed when a section name is long; the marks
   stay, because they are the part that changes while scoring. */
.wp-section-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-section-chip__meta {
    flex: 0 0 auto;
    font-weight: 500;
    opacity: .75;
}

.wp-section-chip__done {
    flex: 0 0 auto;
    color: #50cd89;
    font-size: .75rem;
}

.wp-section-chip.is-active .wp-section-chip__done {
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .wp-section-rail {
        scroll-behavior: auto;
    }

    .wp-section-chip {
        transition: none;
    }
}

/* ── The locked score sheet ──────────────────────────────────────────────────
   A submitted sheet is a record, not a form: the marks lead and the reasoning
   behind each one folds away. These rules use the same low/mid/high band as
   .wp-score-readout above, so one mark keeps one colour whether it is being
   entered on a slider, read back on the locked sheet, or printed. */
.wp-locked-section-head {
    background-color: #F2F4F8;
    border-top: 1px solid #E9EDF3;
    border-bottom: 1px solid #E9EDF3;
}

.wp-locked-section-head:first-of-type { border-top: 0; }

/* A white pill on the grey header band: a badge-light fill would disappear
   into it, and the lock state is the first thing the reader must register. */
.wp-locked-lock {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 2rem;
    padding: .24rem .6rem;
    font-size: .675rem;
    font-weight: 600;
    color: #0f7a46;
    white-space: nowrap;
}

.wp-locked-question + .wp-locked-question {
    border-top: 1px solid #F6F8FA;
}

/* Fixed width so the questions align down the page regardless of index width. */
.wp-locked-number {
    min-width: 1.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-top: .1rem;
}

.wp-locked-mark {
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: right;
    color: var(--wp-locked-band, #181C32);
}

.wp-locked-mark[data-band="low"]  { --wp-locked-band: #f1416c; }
.wp-locked-mark[data-band="mid"]  { --wp-locked-band: #b58100; }
.wp-locked-mark[data-band="high"] { --wp-locked-band: #3f4254; }
.wp-locked-mark[data-band="none"] { --wp-locked-band: #b5b5c3; }

/* The section meter reads at a glance; the figure beside it is the precise
   answer, so the bar stays quiet rather than competing with it. */
.wp-locked-meter {
    display: none;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background-color: #E1E6EE;
    overflow: hidden;
}

.wp-locked-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--wp-locked-band, #50cd89);
    transition: width .3s ease;
}

.wp-locked-meter[data-band="low"]  { --wp-locked-band: #f1416c; }
.wp-locked-meter[data-band="mid"]  { --wp-locked-band: #ffc700; }
.wp-locked-meter[data-band="high"] { --wp-locked-band: #50cd89; }

@media (min-width: 576px) {
    .wp-locked-meter { display: block; }
}

/* Conic gradient rather than an SVG: one element, no script, and it inherits
   the tenant primary so a re-themed deployment re-colours it for free. */
.wp-locked-ring {
    --wp-ring: 0%;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--tenant-primary, #193660) var(--wp-ring), #e2e8f0 0);
}

.wp-locked-ring > span {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--tenant-primary, #193660);
    font-variant-numeric: tabular-nums;
}

/* A disclosure, not a button: it should read as a quiet affordance under the
   question and only assert itself on hover or keyboard focus. */
.wp-locked-detail > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color .15s ease;
}

.wp-locked-detail > summary::-webkit-details-marker { display: none; }

.wp-locked-detail > summary::before {
    content: "\F285";
    font-family: "bootstrap-icons";
    font-size: .7rem;
    transition: transform .15s ease;
}

.wp-locked-detail[open] > summary::before { transform: rotate(90deg); }

.wp-locked-detail > summary:hover,
.wp-locked-detail > summary:focus-visible {
    color: var(--tenant-primary, #193660);
}

@media (max-width: 575.98px) {
    .wp-locked .card-header,
    .wp-locked .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .wp-locked-mark { min-width: 3.5rem; }
}

/* The header is two blocks that must not trade places: identity grows and
   wraps, the score stays pinned to the top-right corner.

   A flex child defaults to min-width:auto, so it refuses to shrink below its
   content — a long job title in the byline was widening this column until the
   score block had nowhere to sit and dropped onto its own row. min-width:0 is
   what lets the text wrap instead. (The codebase uses a `min-w-0` utility class
   in several places that is not actually defined anywhere, which is why the
   same problem shows up elsewhere.) */
.wp-locked-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.wp-locked-head__id {
    flex: 1 1 auto;
    min-width: 0;
}

.wp-locked-byline {
    max-width: 72ch;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.wp-locked-head__score {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

/* Same reason, in the rail: without min-width:0 the label refuses to shrink
   and text-truncate never gets a narrower box to clip against. */
.wp-locked-rail-label {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .wp-locked-head { flex-wrap: wrap; }
    .wp-locked-head__score { margin-left: auto; }
}

/* Closed, the disclosure sits beside the owner badge on the meta line. Open, it
   claims a full row so the note and guide are not squeezed into whatever width
   was left over next to a badge. */
.wp-locked-detail[open] {
    flex: 1 1 100%;
}

/* ==========================================================================
 * WORK PACKAGE - LARGE-SCREEN TYPE SCALE
 *
 * The density bands at the top of this file stop at 1400px: a 2560px monitor
 * renders the same 13px root as a 1400px one, so this page's fs-8 body text
 * and fs-9 meta read small on a wide screen. These clamps resume the scaling
 * where those bands leave off.
 *
 * Every floor below is the size that renders at 1400px today, so the page is
 * unchanged at or below that width and picks up no new jump at the boundary.
 * Scoped to .wp-package (the work package's Livewire root) - no other page
 * inherits any of it.
 * ========================================================================== */
@media (min-width: 1400px) {
    .wp-package {
        --wp-fs-title: clamp(1.075rem, 0.51vw + 0.52rem, 1.28rem);
        --wp-fs-lead: clamp(0.95rem, 0.5vw + 0.41rem, 1.15rem);
        --wp-fs-body: clamp(0.85rem, 0.5vw + 0.31rem, 1.05rem);
        --wp-fs-meta: clamp(0.75rem, 0.43vw + 0.28rem, 0.92rem);
    }

    /* fs-6..fs-9 are !important utilities in style.bundle.css, so these must
       be too. fs-1..fs-5 are display sizes and are deliberately left alone. */
    .wp-package .fs-6 {
        font-size: var(--wp-fs-title) !important;
    }

    .wp-package .fs-7 {
        font-size: var(--wp-fs-lead) !important;
    }

    .wp-package .fs-8 {
        font-size: var(--wp-fs-body) !important;
    }

    .wp-package .fs-9 {
        font-size: var(--wp-fs-meta) !important;
    }

    /* Form controls and small buttons carry their own sizes, so the utilities
       above never reach the score buttons or the evidence note. */
    .wp-package .form-control-sm,
    .wp-package .btn-sm,
    .wp-package .form-label {
        font-size: var(--wp-fs-body);
    }

    /* The fixed sizes in the .wp-* rules above. */
    .wp-package .wp-question-number,
    .wp-package .wp-score-readout__max,
    .wp-package .wp-section-chip__index,
    .wp-package .wp-section-chip__done {
        font-size: var(--wp-fs-meta);
    }

    .wp-package .wp-section-chip {
        font-size: var(--wp-fs-body);
    }

    .wp-package .wp-score-readout__score {
        font-size: clamp(1.75rem, 0.85vw + 0.83rem, 2.1rem);
    }
}

/* ==========================================================================
 * INTERVIEW REPORT BUILDER RAIL
 *
 * The eight-step builder beside the report preview. Lives here rather than in
 * the view so the page adds no local <style> block (the responsive source-debt
 * ratchet counts those) and the rail shares the tenant navy with the rest of
 * the shell via --tenant-primary-color. Accent swatches carry no colour rules:
 * they are painted inline from the resolved tenant accents the document uses.
 * ========================================================================== */
        .irb-page .recruitment-standard-table-card { border-radius: 10px; box-shadow: 0 1px 4px rgba(15, 23, 42, .05); }
        .irb-page .irb-header .card-body { background: #fff; }
        .irb-page .irb-header .card-toolbar { display: flex; align-items: center; }
        .irb-page .irb-header .btn, .irb-page .irb-completion .btn { white-space: nowrap; }
        .irb-page .irb-save-draft { font-weight: 600; }
        .irb-page .irb-save-draft:hover, .irb-page .irb-save-draft:focus-visible { background: var(--tenant-primary-color, #193660); color: #fff; }
        .irb-page .irb-rail__header { min-height: 0; border-bottom: 1px solid #e4e6ef !important; }
        .irb-page .irb-rail .irb-step.is-open .irb-step__head { background: #eef2f8; }
        .irb-page .irb-rail .irb-step__head:focus-visible { outline: 2px solid var(--tenant-primary-color, #193660); outline-offset: -2px; }
        .irb-page .irb-rail .irb-theme, .irb-page .irb-rail .irb-switch { border-radius: .4rem; }
        .irb-page .irb-rail .form-control, .irb-page .irb-rail .form-select { border-radius: .4rem; }
        .irb-page .irb-completion { border-left: 3px solid var(--tenant-primary-color, #193660); }
        .irb-page .irb-audit .card-header { background: #fff; }
        /* The audit partial's shared theme declares its compact headers !important after this file. */
        .irb-page .irb-audit .recruitment-audit-table thead th { font-size: 12px !important; font-weight: 600; letter-spacing: .02em; text-transform: none !important; color: #5e6278; }
        .irb-page .irb-audit .recruitment-audit-table tbody td { font-size: 13px; line-height: 1.45; border-bottom: 1px solid #f1f3f6; }
        .irb-page .irb-audit .recruitment-audit-table tbody tr:last-child td { border-bottom: 0; }
        /* Rail chrome. Tenant navy for the active step, Metronic greys elsewhere. */
        .irb-rail .irb-step { border-bottom: 1px solid #f1f3f6; }
        .irb-rail .irb-step:last-child { border-bottom: 0; }
        .irb-rail .irb-step__head { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; background: transparent; border: 0; text-align: left; color: inherit; }
        .irb-rail .irb-step__head:hover { background: #fafbfc; }
        .irb-rail .irb-step.is-open .irb-step__head { background: #f1f6f2; }
        .irb-rail .irb-step__no { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: .4rem; background: #f1f3f6; color: #5e6278; font-weight: 700; font-size: .75rem; flex: 0 0 1.75rem; }
        .irb-rail .irb-step.is-open .irb-step__no { background: var(--tenant-primary-color, #193660); color: #fff; }
        .irb-rail .irb-step__title { flex: 1 1 auto; font-weight: 700; color: #1f2129; font-size: .9rem; }
        .irb-rail .irb-step__summary { color: #7e8299; font-size: .8rem; }
        .irb-rail .irb-step__body { padding: .5rem 1rem 1.25rem; }
        .irb-rail .irb-theme { display: block; border: 2px solid #e4e6ef; border-radius: .6rem; padding: .6rem; cursor: pointer; height: 100%; }
        .irb-rail .irb-theme.is-active { border-color: var(--tenant-primary-color, #193660); }
        .irb-rail .irb-theme__preview { display: block; height: 2.4rem; border: 1px solid #e4e6ef; border-radius: .3rem; margin-bottom: .4rem; background:
            linear-gradient(#e4e6ef, #e4e6ef) 20% 65% / 60% 2px no-repeat, linear-gradient(#e4e6ef, #e4e6ef) 20% 80% / 60% 2px no-repeat, #fff; }
        .irb-rail .irb-theme__preview--classic { background-image: linear-gradient(var(--tenant-primary-color, #193660), var(--tenant-primary-color, #193660)), linear-gradient(#e4e6ef, #e4e6ef), linear-gradient(#e4e6ef, #e4e6ef); background-size: 60% 4px, 60% 2px, 60% 2px; background-position: 20% 30%, 20% 60%, 20% 78%; background-repeat: no-repeat; }
        .irb-rail .irb-theme__preview--minimal { background-image: linear-gradient(#e4e6ef, #e4e6ef), linear-gradient(#e4e6ef, #e4e6ef), linear-gradient(#e4e6ef, #e4e6ef); background-size: 40% 2px, 60% 2px, 60% 2px; background-position: 20% 30%, 20% 60%, 20% 78%; background-repeat: no-repeat; }
        .irb-rail .irb-theme__preview--formal { background-image: linear-gradient(var(--tenant-primary-color, #193660), var(--tenant-primary-color, #193660)), linear-gradient(#e4e6ef, #e4e6ef), linear-gradient(#e4e6ef, #e4e6ef); background-size: 60% 8px, 60% 2px, 60% 2px; background-position: 20% 28%, 20% 62%, 20% 80%; background-repeat: no-repeat; }
        .irb-rail .irb-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
        .irb-rail .irb-swatch.is-active { border-color: #e4e6ef; box-shadow: 0 0 0 2px var(--tenant-primary-color, #193660); }
        .irb-rail .irb-switch { display: flex; align-items: center; gap: .75rem; border: 1px solid #e4e6ef; border-radius: .5rem; padding: .6rem .85rem; margin-bottom: .5rem; cursor: pointer; }
        .irb-rail .irb-switch .form-check-input { margin: 0; width: 2.4rem; height: 1.3rem; }


/* ==========================================================================
   RECRUITMENT — EMPLOYEE SELF-SERVICE SURFACES
   --------------------------------------------------------------------------
   Moved here out of Blade `<style>` partials on 2026-09-09.

   A partial that emits a <style> block is inlined into the page it renders, so
   the whole stylesheet ships inside every component's HTML: it re-downloads on
   each render instead of being cached once, and it makes the markup unreadable
   to anything that inspects it — two test assertions in a row matched a class
   name in the CSS rather than the element they were checking for.

   Rules here are plain CSS with no Blade in them. Anything that genuinely needs
   a tenant value belongs in layouts/app.blade.php, where the tokens resolve.
   ========================================================================== */

/* ── Search & Apply (/recruitment/job-board) ─────────────────────────────── */

/* ── Search & Apply (/recruitment/job-board) ───────────────────────────
   This page carried ~54 inline style="..." attributes, most of them the
   same three or four hex+size pairs repeated on different elements. Every
   repeat is a place the design can drift: change the navy once and you
   have to find all fifty. The rules below are the whole visual language of
   the page, named once. Reused by the job detail view, which shares it. */

.jb-panel {
    background: #ffffff;
    border: 1px solid #e4e6ea;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.jb-panel-head {
    border-bottom: 1px solid #f0f1f3;
}

/* The small uppercase kicker above a heading. */
.jb-eyebrow {
    color: #7f8fa4;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jb-heading {
    color: #193660;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.jb-sub {
    color: #7f8fa4;
    font-size: .82rem;
}

.jb-search {
    border: 1px solid #dce0e6;
    border-radius: 8px;
    overflow: hidden;
}

.jb-search-icon {
    background: #f6f7f9;
    color: #7f8fa4;
}

.jb-search-input {
    background: #f6f7f9;
    color: #193660;
    font-size: .875rem;
}

.jb-search-input::placeholder {
    color: #a3adb9;
}

.jb-search-input:focus {
    background: #f6f7f9;
    box-shadow: none;
    color: #193660;
    outline: none;
}

.jb-search-btn {
    background: #193660;
    border-radius: 0;
    color: #fff;
    font-size: .82rem;
}

.jb-search-btn:hover {
    background: #14294a;
    color: #fff;
}

/* The results/sort strip above the listings. */
.jb-controls {
    background: #E7EAEF;
    border-bottom: 1px solid #dce0e6;
    padding: .85rem 1.25rem;
}

.jb-controls-count {
    color: #193660;
    font-weight: 600;
}

.jb-table thead tr {
    background: #f5f6f8;
    border-bottom: 2px solid #e4e6ea;
}

.jb-table thead th {
    color: #193660;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding-bottom: .75rem;
    padding-top: .75rem;
    text-transform: uppercase;
}

.jb-table tbody tr {
    border-bottom: 1px solid #f0f1f3;
}

.jb-role-title {
    color: #193660;
    font-weight: 600;
}

.jb-view-btn {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.jb-view-btn:hover {
    background-color: #193660;
    border-color: #193660;
    box-shadow: 0 4px 12px rgba(25, 54, 96, .18);
    color: #ffffff;
}

/* ── Filter rail ──────────────────────────────────────────────────────
   Department stays open; everything else sits behind one disclosure. The
   rail used to show five faceted sections plus a toggle at all times,
   which on a board holding a dozen roles was taller than the results. */
.jb-filter-head {
    background: #E7EAEF;
    min-height: auto;
    padding: 1rem 1.25rem;
}

.jb-filter-title {
    color: #193660;
}

.jb-facet {
    padding: .75rem 1rem;
}

.jb-facet + .jb-facet {
    border-top: 1px solid #f0f1f3;
}

.jb-facet-label {
    color: #7e8299;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    margin-bottom: .5rem;
    text-transform: uppercase;
}

/* The "More filters" summary row, built on the native disclosure element:
   no JavaScript, no Livewire round trip, and the open state survives a
   re-render because the browser owns it rather than the component. */
.jb-more[open] .jb-more-chevron {
    transform: rotate(180deg);
}

.jb-more-summary {
    align-items: center;
    color: #193660;
    cursor: pointer;
    display: flex;
    font-size: .8rem;
    font-weight: 600;
    gap: .4rem;
    justify-content: space-between;
    list-style: none;
    padding: .75rem 1rem;
}

.jb-more-summary::-webkit-details-marker {
    display: none;
}

.jb-more-summary:hover {
    background: #f8fafc;
}

.jb-more-chevron {
    transition: transform .15s ease;
}

.jb-more-count {
    background: #e6ecf5;
    border-radius: 999px;
    color: #193660;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
}

/* ── Card view ────────────────────────────────────────────────────────
   The default presentation. A role reads better as a card than as a
   spreadsheet row; the table is kept for comparing many roles at once. */
.jb-card {
    background: #ffffff;
    border: 1px solid #e4e6ea;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.jb-card:hover {
    border-color: rgba(25, 54, 96, .28);
    box-shadow: 0 8px 20px rgba(25, 54, 96, .10);
    transform: translateY(-2px);
}

/* Cards / list switch. The pressed segment is the navy one, so which view
   you are in is readable without comparing the two buttons to each other. */
.jb-viewswitch-btn {
    background: #ffffff;
    border: 1px solid #dce0e6;
    color: #7f8fa4;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.jb-viewswitch-btn:hover {
    background: #f6f7f9;
    color: #193660;
}

.jb-viewswitch-btn.is-active {
    background: #193660;
    border-color: #193660;
    color: #ffffff;
}
    

/* ── Application Profile (/recruitment/applications/{id}/profile) ────────── */

/* ── Application Profile (/recruitment/applications/{id}/profile) ──────
   The form asks for seven things. It used to render all seven expanded on
   one page with no sense of position or progress, so a filled-in profile
   was a very long scroll through six structurally identical blocks. These
   rules are the accordion, the completion marks and the progress strip. */

.ap-progress-label {
    color: #344054;
    font-size: .85rem;
    font-weight: 600;
}

.ap-progress-pct {
    color: #193660;
    font-size: .85rem;
    font-weight: 700;
}

.ap-progress-track {
    background: #eaecf0;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.ap-progress-fill {
    background: #193660;
    border-radius: 999px;
    height: 100%;
    transition: width .25s ease;
}

.ap-section {
    border: 1px solid #e6ebf2;
    border-radius: .75rem;
    margin-bottom: .75rem;
    overflow: hidden;
}

.ap-section-head {
    align-items: center;
    background: #ffffff;
    border: 0;
    display: flex;
    gap: .75rem;
    padding: .9rem 1.1rem;
    text-align: left;
    transition: background .12s ease;
    width: 100%;
}

.ap-section-head:hover {
    background: #f8fafc;
}

.ap-section-title {
    color: #193660;
    font-size: .98rem;
    font-weight: 700;
}

/* The tick is the whole point of the accordion: a glance down the closed
   stack says what is done and what is still empty. */
.ap-section-mark {
    align-items: center;
    background: #f3f6fa;
    border: 1px solid #e3eaf3;
    border-radius: 999px;
    color: #667085;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.ap-section-mark.is-complete {
    background: #d1fadf;
    border-color: #a6f4c5;
    color: #067647;
}

.ap-section-count {
    background: #eaecf0;
    border-radius: 999px;
    color: #475467;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
}

.ap-section-chevron {
    color: #98a2b3;
    transition: transform .15s ease;
}

.ap-section-head[aria-expanded="true"] .ap-section-chevron {
    transform: rotate(180deg);
}

.ap-section-body {
    border-top: 1px solid #f0f1f3;
    padding: 1.1rem;
}

/* Autosave status. Quiet by design — it should be findable when looked for
   and invisible otherwise. */
.ap-save-state {
    align-items: center;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 600;
    gap: .35rem;
}

.ap-save-state--saving {
    color: #667085;
}

.ap-save-state--saved {
    color: #067647;
}

.ap-save-state--error {
    color: #b42318;
}
    

/* ── Employee dashboard (/recruitment/dashboard) ─────────────────────────── */

/* ── Employee self-service dashboard (/recruitment/dashboard) ──────────
   Lifted out of dashboard.blade.php, which carried ~130 lines of its own
   <style>. Page-local CSS is how a design system drifts: the same card
   gets a slightly different radius on every page that redefines it. The
   dead `.recruitment-dashboard-panel-header` rule was dropped in the move
   — it was defined there but never applied to any element. */
.recruitment-dashboard-panel {
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.12);
}

/* The stacked navigation rows in the Quick Links rail. Distinct from
   .recruitment-quick-link above, which is the inline chip used across the
   HR dashboards — same idea, different shape, so they stay separate. */
.recruitment-dashboard-link {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 0.75rem;
    color: #193660;
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    width: 100%;
}

.recruitment-dashboard-link:hover {
    background: #f8fafc;
    border-color: #d0d9e6;
    box-shadow: 0 6px 16px rgba(148, 163, 184, 0.08);
    color: #193660;
}

.recruitment-dashboard-link__icon {
    align-items: center;
    background: #f3f6fa;
    border: 1px solid #e3eaf3;
    border-radius: 0.7rem;
    color: #667085;
    display: inline-flex;
    flex: 0 0 38px;
    font-size: 1rem;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.recruitment-dashboard-link__title {
    color: #193660;
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.recruitment-dashboard-link__text {
    color: #667085;
    display: block;
    font-size: 0.82rem;
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* HR tools on the Recruitment Dashboard: compact tiles beside the personal links. */
.recruitment-dashboard-hr-tile {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    color: var(--tenant-dashboard-title-color, #193660);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    text-decoration: none;
    width: 100%;
}

.recruitment-dashboard-hr-tile i { font-size: 0.95rem; }
.recruitment-dashboard-hr-tile:hover,
.recruitment-dashboard-hr-tile:focus-visible {
    background: var(--tenant-surface-hover, #f7f9fc);
    border-color: var(--tenant-dashboard-title-color, #193660);
    color: var(--tenant-dashboard-title-color, #193660);
}
.recruitment-dashboard-hr-tile:focus-visible { outline: 2px solid var(--tenant-dashboard-title-color, #193660); outline-offset: 2px; }

.recruitment-dashboard-tracker-job {
    color: #344054;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 0.15rem;
}

.recruitment-dashboard-tracker-ref {
    color: #667085;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.recruitment-dashboard-tracker-date {
    color: #344054;
    font-size: 0.95rem;
    font-weight: 500;
}

/* ── Stage pills: three tones, not six ────────────────────────────────
   This carried six hues (blue, amber, green, slate, red, violet) for a
   list that holds two or three rows for any one employee — a legend to
   memorise rather than something you read at a glance. The tones now map
   to the only three questions the reader is asking:

     progress  — grey  · nothing has happened yet
     active    — navy  · you are advancing through the process
     decided   — green or red, and ONLY at a terminal state

   Colour is now information: seeing anything other than grey or navy
   means the outcome is in. */
.recruitment-dashboard-stage-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.55rem 0.9rem;
    white-space: nowrap;
}

.recruitment-dashboard-stage-pill--progress {
    background: #eaecf0;
    color: #475467;
}

.recruitment-dashboard-stage-pill--active {
    background: #e6ecf5;
    color: #193660;
}

.recruitment-dashboard-stage-pill--decided-positive {
    background: #d1fadf;
    color: #067647;
}

.recruitment-dashboard-stage-pill--decided-negative {
    background: #fee4e2;
    color: #b42318;
}


/* ==========================================================================
   RECRUITMENT — HR / DIRECTOR DASHBOARD SURFACES
   --------------------------------------------------------------------------
   Was partials/dashboard-theme.blade.php, inlined into eight dashboard pages.
   Pure CSS with no Blade in it, so it belongs in a cached stylesheet rather
   than in every render of every dashboard.
   ========================================================================== */

/* Font sizes below are px+vw clamp()s, not rem: the tenant theme forces
   html { font-size: 13px, dropping to 12px under 768px } which would shrink
   rem-based text even further on small screens. clamp() keeps a firm 12px
   floor everywhere and lets text grow slightly on wider viewports instead. */
.recruitment-dashboard-scope-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #f4f6f8 0%, #eef1f4 100%);
    border: 1px solid #e4e7ec;
    margin-bottom: 1.25rem;
}

.recruitment-dashboard-scope-banner .scope-label {
    font-weight: 700;
    color: #193660;
    font-size: clamp(13px, 0.75vw + 11px, 14px);
}

.recruitment-dashboard-scope-banner .scope-sub {
    color: #667085;
    font-size: clamp(12px, 0.65vw + 10.5px, 13px);
}

.recruitment-mini-card {
    border: 1px solid #e4e7ec;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.9rem 1.1rem;
    height: auto;
}

.recruitment-mini-card-title {
    color: #193660;
    font-weight: 700;
    font-size: clamp(13px, 0.75vw + 11px, 14px);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* The live-work card: a tab strip over one list. Scrolls horizontally rather than wrapping,
   so the strip stays one line and the active underline keeps meaning "you are here". */
.recruitment-cc-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid #e4e7ec;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: thin;
}

.recruitment-cc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.95rem 0.9rem 0.8rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #667085;
    font-weight: 600;
    font-size: clamp(12px, 0.7vw + 10.5px, 13.5px);
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.recruitment-cc-tab i {
    font-size: 1.05em;
    opacity: 0.85;
}

.recruitment-cc-tab:hover,
.recruitment-cc-tab:focus-visible {
    color: #193660;
}

.recruitment-cc-tab:focus-visible {
    outline: 2px solid #193660;
    outline-offset: -2px;
}

.recruitment-cc-tab.is-active {
    color: #193660;
    border-bottom-color: #193660;
}

.recruitment-cc-body {
    padding: 0.35rem 1.25rem 0.5rem;
}

.recruitment-cc-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0 0.35rem;
}

.recruitment-cc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f1f3f5;
    font-size: clamp(12px, 0.65vw + 10.5px, 13px);
}

.recruitment-cc-row:last-child {
    border-bottom: 0;
}

.recruitment-cc-row-title {
    color: #25324b;
    font-weight: 600;
}

.recruitment-cc-row-sub {
    color: #98a2b3;
    font-weight: 500;
    margin-top: 0.15rem;
}

.recruitment-cc-foot {
    padding: 0.65rem 1.25rem;
    border-top: 1px solid #e4e7ec;
    background: #fbfcfd;
}

/* A grey standard-table header that is also the button opening its card. Collapsed cards cost
   nothing: the section behind the header mounts only on the first open. */
.recruitment-collapsible-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.recruitment-standard-panel.is-collapsed .recruitment-collapsible-head {
    border-bottom: 0;
}

.recruitment-collapsible-head:focus-visible {
    outline: 2px solid #193660;
    outline-offset: -2px;
}

.recruitment-collapsible-chevron {
    flex-shrink: 0;
    color: #667085;
    font-size: 1rem;
    transition: transform 0.15s ease;
}

.recruitment-collapsible-head[aria-expanded="true"] .recruitment-collapsible-chevron {
    transform: rotate(180deg);
}

/* Vacancy heat: a department row opens to its units. */
.recruitment-heat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #25324b;
    font-weight: 600;
    text-align: left;
}

.recruitment-heat-toggle:hover,
.recruitment-heat-toggle:focus-visible {
    color: #193660;
}

.recruitment-heat-toggle:focus-visible {
    outline: 2px solid #193660;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.recruitment-heat-toggle i {
    color: #98a2b3;
    font-size: 0.85em;
    transition: transform 0.15s ease;
}

.recruitment-heat-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.recruitment-heat-unit td {
    background: #fbfcfd;
    color: #475467;
    font-size: 0.95em;
}

.recruitment-heat-unit td:first-child {
    padding-left: 2.35rem;
}

/* Overview tab: the tab's headline figures, above its list. */
.recruitment-overview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.85rem 0 0.35rem;
}

@media (min-width: 768px) {
    .recruitment-overview-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.recruitment-overview-stat {
    padding: 0.6rem 0.8rem;
    border: 1px solid #e4e7ec;
    border-radius: 0.6rem;
    background: #fbfcfd;
}

.recruitment-overview-stat-value {
    color: #193660;
    font-weight: 700;
    font-size: clamp(16px, 1vw + 12px, 20px);
    line-height: 1.2;
}

.recruitment-overview-stat-label {
    color: #667085;
    font-size: clamp(11px, 0.6vw + 9.5px, 12.5px);
    font-weight: 500;
}

/* The live-work panel header. Deliberately not .recruitment-mini-card-title: that one is a
   non-wrapping flex row shared by seven dashboards, and a header carrying a count badge and
   two controls overflowed the card on it. Here the actions wrap under a long title instead
   of pushing out of the border. */
/* ── HR dashboard v4: greeting shell, stat strip, focus tiles, chart cards ─────────── */
.recruitment-greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

/* One quiet row of numbers: no icon chips, full-word labels, bigger type for older eyes. */
.recruitment-stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #e4e7ec;
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
}
@media (min-width: 768px) { .recruitment-stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .recruitment-stat-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

.recruitment-stat {
    padding: 1rem 1.1rem;
    border-right: 1px solid #f1f3f5;
    border-bottom: 1px solid #f1f3f5;
    min-width: 0;
}

.recruitment-stat-value {
    display: block;
    font-size: clamp(22px, 1.4vw + 12px, 28px);
    font-weight: 700;
    line-height: 1.1;
    color: #193660;
}

.recruitment-stat-value.text-success { color: #0f7a46 !important; }
.recruitment-stat-value.text-danger { color: #d04747 !important; }

.recruitment-stat-label {
    display: block;
    margin-top: 0.3rem;
    color: #667085;
    font-size: clamp(12px, 0.65vw + 10.5px, 13.5px);
    font-weight: 500;
}

/* The three attention tiles: a number, a sentence, a chevron. The open one goes navy. */
.recruitment-focus-tile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    padding: 1rem 1.1rem;
    border: 1px solid #e4e7ec;
    border-radius: 0.75rem;
    background: #fff;
    color: #25324b;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.recruitment-focus-tile:hover { border-color: rgba(25, 54, 96, 0.35); }
.recruitment-focus-tile:focus-visible { outline: 2px solid #193660; outline-offset: 2px; }

.recruitment-focus-tile-count {
    font-size: clamp(26px, 1.6vw + 14px, 34px);
    font-weight: 700;
    line-height: 1;
    min-width: 2.2rem;
}
.recruitment-focus-tile.tone-danger .recruitment-focus-tile-count { color: #d04747; }
.recruitment-focus-tile.tone-primary .recruitment-focus-tile-count { color: #193660; }
.recruitment-focus-tile.tone-warning .recruitment-focus-tile-count { color: #b7791f; }

.recruitment-focus-tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.recruitment-focus-tile-label { font-weight: 700; font-size: clamp(13px, 0.75vw + 11px, 15px); }
.recruitment-focus-tile-hint { color: #667085; font-size: clamp(12px, 0.6vw + 10.5px, 13px); }
.recruitment-focus-tile-chevron { color: #98a2b3; }

.recruitment-focus-tile.is-active,
.recruitment-focus-tile.is-active .recruitment-focus-tile-count,
.recruitment-focus-tile.is-active .recruitment-focus-tile-hint,
.recruitment-focus-tile.is-active .recruitment-focus-tile-chevron {
    background: #193660;
    border-color: #193660;
    color: #fff;
}

.recruitment-focus-list {
    border: 1px solid #e4e7ec;
    border-radius: 0.75rem;
    padding: 0.25rem 1.1rem 0.5rem;
    background: #fff;
}

.recruitment-focus-list-head {
    padding: 0.85rem 0 0.5rem;
    color: #344054;
    font-weight: 600;
    font-size: clamp(12px, 0.65vw + 10.5px, 13.5px);
    border-bottom: 1px solid #f1f3f5;
}

.recruitment-chart-card { padding-bottom: 0.75rem; }
.recruitment-chart { height: 240px; width: 100%; }

/* The alert strip's items are buttons that open their queue. Bootstrap's .alert carries no
   focus ring and no pointer affordance, so on its own it looks inert and is invisible to
   keyboard users. */
.recruitment-alert-action {
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.recruitment-alert-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.recruitment-alert-action:focus-visible {
    outline: 2px solid #193660;
    outline-offset: 2px;
}

.recruitment-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.6rem;
}

.recruitment-panel-head-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
    color: #193660;
    font-weight: 700;
    font-size: clamp(13px, 0.75vw + 11px, 14px);
}

.recruitment-panel-head-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recruitment-panel-head-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.recruitment-funnel-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.recruitment-funnel-label {
    width: 96px;
    flex-shrink: 0;
    color: #344054;
    font-weight: 600;
    font-size: clamp(12px, 0.65vw + 10.5px, 13px);
}

.recruitment-funnel-track {
    flex: 1;
    height: 22px;
    border-radius: 999px;
    background: #f2f4f7;
    overflow: hidden;
}

.recruitment-funnel-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #193660, #2f5590);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    min-width: 2.5rem;
    transition: width 0.4s ease;
}

.recruitment-funnel-count {
    color: #fff;
    font-weight: 700;
    font-size: clamp(11px, 0.5vw + 10px, 12px);
}

.recruitment-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f5;
    font-size: clamp(12px, 0.65vw + 10.5px, 13px);
}

.recruitment-list-row:last-child {
    border-bottom: 0;
}

.recruitment-list-title {
    color: #25324b;
    font-weight: 600;
}

.recruitment-list-sub {
    color: #98a2b3;
    font-weight: 500;
}

.recruitment-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-start;
}

.recruitment-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid #e4e7ec;
    border-radius: 0.65rem;
    background: #fff;
    color: #344054;
    font-weight: 600;
    font-size: clamp(12px, 0.65vw + 10.5px, 13px);
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.recruitment-quick-link:hover {
    border-color: rgba(25, 54, 96, 0.28);
    color: #193660;
    transform: translateY(-1px);
}

.recruitment-quick-link i {
    color: #193660;
}
    


/* ==========================================================================
   RECRUITMENT — MANAGER SURFACES
   --------------------------------------------------------------------------
   Shared by the Recruiting Manager page set so the eight pages open with the
   same rhythm: header, stat band, filters, table.
   ========================================================================== */

/* A chart with no series says so in words. An empty axis reads as a loading
   failure; a sentence reads as a deliberate, calm statement of fact. */
.recruitment-chart-empty {
    align-items: center;
    color: #7e8299;
    display: flex;
    font-size: .82rem;
    justify-content: center;
    min-height: 220px;
    text-align: center;
}

/* The count that used to live in a separate chip above the card it described. */
.recruitment-count-pill {
    background: #eef2f7;
    border-radius: 999px;
    color: #193660;
    font-size: .72rem;
    font-weight: 700;
    margin-left: .5rem;
    padding: .1rem .45rem;
}

/* The advisory tone in a KPI band — amber, matching the `attention` stat tone.
   Red is reserved for things that have actually failed. */
.recruitment-stat-value.is-attention {
    color: #b54708;
}

/* "Showing 5 of 12 · View all" under a previewed table. */
.recruitment-table-foot {
    align-items: center;
    border-top: 1px solid #e4e7ec;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    padding: .75rem 1.5rem;
}

.recruitment-table-foot a {
    color: #193660;
    text-decoration: none;
}

.recruitment-table-foot a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   RECRUITMENT — APPROVALS WORKBENCH
   --------------------------------------------------------------------------
   Was a 132-line `<style>` block inside approval-dashboard.blade.php, which breaks
   DESIGN.md:461 (no page-local responsive `<style>`). It also overrode the shared
   standard-table-theme's `thead th` / `tbody td` sizing with `!important`, so the
   page quietly disagreed with every other table in the module.

   Kept verbatim apart from the indentation, so the page renders identically. That
   includes the two px+vw clamp() font sizes below: they are pre-existing, moved
   rather than written. DESIGN.md:469 forbids *new* `vw` typography, and relocating
   these does not discharge that debt -- it is still owed, just no longer in Blade.
   ========================================================================== */

.recruitment-approval-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.recruitment-approval-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.recruitment-approval-status-tab:hover,
.recruitment-approval-status-tab:focus {
    border-color: #d0d5dd;
    background: #fff;
    color: #193660;
    transform: translateY(-1px);
}

.recruitment-approval-status-tab.is-active {
    border-color: #d0d5dd;
    background: #fff;
    color: #193660;
    box-shadow: 0 0 0 3px rgba(25, 54, 96, 0.08);
}

.recruitment-approval-status-tab.has-pending-items:not(.is-active) {
    border-color: rgba(var(--bs-danger-rgb, 241, 65, 108), 0.35);
    box-shadow: 0 0 0 2px rgba(var(--bs-danger-rgb, 241, 65, 108), 0.06);
}

.recruitment-approval-status-tab .approval-tab-icon {
    color: #98a2b3;
}

.recruitment-approval-status-tab.is-active .approval-tab-icon,
.recruitment-approval-status-tab:hover .approval-tab-icon {
    color: #193660;
}

.recruitment-approval-status-tab .approval-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: #f7f9fb;
    color: #667085;
}

.recruitment-approval-status-tab.is-active .approval-tab-count {
    background: rgba(25, 54, 96, 0.1);
    color: #193660;
}

/* The interview sub-tabs reuse the pill's badge. On the active (green) segment the
   red tint sits on white so it stays legible; the neutral badge stays as the pill's. */
.recruitment-segmented-control-button .approval-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(25, 54, 96, 0.08);
    color: #667085;
}
.recruitment-segmented-control-button.is-active .approval-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
.recruitment-segmented-control-button .approval-tab-count.has-pending-count,
.recruitment-segmented-control-button.is-active .approval-tab-count.has-pending-count {
    background: #ffffff;
    color: var(--bs-danger, #f1416c);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-danger-rgb, 241, 65, 108), 0.35);
}

.recruitment-approval-status-tab .approval-tab-count.has-pending-count,
.recruitment-approval-status-tab.is-active .approval-tab-count.has-pending-count {
    background: rgba(var(--bs-danger-rgb, 241, 65, 108), 0.14);
    color: var(--bs-danger, #f1416c);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-danger-rgb, 241, 65, 108), 0.16);
}

/* Font sizes below are px+vw clamp()s, not rem: the tenant theme forces
   html { font-size: 13px, dropping to 12px under 768px } which would shrink
   rem-based text even further on small screens. clamp() keeps a firm 12px
   floor everywhere and lets text grow slightly on wider viewports instead. */
.recruitment-approval-table thead th {
    font-size: clamp(12px, 0.65vw + 10.5px, 13px) !important;
    letter-spacing: .015em;
}

.recruitment-approval-table tbody td {
    font-size: clamp(12px, 0.65vw + 10.5px, 13px) !important;
}

.recruitment-approval-muted-cell {
    color: #98a2b3;
    font-size: clamp(12px, 0.65vw + 10.5px, 13px);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .recruitment-approval-status-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
}

                

/* ==========================================================================
   RECRUITMENT — APPROVALS TABLE CELLS
   --------------------------------------------------------------------------
   Shared by the four approval tables: the pending and history variants in
   approval-dashboard.blade.php, and the rescores and templates variants in
   partials/approval-interviews-table.blade.php.

   Written here, once, so the four tables stay one visual language. The row was
   previously built by stacking four elements into the Reference cell while every
   other cell held one line, which is what made a single row read four lines deep
   with nothing on a shared baseline.

   Rule these classes exist to hold: a cell carries a primary line and at most one
   supporting line. Anything else earns its own column.
   ========================================================================== */

.recruitment-approval-cell-primary {
    font-weight: 600;
    color: #344054;
    line-height: 1.35;
}

.recruitment-approval-cell-support {
    margin-top: 2px;
    font-weight: 500;
    color: #667085;
    line-height: 1.35;
}

/* The audit timestamp: absolute date leads, relative phrase supports it. */
.recruitment-approval-moment {
    white-space: nowrap;
}

.recruitment-approval-moment-date {
    font-weight: 600;
    color: #344054;
}

.recruitment-approval-moment-ago {
    margin-top: 2px;
    color: #98a2b3;
}

/* Row rhythm. Cells were inheriting the stacked-cell height even once the stack
   was split out, so the vertical padding is set here rather than per table. */
.recruitment-approval-table tbody td {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    vertical-align: middle;
}

/* The rescore reason. Width is bounded here rather than by an inline style so the
   measure stays consistent with the other cells and can be tuned in one place.

   Deliberately NOT line-clamped. A clamp would put the rest of an approver's stated
   reason behind a hover title, which a touch user cannot reach at all -- and on an
   audit trail the reason IS the record. A long reason making its row taller is the
   correct outcome; hiding evidence to keep rows even is not. */
.recruitment-approval-cell-reason {
    max-width: 22rem;
}

/* ==========================================================================
   FLEET — LIGHT BADGE LEGIBILITY, AND CANVAS SEPARATION
   --------------------------------------------------------------------------
   A deliberate, system-wide change, not a side effect of a page tweak. Two
   measured failures, both of which affect every module:

   1. Metronic's `.badge-light-*` set a pale foreground on a paler background.
      Measured in the running app: badge-light-success #50cd89 on #e8fff3 is
      1.92:1, and badge-light-primary #009ef7 on #f1faff is 2.75:1, against a
      WCAG AA requirement of 4.5:1. These are used in 228 and 262 views. For an
      audience that includes users in their sixties, a status chip at 1.92:1 is
      not a status chip.

      Only the FOREGROUND is overridden. The hue family and the light-chip look
      are the meaning users have already learned -- green is posted, blue is
      pending -- and every badge also carries an icon and a text label, so status
      is never colour-alone. Darkening the text keeps all of that and makes it
      readable.

   2. DESIGN.md:238 says surface separation "comes from the grey-vs-white
      surface contrast". The canvas was #f5f8fa against white panels: 1.06:1.
      That mechanism was delivering nothing, panels had no perceptible edge, and
      the result reads as an undifferentiated white field. #eef2f6 restores the
      step without making the page heavy -- the quiet identity is the point, an
      invisible one is not.

   This file loads after style.bundle.css (layouts/assets/stylesheets/global.blade.php),
   so these win on equal specificity without !important.
   ========================================================================== */

body {
    background-color: #eef2f6;
}

.badge-light-primary { color: #0b6ba8; }
.badge-light-success { color: #2e7d4f; }
.badge-light-warning { color: #8a6100; }
.badge-light-danger  { color: #a6203a; }
.badge-light-info    { color: #5b3da8; }

/* RECRUITMENT — OFFERS PANEL RECOMMENDATION ROWS
   These small facts are read repeatedly when deciding whom to offer next. */
.offer-recommendations .offer-recommendation-count {
    color: #5e6278;
    font-size: 12.5px;
    font-weight: 600;
}

.offer-recommendations .offer-recommendation-rank {
    min-width: 28px;
    background-color: #e4eaf2;
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 13px;
}

.offer-recommendations .offer-recommendation-status {
    font-size: 12.5px;
    line-height: 1.3;
}

.offer-recommendations .offer-recommendation-status.badge-light-secondary {
    background-color: #e4e6ef;
    color: #3f4254;
}

.offer-recommendations .offer-recommendation-score {
    color: #3f4254;
    font-size: 15px;
    line-height: 1.35;
}

.offer-recommendations .offer-recommendation-score--high {
    color: #2e7d4f;
}

.offer-recommendations .offer-recommendation-score--mid {
    color: #8a6100;
}

.offer-recommendations .offer-recommendation-total {
    color: #5e6278;
    font-size: 12.5px;
    font-weight: 600;
}

.offer-recommendations .offer-recommendation-waiting,
.offer-recommendations .offer-recommendation-waiting:hover {
    background-color: #f5f8fa;
    border-color: #b5b5c3;
    color: #3f4254;
    opacity: 1;
}

/* ==========================================================================
   RECRUITMENT — POSTING STATE
   --------------------------------------------------------------------------
   Posting state reads as secondary to Status. Two filled chips side by side
   gave a derived posting flag the same weight as the approval decision.

   NOTE: this block previously also held a borderless row-action trigger and a
   bespoke header stat strip. Both were removed -- the row action must stay a
   visible bordered button, and the stat band is the shared house component
   (x-overview-stats-reference). Neither was mine to redesign.
   ========================================================================== */

.recruitment-posting-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.recruitment-posting-state--posted { color: #2e7d4f; }
.recruitment-posting-state--pending { color: #667085; }

/* ==========================================================================
   RECRUITMENT — JOB POSTINGS LIST TOOLBAR
   /recruitment/job-postings

   Five always-on filter controls (Status 200px, Type 200px, Search 300px and
   two 175px dates) needed ~1050px and wrapped onto a second line at both
   1440px and 1366px, stranding one date field beside a gap. Search and Status
   stay out; Department, Type and the two dates fold into an accordion behind
   the Filters button.

   The disclosure is Alpine (x-show + x-collapse), not <details>: <details>
   requires <summary> as its first child, so it cannot wrap a trigger that sits
   mid-row beside other controls, and Alpine's x-data survives Livewire's DOM
   morph — a panel driven by a Livewire property collapses on every keystroke of
   the search box. The x-cloak flash guard depends on the global
   [x-cloak] rule earlier in this file.

   Colours resolve from the tenant token declared on :root in layouts/app.blade.php.
   ========================================================================== */

.jp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.jp-toolbar-search {
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 460px;
}

.jp-toolbar-status {
    flex: 0 0 auto;
    width: 200px;
}

/* ── The collapsed filters ─────────────────────────────────────────────── */

/* The trigger is a real <button> so it is focusable and announces its expanded
   state; these rules only undo the browser's button chrome. */
.jp-more-summary {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    color: var(--tenant-dashboard-title-color, #193660);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.4rem;
    line-height: 1.2;
    padding: 0.6rem 0.85rem;
    white-space: nowrap;
}

.jp-more-summary:hover {
    background: #f5f8fa;
}

.jp-more-summary:focus-visible {
    outline: 2px solid rgba(25, 54, 96, 0.35);
    outline-offset: 2px;
}

.jp-more-chevron {
    transition: transform 0.15s ease;
}

.jp-more-chevron.is-open {
    transform: rotate(180deg);
}

.jp-more-count {
    background: #e6ecf5;
    border-radius: 999px;
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
}

/* An accordion, not a popover: a full-width row inside the same flex container,
   so opening it drops the table down instead of floating over it. Floating meant
   anchoring maths at every width and a panel that could sit off-screen. */
.jp-more-panel {
    border-top: 1px solid #edf1f5;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
}

.jp-more-panel > div {
    flex: 1 1 170px;
    max-width: 240px;
    min-width: 150px;
}

@media (max-width: 767.98px) {
    .jp-more-summary {
        justify-content: space-between;
        width: 100%;
    }

    .jp-more-panel > div {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* ── Active-filter chips ───────────────────────────────────────────────── */

.jp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.75rem;
}

.jp-chip {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #344054;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem 0.25rem 0.7rem;
}

.jp-chip-remove {
    background: none;
    border: 0;
    border-radius: 999px;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 18px disc, 24px target: WCAG 2.2 SC 2.5.8 sets 24 CSS px as the pointer-target
       minimum, and these sit in a row 0.4rem apart — an 18px target mis-taps onto the
       neighbouring chip and clears the wrong filter. Padding grows the hit area; the
       negative margin keeps the visual spacing. */
    height: 18px;
    width: 18px;
    padding: 3px;
    margin: -3px;
    line-height: 1;
}

.jp-chip-remove:hover {
    background: #e2e8f0;
    color: #344054;
}

.jp-chip-remove:focus-visible {
    outline: 2px solid rgba(25, 54, 96, 0.35);
    outline-offset: 1px;
}

/* ── Table cells ───────────────────────────────────────────────────────── */

/* Audience is a fact, not a state. It was a second green badge sitting beside
   the green "Published" status badge, so two colours in one row meant two
   unrelated things. Colour on this table now belongs to Status alone. */
.jp-type {
    color: #667085;
    font-size: 12px;
    white-space: nowrap;
}

/* #667085, not the lighter #98a2b3: that hex measures 2.44:1 on white and fails
   the 4.5:1 floor for normal text (see the note in standard-table-theme). The
   de-emphasis is carried by weight instead — the >1 case is fw-semibold, this
   one is not — so the distinction never rests on colour alone. */
.jp-vacancies-single {
    color: #667085;
}

/* ==========================================================================
   RECRUITMENT — ONBOARDING
   /recruitment/onboarding

   The page previously carried its own grey card header and a second page
   title, so it had two headings; and the Onboard modal rendered a five-column
   table for two facts, which read as mostly empty space. Both are fixed in the
   markup; these rules are what that markup needs.

   Colours resolve from the tenant token declared on :root in layouts/app.blade.php.
   ========================================================================== */

/* Same one-line toolbar as the job-postings list, so the two pages read as a set. */
.ob-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ob-toolbar-search {
    flex: 1 1 260px;
    min-width: 200px;
}

.ob-toolbar-status {
    flex: 0 0 190px;
}

/* The modal's own backdrop: it is rendered inline by Livewire rather than by
   Bootstrap's JS, so it carries no .modal-backdrop element of its own. */
.ob-modal {
    background: rgba(15, 23, 42, 0.45);
}

/* A list of choices, one row per person. Each row is the control — there is no
   separate "Select" button to aim at. */
.ob-queue {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Caps the dialog rather than the page: a long queue scrolls inside the modal
       instead of pushing its footer off screen. */
    max-height: 22rem;
    overflow-y: auto;
}

.ob-queue-item {
    align-items: center;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
}

.ob-queue-item:hover,
.ob-queue-item:focus-visible {
    background: #f8fafc;
    border-color: var(--tenant-dashboard-title-color, #193660);
}

.ob-queue-person {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ob-queue-empty {
    border: 1px dashed #e4e7ec;
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
}

/* The chosen candidate, with the way back to the list beside their name. */
.ob-selected {
    align-items: center;
    display: flex;
}

/* The profile-copy panel on an onboarding record. Sits above the record's own
   fields because "did their history come across" is the question HR opens this
   page to answer. */
.ob-sync {
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.ob-sync-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

/* ==========================================================================
   MODULE SUB-NAVIGATION — SMALL SCREENS

   The recruitment/leave/performance sub-nav forces `overflow: visible` on its
   primary strip so the tab dropdowns are not clipped. That override also
   cancels the strip's own `overflow-x: auto`, so below about 1000px the tabs
   simply spilled past the viewport: measured 289px of page overflow at 390px,
   identically on /recruitment/onboarding, /recruitment/job-postings and
   /recruitment/requisitions, while a non-recruitment page measured 0.

   Wrapping rather than scrolling is deliberate — a scrolling strip would clip
   its own dropdowns again, which is the very thing the override exists to
   prevent. Desktop is untouched: this applies only below the lg breakpoint.
   ========================================================================== */
@media (max-width: 991.98px) {
    .module-subnav__links {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .module-subnav__primary {
        flex-wrap: wrap;
        /* Released so the row can actually wrap; nowrap is what forced one long line. */
        white-space: normal;
    }

    .module-subnav__actions {
        margin-left: 0;
    }

    .module-subnav__viewport {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================================================
   CANDIDATE PROFILE — SHELL, READINESS RAIL, TABS

   Moved verbatim out of a `<style>` block inside
   `livewire/modules/recruitment/candidate-profile.blade.php`, where it was
   re-sent inside the markup on every render and could not be reached by any
   other page. The HR candidate pages now share this chrome, and a second
   inlined copy is exactly how two pages drift apart.

   Note `.candidate-profile-shell` and the seven `.candidate-profile-completion*`
   rules are ALSO defined, very slightly differently, in a local `<style>` in
   `livewire/modules/recruitment/job-application.blade.php` (it lacks the
   completion box's margin-top and the fill's width transition). That block is
   parsed after this file and still wins there, so that page is unchanged —
   but the duplication is real and worth retiring separately.

   The table's own rules stay in the `@once`-guarded
   `partials/candidate-profile-overview-styles.blade.php`, which five hosts
   already share correctly.
   ========================================================================== */

.candidate-profile-shell {
    color: #193660;
}
.candidate-profile-card {
    border: 1px solid #e3e8f0;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}
.candidate-profile-header {
    padding: 1.5rem 1.75rem 0.75rem;
}
.candidate-profile-completion {
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    margin-top: 1.1rem;
    padding: 1rem;
}
.candidate-profile-completion-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}
.candidate-profile-completion-bar {
    height: 12px;
    background: #e9eef4;
    border-radius: 999px;
    overflow: hidden;
}
.candidate-profile-completion-fill {
    height: 100%;
    background: #198754;
    border-radius: inherit;
    transition: width 0.2s ease;
}
.candidate-profile-completion-percent {
    color: #193660;
    font-size: 1rem;
    font-weight: 700;
    min-width: 3rem;
    text-align: right;
}
.candidate-profile-completion-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}
.candidate-profile-completion-item {
    align-items: center;
    background: #fff4d8;
    border-radius: 6px;
    color: #b77900;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
}
.candidate-profile-completion-item.is-complete {
    background: #e8f6ee;
    color: #198754;
}
.candidate-profile-tabs {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0 1.75rem 1rem;
    border-bottom: 1px solid #edf1f7;
}
.candidate-profile-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #8b96ab;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.85rem 0;
}
.candidate-profile-tab.is-active {
    color: #193660;
    border-bottom-color: #193660;
}
.candidate-profile-body {
    padding: 1.75rem;
}
.candidate-profile-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.candidate-profile-section-card {
    border: 1px solid #e7ecf4;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
}
.candidate-profile-section-card-header {
    background: #eef2f6;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e5ebf3;
}
.candidate-profile-section-card-body {
    padding: 1.2rem;
}
.candidate-profile-label {
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.candidate-profile-muted {
    color: #8a94a7;
}
.candidate-profile-shell .form-control.form-control-solid:not(:disabled):not([readonly]),
.candidate-profile-shell .form-select.form-control-solid:not(:disabled):not([readonly]),
.candidate-profile-shell input[type="file"].form-control.form-control-solid:not(:disabled):not([readonly]),
.candidate-profile-shell textarea.form-control.form-control-solid:not(:disabled):not([readonly]) {
    background: #ffffff !important;
    border-color: #d8e0ea !important;
    color: #334155;
    box-shadow: none;
}
.candidate-profile-shell .form-control.form-control-solid:not(:disabled):not([readonly]):focus,
.candidate-profile-shell .form-select.form-control-solid:not(:disabled):not([readonly]):focus,
.candidate-profile-shell input[type="file"].form-control.form-control-solid:not(:disabled):not([readonly]):focus,
.candidate-profile-shell textarea.form-control.form-control-solid:not(:disabled):not([readonly]):focus {
    background: #ffffff !important;
    border-color: #9db4d1 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 54, 96, 0.08);
}
.candidate-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.candidate-profile-entity {
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 1rem;
    background: #fbfcfe;
    margin-bottom: 0.9rem;
}
.candidate-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #f0f4f9;
    color: #193660;
    margin-right: 0.45rem;
    margin-bottom: 0.45rem;
}
.candidate-required-doc-grid .candidate-profile-entity {
    margin-bottom: 0;
    padding: 0.38rem 0.55rem !important;
    min-height: 50px !important;
    border-radius: 12px !important;
}
.candidate-required-doc-grid .candidate-required-doc-icon {
    width: 24px;
    height: 24px;
    font-size: 0.68rem;
}
.candidate-required-doc-grid .candidate-required-doc-title {
    font-size: 0.82rem;
    line-height: 1.05;
    margin-bottom: 0.05rem;
}
.candidate-required-doc-grid .candidate-required-doc-status {
    font-size: 0.7rem;
    line-height: 1;
}
@media (max-width: 991.98px) {
    .candidate-profile-editor-grid {
        grid-template-columns: 1fr;
    }
}

/* The save result above the Candidate Details cards. It spans both grid columns so the message
   reads as page-level rather than belonging to the first card. */
.candidate-profile-editor-notice {
    grid-column: 1 / -1;
}

/* The identity line's size. It was an inline `style="font-size:2rem"` on the one page that
   had this header; now that two pages share the chrome it needs a name, or the second page
   quietly renders it at the default heading size. */
.candidate-profile-identity {
    font-size: 2rem;
}

/* ==========================================================================
   HR CANDIDATE FILTER CONTROLS

   The candidate-accounts toolbar held three controls at fixed pixel widths
   (240/190/160) in a flex row that never wrapped, so it measured 608px wide
   and pushed 411px of horizontal overflow onto a 390px screen — the page
   scrolled sideways on every phone. The widths are a floor now, not a
   ceiling, and the row wraps.
   ========================================================================== */
.hr-filter-control,
.hr-filter-control-wide {
    width: 100%;
}

@media (min-width: 576px) {
    .hr-filter-control {
        width: auto;
        min-width: 160px;
    }

    .hr-filter-control-wide {
        width: auto;
        min-width: 240px;
    }
}

/* The accounts table's row actions open a dropdown, which a scroll container clips — so the
   wrapper carried `style="overflow: visible"`. That cancels table-responsive's own
   `overflow-x: auto`, and the 759px table then spilled 411px past a 390px viewport: the whole
   page scrolled sideways on a phone. Exactly the trade the module sub-nav got wrong
   (DESIGN-LEARNINGS, "MODULE SUB-NAVIGATION — SMALL SCREENS").

   Keep the escape where there is room for it, and scroll where there is not. The boundary is
   xl, not lg: measured, the table needs 759px and the sidebar leaves only 668px at 992px, so
   an lg boundary still spilled 34px sideways across the whole 992-1100px band. It first fits
   at ~1083px. Below xl the table scrolls in its own container and the dropdown scrolls with
   it; at xl and above the table fits and the dropdown can leave the box. */
.hr-accounts-table-wrap {
    overflow: visible;
}

@media (max-width: 1199.98px) {
    .hr-accounts-table-wrap {
        overflow-x: auto;
    }
}

/* ==========================================================================
   OVERVIEW STAT BAND — SECONDARY ROW

   The candidate pipeline showed eight equally-weighted cards, so nothing on the
   band was more important than anything else and the four figures an HR user
   actually acts on sat level with the three they only occasionally consult.

   The secondary row keeps the same card, icon and colour vocabulary as the
   primary one and only lowers the weight: a smaller badge, a smaller figure and
   tighter padding. Readable, but plainly subordinate. Opting in is per-caller
   (`secondaryStats`), so every other stat band in the fleet is untouched.
   ========================================================================== */
.overview-stat-secondary {
    margin-top: 0.75rem;
}

.overview-stat-secondary-card .card-body {
    padding: 0.75rem 1rem;
}

.overview-stat-secondary-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(102, 112, 133, 0.1);
    flex-shrink: 0;
}

.overview-stat-secondary-icon .bi {
    font-size: 1.05rem;
    color: #667085;
}

.overview-stat-secondary-value {
    font-size: 1.35rem;
    line-height: 1.2;
}

.overview-stat-secondary-label {
    font-size: 0.85rem;
}

/* ==========================================================================
   RECRUITMENT — INTERVIEW CANDIDATE SCHEDULE

   The schedule is an operational form, not an error dashboard. Empty slots
   are grouped into one calm readiness message; row emphasis is reserved for
   a real conflict after a time has been entered. The timeline only appears
   once it can communicate an actual day plan.
   ========================================================================== */
.interview-schedule-number-column {
    width: 44px;
}

.interview-schedule-start-column {
    width: 140px;
}

.interview-schedule-end-column {
    width: 110px;
}

.interview-schedule-row--needs-attention {
    background-color: #fffdf5;
}

.interview-schedule-number {
    background-color: var(--bs-primary, #193660);
}

.interview-schedule-status {
    min-width: 7.5rem;
    padding: 0.55rem 0.75rem;
    text-align: center;
}

.interview-schedule-timeline {
    height: 34px;
}

.interview-schedule-timeline-slot {
    align-items: center;
    background-color: var(--bs-primary, #193660);
    border-right: 2px solid #fff;
    color: #fff;
    display: flex;
    flex: 1;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.interview-schedule-timeline-slot--alternate {
    background-color: #50cd89;
}

/* ==========================================================================
   RECRUITMENT — INTERVIEW SESSION DETAIL

   One operational record, ordered as overview → approval context → work.
   The fact rail is the page's signature: it reads as a compact briefing rather
   than five unrelated dashboard cards, while staying inside Grey's palette.
   ========================================================================== */
.interview-session-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.interview-session-back-link {
    align-items: center;
    color: var(--bs-gray-600, #7e8299);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    margin-bottom: -0.5rem;
    width: fit-content;
}

.interview-session-back-link:hover,
.interview-session-back-link:focus-visible {
    color: var(--tenant-primary-color, #193660);
}

.interview-session-back-link:focus-visible,
.interview-session-detail .btn:focus-visible,
.interview-session-detail .nav-link:focus-visible {
    outline: 3px solid rgba(25, 54, 96, 0.22);
    outline-offset: 2px;
}

.interview-session-overview,
.interview-session-approval,
.interview-session-content {
    border: 1px solid var(--bs-gray-200, #eff2f5);
    box-shadow: 0 2px 10px rgba(25, 54, 96, 0.045);
}

.interview-session-overview__toolbar,
.interview-session-overview__actions,
.interview-section-heading,
.interview-audit__heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.interview-session-overview__actions {
    align-items: center;
    flex-shrink: 0;
}

.interview-session-overview__next-step {
    max-width: 16rem;
}

.interview-session-overview__context {
    align-items: center;
    color: var(--bs-gray-600, #7e8299);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 0.5rem;
}

.interview-session-facts {
    border-top: 1px solid var(--bs-gray-200, #eff2f5);
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.interview-session-facts__title {
    color: var(--tenant-primary-color, #193660);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.interview-session-facts__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
}

.interview-session-fact {
    border-left: 1px solid var(--bs-gray-200, #eff2f5);
    min-width: 0;
    padding: 0 1.25rem;
}

.interview-session-fact:first-child {
    border-left: 0;
    padding-left: 0;
}

.interview-session-fact:last-child {
    padding-right: 0;
}

.interview-session-fact dt {
    align-items: center;
    color: var(--bs-gray-600, #7e8299);
    display: flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.interview-session-fact dd {
    color: var(--bs-gray-900, #181c32);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.interview-session-fact > span,
.interview-session-fact > a {
    color: var(--bs-gray-600, #7e8299);
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.interview-session-direct-note {
    align-items: flex-start;
    background: var(--bs-gray-100, #f5f8fa);
    border-radius: 0.625rem;
    color: var(--bs-gray-700, #5e6278);
    display: flex;
    font-size: 0.8rem;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.9rem 1rem;
}

.interview-session-direct-note > i {
    color: var(--bs-success, #50cd89);
    font-size: 1rem;
}

.interview-session-direct-note strong,
.interview-session-direct-note span {
    display: block;
}

.interview-session-direct-note strong {
    color: var(--bs-gray-900, #181c32);
    margin-bottom: 0.15rem;
}

.interview-session-returned {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    margin: 0;
}

.interview-session-returned > i {
    font-size: 1.25rem;
}

.interview-session-returned h2 {
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.interview-session-returned p {
    margin: 0.25rem 0 0;
}

.interview-session-approval > .card-header,
.interview-session-content > .card-header {
    min-height: 70px;
}

.interview-approval-steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.interview-approval-steps li {
    align-items: center;
    color: var(--bs-gray-500, #a1a5b7);
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.interview-approval-steps__marker {
    align-items: center;
    background: var(--bs-gray-100, #f5f8fa);
    border: 2px solid var(--bs-gray-300, #e4e6ef);
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
}

.interview-approval-steps li.is-active,
.interview-approval-steps li.is-complete {
    color: var(--tenant-primary-color, #193660);
}

.interview-approval-steps li.is-active .interview-approval-steps__marker {
    background: #fff;
    border-color: var(--tenant-primary-color, #193660);
}

.interview-approval-steps li.is-complete .interview-approval-steps__marker {
    background: var(--tenant-primary-color, #193660);
    border-color: var(--tenant-primary-color, #193660);
    color: #fff;
}

.interview-approval-steps strong,
.interview-approval-steps small {
    display: block;
}

.interview-approval-steps small {
    color: var(--bs-gray-600, #7e8299);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.interview-session-approval__decision {
    border-top: 1px solid var(--bs-gray-200, #eff2f5);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.interview-session-approval__controls {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.interview-session-tabs {
    align-items: flex-end;
}

.interview-session-tabs .nav-link {
    background: transparent;
    border: 0;
    color: var(--bs-gray-600, #7e8299);
    min-width: 0;
    font-weight: 700;
    padding: 1.35rem 0;
}

.interview-session-tabs .nav-link + .nav-link {
    margin-left: 0;
}

.interview-session-tabs .nav-link.active {
    border-bottom: 3px solid var(--tenant-primary-color, #193660);
    color: var(--tenant-primary-color, #193660);
}

/* Match the compact Final Scores tab band without reducing the clickable target. */
.interview-session-content .interview-session-tabs {
    min-height: 0 !important;
    border-top: 1px solid var(--bs-gray-300, #d8dee6);
}

.interview-session-content .interview-session-tabs .nav-link {
    min-height: 44px;
    padding: 0.75rem 1rem;
}

.interview-section-heading h2,
.interview-management-panel h2,
.interview-audit h2 {
    color: var(--tenant-primary-color, #193660);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.interview-section-heading p,
.interview-management-panel p,
.interview-audit p {
    color: var(--bs-gray-600, #7e8299);
    font-size: 0.8rem;
    margin: 0.3rem 0 0;
}

.interview-session-table-shell {
    border: 1px solid var(--bs-gray-200, #eff2f5);
    border-radius: 0.625rem;
    margin-top: 1rem;
}

.interview-session-table-shell thead {
    background: var(--bs-gray-100, #f5f8fa);
}

.interview-panel-roster,
.interview-audit {
    border-top: 1px solid var(--bs-gray-200, #eff2f5);
    margin-top: 2rem;
    padding-top: 2rem;
}

.interview-panel-roster__grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.interview-panel-member {
    align-items: center;
    border: 1px solid var(--bs-gray-200, #eff2f5);
    border-radius: 0.625rem;
    display: flex;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
}

.iv-person-avatar {
    align-items: center;
    background-color: var(--tenant-primary-color, #193660);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 0.7rem;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    letter-spacing: 0.02em;
}

.interview-management-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.interview-management-panel {
    align-items: flex-start;
    border: 1px solid var(--bs-gray-200, #eff2f5);
    border-radius: 0.625rem;
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
}

.interview-management-panel__icon {
    align-items: center;
    background: var(--bs-gray-100, #f5f8fa);
    border-radius: 50%;
    color: var(--tenant-primary-color, #193660);
    display: inline-flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.interview-audit__event {
    display: flex;
    gap: 1rem;
    padding: 1rem 0 1rem 0.35rem;
    position: relative;
}

.interview-audit__event + .interview-audit__event {
    border-top: 1px solid var(--bs-gray-100, #f5f8fa);
}

.interview-audit__marker {
    background: var(--tenant-primary-color, #193660);
    border: 4px solid var(--bs-gray-100, #f5f8fa);
    border-radius: 50%;
    flex: 0 0 0.85rem;
    height: 0.85rem;
    margin-top: 0.3rem;
}

.interview-empty-state {
    background: var(--bs-gray-100, #f5f8fa);
    border-radius: 0.625rem;
    color: var(--bs-gray-600, #7e8299);
    font-size: 0.8rem;
    margin-top: 1rem;
    padding: 1.25rem;
}

@media (max-width: 1199.98px) {
    .interview-session-facts__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 1.25rem;
    }

    .interview-session-fact:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }

    .interview-panel-roster__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .interview-session-overview__toolbar,
    .interview-session-approval__controls {
        align-items: stretch;
        flex-direction: column;
    }

    .interview-session-overview__actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    .interview-session-facts__grid,
    .interview-management-grid,
    .interview-panel-roster__grid {
        grid-template-columns: 1fr;
    }

    .interview-session-fact,
    .interview-session-fact:first-child,
    .interview-session-fact:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--bs-gray-200, #eff2f5);
        padding: 1rem 0 0;
    }

    .interview-session-fact:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .interview-session-tabs {
        overflow-x: auto;
    }

    .interview-session-tabs .nav {
        flex-wrap: nowrap;
        min-width: 0;
    }
}

/* Below sm the three cards stack two-up; the icon would otherwise crowd a long
   label such as "Withdrawn" on a 390px screen. */
@media (max-width: 575.98px) {
    .overview-stat-secondary-card .card-body {
        padding: 0.625rem 0.75rem;
    }

    .overview-stat-secondary-icon {
        width: 32px;
        height: 32px;
        margin-right: 0.625rem !important;
    }

    .overview-stat-secondary-value {
        font-size: 1.15rem;
    }
}


/* --------------------------------------------------------------------------
 * Workplan item review panel
 *
 * work-plan/scoring/partials/view-item-modal (Unit and Department scorecards).
 * A labelled context panel says what the item is, the comparison and activity
 * tables line values up, and the budget and dates sit in three fact tiles.
 * Everything stacks to one column below sm.
 * ------------------------------------------------------------------------ */

.dsi-review-title {
    color: var(--tenant-dashboard-title-color, #193660);
}

.dsi-review-title__icon {
    color: var(--tenant-primary, #006341);
}

.dsi-review-label {
    color: var(--bs-gray-600);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dsi-review-heading {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* Keeps the line breaks people type into targets and results. */
.dsi-review-text {
    display: block;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.dsi-review-missing {
    color: var(--bs-gray-600);
    font-style: italic;
}

/* The outline keeps light band colours (the default "Good" is #FFFF00) visible on white. */
.dsi-review-dot {
    background-color: var(--bs-gray-400);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    display: inline-block;
    flex-shrink: 0;
    height: 0.6rem;
    width: 0.6rem;
}

/* Context: measure, perspective, objective, scoring period */
.dsi-review-context {
    background: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    border-left: 3px solid var(--tenant-primary, #006341);
    border-radius: 0.65rem;
    padding: 1rem 1.25rem;
}

.dsi-review-context__measure {
    border-bottom: 1px solid var(--bs-gray-200);
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
}

.dsi-review-context__measure-value {
    color: var(--tenant-dashboard-title-color, #193660);
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dsi-review-context__grid {
    row-gap: 0.75rem;
}

.dsi-review-context__grid > div {
    padding-right: 1rem;
}

.dsi-review-context__value {
    color: var(--bs-gray-900);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

/* Tables */
.dsi-review-table-wrap {
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.65rem;
    overflow: hidden;
}

.dsi-review-table {
    font-size: 0.9rem;
}

/* .table.dsi-review-table outranks Metronic's .table td:first-child / :last-child
 * rules, which drop the outer cell padding to 0. */
.table.dsi-review-table > :not(caption) > * > *,
.table.dsi-review-table > :not(caption) > * > :first-child,
.table.dsi-review-table > :not(caption) > * > :last-child {
    border-bottom: 1px solid var(--bs-gray-200);
    padding: 0.8rem 1rem;
    vertical-align: top;
}

.table.dsi-review-table > tbody > tr:last-child > * {
    border-bottom: 0;
}

.table.dsi-review-table > thead > tr > th {
    background: var(--bs-gray-100);
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-bottom: 0.6rem;
    padding-top: 0.6rem;
    text-transform: uppercase;
}

.dsi-review-compare {
    table-layout: fixed;
}

.dsi-review-compare > :not(caption) > tr > * + * {
    border-left: 1px solid var(--bs-gray-200);
}

.dsi-review-activities__number {
    color: var(--bs-gray-500);
    font-weight: 600;
    width: 2.5rem;
}

/* Budget and date tiles */
.dsi-review-fact {
    align-items: center;
    background: #fff;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.65rem;
    display: flex;
    gap: 0.75rem;
    height: 100%;
    padding: 0.75rem 0.9rem;
}

.dsi-review-fact__icon {
    align-items: center;
    background: rgba(0, 99, 65, 0.1);
    background: color-mix(in srgb, var(--tenant-primary, #006341) 12%, #fff);
    border-radius: 0.55rem;
    color: var(--tenant-primary, #006341);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.dsi-review-fact__value {
    color: var(--bs-gray-900);
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .dsi-review-main {
        border-right: 1px solid var(--bs-gray-200);
    }
}

/* One column on phones: the comparison cells carry their own labels. */
@media (max-width: 575.98px) {
    .dsi-review-compare thead {
        display: none;
    }

    .dsi-review-compare,
    .dsi-review-compare tbody,
    .dsi-review-compare tr,
    .dsi-review-compare td {
        display: block;
        width: 100%;
    }

    .dsi-review-compare > :not(caption) > tr > * + * {
        border-left: 0;
    }

    .dsi-review-compare > tbody > tr:not(:last-child) > td,
    .dsi-review-compare > tbody > tr:last-child > td:not(:last-child) {
        border-bottom: 1px solid var(--bs-gray-200);
    }

    .dsi-review-context__grid > div {
        padding-right: 0;
    }
}

/* ==========================================================================
 * FINAL SCORECARD REPORT
 *
 * Read-only report page (Livewire view livewire/modules/performance-management/
 * work-plan/scoring/unit-scorecard-report). Scoped to `.unit-scorecard-report`;
 * cards, tables, badges and buttons are the standard DESIGN.md components.
 * Palette follows the scorecard pages: #F5F8FA canvas, white cards.
 * ========================================================================== */
.unit-scorecard-report {
    max-width: 1600px;
}

.unit-scorecard-report .report-logo {
    max-height: 40px;
    max-width: 160px;
}

.unit-scorecard-report .band-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.unit-scorecard-report .score-donut {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: relative;
}

.unit-scorecard-report .score-donut-hole {
    position: absolute;
    inset: 37px;
    background: var(--bs-white);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--bs-gray-200);
}

.unit-scorecard-report .report-legend {
    flex: 1 1 180px;
    max-width: 300px;
}

.unit-scorecard-report .report-mix-table td,
.unit-scorecard-report .report-mix-table th {
    border-color: rgba(255, 255, 255, 0.35);
}

.unit-scorecard-report .report-table td {
    vertical-align: top;
}

.unit-scorecard-report .report-table .prose {
    overflow-wrap: break-word;
}

.unit-scorecard-report .report-table thead .report-group {
    border-left: 1px solid var(--bs-gray-300);
    letter-spacing: 0.04em;
}

/* A thin rule where each group (strategy, plan, delivery, assurance) begins. */
.unit-scorecard-report .report-table .report-group-start {
    border-left: 1px solid var(--bs-gray-200);
}

.unit-scorecard-report .report-table .report-col-serial {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
}

/* Long strategic objectives and focus areas: the preview is a button that shows the full text. */
.unit-scorecard-report .report-expand {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.unit-scorecard-report .report-expand:hover {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.unit-scorecard-report .report-expand:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Activities column: a numbered list, each activity with its target on the same line. */
.unit-scorecard-report .report-activity-list {
    margin: 0;
    padding-left: 1.1rem;
}

.unit-scorecard-report .report-activity-list li + li,
.unit-scorecard-report .report-activity-list + .report-activity-list {
    margin-top: 0.35rem;
}

/* Actual result and owner comment: three lines, the full text in the tooltip and the printout. */
.unit-scorecard-report .report-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* Desktop: # and the performance measure stay in view while the rest of the row scrolls. */
@media (min-width: 992px) {
    .unit-scorecard-report .report-table .report-sticky {
        position: sticky;
        z-index: 2;
        background-color: var(--bs-white);
    }

    .unit-scorecard-report .report-table thead .report-sticky {
        z-index: 3;
        background-color: var(--bs-light);
    }

    .unit-scorecard-report .report-table .report-col-serial {
        left: 0;
    }

    .unit-scorecard-report .report-table .report-col-measure {
        left: 3rem;
    }

    .unit-scorecard-report .report-table .report-col-measure::after {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        width: 8px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
    }
}

.unit-scorecard-report .report-evidence {
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Score Mix chart: the CSS donut shows until ECharts replaces it. */
.unit-scorecard-report .report-score-mix-chart.is-chart {
    width: 160px;
    height: 160px;
}

.unit-scorecard-report .report-search {
    min-width: 260px;
    max-width: 480px;
}

.unit-scorecard-report .report-perspective {
    border-left: 4px solid transparent;
    border-radius: 0.3rem;
    padding: 0.45rem 0.65rem;
}

/* "More columns" cue over the top-right of the items table while columns are off-screen. */
.unit-scorecard-report .report-scroll-hint {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 4;
}

/* Covers the items table while filters, search or paging update it. */
.unit-scorecard-report .report-loading {
    display: none;
    z-index: 5;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.475rem;
}

@media print {
    @page {
        size: landscape;
        margin: 1cm;
    }

    body.report-body {
        background: #fff !important;
    }

    .unit-scorecard-report {
        max-width: none;
        padding: 0 !important;
    }

    .unit-scorecard-report .no-print {
        display: none !important;
    }

    .unit-scorecard-report .card {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .unit-scorecard-report .report-table tr {
        break-inside: avoid;
    }

    /* A printout carries the details, history and full measures, not the previews. */
    .unit-scorecard-report .report-print-show {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .unit-scorecard-report .report-print-hide {
        display: none !important;
    }

    .unit-scorecard-report .table-responsive {
        overflow: visible !important;
    }

    .unit-scorecard-report .report-table .report-sticky {
        position: static !important;
    }

    .unit-scorecard-report .report-table .report-col-measure::after {
        display: none;
    }

    .unit-scorecard-report .report-clamp {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: none;
        overflow: visible;
    }
}

/* ==========================================================================
 * PMS WORKPLAN TABS (shared)
 *
 * Every tab row on the PMS workplan pages: the Directorate, Unit and Corporate
 * workplan lists (partials/workplan-list-tabs, department-workplan-list), the
 * Unit, Directorate/Department and Corporate workplan pages (Workplan /
 * Scorecard toggle and section tabs), the department-led workplan preview and
 * the corporate workplan dashboard. A segmented track rather than a row of
 * buttons or underline tabs. Inactive tabs are plain grey text; the
 * active tab (`.is-active`) is a white raised chip with text in
 * `--tenant-btn-primary`. On phones the track fills the width and wraps, so
 * every tab stays visible.
 * ========================================================================== */
.workplan-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem;
    background-color: #F1F3F6;
    border-radius: 0.75rem;
}

.workplan-tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: #5E6278;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.workplan-tab i {
    color: inherit;
    font-size: 1.05rem;
}

.workplan-tab:hover {
    color: var(--tenant-btn-primary);
    background-color: rgba(255, 255, 255, 0.55);
}

.workplan-tab.is-active {
    background-color: #FFFFFF;
    color: var(--tenant-btn-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.workplan-tab:focus-visible {
    outline: 2px solid var(--tenant-btn-primary);
    outline-offset: 1px;
}

@media (max-width: 575.98px) {
    .workplan-tabs {
        display: flex;
    }

    .workplan-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workplan-tab {
        transition: none;
    }
}

/* ==========================================================================
 * WORKPLAN REPORTS
 *
 * The Reports page reuses the M&E dashboard markup in reports mode
 * (`.workplan-report` on its root). Directors aged 60-70 read these, so the
 * dashboard's very small helper text (`fs-8`) is raised to a readable size
 * here only; the M&E dashboard itself is unchanged. Tenant colours only.
 * ========================================================================== */
.workplan-report .fs-8 {
    font-size: 0.95rem !important;
}

.workplan-report .form-label {
    font-size: 0.95rem;
}

.workplan-report-breadcrumb {
    align-items: center;
    color: var(--bs-gray-600);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.95rem;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.workplan-report-breadcrumb a,
.workplan-report-breadcrumb button {
    background: none;
    border: 0;
    color: var(--tenant-dashboard-title-color, #193660);
    padding: 0;
    text-decoration: none;
}

.workplan-report-breadcrumb a:hover,
.workplan-report-breadcrumb button:hover {
    text-decoration: underline;
}

.workplan-report-breadcrumb :is(a, button):focus-visible,
.workplan-risk-card-action:focus-visible {
    outline: 2px solid var(--tenant-btn-primary, #193660);
    outline-offset: 2px;
}

.workplan-report-picker {
    max-width: 26rem;
}

.workplan-risk-drill-context {
    align-items: center;
    background-color: var(--bs-gray-100);
    border-radius: 0.5rem;
    color: var(--bs-gray-700);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.85rem;
}

.workplan-report-context {
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
}

.workplan-report-empty {
    background-color: var(--bs-gray-100);
    border: 1px dashed var(--bs-gray-400);
    border-radius: 0.625rem;
    color: var(--bs-gray-800);
    font-size: 1rem;
    padding: 1rem 1.25rem;
}

.workplan-report-hint {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
}

.workplan-report [role="img"] canvas {
    cursor: pointer;
}

/* Excel / PDF downloads of the open report: comfortable 44px targets. */
.workplan-report-downloads .btn {
    min-height: 44px;
}

/*
 * Print: this audience reviews on paper. A4 landscape (a named page, so other pages keep
 * their own @page), only the report: no menu, header, filters, buttons or pagers; charts
 * scaled to the page; tables printed in full with rows kept whole and headings repeated.
 */
.workplan-report {
    page: workplan-report;
}

@page workplan-report {
    size: A4 landscape;
    margin: 1cm;
}

@media print {
    .workplan-report [data-workplan-report-switcher],
    .workplan-report .form-check,
    .workplan-report .card-toolbar,
    .workplan-report-hint,
    .workplan-report-downloads,
    .workplan-report .me-dashboard-filters,
    .workplan-report .btn,
    .workplan-report .nav,
    .workplan-report .form-select,
    .workplan-report .form-control,
    .workplan-report .form-label,
    .workplan-report [data-testid="measures-report"] .card-body > .row:first-child,
    body:has(.workplan-report) #kt_aside,
    body:has(.workplan-report) #kt_header,
    body:has(.workplan-report) .module-subnav,
    body:has(.workplan-report) .toolbar,
    body:has(.workplan-report) .footer,
    body:has(.workplan-report) .scrolltop,
    body:has(.workplan-report) .skip-link {
        display: none !important;
    }

    body:has(.workplan-report),
    body:has(.workplan-report) #kt_wrapper {
        background: #fff !important;
        padding: 0 !important;
    }

    .workplan-report {
        max-width: none;
        padding: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .workplan-report .card {
        border: 1px solid #E4E6EF;
        box-shadow: none !important;
    }

    /* The printable width is below Bootstrap's lg; keep the headline cards six to a row. */
    .workplan-report .row > .col-lg-2 {
        flex: 0 0 auto;
        width: 16.6667%;
    }

    /* The Metric View switch has no buttons on paper; the chart titles name the view. */
    .workplan-report div:has(> button[wire\:click*="metricView"]) {
        display: none !important;
    }

    .workplan-report .card .card-body.text-center,
    .workplan-report .workplan-report-empty {
        break-inside: avoid;
    }

    .workplan-report [wire\:ignore],
    .workplan-report [wire\:ignore] canvas {
        break-inside: avoid;
        max-width: 100% !important;
    }

    .workplan-report [wire\:ignore] canvas {
        height: auto !important;
    }

    .workplan-report .table-responsive {
        overflow: visible !important;
    }

    .workplan-report .table-responsive[class*="table-wrap"] {
        max-height: none !important;
    }

    .workplan-report thead {
        display: table-header-group;
    }

    .workplan-report tr {
        break-inside: avoid;
    }
}

/* Workplan Reports: report cards and planned-share bars (same header band as the M&E cards). */
.card .card-header.workplan-report-card-header {
    background-color: var(--tenant-dashboard-header-bg, #E7EAEF);
    min-height: 70px;
}

.card .card-header .card-title.workplan-report-card-title {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 1.35rem;
    font-weight: 700;
}

.workplan-report-bar {
    accent-color: var(--tenant-btn-primary);
    flex: 1 1 auto;
    height: 0.75rem;
    min-width: 5rem;
}

/*
 * Performance Comparison (reports/comparison.blade.php): headline cards with the change
 * in points (arrow and words, never colour alone), two charts and the period table. The
 * table scrolls inside its card on narrow screens; figures never wrap mid-number.
 */
.workplan-comparison-kpi-label {
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
}

.workplan-comparison-kpi-value {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.workplan-comparison-kpi-value.is-muted {
    color: var(--bs-gray-600);
    font-size: 1.35rem;
}

.workplan-comparison-kpi-note {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
}

.workplan-comparison-change {
    font-size: 0.95rem;
    white-space: nowrap;
}

.workplan-comparison-chart {
    height: 380px;
    width: 100%;
}

/* These charts are not clickable, unlike the perspective chart drill-down. */
.workplan-report .workplan-comparison-chart[role="img"] canvas {
    cursor: default;
}

.workplan-comparison-table td,
.workplan-comparison-table th {
    white-space: nowrap;
}

.workplan-comparison-table .workplan-comparison-bar-cell {
    min-width: 11rem;
}

@media (max-width: 575.98px) {
    .workplan-comparison-chart {
        height: 320px;
    }

    .workplan-comparison-kpi-value {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
 * WORKPLAN RISK REPORTS
 *
 * Risk & Exception reports on the Workplan Reports page
 * (reports/risk/*.blade.php): Risk Overview cards and charts, the register,
 * chronic, data-quality and process tables. Directors aged 60-70 read these:
 * readable sizes, 44px controls, severity always shown as a text badge.
 * Tables scroll inside their card on narrow screens. Tenant and Bootstrap
 * variables only.
 * ========================================================================== */
.workplan-risk-rule {
    background-color: var(--bs-gray-100);
    border-left: 4px solid var(--tenant-btn-primary, var(--bs-primary));
    border-radius: 0.475rem;
    color: var(--bs-gray-800);
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

.workplan-risk-kpi-label {
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
}

.workplan-risk-kpi-value {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.workplan-risk-kpi-note {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
}

.workplan-risk-card-action {
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.workplan-risk-card-action:hover {
    border-color: var(--bs-gray-400) !important;
    box-shadow: 0 0.25rem 0.65rem rgba(15, 23, 42, 0.08) !important;
}

.workplan-risk-register-panel {
    box-shadow: none;
}

.workplan-risk-count,
.workplan-risk-severity {
    font-size: 0.95rem;
    white-space: nowrap;
}

.workplan-risk-count {
    padding: 0.65rem 0.9rem;
}

.workplan-risk-chart {
    height: 360px;
    width: 100%;
}

.workplan-risk-filters .form-select,
.workplan-risk-clear,
.workplan-risk-open,
.workplan-risk-pager .btn {
    min-height: 44px;
}

.workplan-risk-table {
    font-size: 1rem;
}

.workplan-risk-table .workplan-risk-number {
    white-space: nowrap;
}

.workplan-risk-table .workplan-risk-measure {
    min-width: 16rem;
}

.workplan-risk-table .workplan-risk-text {
    min-width: 12rem;
}

@media (max-width: 575.98px) {
    .workplan-risk-chart {
        height: 300px;
    }

    .workplan-risk-kpi-value {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
 * WORKPLAN SCORECARD ROW ACTIONS
 *
 * The Actions menu on the Directorate and Department Scorecards tabs
 * (View approved scorecard · Report). Readers include directors aged 60-70,
 * so the button is a 44px target and each entry a compact 40px row with
 * readable text. The menu floats above the table (Popper `fixed` strategy, set
 * in the markup) so the table's scroll container cannot clip it. Scoped to
 * `.workplan-row-actions`; other menus unchanged.
 * ========================================================================== */
.workplan-row-actions > .btn {
    min-height: 44px;
}

.workplan-row-actions .dropdown-menu {
    padding-bottom: 0.35rem;
    padding-top: 0.35rem;
}

.workplan-row-actions .dropdown-item {
    align-items: center;
    display: flex;
    font-size: 1rem;
    min-height: 40px;
    padding-bottom: 0.4rem;
    padding-top: 0.4rem;
}

/* ==========================================================================
 * WORKPLAN REPORTS HUB
 *
 * resources/views/modules/performance-management/workplan/reports/hub.blade.php:
 * the Reports landing page, one card per report (WorkplanReportCatalogue::cards()),
 * in the same card pattern as the Leave Reports hub. Semantic tones come from the
 * Bootstrap/Metronic colour variables; the page header uses the tenant variables.
 * ========================================================================== */
.card .card-header.workplan-reports-hub__header {
    background-color: var(--tenant-dashboard-header-bg, #E7EAEF);
    min-height: 0;
    padding-bottom: 0.9rem;
    padding-top: 0.9rem;
}

.workplan-reports-hub__heading {
    align-items: baseline;
    column-gap: 0.75rem;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.workplan-reports-hub__title {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0;
}

.workplan-reports-hub__subtitle {
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
}

.card .card-body.workplan-reports-hub__body {
    padding-top: 1.5rem;
}

.workplan-reports-hub__filters {
    display: flex;
    border-bottom: 1px solid var(--bs-gray-300);
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.workplan-reports-hub__filter {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--bs-gray-700);
    flex: 0 0 auto;
    font-size: 1rem;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
}

.workplan-reports-hub__filter:hover {
    background-color: var(--bs-gray-100);
    color: var(--tenant-dashboard-title-color, #193660);
}

.workplan-reports-hub__filter.is-active {
    border-color: var(--tenant-btn-primary, #193660);
    color: var(--tenant-dashboard-title-color, #193660);
    font-weight: 700;
}

.workplan-reports-hub__filter:focus-visible {
    outline: 2px solid var(--tenant-btn-primary, #193660);
    outline-offset: 2px;
}

.workplan-reports-hub__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workplan-report-tile {
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.85rem;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.workplan-report-tile:hover {
    border-color: var(--bs-gray-300);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.06);
    color: inherit;
    transform: translateY(-2px);
}

.workplan-report-tile:focus-visible {
    outline: 2px solid var(--tenant-btn-primary, #193660);
    outline-offset: 2px;
}

.workplan-report-tile__top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.workplan-report-tile__icon {
    align-items: center;
    border-radius: 0.75rem;
    display: inline-flex;
    font-size: 1.4rem;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.workplan-report-tile__icon .bi {
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
}

.workplan-report-tile__icon--primary { background-color: var(--bs-light-primary); color: var(--bs-primary); }
.workplan-report-tile__icon--info { background-color: var(--bs-light-info); color: var(--bs-info); }
.workplan-report-tile__icon--success { background-color: var(--bs-light-success); color: var(--bs-success); }
.workplan-report-tile__icon--warning { background-color: var(--bs-light-warning); color: var(--bs-warning); }
.workplan-report-tile__icon--danger { background-color: var(--bs-light-danger); color: var(--bs-danger); }
.workplan-report-tile__icon--teal { background-color: color-mix(in srgb, var(--bs-teal, #20c997) 14%, transparent); color: color-mix(in srgb, var(--bs-teal, #20c997) 80%, #000); }

.workplan-report-tile__category {
    background-color: var(--tenant-dashboard-title-color, #193660);
    border-radius: 0.4rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.6rem;
}

.workplan-report-tile__title {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 1.15rem;
    font-weight: 700;
}

.workplan-report-tile__description {
    color: var(--bs-gray-700);
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.5;
}

.workplan-report-tile__link {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

@media (max-width: 1199.98px) {
    .workplan-reports-hub__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .workplan-reports-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .workplan-reports-hub__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
 * REPORTS & ANALYTICS
 * --------------------------------------------------------------------------
 * resources/views/livewire/modules/reports-analytics/dashboard.blade.php and
 * layouts/module_subnavs/reports-analytics.blade.php. The landing page reuses
 * the Workplan Reports hub header, filter track and report tiles above; this
 * section only adds the module headings that group the tiles, the empty state,
 * the header meta pill and the long report dropdowns in the subnav.
 * ========================================================================== */
.reports-analytics-hub__meta {
    align-items: center;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-gray-300);
    border-radius: 2rem;
    color: var(--tenant-dashboard-title-color, #193660);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    white-space: nowrap;
}

.reports-analytics-module + .reports-analytics-module {
    border-top: 1px solid var(--bs-gray-200);
    margin-top: 2rem;
    padding-top: 1.75rem;
}

.reports-analytics-module__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.reports-analytics-module__icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--tenant-dashboard-title-color, #193660) 10%, transparent);
    border-radius: 0.75rem;
    color: var(--tenant-dashboard-title-color, #193660);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.reports-analytics-module__icon .bi {
    color: inherit;
    font-size: 1.4rem;
    line-height: 1;
}

.reports-analytics-module__title {
    color: var(--tenant-dashboard-title-color, #193660);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0;
}

.reports-analytics-module__count {
    background-color: var(--bs-gray-100);
    border-radius: 2rem;
    color: var(--bs-gray-700);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
}

.reports-analytics-module__empty {
    align-items: center;
    background-color: var(--bs-gray-100);
    border: 1px dashed var(--bs-gray-300);
    border-radius: 0.85rem;
    color: var(--bs-gray-700);
    display: flex;
    font-size: 1rem;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
}

.reports-analytics-module__empty .bi {
    color: var(--bs-gray-500);
    font-size: 1.2rem;
}

.reports-analytics-subnav__empty {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
    white-space: nowrap;
}

/* A module can list many reports: keep its dropdown on screen and scroll inside it. */
.module-subnav .reports-analytics-subnav__menu {
    max-height: min(70vh, 34rem);
    min-width: 17rem;
    overflow-y: auto;
}

.reports-analytics-subnav__group {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 575.98px) {
    /* The category track scrolls sideways on phones: fade its right edge so it reads as more,
       with end padding so the last category can scroll clear of the fade. */
    .reports-analytics-hub .workplan-reports-hub__filters {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        padding-inline-end: 2.5rem;
    }

    .reports-analytics-hub .card-toolbar {
        margin-top: 0.5rem;
    }

    .reports-analytics-module + .reports-analytics-module {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }
}

/* ==========================================================================
 * CEO MONITORING DASHBOARD
 *
 * executive/ceo-monitoring.blade.php and its partials: the T3 bar (Planned,
 * Done, Not done, Remaining) beside employee performance, warnings, drill
 * tables, top performers and quick links. Read by directors aged 60-70:
 * 16px body text, 44px controls, status always shown as text as well as
 * colour. Scorecard palette: white cards, #E7EAEF headers, tenant navy titles.
 * The bar is an SVG sized by attributes; band colours come from the
 * configured performance key scale as SVG fills.
 * ========================================================================== */
.ceo-monitor {
    --ceo-done: #0f7b55;
    --ceo-not-done: #d69e2e;
    --ceo-remaining: var(--bs-gray-300, #dbdfe9);
    --ceo-title: var(--tenant-dashboard-title-color, #193660);
    --ceo-head-bg: var(--tenant-dashboard-header-bg, #E7EAEF);
    color: var(--bs-gray-800);
    font-size: 1rem;
}

.ceo-monitor__panel {
    background: #fff;
    border: 1px solid var(--dsi-hairline, #e9edf3);
    border-radius: var(--dsi-radius, 0.75rem);
    box-shadow: none;
    overflow: hidden;
}

.ceo-monitor .card .card-header.ceo-monitor__panel-head {
    align-items: center;
    background: var(--ceo-head-bg);
    border-bottom: 0;
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 3.75rem;
    padding: 0.75rem var(--dsi-card-pad, 1.25rem);
    row-gap: 0.5rem;
}

.ceo-monitor__panel-title {
    align-items: center;
    color: var(--ceo-title);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.15rem;
    font-weight: 700;
    gap: 0.55rem;
    margin: 0;
}

.ceo-monitor__panel-meta {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
    font-weight: 600;
}

.ceo-monitor .card-body.ceo-monitor__panel-body,
.ceo-monitor .card-body.ceo-monitor__head {
    padding: var(--dsi-card-pad, 1.25rem);
}

.ceo-monitor__title-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.ceo-monitor__title {
    color: var(--ceo-title);
    font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.75rem);
    font-weight: 700;
    margin: 0;
}

.ceo-monitor__subtitle {
    color: var(--bs-gray-700);
    font-size: 1rem;
    margin: 0.25rem 0 0;
}

.ceo-monitor__back,
.ceo-monitor__apply {
    min-height: 44px;
}

.ceo-monitor__filters {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-top: 1.25rem;
}

.ceo-monitor__filter .form-label {
    color: var(--bs-gray-800);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.ceo-monitor__filter .form-select {
    font-size: 1rem;
    min-height: 44px;
}

.ceo-monitor__breadcrumb {
    align-items: center;
    color: var(--bs-gray-600);
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    gap: 0.55rem;
    margin-top: 1rem;
}

.ceo-monitor__breadcrumb a,
.ceo-monitor__link {
    align-items: center;
    color: var(--ceo-title);
    display: inline-flex;
    font-weight: 600;
    min-height: 44px;
    text-decoration: none;
}

/* No underline at rest (compact tables); it shows on hover and keyboard focus so the link is still clear. */
.ceo-monitor__breadcrumb a:hover,
.ceo-monitor__breadcrumb a:focus-visible,
.ceo-monitor__link:hover,
.ceo-monitor__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ceo-monitor__list-filters {
    align-items: end;
    display: grid;
    gap: 0.75rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin-bottom: 1.25rem;
}

.ceo-monitor__list-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    min-height: 44px;
}

.ceo-monitor__row-action {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    white-space: nowrap;
}

.ceo-monitor__breadcrumb [aria-current="page"] {
    color: var(--bs-gray-900);
    font-weight: 700;
}

.ceo-monitor__headline {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin-bottom: 1rem;
}

.ceo-monitor__headline-value {
    color: var(--ceo-title);
    font-size: clamp(2.25rem, 1.9rem + 0.9vw, 2.75rem);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}

.ceo-monitor__headline-label {
    color: var(--bs-gray-700);
    font-size: 1rem;
}

.ceo-monitor__status {
    font-size: 0.95rem;
    padding: 0.45rem 0.7rem;
}

.ceo-monitor__bar-track { fill: var(--bs-gray-200); }
.ceo-monitor__bar-done { fill: var(--ceo-done); }
.ceo-monitor__bar-not-done { fill: var(--ceo-not-done); }
.ceo-monitor__bar-remaining { fill: var(--ceo-remaining); }

.ceo-monitor__expected {
    align-items: center;
    color: var(--bs-gray-800);
    display: flex;
    font-size: 1rem;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.ceo-monitor__note,
.ceo-monitor__hint {
    color: var(--bs-gray-700);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.ceo-monitor__empty {
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    color: var(--bs-gray-800);
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
}

.ceo-monitor__band {
    align-items: center;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 600;
    gap: 0.4rem;
}

.ceo-monitor__band-dot {
    flex: 0 0 auto;
    height: 0.8rem;
    width: 0.8rem;
}

.ceo-monitor__chart {
    min-height: 220px;
    width: 100%;
}

.ceo-monitor__chart--donut {
    height: 240px;
}

.ceo-monitor__bands {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.ceo-monitor__band-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceo-monitor__band-list li {
    align-items: center;
    border-bottom: 1px solid var(--bs-gray-200);
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 0.5rem 0;
}

.ceo-monitor__band-range {
    color: var(--bs-gray-600);
    font-size: 0.9rem;
}

.ceo-monitor__band-count {
    font-weight: 700;
    min-width: 4.5rem;
    text-align: right;
}

.ceo-monitor__band-count small {
    color: var(--bs-gray-600);
    font-weight: 600;
}

.ceo-monitor__table {
    font-size: 1rem;
    margin-bottom: 0;
}

.ceo-monitor__table thead th {
    background: var(--bs-gray-100);
    color: var(--bs-gray-800);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.ceo-monitor__table th,
.ceo-monitor__table td {
    padding: 0.4rem 0.6rem;
}

/* Links inside table rows size to their text (plus a little padding) so rows stay compact. */
.ceo-monitor__table .ceo-monitor__link {
    min-height: 0;
    padding-block: 0.2rem;
}

.ceo-monitor__person,
.ceo-monitor__activity {
    color: var(--bs-gray-900);
    display: block;
    font-weight: 600;
}

.ceo-monitor__person-meta {
    color: var(--bs-gray-600);
    display: block;
    font-size: 0.9rem;
}

.ceo-monitor__top-groups {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.ceo-monitor__top-group {
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.ceo-monitor__top-group-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.ceo-monitor__top-list {
    font-size: 0.95rem;
    margin: 0;
    padding-left: 1.2rem;
}

.ceo-monitor__top-list li {
    padding: 0.2rem 0;
}

.ceo-monitor__top-list li span:last-child {
    color: var(--bs-gray-700);
    float: right;
    font-weight: 700;
}

.ceo-monitor__toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ceo-monitor__toggle-option {
    align-items: center;
    background: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: 999px;
    color: var(--bs-gray-800);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0 1rem;
}

.ceo-monitor__toggle-option.is-active {
    background: var(--ceo-title);
    border-color: var(--ceo-title);
    color: #fff;
}

.ceo-monitor__pager {
    align-items: center;
    color: var(--bs-gray-700);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.ceo-monitor__pager .pagination {
    margin: 0;
}

.ceo-monitor__links-title {
    color: var(--ceo-title);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.ceo-monitor__links {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceo-monitor__quick-link {
    align-items: flex-start;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.5rem;
    color: var(--bs-gray-900);
    display: flex;
    gap: 0.7rem;
    height: 100%;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
}

.ceo-monitor__quick-link:hover,
.ceo-monitor__quick-link:focus-visible {
    background: var(--bs-gray-100);
    border-color: var(--ceo-title);
    color: var(--bs-gray-900);
}

.ceo-monitor__quick-link .bi {
    color: var(--ceo-title);
    font-size: 1.2rem;
}

.ceo-monitor__quick-link-label {
    display: block;
    font-weight: 700;
}

.ceo-monitor__quick-link-description {
    color: var(--bs-gray-600);
    display: block;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.ceo-monitor__panel-kind {
    background: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: 999px;
    color: var(--bs-gray-700);
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.25rem;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.ceo-monitor__filter-alert {
    margin-top: var(--dsi-gap, 1.25rem);
    border: 1px solid var(--bs-gray-300);
    border-left: 4px solid var(--ceo-title);
    color: var(--bs-gray-800);
    font-size: 1rem;
}

.ceo-monitor__filter-alert-icon {
    color: var(--ceo-title);
}

.ceo-monitor__filter-alert-title {
    color: var(--ceo-title);
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ceo-monitor__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceo-monitor__filter-label {
    color: var(--bs-gray-600);
    font-weight: 600;
}

.ceo-monitor__tabs .workplan-tab {
    min-height: 44px;
}

.ceo-monitor__chart--years {
    height: 300px;
}

.ceo-monitor__row--selected td {
    background: var(--bs-gray-100);
    font-weight: 600;
}

/* Space between the filter notice, the tabs and each tab's content. */
.ceo-monitor__tab-panel {
    padding-top: 0.5rem;
}

.ceo-monitor__chart--average {
    height: 340px;
}

/* Compact tables (Average performance): tighter rows, no tall link targets inside the row. */
.ceo-monitor .card .card-header.ceo-monitor__panel-head--compact {
    min-height: 3.25rem;
    padding-bottom: 0.6rem;
    padding-top: 0.6rem;
}

.ceo-monitor .card-body.ceo-monitor__panel-body--compact {
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}



.ceo-monitor__overall {
    color: var(--bs-gray-700);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.95rem;
    gap: 0.25rem 1.25rem;
    margin-bottom: 0.5rem;
}

.ceo-monitor__overall-label {
    color: var(--bs-gray-600);
    font-weight: 600;
}

.ceo-monitor__overall strong {
    color: var(--ceo-title);
}

.ceo-monitor__list-chart-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.ceo-monitor__list-chart-key .ceo-monitor__t3-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ceo-monitor__swatch {
    margin-right: 0.4rem;
}

.ceo-monitor__divider {
    border-top: 1px solid var(--bs-gray-300);
    margin: 1.5rem 0;
    opacity: 1;
}

/* Overview key-indicator panels (premium UI/UX review): one accent per meaning, colour only on the data. */
.ceo-monitor .card-body.ceo-monitor__panel-body--summary {
    display: flex;
    flex-direction: column;
}

.ceo-monitor__bar {
    border-radius: 999px;
    display: block;
    height: 1.25rem;
    overflow: hidden;
    width: 100%;
}

.ceo-monitor__bar-expected {
    stroke: var(--ceo-title);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.ceo-monitor__expected-mark {
    background: var(--ceo-title);
    border-radius: 1px;
    display: inline-block;
    height: 1rem;
    width: 2px;
}

.ceo-monitor__t3-grid {
    display: grid;
    gap: 0.75rem;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 1rem;
}

.ceo-monitor__t3-item {
    background: var(--bs-gray-100);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 0.875rem;
}

.ceo-monitor__t3-item dt {
    align-items: center;
    color: var(--bs-gray-700);
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ceo-monitor__t3-item dd {
    color: var(--bs-gray-900);
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.ceo-monitor__t3-item dd.ceo-monitor__t3-caption {
    color: var(--bs-gray-600);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: normal;
}

.ceo-monitor__swatch {
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
    height: 0.625rem;
    width: 0.625rem;
}

.ceo-monitor__swatch--done { background: var(--ceo-done); }
.ceo-monitor__swatch--not-done { background: var(--ceo-not-done); }
.ceo-monitor__swatch--remaining { background: var(--ceo-remaining); border: 1px solid var(--bs-gray-400); }

/* "Needs attention": a quiet list at the bottom of each panel; the row is the link. */
.ceo-monitor__attention {
    border-top: 1px solid var(--dsi-hairline, #e9edf3);
    margin-top: auto;
    padding-top: 0.75rem;
}

.ceo-monitor__attention-title {
    align-items: center;
    color: var(--bs-gray-700);
    display: flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.ceo-monitor__attention-count {
    background: var(--bs-gray-200);
    border-radius: 999px;
    color: var(--bs-gray-800);
    font-size: 0.8rem;
    padding: 0.05rem 0.5rem;
}

.ceo-monitor__alerts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceo-monitor__alert + .ceo-monitor__alert {
    border-top: 1px solid var(--dsi-hairline, #e9edf3);
}

.ceo-monitor__alert-row {
    align-items: center;
    border-left: 3px solid transparent;
    border-radius: 0 0.375rem 0.375rem 0;
    color: var(--bs-gray-800);
    display: flex;
    font-size: 1rem;
    gap: 0.625rem;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
}

a.ceo-monitor__alert-row:hover {
    background: var(--bs-gray-100);
    color: var(--ceo-title);
}

a.ceo-monitor__alert-row:focus-visible {
    outline: 2px solid var(--ceo-title);
    outline-offset: 1px;
}

.ceo-monitor__alert-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Serious items carry a solid red bar and icon; items to watch an amber one. */
.ceo-monitor__alert--danger .ceo-monitor__alert-row { border-left-color: var(--bs-danger); padding-left: 0.625rem; }
.ceo-monitor__alert--warning .ceo-monitor__alert-row { border-left-color: #d69e2e; padding-left: 0.625rem; }
.ceo-monitor__alert--danger .ceo-monitor__alert-icon { color: var(--bs-danger); font-size: 1.1rem; }
.ceo-monitor__alert--warning .ceo-monitor__alert-icon { color: #b7791f; font-size: 1.1rem; }
.ceo-monitor__alert--danger .ceo-monitor__alert-text { color: var(--bs-gray-900); font-weight: 600; }

.ceo-monitor__attention-title .bi { color: var(--bs-danger); }

.ceo-monitor__attention-count--danger {
    background: var(--bs-danger);
    color: #fff;
}

.ceo-monitor__alert-chevron {
    color: var(--bs-gray-500);
}

.ceo-monitor__attention-more summary {
    color: var(--ceo-title);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.6rem 0.25rem;
}

.ceo-monitor__attention-more summary:focus-visible {
    outline: 2px solid var(--ceo-title);
    outline-offset: 1px;
}

/* Performing best / Needs support rows. */
.ceo-monitor__extremes {
    margin: 0 0 1rem;
}

.ceo-monitor__extremes-row {
    align-items: center;
    border-top: 1px solid var(--dsi-hairline, #e9edf3);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    min-height: 44px;
}

.ceo-monitor__extremes-row dt {
    color: var(--bs-gray-700);
    font-weight: 500;
}

.ceo-monitor__extremes-row dd {
    margin: 0;
}

.ceo-monitor__extremes-score {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .ceo-monitor__t3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ceo-monitor__extremes-row {
        grid-template-columns: 7rem minmax(0, 1fr) auto;
    }
}

@media (max-width: 767.98px) {
    .ceo-monitor__t3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ceo-monitor__bands {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
 * RECRUITMENT — CANDIDATES LIST: EXPERIENCE BADGE
 *
 * resources/views/livewire/modules/recruitment/job-posting-candidates.blade.php.
 * The experience figure was a pale grey chip that disappeared into the row. It is now
 * a badge whose colour steps up with the years (under 1, 1-3, 3-6, 6-10, 10+), so a
 * long career stands out when a list is scanned. The two senior tiers are solid; the
 * rest are tinted. Every pairing is at least 4.5:1, and the figure and a hidden tier
 * description carry the meaning, so colour is never the only signal.
 * ========================================================================== */
.candidate-exp-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 0.3rem;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    white-space: nowrap;
}

.candidate-exp-badge--entry {
    background-color: #e9edf3;
    color: #3f4a5c;
}

.candidate-exp-badge--junior {
    background-color: #d6e9fa;
    color: #0b4f82;
}

.candidate-exp-badge--mid {
    background-color: #d3f0df;
    color: #1b6340;
}

.candidate-exp-badge--senior {
    background-color: #2e7d4f;
    color: #ffffff;
}

.candidate-exp-badge--expert {
    background-color: #193660;
    color: #ffffff;
}

.candidate-exp-badge--expert .bi {
    color: #ffc700;
    font-size: 12px;
}

/* -------------------------------------------------------------------------
 * Interview session wizard — Step 4, the panel picker
 * (livewire/modules/recruitment/partials/interview-wizard/step4.blade.php).
 * The directory results read as one panel attached to the search above them,
 * so they cannot be mistaken for the current-panel table below.
 * ------------------------------------------------------------------------- */
.wizard-panel-searching {
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    color: var(--bs-gray-700);
    font-size: .85rem;
}

.wizard-panel-results {
    border: 1px solid var(--bs-gray-300);
    border-radius: .475rem;
    background-color: var(--bs-card-bg, #ffffff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
    overflow: hidden;
    transition: opacity .15s ease;
}

.wizard-panel-results--busy {
    opacity: .55;
}

.wizard-panel-results__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background-color: var(--bs-gray-100);
    border-bottom: 1px solid var(--bs-gray-200);
}

.wizard-panel-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-gray-200);
}

.wizard-panel-result:last-child {
    border-bottom: 0;
}

.wizard-panel-result:hover {
    background-color: var(--bs-gray-100);
}

.wizard-panel-result--selected,
.wizard-panel-result--selected:hover {
    background-color: color-mix(in srgb, var(--tenant-dashboard-title-color, #193660) 6%, var(--bs-card-bg, #ffffff));
    box-shadow: inset 3px 0 0 var(--tenant-dashboard-title-color, #193660);
}

.wizard-panel-role-picker .form-select {
    min-width: 12rem;
}

.wizard-panel-results__empty {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border-style: dashed;
    box-shadow: none;
}

.wizard-panel-table > thead > tr > th {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.wizard-panel-table .wizard-panel-remove {
    width: 32px;
    height: 32px;
}

.wizard-panel-search-btn:focus-visible,
.wizard-panel-result .btn:focus-visible,
.wizard-panel-table .wizard-panel-remove:focus-visible {
    outline: 2px solid var(--tenant-dashboard-title-color, #193660);
    outline-offset: 2px;
}

/* Touch screens keep a finger-sized remove control; the condensed row grows
   to fit it rather than shrinking the target. */
@media (pointer: coarse) {
    .wizard-panel-table .wizard-panel-remove {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 575.98px) {
    .wizard-panel-role-picker,
    .wizard-panel-role-picker .form-select {
        width: 100%;
        min-width: 0;
    }
}