/*
 * Remittance Web theme layer.
 *
 * Loaded after vendor/adminlte/css/adminlte.min.css, so equal-specificity
 * rules here win. Nothing in public/vendor is edited — replacing AdminLTE
 * stays a matter of dropping in a new dist folder.
 *
 * Design rules this file encodes:
 *   1. Colour carries compliance meaning. Chrome is ink, paper and rule.
 *   2. Figures are tabular and right-aligned; money reads as a column.
 *   3. Burmese gets its own optical size and leading (see @font-face below).
 *   4. One shadow in the whole app — the sidebar. Cards are separated by hairlines.
 */

/* ---------------------------------------------------------------- tokens */

:root,
[data-bs-theme=light] {
    --app-ink: #16232e;
    --app-ink-soft: #5a6b7a;
    --app-ink-faint: #8b9aa7;
    --app-paper: #eef1f4;
    --app-surface: #ffffff;
    --app-rule: #d3dae1;
    --app-rule-soft: #e4e9ed;
    --app-accent: #0f6e62;
    --app-accent-dark: #0b544a;
    --app-accent-wash: #e6f1ef;
    --app-flag: #b3341f;
    --app-flag-wash: #fbeae7;

    /* Type scale */
    --app-fs-micro: 0.6875rem;  /* 11px — table headers, meta */
    --app-fs-small: 0.75rem;    /* 12px — tables, labels */
    --app-fs-base: 0.8125rem;   /* 13px — body */
    --app-fs-lead: 0.9375rem;   /* 15px — card titles */
    --app-fs-head: 1.125rem;    /* 18px — page title */
    --app-fs-figure: 1.375rem;  /* 22px — stat numbers */

    /* Spacing */
    --app-gap: 12px;
    --app-pad: 16px;
    --app-pad-tight: 12px;
}

/* Burmese is optically smaller than Latin at the same size, so it gets a
   +12% adjustment scoped to the Myanmar unicode block. This applies wherever
   Burmese appears without having to tag each string in the templates. */
@font-face {
    font-family: 'MM Optical';
    src: local('Pyidaungsu'), local('Noto Sans Myanmar'), local('Myanmar Text'), local('Padauk');
    unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F;
    size-adjust: 112%;
    font-display: swap;
}

/* -------------------------------------------------- bootstrap remapping */

:root,
[data-bs-theme=light] {
    --bs-font-sans-serif: 'MM Optical', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-size: var(--app-fs-base);
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--app-ink);
    --bs-body-bg: var(--app-surface);
    --bs-secondary-color: var(--app-ink-soft);
    --bs-tertiary-bg: var(--app-paper);
    --bs-border-color: var(--app-rule);
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 5px;
    --bs-primary: var(--app-accent);
    --bs-primary-rgb: 15, 110, 98;
    --bs-link-color: var(--app-accent);
    --bs-link-hover-color: var(--app-accent-dark);
    --bs-link-color-rgb: 15, 110, 98;
    --bs-danger: var(--app-flag);
    --bs-danger-rgb: 179, 52, 31;

    /* Wide enough that the longest Burmese menu label keeps clear air after
       it — that label, not the Latin ones, sets this number. */
    --lte-sidebar-width: 252px;
}

body {
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Long Burmese headings need leading the Latin scale does not give them. */
.mm-block {
    line-height: 1.75;
}

/* ------------------------------------------------------------ app shell */

.app-header {
    border-bottom: 1px solid var(--app-rule);
}

.app-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: var(--app-fs-base);
    color: var(--app-ink-soft);
}

.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus-visible {
    color: var(--app-ink);
}

.app-main .app-content-header {
    padding: 14px var(--app-pad-tight) 10px;
}

.app-content {
    padding: 0 var(--app-pad-tight);
}

.app-footer {
    padding: 8px var(--app-pad);
    font-size: var(--app-fs-small);
    color: var(--app-ink-soft);
    border-top: 1px solid var(--app-rule);
}

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

.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px var(--app-gap);
    align-items: baseline;
    justify-content: space-between;
}

