/* site.css — Project-wide overrides on top of Tabler + tokens.css.
   Tabler + tokens.css own typography, color, spacing, motion. site.css
   only carries the few project-specific layout fragments that don't
   belong inside a partial. NEVER ship raw hex / px / ms here. */

.icon-empty-state { font-size: var(--type-display-lg-size); line-height: 1; }
.icon-document-card { font-size: var(--type-heading-lg-size); line-height: 1; }

.signed-comment-input { max-width: 18rem; }
.admin-users-filter-search { max-width: 18rem; }
.admin-users-filter-select { max-width: 12rem; }
.admin-suppliers-filter-control { max-width: 14rem; }

/* Spec 049 T053 / #102 / FR-026 — the supplier admin search + filter controls sit on a single
   line via flex-nowrap.
   NOTE: this rule deliberately does NOT set `overflow-x: auto`. It did, and that broke FR-025 on
   the same page: per CSS Overflow 3, once one axis is non-visible the other computes to `auto`,
   so the form became a clipping container in BOTH axes (~40px tall) and clipped the
   `data-searchable` combobox panel — which is absolutely positioned against a descendant of this
   form — inside the toolbar. It also defeated the drop-up variant below, clipped just as hard on
   the other edge. The bug was data-conditional (the enhancer only kicks in above 7 options), so
   the ephemeral single-fund E2E seed could never catch it. A narrow viewport now overflows to the
   page's own horizontal scroll, which is the lesser cost. */
.admin-suppliers-filter-row {
    padding-bottom: var(--space-1);
}
.admin-suppliers-filter-row > * {
    flex: 0 0 auto;
}
.admin-suppliers-filter-row .form-check {
    white-space: nowrap;
}
.admin-suppliers-search { min-width: 16rem; }

/* Cascading Fondo → Proceso → Grupo filter (shared component). The root is
   transparent to layout so each level select sits directly in the parent
   toolbar (flex) or grid row, exactly like a standalone control. */
.cascading-fund-filter { display: contents; }
.cascading-fund-filter-select { max-width: 12rem; }

/* Spec 011 — facelift wiring already lives in tokens.css; site.css
   intentionally adds nothing else. */

/* Spec 017 — admin facelift surface fragments. Tokens-only; no raw hex/px. */

/* US6 / FR-021 — pill-style report sub-tabs matching reviewer-queue chips. */
.fl-pill-tabs { gap: var(--space-2); flex-wrap: wrap; border: 0; }
.fl-pill-tab {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--color-text-secondary, var(--color-text));
    border: 1px solid var(--color-border, var(--color-primary-subtle));
    transition: background-color var(--motion-base) ease, color var(--motion-base) ease;
    text-decoration: none;
}
.fl-pill-tab:hover { background: var(--color-primary-subtle); color: var(--color-primary); }
.fl-pill-tab.active,
.fl-pill-tab[aria-selected="true"] {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: 600;
}

/* US1 — clickable KPI tile + capability-card hover lift. */
.fl-kpi-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.fl-kpi-tile-link:hover { transform: translateY(-2px); }

/* Spec 055 / US2 — the applicant hero tiles are real <button> controls now (FR-007),
   not <a> like the admin dashboard's linked KPI tiles above, so the reset needs the two
   button-specific properties display:block doesn't cover: full width and left-aligned text. */
.fl-kpi-tile-link[type="button"] {
    width: 100%;
    text-align: left;
    cursor: pointer;
}
/* FR-009 — "Pendientes de su acción" is the only tile with a distinct treatment, and only
   while its own count is > 0 (research.md §2). */
.fl-kpi-tile-attention {
    border-color: var(--color-warning);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-warning-subtle);
}
/* The currently-filtered tile (dashboard-tile-filter.js toggles aria-pressed). */
.fl-kpi-tile-link[aria-pressed="true"] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-primary);
}
.fl-capability-card {
    transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
.fl-capability-card:hover { transform: translateY(-2px); }

/* US4 — admin sidebar section header. Subtle divider + display typography.
   The header is now an accordion toggle (collapsable groups): a caret on the
   right rotates when its section is expanded. */
.fl-sidebar-section-header {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--type-meta-size, 0.75rem);
    cursor: pointer;
}
.fl-sidebar-section-caret {
    margin-left: auto;
    display: inline-flex;
    transition: transform var(--motion-base) ease;
}
.fl-sidebar-section-header[aria-expanded="true"] .fl-sidebar-section-caret {
    transform: rotate(180deg);
}
.nav-item-section-header { margin-top: var(--space-3); }
.nav-item-section-header + .nav-item .collapse .nav-item-admin-child:first-child { margin-top: var(--space-1); }

