/**
 * Design-system alignment of site components, by family (design-system adoption). Sibling of vs-primitives.css:
 * that file only adds keyboard focus rings; THIS file points the colours of theme components at the design
 * system's semantic tokens (--vs-*, mapped to the admin colour variables by vs-token-adapter.css), so a design-system
 * token change reaches them. Families so far: breadcrumb, card-v, status badge colours, tabs, pagination, table.
 *
 * Baseline = the live site. Every rule here repeats a theme rule's selector (same specificity, loaded later, so it
 * wins by source order) and swaps ONLY the colour variable for the design-system token that the adapter maps to
 * that same variable. The computed colour is therefore identical today, and
 * tests/Visual/vs-alignment/run.mjs plus tests/Unit/Theme/VsAlignmentCssTest.php prove it.
 *
 * Rules for this file: no !important EXCEPT where the theme rule it mirrors is itself !important (an important
 * declaration can only be overridden by another important one), no colour literal, colour properties only, values are var(--vs-*) with NO
 * fallback (like the adapter: a missing token must visibly break, not silently fall back), selectors identical to
 * the theme selector they mirror. Theme files stay untouched. The admin "Custom CSS" loads after this file and can
 * still override it on purpose.
 *
 * Gaps (left as the theme has them, because aligning them WOULD change the look): the design system has no breadcrumb
 * tokens (separator size, spacing); card-v radius is 0.375rem (6px) on the site vs --vs-card-radius 3px, and card-v
 * padding is 35px (45px from 1200px) vs --vs-card-padding-content 45px (24px below 768px in the token description);
 * the #f7f7f7 table row borders and odd-row background (the DS --vs-color-background is #F8F8F8, one step different);
 * the white text on the active pill and on the hovered/active page link (#fff; the DS says dark text on the brand green); .bg-gray (#666c7a) has no DS token; .item-badge-* belongs to the Item Card (own tickets); .bg-primary and .bg-danger come
 * from Bootstrap, not from the theme.
 */

/* breadcrumb (partials/breadcrumbs.blade.php; mirrors app.css .breadcrumb.custom ...) */
.breadcrumb.custom .breadcrumb-item a {
    color: var(--vs-color-text-body);
}

.breadcrumb.custom .breadcrumb-item.active {
    color: var(--vs-color-brand-primary);
}

.breadcrumb.custom .breadcrumb-item.active::before {
    color: var(--vs-color-text-body);
}

/* card-v: the generic content panel (mirrors app.css .card-v and .card-v.card-blog; #fff equals --vs-color-surface) */
.card-v {
    background-color: var(--vs-color-surface);
}

.card-v.card-blog {
    border-color: var(--vs-color-border);
}

/* status badge colours (public workspace pages: items, transactions; the vs-badge component): mirrors app.css .bg-orange etc.,
   whose literal colours equal the DS item-status tokens. Important, like the theme rules they mirror. */
.bg-orange {
    background-color: var(--vs-color-item-status-pending) !important;
}

.bg-purple {
    background-color: var(--vs-color-item-status-soft-rejected) !important;
}

.bg-blue {
    background-color: var(--vs-color-item-status-resubmitted) !important;
}

.bg-green {
    background-color: var(--vs-color-item-status-approved) !important;
}

.bg-red {
    background-color: var(--vs-color-item-status-hard-rejected) !important;
}

/* tabs (.tabs-custom in items/layout and the profile header, .custom-tabs-item in the latest-items section; mirrors app.css).
   The white text on the active pill is NOT aligned: the DS says dark text on the brand green, so that would change the look. */
.tabs-custom .nav-link {
    color: var(--vs-color-brand-primary);
}

.tabs-custom .nav-link.active {
    color: var(--vs-color-text-muted);
}

.tabs-custom .nav-pills .nav-link {
    color: var(--vs-color-brand-secondary);
    border-color: var(--vs-color-brand-secondary);
}

.tabs-custom .nav-pills .nav-link.active {
    background: var(--vs-color-brand-primary);
    border-color: var(--vs-color-brand-primary);
}

.custom-tabs-item {
    background-color: var(--vs-color-surface);
    color: var(--vs-color-text-body);
    border-color: var(--vs-color-border);
}

.custom-tabs-item.active {
    border-color: var(--vs-color-brand-primary);
    color: var(--vs-color-brand-primary);
}

/* pagination (livewire/pagination/bootstrap.blade.php and vendor/pagination/bootstrap-4.blade.php; mirrors app.css).
   NOT aligned: the white text on a hovered or active page link (the DS says dark text on the brand green, a visible change) and
   .page-item[disabled] (the markup uses the class .disabled, so that theme rule never applies). */
.page-item .page-link {
    color: var(--vs-color-brand-primary);
}

.page-item .page-link:hover {
    background: var(--vs-color-brand-primary);
}

.page-item.active .page-link {
    background-color: var(--vs-color-brand-primary);
    border-color: var(--vs-color-brand-primary);
}

/* table (the public workspace tables, `dashboard-table table table-borderless`; mirrors app.css .table tbody td).
   NOT aligned: the #f7f7f7 row borders and odd-row background, because the DS --vs-color-background is #F8F8F8 (one step
   different, so aligning would change the look); and the .table-striped rules (white head and rows), because no public view
   uses table-striped, so they would apply to nothing. */
.table tbody td {
    color: var(--vs-color-text-muted);
}