.page-head h1 {
    margin: 0;
    font-size: var(--app-fs-head);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* Ministry report titles run to three lines of Burmese; cap the measure so
   they do not stretch the full width of a 16-column table. */
.page-head h1.is-long {
    overflow-wrap: anywhere;
    font-size: var(--app-fs-lead);
    line-height: 1.7;
}

/* ------------------------------------------------------------- sidebar */

.app-sidebar {
    --lte-sidebar-color: #b6c2cc;
    --lte-sidebar-hover-color: #ffffff;
    --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --lte-sidebar-menu-active-color: #ffffff;
    --lte-sidebar-menu-active-bg: rgba(255, 255, 255, 0.07);
    --lte-sidebar-submenu-color: #9dabb6;
    --lte-sidebar-submenu-hover-color: #ffffff;
    background-color: var(--app-ink) !important;
}

.app-sidebar .sidebar-brand {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar .brand-link {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 0;
    font-size: var(--app-fs-base);
}

.app-sidebar .brand-image {
    width: 22px;
    height: 22px;
    margin: 0;
    opacity: 1 !important;
    box-shadow: none !important;
}

.app-sidebar .brand-text {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
}

.app-sidebar .sidebar-menu {
    padding: 8px 8px 16px;
}

.app-sidebar .sidebar-menu .nav-link {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    margin-bottom: 1px;
    font-size: var(--app-fs-base);
    border-radius: 4px;
    /* 3px accent bar on the active item, drawn as a border so it does not
       shift the label when it appears. */
    border-left: 3px solid transparent;
}

.app-sidebar .sidebar-menu .nav-link > p {
    display: flex;
    flex: 1;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.app-sidebar .sidebar-menu .nav-link.active {
    font-weight: 500;
    border-left-color: #46b3a3;
}

.app-sidebar .sidebar-menu .nav-icon {
    flex: 0 0 auto;
    opacity: 0.75;
}

.app-sidebar .sidebar-menu .nav-link.active .nav-icon,
.app-sidebar .sidebar-menu .nav-link:hover .nav-icon {
    opacity: 1;
}

.app-sidebar .nav-treeview {
    padding-left: 14px;
}

.app-sidebar .nav-treeview .nav-link {
    font-size: var(--app-fs-small);
}

/* --------------------------------------------------------------- cards */

.card {
    margin-bottom: var(--app-gap);
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
    box-shadow: none;
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 9px var(--app-pad);
    background-color: transparent;
    border-bottom: 1px solid var(--app-rule-soft);
}

.card-header .card-title {
    margin: 0;
    font-size: var(--app-fs-lead);
    font-weight: 600;
    line-height: 1.5;
}

/* A card title that is a full ministry sentence, not a label. Centred over
   the table the way the printed ministry form heads its own page — the one
   place in the app where centred text is right. */
.card-header .card-title.is-long {
    overflow-wrap: anywhere;
    margin-inline: auto;
    max-width: 74ch;
    text-align: center;
    font-size: var(--app-fs-base);
    font-weight: 500;
    line-height: 1.7;
}

.card-body {
    padding: var(--app-pad);
}

.card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px var(--app-pad);
    background-color: transparent;
    border-top: 1px solid var(--app-rule-soft);
}

.card-tools {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* -------------------------------------------------------------- tables */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--app-accent-wash);
    margin-bottom: 0;
    font-size: var(--app-fs-small);
}

.table > thead > tr > th {
    padding: 7px 10px;
    font-size: var(--app-fs-micro);
    font-weight: 600;
    line-height: 1.45;
    color: var(--app-ink-soft);
    vertical-align: bottom;
    background-color: var(--app-paper);
    border-bottom: 1px solid var(--app-rule);
}

.table > tbody > tr > td {
    padding: 6px 10px;
    vertical-align: middle;
    border-bottom-color: var(--app-rule-soft);
}

.table > tbody > tr:last-child > td {
    border-bottom-color: transparent;
}

/* Money, counts and percentages read as columns, so they align right and
   share one tabular width. */
.table .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.table .num-head {
    text-align: right;
}

/* Header stays visible while scrolling a long compliance report. */
.table-sticky > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-responsive {
    max-height: calc(100vh - 260px);
}

/* The empty message sits in a cell spanning every column, so centring it in
   that cell puts it in the middle of a table far wider than the screen —
   off to the right, out of sight until you scroll. The inner span sticks to
   the left edge of the scrollport instead, so the message is where the eye
   already is whatever the column count. */
.table-empty {
    padding: 0;
    color: var(--app-ink-soft);
    text-align: left;
}

.table-empty > span {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: 28px var(--app-pad);
}

/* --------------------------------------------------------------- forms */

.form-label {
    margin-bottom: 3px;
    font-size: var(--app-fs-micro);
    font-weight: 600;
    color: var(--app-ink-soft);
}

.form-control,
.form-select {
    padding: 5px 9px;
    font-size: var(--app-fs-base);
    border-color: var(--app-rule);
    border-radius: var(--bs-border-radius);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px rgba(15, 110, 98, 0.15);
}

.invalid-feedback {
    font-size: var(--app-fs-micro);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--app-flag);
}