/* Spec 049 T049 / NFR-003 — the current sidebar destination must NOT be signalled by
   colour alone, so it survives colour-vision differences (the same never-colour-alone
   convention spec 048 applied to severity badges). Two non-colour cues ride alongside
   Tabler's `.active` tint: a heavier title and a solid inset bar on the leading edge.
   `aria-current="page"` carries the same fact to assistive technology. */
.fl-sidebar-active {
    box-shadow: inset 3px 0 0 0 currentColor;
}
.fl-sidebar-active .nav-link-title {
    font-weight: 600;
}

/* Sidebar never shows a horizontal scrollbar; vertical scroll only when the
   nav genuinely overflows the viewport (collapsable groups keep it short).
   The scroll container is the aside itself — Tabler sets `overflow-y: scroll`
   on `.navbar-vertical`, which makes `overflow-x` compute to `auto`; the
   reserved vertical scrollbar then narrows the content box just enough to
   trip a spurious horizontal scrollbar. Pinning `overflow-x: hidden` on the
   aside kills it (nothing real overflows — nav titles wrap). */
[data-testid="sidebar"] { overflow-x: hidden; }

/* US6 / FR-023 — reports table density. Applies to the cards Reports tabs render. */
[data-testid="report-subtabs"] ~ .card .table > :not(caption) > * > * {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* Spec 024 — toast notifications (FR-005, NFR-003). Fixed top-right overlay,
   stacked, wrapping; never causes layout shift. Sits above the modal layer so a
   toast raised over an open dialog stays visible. */
.toast-container[data-testid="toast-container"] {
    max-width: min(24rem, calc(100vw - 1.5rem));
}

.fl-toast {
    max-width: 24rem;
}

.fl-toast .toast-body {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Spec 031 — searchable-dropdown enhancer (searchable-select.js). The combobox
   input reuses Tabler's .form-select look; the listbox floats below it. The
   native <select> stays in the DOM (authoritative) but visually hidden while
   enhanced. Tokens-only; no raw hex/px/ms. */
.fl-searchable {
    position: relative;
    display: block;
}

/* The original native select, kept for form binding but visually hidden in place
   (never moved) while the combobox sibling is shown. */
select[data-searchable-enhanced] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fl-searchable-input {
    width: 100%;
    cursor: text;
}

/* Spec 049 T052 / #109 / FR-025 — drop-up variant. searchable-select.js adds
   .fl-searchable-drop-up to the wrapper when there is not enough room below the control
   (and more room above), so the options stay reachable without scrolling the page. A native
   <select> popup cannot be repositioned; this enhancer owns its panel, so it can. */
.fl-searchable-drop-up .fl-searchable-list {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-1);
}

.fl-searchable-list {
    position: absolute;
    z-index: var(--z-overlay);
    inset-inline: 0;
    top: 100%;
    margin-top: var(--space-1);
    max-height: 16rem;
    overflow-y: auto;
    list-style: none;
    padding: var(--space-1);
    background: var(--color-bg-surface-raised, var(--color-bg-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.fl-searchable-option {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-primary, var(--color-text));
}

.fl-searchable-option[aria-selected="true"],
.fl-searchable-option:hover {
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

.fl-searchable-empty {
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted, var(--color-text-secondary));
}

/* ============================================================
   SPEC 037 — Official brand alignment chrome.
   Scoped overrides keyed to stable data-testids. Token-only for color
   (no raw hex/ms); px/rem geometry is permitted in site.css. The white
   sidebar-logo container reads its white from --color-bg-surface (the
   only "white" available as a token — value-bound names are forbidden).
   ============================================================ */

/* --- D1: sidebar shell. Scoped to the sidebar testid so the topbar
   nav-links (also .nav-link) are untouched. site.css loads after Tabler, so
   equal-specificity rules win on source order. Spec 060 / US2: shell retuned
   teal → gray in tokens.css (--color-sidebar-bg); this rule just reads the
   token, unchanged. --- */
[data-testid="sidebar"] {
    background-color: var(--color-sidebar-bg);
}
[data-testid="sidebar"] .navbar-nav .nav-link {
    color: var(--color-sidebar-text);
    border-radius: var(--radius-sm);
}
[data-testid="sidebar"] .navbar-nav .nav-link:hover,
[data-testid="sidebar"] .navbar-nav .nav-link:focus-visible {
    background-color: var(--color-sidebar-hover);
    color: var(--color-bg-surface); /* white */
}
/* Active item: Alia-orange tint fill + white text + left accent border.
   Spec 060 / US2 / FR-008/FR-012 (research.md R5) — was the platform's
   teal --color-primary-light; now the Alia gradient's orange, sampled from
   the logo, self-derived (SC-009 sign-off pending). The .fl-sidebar-active
   non-color-alone cue (spec 049 NFR-003, if applied by a page) is untouched
   by this swap — only the color it resolves to changes. */
[data-testid="sidebar"] .nav-item.active > .nav-link,
[data-testid="sidebar"] .nav-link.active {
    background-color: rgba(var(--color-accent-alia-orange-rgb), 0.16);
    color: var(--color-bg-surface); /* white */
    border-left: 4px solid var(--color-accent-alia-orange);
}
/* Section accordion headers keep the light sidebar text on the dark shell. */
[data-testid="sidebar"] .fl-sidebar-section-header,
[data-testid="sidebar"] .fl-sidebar-section-header .nav-link-title {
    color: var(--color-sidebar-text);
}

/* --- D6/D12 / OQ-002: white rounded container behind the official sidebar
   logo for contrast on the dark-teal sidebar (--color-sidebar-bg). --- */
[data-testid="sidebar"] .fl-sidebar-brand {
    display: inline-flex;
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    gap: var(--space-2);
}
.fl-sidebar-brand-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 100%;
}

/* --- D11: topbar logout/links read teal, not Tabler/Bootstrap link-blue.
   Scoped to the topbar testid so the dark-sidebar links above are unaffected. --- */
[data-testid="topbar"] .nav-link,
[data-testid="topbar"] .btn-link {
    color: var(--color-primary);
}
[data-testid="topbar"] .nav-link:hover,
[data-testid="topbar"] .btn-link:hover,
[data-testid="topbar"] .nav-link:focus-visible,
[data-testid="topbar"] .btn-link:focus-visible {
    color: var(--color-primary-strong);
}

/* --- D9: filter card. White card wrapper above a table; consistent control
   heights so the filter row reads as one structured bar. --- */
.fl-filter-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.fl-filter-card .form-control,
.fl-filter-card .form-select,
.fl-filter-card .btn {
    min-height: 40px;
}

/* --- D8: the row-actions kebab dropdown must not be clipped by the Users table's
   card / horizontal-scroll wrapper. At ≥lg the table fits, so let the dropdown
   overflow those wrappers; narrow viewports keep overflow-x:auto for horizontal
   scroll (FR-024). Scoped to the only multi-action admin table (Users). --- */
@media (min-width: 992px) {
    [data-testid="admin-users-table"],
    [data-testid="admin-users-table"] .table-responsive,
    [data-testid="admin-users-table"] .fl-table {
        overflow: visible;
    }
}

/* Spec 056 / US1+US3 — donut chart + smaller-text legend (FR-002), replacing the plain
   KPI-tile rows on /Admin/Reports. The canvas has a fixed height so Chart.js's responsive
   sizing has something to fill even before JS runs; the legend below is plain server-rendered
   HTML and is what stays visible if the chart never mounts (progressive enhancement). */
.fl-donut-chart {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, var(--color-primary-subtle));
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-4);
    height: 100%;
}
.fl-donut-chart-currency {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Spec 061 / US4 — houses the (optional) currency label and the new "Exportar" button on one
   row above the chart body, so the export action never displaces the layout below it. */
.fl-donut-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.fl-donut-export-btn {
    flex-shrink: 0;
}
/* Spec 061 / US5 / FR-009 (research.md R7) — legend beside its chart, not below it. Purely a
   layout wrapper: no change to any color value or contrast property. */
.fl-donut-chart-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
}
.fl-donut-chart-canvas-wrap {
    position: relative;
    height: 160px;
    flex: 0 0 160px;
}
.fl-donut-chart-canvas {
    max-width: 100%;
}
.fl-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    flex: 1 1 auto;
}
.fl-donut-legend li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.fl-donut-legend-label { color: var(--color-text-secondary); }
.fl-donut-legend-value { font-weight: 600; }
/* Spec 061 / US5 / FR-008 (research.md R6) — color swatch matching the slice's rendered chart
   color, single-sourced from DonutPalette server-side. */
.fl-donut-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}