/* A filter row is chrome, not content — it does not need a card of its own
   with a header and a footer around three date fields. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 10px var(--app-pad);
    margin-bottom: var(--app-gap);
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
}

.filter-bar .field {
    display: flex;
    flex: 0 1 168px;
    flex-direction: column;
}

.filter-bar .field-wide {
    flex-basis: 220px;
}

/* Wraps because the compliance filter carries four buttons (Search, Reset,
   Excel, PDF), which do not fit one row on a phone. */
.filter-bar .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

/* Inline row editor on the base-salary table. It stays in flow rather than
   floating, because the table scrolls in its own overflow container and an
   absolutely positioned panel would be clipped by it. */
.row-edit > summary {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.row-edit > summary::-webkit-details-marker,
.row-edit > summary::marker {
    display: none;
    content: '';
}

.row-edit-form {
    width: 250px;
    padding: 12px;
    margin-top: 8px;
    white-space: normal;
    background-color: var(--app-paper);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
}

/* ------------------------------------------------------------- buttons */

.btn {
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 11px;
    --bs-btn-font-size: var(--app-fs-base);
    --bs-btn-border-radius: var(--bs-border-radius);
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-weight: 500;
}

.btn-sm {
    --bs-btn-padding-y: 3px;
    --bs-btn-padding-x: 8px;
    --bs-btn-font-size: var(--app-fs-small);
}

.btn-primary {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-bg: var(--app-accent-dark);
    --bs-btn-hover-border-color: var(--app-accent-dark);
    --bs-btn-active-bg: var(--app-accent-dark);
    --bs-btn-active-border-color: var(--app-accent-dark);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
    --bs-btn-focus-shadow-rgb: 15, 110, 98;
}

/* Secondary actions are outlines, not a second filled colour competing with
   the primary action for attention. */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--app-rule);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-paper);
    --bs-btn-hover-border-color: var(--app-ink-faint);
    --bs-btn-active-color: var(--app-ink);
    --bs-btn-active-bg: var(--app-paper);
    --bs-btn-active-border-color: var(--app-ink-faint);
    --bs-btn-disabled-color: var(--app-ink-faint);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-rule);
}

.btn-danger {
    --bs-btn-color: var(--app-flag);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--app-rule);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-flag);
    --bs-btn-hover-border-color: var(--app-flag);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--app-flag);
    --bs-btn-active-border-color: var(--app-flag);
    --bs-btn-focus-shadow-rgb: 179, 52, 31;
}

/* Export buttons are peers of each other, not success/danger states. */
.btn-success {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--app-rule);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-paper);
    --bs-btn-hover-border-color: var(--app-ink-faint);
    --bs-btn-active-color: var(--app-ink);
    --bs-btn-active-bg: var(--app-paper);
    --bs-btn-active-border-color: var(--app-ink-faint);
}

.btn-link {
    --bs-btn-color: var(--app-ink-soft);
    --bs-btn-hover-color: var(--app-ink);
    text-decoration: none;
}

/* -------------------------------------------------------------- status */

.badge {
    --bs-badge-font-size: var(--app-fs-micro);
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 7px;
    --bs-badge-padding-y: 3px;
    letter-spacing: 0.01em;
}

/* Pass, fail and no-data are the only things in the app allowed to hold
   colour, so they are drawn as tinted chips rather than solid blocks. */
.status {
    display: inline-block;
    padding: 2px 7px;
    font-size: var(--app-fs-micro);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: 3px;
}

.status-pass {
    color: var(--app-accent-dark);
    background-color: var(--app-accent-wash);
    box-shadow: inset 0 0 0 1px rgba(15, 110, 98, 0.22);
}

.status-fail {
    color: var(--app-flag);
    background-color: var(--app-flag-wash);
    box-shadow: inset 0 0 0 1px rgba(179, 52, 31, 0.22);
}

.status-none {
    color: var(--app-ink-soft);
    background-color: var(--app-paper);
    box-shadow: inset 0 0 0 1px var(--app-rule);
}

.alert {
    padding: 9px 12px;
    margin-bottom: var(--app-gap);
    font-size: var(--app-fs-base);
    border-radius: var(--bs-border-radius);
}

.alert-danger {
    color: var(--app-flag);
    background-color: var(--app-flag-wash);
    border-color: rgba(179, 52, 31, 0.25);
}

.alert-success {
    color: var(--app-accent-dark);
    background-color: var(--app-accent-wash);
    border-color: rgba(15, 110, 98, 0.25);
}

/* ---------------------------------------------------------- stat strip */

/* One strip of neutral figures replaces seven differently-coloured boxes.
   The colours there ranked nothing — they were decoration. */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    margin-bottom: var(--app-gap);
    overflow: hidden;
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
}

.stat {
    padding: 11px 14px;
    border-left: 1px solid var(--app-rule-soft);
}

.stat:first-child {
    border-left: 0;
}

/* A money total is not the same kind of quantity as a count: it runs to
   twelve digits and a decimal where the counts run to four. Set a step down
   the scale so it holds the same visual mass in one track instead of
   spilling into its neighbour — the extra length carries the emphasis. */
/* Two classes on purpose: `.stat .figure` below has the same specificity and
   comes later in the file, so a single-class selector here would lose. */
.stat.stat-wide .figure {
    font-size: 1.0625rem;
    white-space: nowrap;
}

.stat .figure {
    display: block;
    font-size: var(--app-fs-figure);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat .label {
    display: block;
    margin-top: 2px;
    font-size: var(--app-fs-micro);
    color: var(--app-ink-soft);
}

/* ------------------------------------------------------- compliance bar */

/* The one loud element in the app. Compliance is what the system exists to
   report, so it is drawn at full width as a real proportion rather than as
   three numbers in a row. */
.compliance {
    padding: var(--app-pad);
    margin-bottom: var(--app-gap);
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
}

/* Grid, not flex: Burmese line boxes are tall enough that baseline alignment
   across a wrapped flex line makes the two halves collide. Two explicit
   columns keep the title and the figure apart at every width. */
/* Stacked, not two columns. Burmese runs carry no spaces, so a side-by-side
   title/figure row resolves its intrinsic widths against the whole unbroken
   string and pushes the figure off the card. Stacking sidesteps that. */
.compliance-head {
    margin-bottom: 10px;
}

.compliance-head .title {
    display: block;
    font-size: var(--app-fs-lead);
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.compliance-head .coverage {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
    margin-top: 2px;
}

.compliance-head .coverage b {
    font-size: var(--app-fs-figure);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.compliance-head .coverage small {
    font-size: var(--app-fs-small);
    font-weight: 400;
    line-height: 1.6;
    color: var(--app-ink-soft);
}

.compliance-track {
    height: 10px;
    overflow: hidden;
    background-color: var(--app-paper);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--app-rule);
}

.compliance-fill {
    height: 100%;
    background-color: var(--app-accent);
}

.compliance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: var(--app-fs-small);
    color: var(--app-ink-soft);
}

.compliance-legend b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--app-ink);
}

/* --------------------------------------------------------------- icons */

.icon {
    flex: 0 0 auto;
    vertical-align: -0.14em;
}

/* --------------------------------------------------------- pagination */

.pagination {
    --bs-pagination-padding-x: 8px;
    --bs-pagination-padding-y: 3px;
    --bs-pagination-font-size: var(--app-fs-small);
    --bs-pagination-color: var(--app-ink-soft);
    --bs-pagination-hover-color: var(--app-ink);
    --bs-pagination-hover-bg: var(--app-paper);
    --bs-pagination-active-bg: var(--app-accent);
    --bs-pagination-active-border-color: var(--app-accent);
    --bs-pagination-border-color: var(--app-rule);
}

.page-note {
    font-size: var(--app-fs-small);
    color: var(--app-ink-soft);
}

/* ---------------------------------------------------------------- auth */

.login-page {
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background-color: var(--app-paper);
}

/* A fixed width, not width:100% — `place-items: center` above makes this a
   shrink-to-fit grid item, so a percentage would resolve against its own
   content and collapse the card. */
.login-box {
    width: 340px;
    max-width: 100%;
}

.login-box .card {
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(22, 35, 46, 0.06);
}

.login-box .card-body {
    padding: 20px;
}

.login-mark {
    display: block;
    margin-bottom: 2px;
    font-size: var(--app-fs-head);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.login-note {
    margin-bottom: 16px;
    font-size: var(--app-fs-small);
    color: var(--app-ink-soft);
}

/* ------------------------------------------------- cohort detail modal */

/* Opened with showModal(), so it lives in the browser's top layer and is
   not clipped by .table-responsive's max-height the way an absolutely
   positioned panel inside the table would be (see .row-edit above). */
dialog.detail-modal {
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 72px);
    padding: 0;
    overflow: hidden;
    color: var(--app-ink);
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
}

dialog.detail-modal::backdrop {
    background-color: rgba(22, 35, 46, 0.45);
}

.detail-modal-head {
    display: flex;
    gap: var(--app-gap);
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--app-pad);
    border-bottom: 1px solid var(--app-rule-soft);
}

.detail-modal-head h2 {
    margin: 0;
    font-size: var(--app-fs-lead);
    font-weight: 600;
}

.detail-modal-body {
    max-height: calc(100vh - 150px);
    padding: var(--app-pad);
    overflow: auto;
}

/* The cohort header and each worker's personal block are the same
   two-column definition list at different scales. */
.cohort-summary,
.worker-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2px var(--app-gap);
    margin: 0 0 var(--app-pad-tight);
}

.cohort-summary > div,
.worker-meta > div {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--app-rule-soft);
}

.cohort-summary dt,
.worker-meta dt {
    font-size: var(--app-fs-small);
    font-weight: 400;
    color: var(--app-ink-soft);
}

.cohort-summary dd,
.worker-meta dd {
    margin: 0;
    text-align: right;
}

.cohort-summary .num,
.worker-figures {
    font-variant-numeric: tabular-nums;
}

.worker-block {
    padding: var(--app-pad-tight) 0;
    border-top: 1px solid var(--app-rule);
}

/* The verdict and the two figures stay outside the <details> below, so a
   long cohort can be scanned for failures without opening anything. */
.worker-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px var(--app-gap);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.worker-name {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.worker-passport,
.worker-figures {
    font-size: var(--app-fs-small);
    color: var(--app-ink-soft);
}

.worker-tx > summary {
    display: inline-flex;
    font-size: var(--app-fs-small);
    color: var(--app-ink-soft);
    cursor: pointer;
}

.worker-tx > .table-responsive {
    max-height: none;
    margin-top: 6px;
}

/* ------------------------------------------------------- accessibility */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.app-sidebar a:focus-visible {
    outline-color: #46b3a3;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 767.98px) {
    .filter-bar .field {
        flex-basis: 100%;
    }

    .filter-bar .actions {
        margin-left: 0;
    }

    .stat-strip {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    }

    .stat {
        border-top: 1px solid var(--app-rule-soft);
        border-left: 0;
    }

    .table-responsive {
        max-height: none;
    }
}

/* ------------------------------------------------------------------ dropdown */
/* Vanilla JS dropdown — no Bootstrap JS dependency */

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    min-width: 10rem;
    padding: 0.25rem 0;
    margin: 0;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
}

.dropdown-item.active {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

/* ---------------------------------------------- alert / confirm dialog */

dialog.app-dialog {
    width: min(400px, calc(100vw - 32px));
    padding: 0;
    color: var(--app-ink);
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

dialog.app-dialog::backdrop {
    background-color: rgba(22, 35, 46, 0.45);
}

.app-dialog-body {
    padding: var(--app-pad);
    font-size: var(--app-fs-base);
    line-height: 1.5;
}

.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 var(--app-pad) var(--app-pad);
}

.app-dialog-actions .btn {
    min-width: 5rem;
}