/* Global styling */

/* Admin logo size. Unfold's site_logo.html hardcodes h-8 (32px) on the
   light and dark logo <img>; #nav-sidebar holds only those two images, so this
   id rule resizes both to 36px (= h-9) without !important. The old
   nav#nav-sidebar descendant selector matched nothing – the element is a
   <div>, not a <nav>, since Unfold 0.56 – and the logo had fallen back to
   32px; the bump to 0.94 is where it was noticed. */
#nav-sidebar img {
    height: 2.25rem;
}

/* Tailwind utilities missing from Unfold's purged bundle. Unfold ships a
   JIT-purged build that only emits classes it uses itself, so any utility we
   use in templates/ that Unfold doesn't will silently no-op – add the rule
   here (CONVENTIONS.md, "Provide Tailwind utilities missing from Unfold's
   bundle"). */
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.hover\:underline:hover { text-decoration-line: underline; }
.group:hover .group-hover\:underline { text-decoration-line: underline; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group[open] .group-open\:rotate-90 { transform: rotate(90deg); }
.items-end { align-items: flex-end; }
.align-baseline { vertical-align: baseline; }
.leading-4 { line-height: 1rem; }
.normal-case { text-transform: none; }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
/* font-mono is for code-like content only (keys, tokens, alphanumeric
   codes, raw machine text); figures in table columns, numeric identifiers
   such as IČO, DIČ or PSČ included, use tabular-nums instead – Unfold's
   bundled Inter carries the OpenType `tnum` feature, so the digits line up
   without switching face (see CONVENTIONS.md). Both utilities, like
   print:hidden (50 templates – tab bars, action buttons), were no-ops
   until 2026-09: Unfold's bundle declares the --font-mono theme token but
   emits none of them. The token is preferred so the mono face follows
   Unfold's theme; the fallback stack is the token's own value. */
.font-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); }
.tabular-nums { font-variant-numeric: tabular-nums; }
@media print { .print\:hidden { display: none !important; } }

/* Contract Status dashboard tiles: wrap after four per row on lg+.
   The row gains a 5th tile (unexercised-increase, permission-gated) and
   Unfold's flex container has no flex-wrap, so without this all five squeeze
   onto one line. gap-8 = 2rem, so (100% - 3*2rem)/4 = calc(25% - 1.5rem) keeps
   exactly four tiles per row; the fifth wraps to a second row. The tiles'
   lg:w-1/4 sits in a layer of Unfold's bundle, which an unlayered rule beats
   as it is – the !important is not needed. */
@media (min-width: 1024px) {
    .contract-status-cards { flex-wrap: wrap; }
    .contract-status-cards > * { width: calc(25% - 1.5rem) !important; }
}

/* Stat / filter tile. `.filter-card` is the wrapper of ONE Unfold card – the
   <a> of admin/components/_filter_card.html and _filter_card_alert.html, or
   the <div> around a no-link KPI tile (admin/index.html, the dashboards).
   Every state is drawn on that card, the element that owns the rounded edge
   and the border: drawn on the wrapper, a shadow follows the wrapper's square
   box and a ring lies outside the card's own border – a second outline either
   way. The wrapper is a flex column, so the card (it grows) fills it where a
   row stretches its tiles to one height. The card's shadow has two layers –
   frame ring, lift – so a frame and the hover shadow add up instead of one
   overwriting the other. No state changes a radius: the shadow of a tile just
   left would fade out square.
   A frame (alert, active filter, focus) is the card's 1px border plus the
   ring, both in the state's colour – one line, nothing shifts. The ring's
   width stands here once and a state only names its colour: 1.3px, set by
   eye – the 2px ring it replaces sat around the card's light border, and a
   plain 2px line reads thinner than that pair. A border that only darkens
   on hover is thickened the same way, to 1.3px: an edge of .3px in its
   colour, a layer under the ring, so a framed card keeps its frame. */
.filter-card {
    --tile-ring: transparent;  /* the frame ring's colour */
    --tile-edge: transparent;  /* the hover edge's colour */
    --tile-lift: 0 1px 2px 0 rgb(0 0 0 / .05);  /* the card's resting shadow-xs */
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius, 6px);  /* the card's rounded-default – the focus outline follows it */
}
.filter-card > * {
    box-shadow: 0 0 0 1.3px var(--tile-ring), 0 0 0 .3px var(--tile-edge), var(--tile-lift);
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}
/* A linked tile lifts on hover: the 2.5 % zoom eases in over 50 ms, the
   shadow (Tailwind's shadow-lg) over 200. The zoom used to jump, softened by
   a ring that faded in around the wrapper; with one line left there is
   nothing else to carry the movement, so the zoom eases itself. */
a.filter-card { transition: transform .05s cubic-bezier(.4, 0, .2, 1); }
a.filter-card:hover {
    --tile-lift: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) { a.filter-card { transition: none; } }
/* An alert tile, linked or not, takes a frame in the alert colour. Hover
   leaves it alone and adds its lift. */
.filter-card-alert { --tile-ring: rgb(239 68 68); }  /* red-500 */
.filter-card-alert > * { border-color: rgb(239 68 68); }
.filter-card-alert-orange { --tile-ring: rgb(249 115 22); }  /* orange-500 */
.filter-card-alert-orange > * { border-color: rgb(249 115 22); }

/* Filter cards above a changelist (.filter-card-grid) do not lift: hover
   darkens the card's border (with its edge) and tints it; the active filter
   (filter_card_active.js) and focus take a frame. The active rules follow the
   hover ones at the same specificity: a hovered active card keeps its frame. */
.filter-card-grid > a.filter-card:hover {
    --tile-lift: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tile-edge: rgb(209 213 219);  /* gray-300, the hovered border */
}
.filter-card-grid > a.filter-card:hover > * {
    border-color: rgb(209 213 219);  /* gray-300 */
    background-color: rgb(249 250 251);  /* gray-50 */
}
.filter-card-grid > a.filter-card.filter-card-active,
.filter-card-grid > a.filter-card:focus { --tile-ring: rgb(75 85 99); }  /* gray-600 */
.filter-card-grid > a.filter-card.filter-card-active > *,
.filter-card-grid > a.filter-card:focus > * {
    border-color: rgb(75 85 99);
    background-color: rgb(249 250 251);
}
.dark .filter-card-grid > a.filter-card:hover > * { background-color: rgb(255 255 255 / 0.04); }
.dark .filter-card-grid > a.filter-card.filter-card-active,
.dark .filter-card-grid > a.filter-card:focus { --tile-ring: rgb(156 163 175); }  /* gray-400 */
.dark .filter-card-grid > a.filter-card.filter-card-active > *,
.dark .filter-card-grid > a.filter-card:focus > * {
    border-color: rgb(156 163 175);
    background-color: rgb(255 255 255 / 0.04);
}

/* Restore shadow-based row hover (Unfold v0.80 replaced shadows with near-invisible bg-color) */
@media (min-width: 1024px) {
    .data-row:hover {
        background-color: transparent;
        box-shadow: 0 2px 12px var(--color-base-300);
        z-index: 20;
        position: relative;
    }
    .dark .data-row:hover {
        box-shadow: 0 2px 12px var(--color-base-700);
    }
}

/* Compact 32px changelist rows.
   Unfold 0.94 pins each result cell to a fixed h-[45px] (was content-driven
   in 0.81), and #result_list is the <table> itself, so the old
   `#result_list > table > * > tr` selector matched nothing. Target the data
   cells directly and override height + vertical padding back to 32px.
   Also normalises row height for read-only users (no per-row variance). */
@media (min-width: 1024px) {
    #result_list tr.data-row > th,
    #result_list tr.data-row > td {
        height: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* The contract narrative overview carries up to five texts per row, so its
   rows grow with the content and read from the top: this undoes the 32px pin
   above and lets every cell wrap (the global nowrap below). The narrative
   keeps a readable width at every screen size – where the table does not
   fit, it scrolls sideways like every other changelist. */
body.model-leasenarrativeoverview #result_list tr.data-row > td {
    height: auto !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    white-space: normal;
    vertical-align: top;
}
body.model-leasenarrativeoverview #result_list td.field-narrative_sections_display {
    min-width: 24rem;
}

/* Opt-in compact textareas for the two dense admins (lease versions,
   received invoices) – their long-text fields read better short. The
   received-invoice detail template adds the model-receivedinvoice body
   class itself so its workflow notes textarea matches. */
body.model-leaseversion textarea,
body.model-receivedinvoice textarea { height: 85px; }

/* Specify the column width for the changelist */
#result_list td, #result_list th {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Money changelist columns – right-aligned figures, project-wide.
   Unfold tags every cell `field-<name>` and every header `column-<name>`;
   its `.text-left` sits in a layer of the bundle, which these unlayered
   rules beat as they are. Headers are flex containers, so alignment goes on
   the inner div via justify-content – `text-align` is a silent no-op there.
   Cell list and header list mirror each other; a new money column adds its
   name to both (CONVENTIONS.md § Money changelist columns are
   right-aligned). Tabular-inline money columns are a different selector
   family and are not covered here. */
#result_list td.field-amount,
#result_list td.field-price,
#result_list td.field-fixed_price,
#result_list td.field-monthly_total,
#result_list td.field-price_display,
#result_list td.field-amount_excluding_vat_display,
#result_list td.field-amount_including_vat_display,
#result_list td.field-matched_amount_display,
#result_list td.field-amount_difference_display,
#result_list td.field-vat_difference_display,
#result_list td.field-this_month_amount,
#result_list td.field-this_year_amount,
#result_list td.field-total_contracted_services_value_display,
#result_list td.field-total_parking_value_display,
#result_list td.field-cost_unit_price,
#result_list td.field-billing_unit_price,
#result_list td.field-consumption_cost,
#result_list td.field-consumption_to_bill,
#result_list td.field-total_amount_display,
#result_list td.field-allocated_amount_display,
#result_list td.field-sb_amount_including_vat,
#result_list td.field-amount_difference {
    text-align: right;
}
#result_list th.column-amount > div,
#result_list th.column-price > div,
#result_list th.column-fixed_price > div,
#result_list th.column-monthly_total > div,
#result_list th.column-price_display > div,
#result_list th.column-amount_excluding_vat_display > div,
#result_list th.column-amount_including_vat_display > div,
#result_list th.column-matched_amount_display > div,
#result_list th.column-amount_difference_display > div,
#result_list th.column-vat_difference_display > div,
#result_list th.column-this_month_amount > div,
#result_list th.column-this_year_amount > div,
#result_list th.column-total_contracted_services_value_display > div,
#result_list th.column-total_parking_value_display > div,
#result_list th.column-cost_unit_price > div,
#result_list th.column-billing_unit_price > div,
#result_list th.column-consumption_cost > div,
#result_list th.column-consumption_to_bill > div,
#result_list th.column-total_amount_display > div,
#result_list th.column-allocated_amount_display > div,
#result_list th.column-sb_amount_including_vat > div,
#result_list th.column-amount_difference > div {
    justify-content: flex-end;
}

/* Numeric identifier changelist columns (IČO, DIČ, PSČ) – digits of one
   width, project-wide. Unfold's Inter sets proportional digits (the 1 is
   under two thirds as wide as the widest one), so eight-digit company
   numbers stacked in a column drift from row to row. Such an identifier
   is digits, not a code – a DIČ's country prefix included: it keeps the
   face and takes only `tnum`, never font-mono (CONVENTIONS.md § Monospace
   only for code-like content). A new list column holding one adds its
   name here; test_numeric_identifier_columns_have_tabular_digits fails
   until it does. */
#result_list td.field-company_number,
#result_list td.field-sb_customer_company_number,
#result_list td.field-vat_id,
#result_list td.field-zip {
    font-variant-numeric: tabular-nums;
}

/* Action buttons on detail pages (action_button.html) */
.custom-action-button {
    min-width: 130px;
    display: inline-block;
    text-align: center;
    text-wrap: nowrap;
    margin: 1px 0 1px 0;
    line-height: 1.1rem;
}

/* ===== Navigation progress bar (nav_progress.js) ===== */
/* Runs while the next page loads and dies with this one: quick off the mark,
   then ever slower – it never gets to claim the page is nearly there. */
.nav-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100;   /* above toasts (1000) */
    background-color: var(--color-primary-500); pointer-events: none;
    transform-origin: left; transform: scaleX(0);
    animation: nav-progress 12s cubic-bezier(.05, .8, .2, 1) forwards;
    transition: opacity .2s ease;
}
.dark .nav-progress { background-color: var(--color-primary-400); }
.nav-progress--done { opacity: 0; }
@keyframes nav-progress { to { transform: scaleX(.95); } }
@media (prefers-reduced-motion: reduce) {
    .nav-progress { animation: none; transform: none; opacity: .7; }
}
@media print { .nav-progress { display: none; } }

/* ===== A posted form waiting for its answer (submit_guard.js) ===== */
/* The pressed button and a posted data-post link; never `disabled` – the
   button's name would drop out of the POST. */
:is(button, input, a)[data-submit-held] { cursor: progress; opacity: .6; }

/* ===== The error pages' icon (templates/403.html … 503.html) ===== */
/* Unfold sizes every icon at 18px from a layer; unlayered, this wins – the
   `text-6xl` the pages carried never did. */
.error-page-icon { font-size: 3.75rem; line-height: 1; }

/* ===== Icons while the icon font loads (icon_font_gate.js) ===== */
/* An icon is the font's ligature of its name: until the font is in, the name
   itself would show – "person", "contract" – in the fallback font, as wide as
   the word and over the labels beside it. Under the mark on <html> an icon is
   hidden and keeps the square it is about to fill, so nothing moves when the
   font arrives. */
[data-icons-pending] .material-symbols-outlined {
    visibility: hidden;
    overflow: clip;   /* not hidden: that would move the icon's baseline */
}
/* The square, in a layer of its own: this sheet loads ahead of Unfold's, so
   the layer ranks below every one of Unfold's and an icon whose width a
   utility sets (w-7, w-[18px]) keeps that width. */
@layer icon-font-gate {
    [data-icons-pending] .material-symbols-outlined { width: 1em; }
}

/* ===== Changelist "Actions" column ===== */
/* From 1024 px – the compact 32 px rows – the icons sit in the row; below it
   one touch-sized trigger opens them as a menu. */
.custom-action-row { display: none; }
.custom-action-mobile { display: inline-flex; }
@media (min-width: 1024px) {
    .custom-action-row { display: inline-flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
    .custom-action-mobile { display: none; }
}
.custom-action-icon-btn, .custom-action-trigger {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    border-radius: 0.375rem; border: 1px solid var(--color-base-200);
    background-color: #fff; color: var(--color-base-500);
    transition: background-color .12s ease, color .12s ease;
}
.custom-action-icon-btn { width: 1.75rem; height: 1.75rem; }   /* 28px – fits a 32px row */
.custom-action-trigger  { width: 2.25rem; height: 2.25rem; }   /* 36px – touch target */
.custom-action-icon-btn:hover, .custom-action-trigger:hover {
    background-color: var(--color-base-100); color: var(--color-base-700);
}
.custom-action-icon-btn:focus-visible, .custom-action-trigger:focus-visible,
.custom-action-menu-item:focus-visible {
    outline: 2px solid var(--color-primary-500); outline-offset: 1px;
}
.dark .custom-action-icon-btn, .dark .custom-action-trigger {
    border-color: var(--color-base-700); background-color: transparent; color: var(--color-base-300);
}
.dark .custom-action-icon-btn:hover, .dark .custom-action-trigger:hover {
    background-color: var(--color-base-800); color: var(--color-base-100);
}
/* Shared chrome for floating panels living in <body> (hoverFloater
   consumers + the action menus). Instances keep their own size, padding,
   display and pointer-events; .custom-action-menu overrides z-index (70) and
   its heavier dropdown shadow below. */
.floating-panel {
    position: fixed; z-index: 80;
    background-color: #fff;
    border: 1px solid var(--color-base-200);
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.dark .floating-panel {
    background-color: var(--color-base-900);
    border-color: var(--color-base-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
/* Unfold header action dropdowns (unfold/helpers/tab_action.html) hardcode
   w-52 (13rem) on the body-teleported nav, truncating long item titles.
   Size to content instead; item truncate stays as the cap. */
body > nav[x-show="actionDropdownOpen"] {
    width: max-content;
    min-width: 13rem;
    max-width: 26rem;
}
/* Panel cloned into <body> on open – position:fixed + top/left set inline by
   changelist_row_actions.js, which also fades it out on close (element.animate();
   no enter animation – a menu opens at once). */
.custom-action-menu {
    width: 14rem; z-index: 70;          /* above sticky header (z-30) and hover shadow (z-20) */
    box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 0.25rem;
}
.dark .custom-action-menu {
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
}
/* Action-bar menus (admin/components/action_menu.html) size to their longest
   item instead of the row menu's fixed 14rem, so entries stay on one line;
   the cap keeps a long label wrapping rather than the panel growing. The JS
   measures the rendered width, so the fixed width above is only a fallback. */
.custom-action-menu--fit {
    width: max-content; min-width: 14rem; max-width: 24rem;
}
.custom-action-menu-header {
    padding: 0.5rem 0.625rem; font-size: 0.75rem; font-weight: 600;
    color: var(--color-base-500); border-bottom: 1px solid var(--color-base-200);
    margin-bottom: 0.25rem; white-space: normal; overflow-wrap: anywhere;
}
.dark .custom-action-menu-header { color: var(--color-base-400); border-bottom-color: var(--color-base-700); }
/* Section caption inside a menu (after a separator) – the action-bar Add
   menu groups the lease-succession links under one. */
.custom-action-menu-caption {
    padding: 0.375rem 0.625rem 0.125rem; font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-base-500);
}
.dark .custom-action-menu-caption { color: var(--color-base-400); }
.custom-action-menu-item {
    display: flex; align-items: center; gap: 0.625rem; min-height: 2rem;
    padding: 0.375rem 0.625rem; border-radius: 0.3rem; font-size: 0.8125rem;
    line-height: 1.2; color: var(--color-base-700); white-space: normal;
}
.custom-action-menu-item:hover { background-color: var(--color-base-100); }
.dark .custom-action-menu-item { color: var(--color-base-200); }
.dark .custom-action-menu-item:hover { background-color: var(--color-base-800); }
/* A destructive entry (an item's `danger` – the detail pages' Delete): red
   text, a faint red hover – red-600 / red-400 as .text-red-600 /
   .text-red-400 below, red-50 / red-950 as .bg-red-50 / .bg-red-950. */
.custom-action-menu-item--danger { color: oklch(57.7% 0.245 27.325); }
.custom-action-menu-item--danger:hover { background-color: oklch(97.1% 0.013 17.38); }
.dark .custom-action-menu-item--danger { color: oklch(70.4% 0.191 22.216); }
.dark .custom-action-menu-item--danger:hover { background-color: oklch(25.8% 0.092 26.042); }
/* The icon-only menu trigger (action_menu.html's icon_only, the detail
   pages' "…"): a square as tall as the text buttons beside it – the icon
   gets the 20px line of their 14px text, which its own line-height: 1
   would cut to 18px. */
.custom-action-menu-icon-trigger { padding: 0.5rem; }
.custom-action-menu-icon-trigger .material-symbols-outlined {
    width: 1.25rem; line-height: 1.25rem; text-align: center;
}
.custom-action-menu-sep { border: 0; border-top: 1px solid var(--color-base-200); margin: 0.25rem 0; }
.dark .custom-action-menu-sep { border-top-color: var(--color-base-700); }
/* The Timeline's cards a link lands on – the gap card from the history-gap
   banner, a handover protocol's card from its detail's Back, a version's
   card from the version detail's Timeline button, a paper's card from the
   document detail's (a protocol paper without one lands on its record's),
   an indexation marker's card by its anchor – get a ring so the eye finds
   them after the scroll (amber-300 / amber-700; the Unfold build exposes
   no amber variables). The protocol, version, paper and marker cards go
   by their class: the protocol detail has #handover-… anchors of its own,
   and the version card's shadow-lg would otherwise keep its own
   box-shadow. */
[id^="gap-"]:target, .timeline-handover-card:target, .timeline-version-card:target, .timeline-document-card:target, .timeline-indexation-card:target { box-shadow: 0 0 0 3px rgb(252 211 77); }
.dark [id^="gap-"]:target, .dark .timeline-handover-card:target, .dark .timeline-version-card:target, .dark .timeline-document-card:target, .dark .timeline-indexation-card:target { box-shadow: 0 0 0 3px rgb(180 83 9); }
/* The header of a version still in the works – a draft or an offer – on
   the Timeline's version card and on the billing card
   (leaseversion/_billing_card.html): white stripes over its violet, so it
   never passes for an approved version's solid header. */
.lease-version-card-header--striped {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
    );
}
.dark .lease-version-card-header--striped {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0,
        transparent 10px,
        rgba(255, 255, 255, 0.08) 10px,
        rgba(255, 255, 255, 0.08) 20px
    );
}
/* The Timeline's axis (lease/document_timeline.html): a grid of a column
   per date and a row per what the columns hold – the papers, the
   connectors, the versions of the rules, the handovers and returns (the
   events row). Every column (.timeline-column) spans the rows as a subgrid
   and renders one cell per row (an edge card's column the first alone), so
   a row takes the height of its tallest card and the cards of a row line
   up across the columns – a cell (.timeline-cell) is a flex column, and
   its flex-1 card fills the row. A
   column is at least 320px wide, else as wide as its widest card's
   content – the events row contains its size, so a long note wraps at the
   column's width instead of widening it. Classes of their own: Unfold's
   bundle has no grid-flow-col, subgrid or w-max. */
.timeline-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-auto-columns: minmax(320px, max-content);
    column-gap: 1rem;
    row-gap: 0.25rem;
    width: max-content;
}
.timeline-column { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.timeline-cell { display: flex; flex-direction: column; }
.timeline-cell--events { contain: inline-size; }
/* The record button closing a lease file card (lease/_files_card.html). On
   the Protocols tab the card sits in a column of the page, and Unfold's
   button never wraps – a long label (de, fr, hu) would stick out of the
   card. Unlayered, so it beats the bundle's whitespace-nowrap. */
.files-card-action > a { max-width: 100%; white-space: normal; }
[x-cloak] { display: none !important; }
@media print { .custom-action-row, .custom-action-mobile { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .custom-action-icon-btn, .custom-action-trigger { transition: none; }
}

/* Desktop action-icon tooltip – single shared <div>, teleported to <body>;
   position:fixed top/left set inline by changelist_row_actions.js. No transition.
   pre-line keeps the line breaks of a tooltip written a segment per line
   (render_label(tooltip=…)); a single-line text wraps as before. */
.custom-action-tooltip {
    display: none; position: fixed; z-index: 80;   /* above the action menu in <body> (z-70) */
    max-width: 18rem; padding: 0.25rem 0.5rem;
    background-color: var(--color-base-900); color: #fff;
    font-size: 0.75rem; line-height: 1.3; border-radius: 0.3rem; white-space: pre-line;
    box-shadow: 0 4px 12px rgba(0,0,0,.28); pointer-events: none;
}
.dark .custom-action-tooltip {
    background-color: var(--color-base-700); color: var(--color-base-100);
    box-shadow: 0 4px 12px rgba(0,0,0,.55);
}
/* Decorative icon glyph must not catch the mouse, or hover events flip target */
.custom-action-icon-btn .material-symbols-outlined { pointer-events: none; }

/* ===== Tailwind utilities missing from Unfold's precompiled sheet ===== */
/* There is no project Tailwind build: only utilities compiled into the
   installed unfold package exist. When a template needs one that isn't
   there, define it HERE under its exact Tailwind name and value (arbitrary
   values use the bracket syntax with an escaped selector) – never as ad-hoc
   component CSS and never undefined (a missing utility is a silent no-op). */
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.w-28 { width: 7rem; }
.w-60 { width: 15rem; }
.w-64 { width: 16rem; }
.max-w-20 { max-width: 5rem; }
.max-w-md { max-width: 28rem; }
.invisible { visibility: hidden; }
.w-\[1030px\] { width: 1030px; }
.max-w-\[420px\] { max-width: 420px; }
.grid-cols-\[max-content_max-content\] { grid-template-columns: max-content max-content; }
.break-all { word-break: break-all; }
.line-through { text-decoration-line: line-through; }

/* Collapsible section cards (`_section_card.html` with collapsible=True) and
   the folded parts inside a card (`card-fold` – the "Items over time" strip
   on the Timeline's version cards, leaseversion/_items_over_time.html; the
   record on an indexation marker's card, indexation/_timeline_card.html):
   the native disclosure triangle goes (a flex summary loses it in Chrome
   anyway, so every browser gets the same look) and the chevron glyph in the
   title (a fold's summary: admin/components/_card_fold_summary.html) turns
   when the details open. Stable classes rather than a Tailwind
   `group`: an unnamed group on the card would underline every nested
   `group-hover:underline` link on a header hover. */
details.section-card > summary,
details.card-fold > summary { list-style: none; }
details.section-card > summary::-webkit-details-marker,
details.card-fold > summary::-webkit-details-marker { display: none; }
details.section-card[open] > summary .section-card-chevron,
details.card-fold[open] > summary .card-fold-chevron { transform: rotate(90deg); }
/* Print expands a folded card or part: paper has no click.
   `::details-content` is the closed body's box (Chrome 131+, Safari 18.4+;
   older browsers print the header alone, as before). */
@media print {
    details.section-card:not([open])::details-content,
    details.card-fold:not([open])::details-content { content-visibility: visible; }
}

/* Header in stacked inlines — match Unfold's inline heading (h2) pattern */
h3.group\/title {
    background-color: var(--color-base-100);
}
.dark h3.group\/title {
    background-color: rgb(255 255 255 / 0.1);
}

/* Hide theme header when printing */
@media print {
    #main > :first-child {
        display: none;
    }
}

/* Failover/staging instance warning banner.
   Rendered above Unfold's header on instances whose data is a copy of prod
   (admin-1d, staging). Sticky so it stays visible while scrolling long pages.
   z-index sits above sticky changelist headers (z-30) and hover shadows (z-20)
   but below the action menus in <body> (z-70) and tooltips (z-80).
   Colours mirror Unfold's "warning" message style: orange-100/orange-700 in
   light mode, orange-500/20 + orange-400 in dark mode. */
.instance-warning-banner {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0.5rem 1rem;
    font-weight: 600;
    text-align: center;
    background-color: oklch(95.4% 0.038 75.164);          /* orange-100 */
    color: oklch(55.3% 0.195 38.402);                     /* orange-700 */
    border-bottom: 2px solid oklch(83.7% 0.128 66.29);    /* orange-300 */
}
.dark .instance-warning-banner {
    background-color: oklch(70.5% 0.213 47.604 / 0.2);     /* orange-500/20 */
    color: oklch(75% 0.183 55.934);                        /* orange-400 */
    border-bottom-color: oklch(70.5% 0.213 47.604 / 0.3);  /* orange-500/30 */
}
@media print { .instance-warning-banner { display: none; } }

/* Informational variant of the banner – the lease tuning mode notice. Sky
   (Unfold's "info" family) instead of the warning orange: the mode is a
   deliberate working state, not a data hazard. Stacks under a role banner
   when both render (each is its own sticky bar). */
.instance-warning-banner--info {
    background-color: oklch(95.1% 0.026 236.824);         /* sky-100 */
    color: oklch(50% 0.134 242.749);                      /* sky-700 */
    border-bottom: 2px solid oklch(82.8% 0.111 230.318);  /* sky-300 */
}
.dark .instance-warning-banner--info {
    background-color: oklch(68.5% 0.169 237.323 / 0.2);   /* sky-500/20 */
    color: oklch(74.6% 0.16 232.661);                     /* sky-400 */
    border-bottom-color: oklch(68.5% 0.169 237.323 / 0.3);/* sky-500/30 */
}

/* Superuser-on-production indicator. instance_role() adds this class to
   Unfold's header bar (first div in #main) via the element_classes hook when
   a superuser is logged in on INSTANCE_ROLE=production. Violet = "root mode"
   – distinct from the orange copy-of-prod banner and red error states.
   Unfold's own .bg-white / dark:bg-base-900 sit in a layer of its bundle,
   which this unlayered rule outranks – with or without the #main > prefix. */
#main > .prod-superuser-header {
    background-color: oklch(94.3% 0.029 294.588);         /* violet-100 */
    border-bottom-color: oklch(70.2% 0.183 293.541);      /* violet-400 */
}
.dark #main > .prod-superuser-header {
    background-color: oklch(60.6% 0.25 292.717 / 0.2);    /* violet-500/20 */
    border-bottom-color: oklch(60.6% 0.25 292.717 / 0.5); /* violet-500/50 */
}

/* Force scrollbar to always be visible to prevent layout shift */
html {
    overflow-y: scroll;
}

/* Fix styling of light/dark theme selector in signed-in user menu */
html[lang="cs"] #nav-sidebar-inner nav > div:first-of-type > a > span:first-of-type {
    margin-right: 2px;
}

/* Sticky changelist header (JS-driven translateY) */
@media (min-width: 1024px) {
    #result_list thead {
        position: relative;
        z-index: 30;
        background-color: white;
    }
    .dark #result_list thead {
        background-color: var(--color-base-900);
    }
    #result_list thead th {
        border-bottom: 1px solid var(--color-base-200);
    }
    .dark #result_list thead th {
        border-bottom-color: var(--color-base-800);
    }
}

/* Make pagination gradient click-through so the sticky scrollbar is reachable */
[class*="scrollable-top"]::after {
    pointer-events: none;
}

/* Sticky horizontal scrollbar – the proxy sticky_changelist_scrollbar.js pins
   above the pagination bar (left, width and bottom set inline). The
   ::-webkit-scrollbar rules keep it drawn in Chrome and Safari under macOS
   overlay scrollbars too; a scrollbar-width / scrollbar-color here would make
   Chrome drop them for the native, hidden-until-scrolled bar. */
.sticky-scrollbar {
    position: fixed;
    z-index: 41;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.sticky-scrollbar[hidden] {
    display: none;
}
.sticky-scrollbar > div {
    height: 1px;
}
.sticky-scrollbar::-webkit-scrollbar {
    height: 10px;
}
.sticky-scrollbar::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--color-base-900) 40%, transparent);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 9999px;
}
.dark .sticky-scrollbar {
    background-color: rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.1);
}
.dark .sticky-scrollbar::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, var(--color-base-400) 40%, transparent);
}
/* Firefox has no ::-webkit-scrollbar: the standard properties style its bar
   there, and a fixed height keeps the strip a target to hover and drag under
   overlay scrollbars – the spacer alone is 1 px. */
@supports not selector(::-webkit-scrollbar) {
    .sticky-scrollbar {
        height: 12px;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in oklab, var(--color-base-900) 40%, transparent) transparent;
    }
    .dark .sticky-scrollbar {
        scrollbar-color: color-mix(in oklab, var(--color-base-400) 40%, transparent) transparent;
    }
}

/* Fix missing utilities in default Tailwind installation */
.min-w-max { min-width: max-content; }
.h-\[calc\(100vh-195px\)\] { height: calc(100vh - 195px); }

/* Fix missing colors in default Tailwind installation */
.bg-red-50 { background-color:  oklch(97.1% 0.013 17.38) }
.bg-red-100 { background-color:  oklch(93.6% 0.032 17.717) }
.bg-red-200 { background-color:  oklch(88.5% 0.062 18.334) }
.bg-red-300 { background-color:  oklch(80.8% 0.114 19.571) }
.bg-red-400 { background-color:  oklch(70.4% 0.191 22.216) }
.bg-red-500 { background-color:  oklch(63.7% 0.237 25.331) }
.bg-red-600 { background-color:  oklch(57.7% 0.245 27.325) }
.bg-red-700 { background-color:  oklch(50.5% 0.213 27.518) }
.bg-red-800 { background-color:  oklch(44.4% 0.177 26.899) }
.bg-red-900 { background-color:  oklch(39.6% 0.141 25.723) }
.bg-red-950 { background-color:  oklch(25.8% 0.092 26.042) }
.bg-orange-50 { background-color:  oklch(98% 0.016 73.684) }
.bg-orange-100 { background-color:  oklch(95.4% 0.038 75.164) }
.bg-orange-200 { background-color:  oklch(90.1% 0.076 70.697) }
.bg-orange-300 { background-color:  oklch(83.7% 0.128 66.29) }
.bg-orange-400 { background-color:  oklch(75% 0.183 55.934) }
.bg-orange-500 { background-color:  oklch(70.5% 0.213 47.604) }
.bg-orange-600 { background-color:  oklch(64.6% 0.222 41.116) }
.bg-orange-700 { background-color:  oklch(55.3% 0.195 38.402) }
.bg-orange-800 { background-color:  oklch(47% 0.157 37.304) }
.bg-orange-900 { background-color:  oklch(40.8% 0.123 38.172) }
.bg-orange-950 { background-color:  oklch(26.6% 0.079 36.259) }
.bg-amber-50 { background-color:  oklch(98.7% 0.022 95.277) }
.bg-amber-100 { background-color:  oklch(96.2% 0.059 95.617) }
.bg-amber-200 { background-color:  oklch(92.4% 0.12 95.746) }
.bg-amber-300 { background-color:  oklch(87.9% 0.169 91.605) }
.bg-amber-400 { background-color:  oklch(82.8% 0.189 84.429) }
.bg-amber-500 { background-color:  oklch(76.9% 0.188 70.08) }
.bg-amber-600 { background-color:  oklch(66.6% 0.179 58.318) }
.bg-amber-700 { background-color:  oklch(55.5% 0.163 48.998) }
.bg-amber-800 { background-color:  oklch(47.3% 0.137 46.201) }
.bg-amber-900 { background-color:  oklch(41.4% 0.112 45.904) }
.bg-amber-950 { background-color:  oklch(27.9% 0.077 45.635) }
.bg-yellow-50 { background-color:  oklch(98.7% 0.026 102.212) }
.bg-yellow-100 { background-color:  oklch(97.3% 0.071 103.193) }
.bg-yellow-200 { background-color:  oklch(94.5% 0.129 101.54) }
.bg-yellow-300 { background-color:  oklch(90.5% 0.182 98.111) }
.bg-yellow-400 { background-color:  oklch(85.2% 0.199 91.936) }
.bg-yellow-500 { background-color:  oklch(79.5% 0.184 86.047) }
.bg-yellow-600 { background-color:  oklch(68.1% 0.162 75.834) }
.bg-yellow-700 { background-color:  oklch(55.4% 0.135 66.442) }
.bg-yellow-800 { background-color:  oklch(47.6% 0.114 61.907) }
.bg-yellow-900 { background-color:  oklch(42.1% 0.095 57.708) }
.bg-yellow-950 { background-color:  oklch(28.6% 0.066 53.813) }
.bg-lime-50 { background-color:  oklch(98.6% 0.031 120.757) }
.bg-lime-100 { background-color:  oklch(96.7% 0.067 122.328) }
.bg-lime-200 { background-color:  oklch(93.8% 0.127 124.321) }
.bg-lime-300 { background-color:  oklch(89.7% 0.196 126.665) }
.bg-lime-400 { background-color:  oklch(84.1% 0.238 128.85) }
.bg-lime-500 { background-color:  oklch(76.8% 0.233 130.85) }
.bg-lime-600 { background-color:  oklch(64.8% 0.2 131.684) }
.bg-lime-700 { background-color:  oklch(53.2% 0.157 131.589) }
.bg-lime-800 { background-color:  oklch(45.3% 0.124 130.933) }
.bg-lime-900 { background-color:  oklch(40.5% 0.101 131.063) }
.bg-lime-950 { background-color:  oklch(27.4% 0.072 132.109) }
.bg-green-50 { background-color:  oklch(98.2% 0.018 155.826) }
.bg-green-100 { background-color:  oklch(96.2% 0.044 156.743) }
.bg-green-200 { background-color:  oklch(92.5% 0.084 155.995) }
.bg-green-300 { background-color:  oklch(87.1% 0.15 154.449) }
.bg-green-400 { background-color:  oklch(79.2% 0.209 151.711) }
.bg-green-500 { background-color:  oklch(72.3% 0.219 149.579) }
.bg-green-600 { background-color:  oklch(62.7% 0.194 149.214) }
.bg-green-700 { background-color:  oklch(52.7% 0.154 150.069) }
.bg-green-800 { background-color:  oklch(44.8% 0.119 151.328) }
.bg-green-900 { background-color:  oklch(39.3% 0.095 152.535) }
.bg-green-950 { background-color:  oklch(26.6% 0.065 152.934) }
.bg-emerald-50 { background-color:  oklch(97.9% 0.021 166.113) }
.bg-emerald-100 { background-color:  oklch(95% 0.052 163.051) }
.bg-emerald-200 { background-color:  oklch(90.5% 0.093 164.15) }
.bg-emerald-300 { background-color:  oklch(84.5% 0.143 164.978) }
.bg-emerald-400 { background-color:  oklch(76.5% 0.177 163.223) }
.bg-emerald-500 { background-color:  oklch(69.6% 0.17 162.48) }
.bg-emerald-600 { background-color:  oklch(59.6% 0.145 163.225) }
.bg-emerald-700 { background-color:  oklch(50.8% 0.118 165.612) }
.bg-emerald-800 { background-color:  oklch(43.2% 0.095 166.913) }
.bg-emerald-900 { background-color:  oklch(37.8% 0.077 168.94) }
.bg-emerald-950 { background-color:  oklch(26.2% 0.051 172.552) }
.bg-teal-50 { background-color:  oklch(98.4% 0.014 180.72) }
.bg-teal-100 { background-color:  oklch(95.3% 0.051 180.801) }
.bg-teal-200 { background-color:  oklch(91% 0.096 180.426) }
.bg-teal-300 { background-color:  oklch(85.5% 0.138 181.071) }
.bg-teal-400 { background-color:  oklch(77.7% 0.152 181.912) }
.bg-teal-500 { background-color:  oklch(70.4% 0.14 182.503) }
.bg-teal-600 { background-color:  oklch(60% 0.118 184.704) }
.bg-teal-700 { background-color:  oklch(51.1% 0.096 186.391) }
.bg-teal-800 { background-color:  oklch(43.7% 0.078 188.216) }
.bg-teal-900 { background-color:  oklch(38.6% 0.063 188.416) }
.bg-teal-950 { background-color:  oklch(27.7% 0.046 192.524) }
.bg-cyan-50 { background-color:  oklch(98.4% 0.019 200.873) }
.bg-cyan-100 { background-color:  oklch(95.6% 0.045 203.388) }
.bg-cyan-200 { background-color:  oklch(91.7% 0.08 205.041) }
.bg-cyan-300 { background-color:  oklch(86.5% 0.127 207.078) }
.bg-cyan-400 { background-color:  oklch(78.9% 0.154 211.53) }
.bg-cyan-500 { background-color:  oklch(71.5% 0.143 215.221) }
.bg-cyan-600 { background-color:  oklch(60.9% 0.126 221.723) }
.bg-cyan-700 { background-color:  oklch(52% 0.105 223.128) }
.bg-cyan-800 { background-color:  oklch(45% 0.085 224.283) }
.bg-cyan-900 { background-color:  oklch(39.8% 0.07 227.392) }
.bg-cyan-950 { background-color:  oklch(30.2% 0.056 229.695) }
.bg-sky-50 { background-color:  oklch(97.7% 0.013 236.62) }
.bg-sky-100 { background-color:  oklch(95.1% 0.026 236.824) }
.bg-sky-200 { background-color:  oklch(90.1% 0.058 230.902) }
.bg-sky-300 { background-color:  oklch(82.8% 0.111 230.318) }
.bg-sky-400 { background-color:  oklch(74.6% 0.16 232.661) }
.bg-sky-500 { background-color:  oklch(68.5% 0.169 237.323) }
.bg-sky-600 { background-color:  oklch(58.8% 0.158 241.966) }
.bg-sky-700 { background-color:  oklch(50% 0.134 242.749) }
.bg-sky-800 { background-color:  oklch(44.3% 0.11 240.79) }
.bg-sky-900 { background-color:  oklch(39.1% 0.09 240.876) }
.bg-sky-950 { background-color:  oklch(29.3% 0.066 243.157) }
.bg-blue-50 { background-color:  oklch(97% 0.014 254.604) }
.bg-blue-100 { background-color:  oklch(93.2% 0.032 255.585) }
.bg-blue-200 { background-color:  oklch(88.2% 0.059 254.128) }
.bg-blue-300 { background-color:  oklch(80.9% 0.105 251.813) }
.bg-blue-400 { background-color:  oklch(70.7% 0.165 254.624) }
.bg-blue-500 { background-color:  oklch(62.3% 0.214 259.815) }
.bg-blue-600 { background-color:  oklch(54.6% 0.245 262.881) }
.bg-blue-700 { background-color:  oklch(48.8% 0.243 264.376) }
.bg-blue-800 { background-color:  oklch(42.4% 0.199 265.638) }
.bg-blue-900 { background-color:  oklch(37.9% 0.146 265.522) }
.bg-blue-950 { background-color:  oklch(28.2% 0.091 267.935) }
.bg-indigo-50 { background-color:  oklch(96.2% 0.018 272.314) }
.bg-indigo-100 { background-color:  oklch(93% 0.034 272.788) }
.bg-indigo-200 { background-color:  oklch(87% 0.065 274.039) }
.bg-indigo-300 { background-color:  oklch(78.5% 0.115 274.713) }
.bg-indigo-400 { background-color:  oklch(67.3% 0.182 276.935) }
.bg-indigo-500 { background-color:  oklch(58.5% 0.233 277.117) }
.bg-indigo-600 { background-color:  oklch(51.1% 0.262 276.966) }
.bg-indigo-700 { background-color:  oklch(45.7% 0.24 277.023) }
.bg-indigo-800 { background-color:  oklch(39.8% 0.195 277.366) }
.bg-indigo-900 { background-color:  oklch(35.9% 0.144 278.697) }
.bg-indigo-950 { background-color:  oklch(25.7% 0.09 281.288) }
.bg-violet-50 { background-color:  oklch(96.9% 0.016 293.756) }
.bg-violet-100 { background-color:  oklch(94.3% 0.029 294.588) }
.bg-violet-200 { background-color:  oklch(89.4% 0.057 293.283) }
.bg-violet-300 { background-color:  oklch(81.1% 0.111 293.571) }
.bg-violet-400 { background-color:  oklch(70.2% 0.183 293.541) }
.bg-violet-500 { background-color:  oklch(60.6% 0.25 292.717) }
.bg-violet-600 { background-color:  oklch(54.1% 0.281 293.009) }
.bg-violet-700 { background-color:  oklch(49.1% 0.27 292.581) }
.bg-violet-800 { background-color:  oklch(43.2% 0.232 292.759) }
.bg-violet-900 { background-color:  oklch(38% 0.189 293.745) }
.bg-violet-950 { background-color:  oklch(28.3% 0.141 291.089) }
.bg-purple-50 { background-color:  oklch(97.7% 0.014 308.299) }
.bg-purple-100 { background-color:  oklch(94.6% 0.033 307.174) }
.bg-purple-200 { background-color:  oklch(90.2% 0.063 306.703) }
.bg-purple-300 { background-color:  oklch(82.7% 0.119 306.383) }
.bg-purple-400 { background-color:  oklch(71.4% 0.203 305.504) }
.bg-purple-500 { background-color:  oklch(62.7% 0.265 303.9) }
.bg-purple-600 { background-color:  oklch(55.8% 0.288 302.321) }
.bg-purple-700 { background-color:  oklch(49.6% 0.265 301.924) }
.bg-purple-800 { background-color:  oklch(43.8% 0.218 303.724) }
.bg-purple-900 { background-color:  oklch(38.1% 0.176 304.987) }
.bg-purple-950 { background-color:  oklch(29.1% 0.149 302.717) }
.bg-fuchsia-50 { background-color:  oklch(97.7% 0.017 320.058) }
.bg-fuchsia-100 { background-color:  oklch(95.2% 0.037 318.852) }
.bg-fuchsia-200 { background-color:  oklch(90.3% 0.076 319.62) }
.bg-fuchsia-300 { background-color:  oklch(83.3% 0.145 321.434) }
.bg-fuchsia-400 { background-color:  oklch(74% 0.238 322.16) }
.bg-fuchsia-500 { background-color:  oklch(66.7% 0.295 322.15) }
.bg-fuchsia-600 { background-color:  oklch(59.1% 0.293 322.896) }
.bg-fuchsia-700 { background-color:  oklch(51.8% 0.253 323.949) }
.bg-fuchsia-800 { background-color:  oklch(45.2% 0.211 324.591) }
.bg-fuchsia-900 { background-color:  oklch(40.1% 0.17 325.612) }
.bg-fuchsia-950 { background-color:  oklch(29.3% 0.136 325.661) }
.bg-pink-50 { background-color:  oklch(97.1% 0.014 343.198) }
.bg-pink-100 { background-color:  oklch(94.8% 0.028 342.258) }
.bg-pink-200 { background-color:  oklch(89.9% 0.061 343.231) }
.bg-pink-300 { background-color:  oklch(82.3% 0.12 346.018) }
.bg-pink-400 { background-color:  oklch(71.8% 0.202 349.761) }
.bg-pink-500 { background-color:  oklch(65.6% 0.241 354.308) }
.bg-pink-600 { background-color:  oklch(59.2% 0.249 0.584) }
.bg-pink-700 { background-color:  oklch(52.5% 0.223 3.958) }
.bg-pink-800 { background-color:  oklch(45.9% 0.187 3.815) }
.bg-pink-900 { background-color:  oklch(40.8% 0.153 2.432) }
.bg-pink-950 { background-color:  oklch(28.4% 0.109 3.907) }
.bg-rose-50 { background-color:  oklch(96.9% 0.015 12.422) }
.bg-rose-100 { background-color:  oklch(94.1% 0.03 12.58) }
.bg-rose-200 { background-color:  oklch(89.2% 0.058 10.001) }
.bg-rose-300 { background-color:  oklch(81% 0.117 11.638) }
.bg-rose-400 { background-color:  oklch(71.2% 0.194 13.428) }
.bg-rose-500 { background-color:  oklch(64.5% 0.246 16.439) }
.bg-rose-600 { background-color:  oklch(58.6% 0.253 17.585) }
.bg-rose-700 { background-color:  oklch(51.4% 0.222 16.935) }
.bg-rose-800 { background-color:  oklch(45.5% 0.188 13.697) }
.bg-rose-900 { background-color:  oklch(41% 0.159 10.272) }
.bg-rose-950 { background-color:  oklch(27.1% 0.105 12.094) }
.bg-slate-50 { background-color:  oklch(98.4% 0.003 247.858) }
.bg-slate-100 { background-color:  oklch(96.8% 0.007 247.896) }
.bg-slate-200 { background-color:  oklch(92.9% 0.013 255.508) }
.bg-slate-300 { background-color:  oklch(86.9% 0.022 252.894) }
.bg-slate-400 { background-color:  oklch(70.4% 0.04 256.788) }
.bg-slate-500 { background-color:  oklch(55.4% 0.046 257.417) }
.bg-slate-600 { background-color:  oklch(44.6% 0.043 257.281) }
.bg-slate-700 { background-color:  oklch(37.2% 0.044 257.287) }
.bg-slate-800 { background-color:  oklch(27.9% 0.041 260.031) }
.bg-slate-900 { background-color:  oklch(20.8% 0.042 265.755) }
.bg-slate-950 { background-color:  oklch(12.9% 0.042 264.695) }
.bg-gray-50 { background-color:  oklch(98.5% 0.002 247.839) }
.bg-gray-100 { background-color:  oklch(96.7% 0.003 264.542) }
.bg-gray-200 { background-color:  oklch(92.8% 0.006 264.531) }
.bg-gray-300 { background-color:  oklch(87.2% 0.01 258.338) }
.bg-gray-400 { background-color:  oklch(70.7% 0.022 261.325) }
.bg-gray-500 { background-color:  oklch(55.1% 0.027 264.364) }
.bg-gray-600 { background-color:  oklch(44.6% 0.03 256.802) }
.bg-gray-700 { background-color:  oklch(37.3% 0.034 259.733) }
.bg-gray-800 { background-color:  oklch(27.8% 0.033 256.848) }
.bg-gray-900 { background-color:  oklch(21% 0.034 264.665) }
.bg-gray-950 { background-color:  oklch(13% 0.028 261.692) }
.bg-zinc-50 { background-color:  oklch(98.5% 0 0) }
.bg-zinc-100 { background-color:  oklch(96.7% 0.001 286.375) }
.bg-zinc-200 { background-color:  oklch(92% 0.004 286.32) }
.bg-zinc-300 { background-color:  oklch(87.1% 0.006 286.286) }
.bg-zinc-400 { background-color:  oklch(70.5% 0.015 286.067) }
.bg-zinc-500 { background-color:  oklch(55.2% 0.016 285.938) }
.bg-zinc-600 { background-color:  oklch(44.2% 0.017 285.786) }
.bg-zinc-700 { background-color:  oklch(37% 0.013 285.805) }
.bg-zinc-800 { background-color:  oklch(27.4% 0.006 286.033) }
.bg-zinc-900 { background-color:  oklch(21% 0.006 285.885) }
.bg-zinc-950 { background-color:  oklch(14.1% 0.005 285.823) }
.bg-neutral-50 { background-color:  oklch(98.5% 0 0) }
.bg-neutral-100 { background-color:  oklch(97% 0 0) }
.bg-neutral-200 { background-color:  oklch(92.2% 0 0) }
.bg-neutral-300 { background-color:  oklch(87% 0 0) }
.bg-neutral-400 { background-color:  oklch(70.8% 0 0) }
.bg-neutral-500 { background-color:  oklch(55.6% 0 0) }
.bg-neutral-600 { background-color:  oklch(43.9% 0 0) }
.bg-neutral-700 { background-color:  oklch(37.1% 0 0) }
.bg-neutral-800 { background-color:  oklch(26.9% 0 0) }
.bg-neutral-900 { background-color:  oklch(20.5% 0 0) }
.bg-neutral-950 { background-color:  oklch(14.5% 0 0) }
.bg-stone-50 { background-color:  oklch(98.5% 0.001 106.423) }
.bg-stone-100 { background-color:  oklch(97% 0.001 106.424) }
.bg-stone-200 { background-color:  oklch(92.3% 0.003 48.717) }
.bg-stone-300 { background-color:  oklch(86.9% 0.005 56.366) }
.bg-stone-400 { background-color:  oklch(70.9% 0.01 56.259) }
.bg-stone-500 { background-color:  oklch(55.3% 0.013 58.071) }
.bg-stone-600 { background-color:  oklch(44.4% 0.011 73.639) }
.bg-stone-700 { background-color:  oklch(37.4% 0.01 67.558) }
.bg-stone-800 { background-color:  oklch(26.8% 0.007 34.298) }
.bg-stone-900 { background-color:  oklch(21.6% 0.006 56.043) }
.bg-stone-950 { background-color:  oklch(14.7% 0.004 49.25) }

/* ── Dark-mode alert/header backfills: opacity backgrounds, accent borders, and
   the custom base-750 token. Same root cause as the dark accent-text backfill
   below: Unfold's `dark:` variant (`:where(.dark, .dark *)`) sits in a layer of
   its bundle, and the light base utility on the same element is our own `.bg-*` /
   `.border-*` backfill – unlayered, so it beats every layered rule and left the
   light colour showing in dark mode. Re-assert each dark utility here, under
   `.dark` (0,2,0), so its value wins over our light one; utilities Unfold purges
   outright (no rule at all) are covered by the same re-assertion.
   New dark opacity backgrounds (`dark:bg-…/NN`), accent borders, or `base-750`
   utilities used in templates/ must be added here, or they silently no-op. */

/* base-750: not in Unfold's base scale (50,100,…,900,950), so
   `dark:border-base-750` is never generated. Value is a shade lighter than the
   base-700/base-800 midpoint; hardcoded because no base-750 var exists – revisit
   if the base palette is re-themed. */
.dark .dark\:border-base-750 { border-color: oklch(0.36 0.033 256.848); }

/* Opacity border (`dark:border-base-700/50`) – the muted row divider of the
   detail tables; Unfold ships no /alpha border utilities at all. */
.dark .dark\:border-base-700\/50 { border-color: color-mix(in oklab, var(--color-base-700) 50%, transparent); }

/* Opacity backgrounds (`dark:bg-<colour>-<shade>/<alpha>`). color-mix with the
   live var where Unfold ships it; oklch (copied from the .bg-* backfill above,
   /alpha appended) where Unfold purged the colour. */
.dark .dark\:bg-base-500\/20 { background-color: color-mix(in oklab, var(--color-base-500) 20%, transparent); }
.dark .dark\:bg-base-800\/50 { background-color: color-mix(in oklab, var(--color-base-800) 50%, transparent); }
.dark .dark\:bg-red-500\/20 { background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent); }
.dark .dark\:bg-red-900\/20 { background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent); }
.dark .dark\:bg-orange-500\/20 { background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent); }
.dark .dark\:bg-orange-900\/30 { background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent); }
.dark .dark\:bg-green-500\/20 { background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent); }
.dark .dark\:bg-green-900\/20 { background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent); }
.dark .dark\:bg-green-900\/30 { background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent); }
.dark .dark\:bg-blue-500\/20 { background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent); }
.dark .dark\:bg-blue-900\/20 { background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent); }
.dark .dark\:bg-blue-900\/30 { background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent); }
.dark .dark\:bg-primary-500\/20 { background-color: color-mix(in oklab, var(--color-primary-500) 20%, transparent); }
.dark .dark\:bg-primary-950\/30 { background-color: color-mix(in oklab, var(--color-primary-950) 30%, transparent); }
/* Purged colours – hardcoded oklch (no Unfold var). */
.dark .dark\:bg-amber-500\/20 { background-color: oklch(76.9% 0.188 70.08 / 0.2); }
.dark .dark\:bg-amber-900\/20 { background-color: oklch(41.4% 0.112 45.904 / 0.2); }
.dark .dark\:bg-amber-900\/30 { background-color: oklch(41.4% 0.112 45.904 / 0.3); }
.dark .dark\:bg-yellow-900\/20 { background-color: oklch(42.1% 0.095 57.708 / 0.2); }
.dark .dark\:bg-lime-500\/20 { background-color: oklch(76.8% 0.233 130.85 / 0.2); }
.dark .dark\:bg-emerald-500\/20 { background-color: oklch(69.6% 0.17 162.48 / 0.2); }
.dark .dark\:bg-teal-500\/20 { background-color: oklch(70.4% 0.14 182.503 / 0.2); }
.dark .dark\:bg-cyan-500\/20 { background-color: oklch(71.5% 0.143 215.221 / 0.2); }
.dark .dark\:bg-sky-500\/20 { background-color: oklch(68.5% 0.169 237.323 / 0.2); }
.dark .dark\:bg-sky-900\/20 { background-color: oklch(39.1% 0.09 240.876 / 0.2); }
.dark .dark\:bg-sky-900\/30 { background-color: oklch(39.1% 0.09 240.876 / 0.3); }
.dark .dark\:bg-indigo-500\/20 { background-color: oklch(58.5% 0.233 277.117 / 0.2); }
.dark .dark\:bg-violet-500\/20 { background-color: oklch(60.6% 0.25 292.717 / 0.2); }
.dark .dark\:bg-violet-900\/30 { background-color: oklch(38% 0.189 293.745 / 0.3); }
.dark .dark\:bg-purple-500\/20 { background-color: oklch(62.7% 0.265 303.9 / 0.2); }
.dark .dark\:bg-fuchsia-500\/20 { background-color: oklch(66.7% 0.295 322.15 / 0.2); }
.dark .dark\:bg-pink-500\/20 { background-color: oklch(65.6% 0.241 354.308 / 0.2); }
.dark .dark\:bg-rose-500\/20 { background-color: oklch(64.5% 0.246 16.439 / 0.2); }
.dark .dark\:bg-slate-500\/20 { background-color: oklch(55.4% 0.046 257.417 / 0.2); }

/* Solid (non-opacity) dark backgrounds whose light sibling we backfill above
   (e.g. .bg-blue-50), so Unfold's layered dark variant loses to it.
   Used by the allocation quick-action panels (allocation_totals.js,
   po_allocation_shares.js). Re-assert at (0,2,0) so the dark shade wins. */
.dark .dark\:bg-blue-950 { background-color: var(--color-blue-950); }

/* Accent borders. Unfold ships only base/primary border colours, so red/amber/
   yellow/green/sky borders fall back to the grey default in both modes.
   Backfill the light shade (0,1,0) and re-assert the dark shade under `.dark`
   (0,2,0). var where Unfold ships it (red, green, yellow-200), oklch (from the
   .bg-* backfill above) otherwise. */
.border-red-200 { border-color: var(--color-red-200); }
.border-red-300 { border-color: var(--color-red-300); }
.border-green-200 { border-color: var(--color-green-200); }
.border-green-300 { border-color: var(--color-green-300); }
.border-yellow-200 { border-color: var(--color-yellow-200); }
.border-yellow-300 { border-color: oklch(90.5% 0.182 98.111); }
.border-amber-200 { border-color: oklch(92.4% 0.12 95.746); }
.border-amber-300 { border-color: oklch(87.9% 0.169 91.605); }
.border-sky-200 { border-color: oklch(90.1% 0.058 230.902); }
.dark .dark\:border-red-800 { border-color: var(--color-red-800); }
.dark .dark\:border-green-700 { border-color: var(--color-green-700); }
.dark .dark\:border-green-800 { border-color: var(--color-green-800); }
.dark .dark\:border-yellow-700 { border-color: oklch(55.4% 0.135 66.442); }
.dark .dark\:border-yellow-800 { border-color: oklch(47.6% 0.114 61.907); }
.dark .dark\:border-amber-700 { border-color: oklch(55.5% 0.163 48.998); }
.dark .dark\:border-amber-800 { border-color: oklch(47.3% 0.137 46.201); }
.dark .dark\:border-sky-700 { border-color: oklch(50% 0.134 242.749); }

.hover\:bg-red-50:hover { background-color: oklch(97.1% 0.013 17.38) }
.hover\:bg-red-100:hover { background-color: oklch(93.6% 0.032 17.717) }
.hover\:bg-red-200:hover { background-color: oklch(88.5% 0.062 18.334) }
.hover\:bg-red-300:hover { background-color: oklch(80.8% 0.114 19.571) }
.hover\:bg-red-400:hover { background-color: oklch(70.4% 0.191 22.216) }
.hover\:bg-red-500:hover { background-color: oklch(63.7% 0.237 25.331) }
.hover\:bg-red-600:hover { background-color: oklch(57.7% 0.245 27.325) }
.hover\:bg-red-700:hover { background-color: oklch(50.5% 0.213 27.518) }
.hover\:bg-red-800:hover { background-color: oklch(44.4% 0.177 26.899) }
.hover\:bg-red-900:hover { background-color: oklch(39.6% 0.141 25.723) }
.hover\:bg-red-950:hover { background-color: oklch(25.8% 0.092 26.042) }
.hover\:bg-orange-50:hover { background-color: oklch(98% 0.016 73.684) }
.hover\:bg-orange-100:hover { background-color: oklch(95.4% 0.038 75.164) }
.hover\:bg-orange-200:hover { background-color: oklch(90.1% 0.076 70.697) }
.hover\:bg-orange-300:hover { background-color: oklch(83.7% 0.128 66.29) }
.hover\:bg-orange-400:hover { background-color: oklch(75% 0.183 55.934) }
.hover\:bg-orange-500:hover { background-color: oklch(70.5% 0.213 47.604) }
.hover\:bg-orange-600:hover { background-color: oklch(64.6% 0.222 41.116) }
.hover\:bg-orange-700:hover { background-color: oklch(55.3% 0.195 38.402) }
.hover\:bg-orange-800:hover { background-color: oklch(47% 0.157 37.304) }
.hover\:bg-orange-900:hover { background-color: oklch(40.8% 0.123 38.172) }
.hover\:bg-orange-950:hover { background-color: oklch(26.6% 0.079 36.259) }
.hover\:bg-amber-50:hover { background-color: oklch(98.7% 0.022 95.277) }
.hover\:bg-amber-100:hover { background-color: oklch(96.2% 0.059 95.617) }
.hover\:bg-amber-200:hover { background-color: oklch(92.4% 0.12 95.746) }
.hover\:bg-amber-300:hover { background-color: oklch(87.9% 0.169 91.605) }
.hover\:bg-amber-400:hover { background-color: oklch(82.8% 0.189 84.429) }
.hover\:bg-amber-500:hover { background-color: oklch(76.9% 0.188 70.08) }
.hover\:bg-amber-600:hover { background-color: oklch(66.6% 0.179 58.318) }
.hover\:bg-amber-700:hover { background-color: oklch(55.5% 0.163 48.998) }
.hover\:bg-amber-800:hover { background-color: oklch(47.3% 0.137 46.201) }
.hover\:bg-amber-900:hover { background-color: oklch(41.4% 0.112 45.904) }
.hover\:bg-amber-950:hover { background-color: oklch(27.9% 0.077 45.635) }
.hover\:bg-yellow-50:hover { background-color: oklch(98.7% 0.026 102.212) }
.hover\:bg-yellow-100:hover { background-color: oklch(97.3% 0.071 103.193) }
.hover\:bg-yellow-200:hover { background-color: oklch(94.5% 0.129 101.54) }
.hover\:bg-yellow-300:hover { background-color: oklch(90.5% 0.182 98.111) }
.hover\:bg-yellow-400:hover { background-color: oklch(85.2% 0.199 91.936) }
.hover\:bg-yellow-500:hover { background-color: oklch(79.5% 0.184 86.047) }
.hover\:bg-yellow-600:hover { background-color: oklch(68.1% 0.162 75.834) }
.hover\:bg-yellow-700:hover { background-color: oklch(55.4% 0.135 66.442) }
.hover\:bg-yellow-800:hover { background-color: oklch(47.6% 0.114 61.907) }
.hover\:bg-yellow-900:hover { background-color: oklch(42.1% 0.095 57.708) }
.hover\:bg-yellow-950:hover { background-color: oklch(28.6% 0.066 53.813) }
.hover\:bg-lime-50:hover { background-color: oklch(98.6% 0.031 120.757) }
.hover\:bg-lime-100:hover { background-color: oklch(96.7% 0.067 122.328) }
.hover\:bg-lime-200:hover { background-color: oklch(93.8% 0.127 124.321) }
.hover\:bg-lime-300:hover { background-color: oklch(89.7% 0.196 126.665) }
.hover\:bg-lime-400:hover { background-color: oklch(84.1% 0.238 128.85) }
.hover\:bg-lime-500:hover { background-color: oklch(76.8% 0.233 130.85) }
.hover\:bg-lime-600:hover { background-color: oklch(64.8% 0.2 131.684) }
.hover\:bg-lime-700:hover { background-color: oklch(53.2% 0.157 131.589) }
.hover\:bg-lime-800:hover { background-color: oklch(45.3% 0.124 130.933) }
.hover\:bg-lime-900:hover { background-color: oklch(40.5% 0.101 131.063) }
.hover\:bg-lime-950:hover { background-color: oklch(27.4% 0.072 132.109) }
.hover\:bg-green-50:hover { background-color: oklch(98.2% 0.018 155.826) }
.hover\:bg-green-100:hover { background-color: oklch(96.2% 0.044 156.743) }
.hover\:bg-green-200:hover { background-color: oklch(92.5% 0.084 155.995) }
.hover\:bg-green-300:hover { background-color: oklch(87.1% 0.15 154.449) }
.hover\:bg-green-400:hover { background-color: oklch(79.2% 0.209 151.711) }
.hover\:bg-green-500:hover { background-color: oklch(72.3% 0.219 149.579) }
.hover\:bg-green-600:hover { background-color: oklch(62.7% 0.194 149.214) }
.hover\:bg-green-700:hover { background-color: oklch(52.7% 0.154 150.069) }
.hover\:bg-green-800:hover { background-color: oklch(44.8% 0.119 151.328) }
.hover\:bg-green-900:hover { background-color: oklch(39.3% 0.095 152.535) }
.hover\:bg-green-950:hover { background-color: oklch(26.6% 0.065 152.934) }
.hover\:bg-emerald-50:hover { background-color: oklch(97.9% 0.021 166.113) }
.hover\:bg-emerald-100:hover { background-color: oklch(95% 0.052 163.051) }
.hover\:bg-emerald-200:hover { background-color: oklch(90.5% 0.093 164.15) }
.hover\:bg-emerald-300:hover { background-color: oklch(84.5% 0.143 164.978) }
.hover\:bg-emerald-400:hover { background-color: oklch(76.5% 0.177 163.223) }
.hover\:bg-emerald-500:hover { background-color: oklch(69.6% 0.17 162.48) }
.hover\:bg-emerald-600:hover { background-color: oklch(59.6% 0.145 163.225) }
.hover\:bg-emerald-700:hover { background-color: oklch(50.8% 0.118 165.612) }
.hover\:bg-emerald-800:hover { background-color: oklch(43.2% 0.095 166.913) }
.hover\:bg-emerald-900:hover { background-color: oklch(37.8% 0.077 168.94) }
.hover\:bg-emerald-950:hover { background-color: oklch(26.2% 0.051 172.552) }
.hover\:bg-teal-50:hover { background-color: oklch(98.4% 0.014 180.72) }
.hover\:bg-teal-100:hover { background-color: oklch(95.3% 0.051 180.801) }
.hover\:bg-teal-200:hover { background-color: oklch(91% 0.096 180.426) }
.hover\:bg-teal-300:hover { background-color: oklch(85.5% 0.138 181.071) }
.hover\:bg-teal-400:hover { background-color: oklch(77.7% 0.152 181.912) }
.hover\:bg-teal-500:hover { background-color: oklch(70.4% 0.14 182.503) }
.hover\:bg-teal-600:hover { background-color: oklch(60% 0.118 184.704) }
.hover\:bg-teal-700:hover { background-color: oklch(51.1% 0.096 186.391) }
.hover\:bg-teal-800:hover { background-color: oklch(43.7% 0.078 188.216) }
.hover\:bg-teal-900:hover { background-color: oklch(38.6% 0.063 188.416) }
.hover\:bg-teal-950:hover { background-color: oklch(27.7% 0.046 192.524) }
.hover\:bg-cyan-50:hover { background-color: oklch(98.4% 0.019 200.873) }
.hover\:bg-cyan-100:hover { background-color: oklch(95.6% 0.045 203.388) }
.hover\:bg-cyan-200:hover { background-color: oklch(91.7% 0.08 205.041) }
.hover\:bg-cyan-300:hover { background-color: oklch(86.5% 0.127 207.078) }
.hover\:bg-cyan-400:hover { background-color: oklch(78.9% 0.154 211.53) }
.hover\:bg-cyan-500:hover { background-color: oklch(71.5% 0.143 215.221) }
.hover\:bg-cyan-600:hover { background-color: oklch(60.9% 0.126 221.723) }
.hover\:bg-cyan-700:hover { background-color: oklch(52% 0.105 223.128) }
.hover\:bg-cyan-800:hover { background-color: oklch(45% 0.085 224.283) }
.hover\:bg-cyan-900:hover { background-color: oklch(39.8% 0.07 227.392) }
.hover\:bg-cyan-950:hover { background-color: oklch(30.2% 0.056 229.695) }
.hover\:bg-sky-50:hover { background-color: oklch(97.7% 0.013 236.62) }
.hover\:bg-sky-100:hover { background-color: oklch(95.1% 0.026 236.824) }
.hover\:bg-sky-200:hover { background-color: oklch(90.1% 0.058 230.902) }
.hover\:bg-sky-300:hover { background-color: oklch(82.8% 0.111 230.318) }
.hover\:bg-sky-400:hover { background-color: oklch(74.6% 0.16 232.661) }
.hover\:bg-sky-500:hover { background-color: oklch(68.5% 0.169 237.323) }
.hover\:bg-sky-600:hover { background-color: oklch(58.8% 0.158 241.966) }
.hover\:bg-sky-700:hover { background-color: oklch(50% 0.134 242.749) }
.hover\:bg-sky-800:hover { background-color: oklch(44.3% 0.11 240.79) }
.hover\:bg-sky-900:hover { background-color: oklch(39.1% 0.09 240.876) }
.hover\:bg-sky-950:hover { background-color: oklch(29.3% 0.066 243.157) }
.hover\:bg-blue-50:hover { background-color: oklch(97% 0.014 254.604) }
.hover\:bg-blue-100:hover { background-color: oklch(93.2% 0.032 255.585) }
.hover\:bg-blue-200:hover { background-color: oklch(88.2% 0.059 254.128) }
.hover\:bg-blue-300:hover { background-color: oklch(80.9% 0.105 251.813) }
.hover\:bg-blue-400:hover { background-color: oklch(70.7% 0.165 254.624) }
.hover\:bg-blue-500:hover { background-color: oklch(62.3% 0.214 259.815) }
.hover\:bg-blue-600:hover { background-color: oklch(54.6% 0.245 262.881) }
.hover\:bg-blue-700:hover { background-color: oklch(48.8% 0.243 264.376) }
.hover\:bg-blue-800:hover { background-color: oklch(42.4% 0.199 265.638) }
.hover\:bg-blue-900:hover { background-color: oklch(37.9% 0.146 265.522) }
.hover\:bg-blue-950:hover { background-color: oklch(28.2% 0.091 267.935) }
.hover\:bg-indigo-50:hover { background-color: oklch(96.2% 0.018 272.314) }
.hover\:bg-indigo-100:hover { background-color: oklch(93% 0.034 272.788) }
.hover\:bg-indigo-200:hover { background-color: oklch(87% 0.065 274.039) }
.hover\:bg-indigo-300:hover { background-color: oklch(78.5% 0.115 274.713) }
.hover\:bg-indigo-400:hover { background-color: oklch(67.3% 0.182 276.935) }
.hover\:bg-indigo-500:hover { background-color: oklch(58.5% 0.233 277.117) }
.hover\:bg-indigo-600:hover { background-color: oklch(51.1% 0.262 276.966) }
.hover\:bg-indigo-700:hover { background-color: oklch(45.7% 0.24 277.023) }
.hover\:bg-indigo-800:hover { background-color: oklch(39.8% 0.195 277.366) }
.hover\:bg-indigo-900:hover { background-color: oklch(35.9% 0.144 278.697) }
.hover\:bg-indigo-950:hover { background-color: oklch(25.7% 0.09 281.288) }
.hover\:bg-violet-50:hover { background-color: oklch(96.9% 0.016 293.756) }
.hover\:bg-violet-100:hover { background-color: oklch(94.3% 0.029 294.588) }
.hover\:bg-violet-200:hover { background-color: oklch(89.4% 0.057 293.283) }
.hover\:bg-violet-300:hover { background-color: oklch(81.1% 0.111 293.571) }
.hover\:bg-violet-400:hover { background-color: oklch(70.2% 0.183 293.541) }
.hover\:bg-violet-500:hover { background-color: oklch(60.6% 0.25 292.717) }
.hover\:bg-violet-600:hover { background-color: oklch(54.1% 0.281 293.009) }
.hover\:bg-violet-700:hover { background-color: oklch(49.1% 0.27 292.581) }
.hover\:bg-violet-800:hover { background-color: oklch(43.2% 0.232 292.759) }
.hover\:bg-violet-900:hover { background-color: oklch(38% 0.189 293.745) }
.hover\:bg-violet-950:hover { background-color: oklch(28.3% 0.141 291.089) }
.hover\:bg-purple-50:hover { background-color: oklch(97.7% 0.014 308.299) }
.hover\:bg-purple-100:hover { background-color: oklch(94.6% 0.033 307.174) }
.hover\:bg-purple-200:hover { background-color: oklch(90.2% 0.063 306.703) }
.hover\:bg-purple-300:hover { background-color: oklch(82.7% 0.119 306.383) }
.hover\:bg-purple-400:hover { background-color: oklch(71.4% 0.203 305.504) }
.hover\:bg-purple-500:hover { background-color: oklch(62.7% 0.265 303.9) }
.hover\:bg-purple-600:hover { background-color: oklch(55.8% 0.288 302.321) }
.hover\:bg-purple-700:hover { background-color: oklch(49.6% 0.265 301.924) }
.hover\:bg-purple-800:hover { background-color: oklch(43.8% 0.218 303.724) }
.hover\:bg-purple-900:hover { background-color: oklch(38.1% 0.176 304.987) }
.hover\:bg-purple-950:hover { background-color: oklch(29.1% 0.149 302.717) }
.hover\:bg-fuchsia-50:hover { background-color: oklch(97.7% 0.017 320.058) }
.hover\:bg-fuchsia-100:hover { background-color: oklch(95.2% 0.037 318.852) }
.hover\:bg-fuchsia-200:hover { background-color: oklch(90.3% 0.076 319.62) }
.hover\:bg-fuchsia-300:hover { background-color: oklch(83.3% 0.145 321.434) }
.hover\:bg-fuchsia-400:hover { background-color: oklch(74% 0.238 322.16) }
.hover\:bg-fuchsia-500:hover { background-color: oklch(66.7% 0.295 322.15) }
.hover\:bg-fuchsia-600:hover { background-color: oklch(59.1% 0.293 322.896) }
.hover\:bg-fuchsia-700:hover { background-color: oklch(51.8% 0.253 323.949) }
.hover\:bg-fuchsia-800:hover { background-color: oklch(45.2% 0.211 324.591) }
.hover\:bg-fuchsia-900:hover { background-color: oklch(40.1% 0.17 325.612) }
.hover\:bg-fuchsia-950:hover { background-color: oklch(29.3% 0.136 325.661) }
.hover\:bg-pink-50:hover { background-color: oklch(97.1% 0.014 343.198) }
.hover\:bg-pink-100:hover { background-color: oklch(94.8% 0.028 342.258) }
.hover\:bg-pink-200:hover { background-color: oklch(89.9% 0.061 343.231) }
.hover\:bg-pink-300:hover { background-color: oklch(82.3% 0.12 346.018) }
.hover\:bg-pink-400:hover { background-color: oklch(71.8% 0.202 349.761) }
.hover\:bg-pink-500:hover { background-color: oklch(65.6% 0.241 354.308) }
.hover\:bg-pink-600:hover { background-color: oklch(59.2% 0.249 0.584) }
.hover\:bg-pink-700:hover { background-color: oklch(52.5% 0.223 3.958) }
.hover\:bg-pink-800:hover { background-color: oklch(45.9% 0.187 3.815) }
.hover\:bg-pink-900:hover { background-color: oklch(40.8% 0.153 2.432) }
.hover\:bg-pink-950:hover { background-color: oklch(28.4% 0.109 3.907) }
.hover\:bg-rose-50:hover { background-color: oklch(96.9% 0.015 12.422) }
.hover\:bg-rose-100:hover { background-color: oklch(94.1% 0.03 12.58) }
.hover\:bg-rose-200:hover { background-color: oklch(89.2% 0.058 10.001) }
.hover\:bg-rose-300:hover { background-color: oklch(81% 0.117 11.638) }
.hover\:bg-rose-400:hover { background-color: oklch(71.2% 0.194 13.428) }
.hover\:bg-rose-500:hover { background-color: oklch(64.5% 0.246 16.439) }
.hover\:bg-rose-600:hover { background-color: oklch(58.6% 0.253 17.585) }
.hover\:bg-rose-700:hover { background-color: oklch(51.4% 0.222 16.935) }
.hover\:bg-rose-800:hover { background-color: oklch(45.5% 0.188 13.697) }
.hover\:bg-rose-900:hover { background-color: oklch(41% 0.159 10.272) }
.hover\:bg-rose-950:hover { background-color: oklch(27.1% 0.105 12.094) }
.hover\:bg-slate-50:hover { background-color: oklch(98.4% 0.003 247.858) }
.hover\:bg-slate-100:hover { background-color: oklch(96.8% 0.007 247.896) }
.hover\:bg-slate-200:hover { background-color: oklch(92.9% 0.013 255.508) }
.hover\:bg-slate-300:hover { background-color: oklch(86.9% 0.022 252.894) }
.hover\:bg-slate-400:hover { background-color: oklch(70.4% 0.04 256.788) }
.hover\:bg-slate-500:hover { background-color: oklch(55.4% 0.046 257.417) }
.hover\:bg-slate-600:hover { background-color: oklch(44.6% 0.043 257.281) }
.hover\:bg-slate-700:hover { background-color: oklch(37.2% 0.044 257.287) }
.hover\:bg-slate-800:hover { background-color: oklch(27.9% 0.041 260.031) }
.hover\:bg-slate-900:hover { background-color: oklch(20.8% 0.042 265.755) }
.hover\:bg-slate-950:hover { background-color: oklch(12.9% 0.042 264.695) }
.hover\:bg-gray-50:hover { background-color: oklch(98.5% 0.002 247.839) }
.hover\:bg-gray-100:hover { background-color: oklch(96.7% 0.003 264.542) }
.hover\:bg-gray-200:hover { background-color: oklch(92.8% 0.006 264.531) }
.hover\:bg-gray-300:hover { background-color: oklch(87.2% 0.01 258.338) }
.hover\:bg-gray-400:hover { background-color: oklch(70.7% 0.022 261.325) }
.hover\:bg-gray-500:hover { background-color: oklch(55.1% 0.027 264.364) }
.hover\:bg-gray-600:hover { background-color: oklch(44.6% 0.03 256.802) }
.hover\:bg-gray-700:hover { background-color: oklch(37.3% 0.034 259.733) }
.hover\:bg-gray-800:hover { background-color: oklch(27.8% 0.033 256.848) }
.hover\:bg-gray-900:hover { background-color: oklch(21% 0.034 264.665) }
.hover\:bg-gray-950:hover { background-color: oklch(13% 0.028 261.692) }
.hover\:bg-zinc-50:hover { background-color: oklch(98.5% 0 0) }
.hover\:bg-zinc-100:hover { background-color: oklch(96.7% 0.001 286.375) }
.hover\:bg-zinc-200:hover { background-color: oklch(92% 0.004 286.32) }
.hover\:bg-zinc-300:hover { background-color: oklch(87.1% 0.006 286.286) }
.hover\:bg-zinc-400:hover { background-color: oklch(70.5% 0.015 286.067) }
.hover\:bg-zinc-500:hover { background-color: oklch(55.2% 0.016 285.938) }
.hover\:bg-zinc-600:hover { background-color: oklch(44.2% 0.017 285.786) }
.hover\:bg-zinc-700:hover { background-color: oklch(37% 0.013 285.805) }
.hover\:bg-zinc-800:hover { background-color: oklch(27.4% 0.006 286.033) }
.hover\:bg-zinc-900:hover { background-color: oklch(21% 0.006 285.885) }
.hover\:bg-zinc-950:hover { background-color: oklch(14.1% 0.005 285.823) }
.hover\:bg-neutral-50:hover { background-color: oklch(98.5% 0 0) }
.hover\:bg-neutral-100:hover { background-color: oklch(97% 0 0) }
.hover\:bg-neutral-200:hover { background-color: oklch(92.2% 0 0) }
.hover\:bg-neutral-300:hover { background-color: oklch(87% 0 0) }
.hover\:bg-neutral-400:hover { background-color: oklch(70.8% 0 0) }
.hover\:bg-neutral-500:hover { background-color: oklch(55.6% 0 0) }
.hover\:bg-neutral-600:hover { background-color: oklch(43.9% 0 0) }
.hover\:bg-neutral-700:hover { background-color: oklch(37.1% 0 0) }
.hover\:bg-neutral-800:hover { background-color: oklch(26.9% 0 0) }
.hover\:bg-neutral-900:hover { background-color: oklch(20.5% 0 0) }
.hover\:bg-neutral-950:hover { background-color: oklch(14.5% 0 0) }
.hover\:bg-stone-50:hover { background-color: oklch(98.5% 0.001 106.423) }
.hover\:bg-stone-100:hover { background-color: oklch(97% 0.001 106.424) }
.hover\:bg-stone-200:hover { background-color: oklch(92.3% 0.003 48.717) }
.hover\:bg-stone-300:hover { background-color: oklch(86.9% 0.005 56.366) }
.hover\:bg-stone-400:hover { background-color: oklch(70.9% 0.01 56.259) }
.hover\:bg-stone-500:hover { background-color: oklch(55.3% 0.013 58.071) }
.hover\:bg-stone-600:hover { background-color: oklch(44.4% 0.011 73.639) }
.hover\:bg-stone-700:hover { background-color: oklch(37.4% 0.01 67.558) }
.hover\:bg-stone-800:hover { background-color: oklch(26.8% 0.007 34.298) }
.hover\:bg-stone-900:hover { background-color: oklch(21.6% 0.006 56.043) }
.hover\:bg-stone-950:hover { background-color: oklch(14.7% 0.004 49.25) }

.text-red-50 { color: oklch(97.1% 0.013 17.38) }
.text-red-100 { color: oklch(93.6% 0.032 17.717) }
.text-red-200 { color: oklch(88.5% 0.062 18.334) }
.text-red-300 { color: oklch(80.8% 0.114 19.571) }
.text-red-400 { color: oklch(70.4% 0.191 22.216) }
.text-red-500 { color: oklch(63.7% 0.237 25.331) }
.text-red-600 { color: oklch(57.7% 0.245 27.325) }
.text-red-700 { color: oklch(50.5% 0.213 27.518) }
.text-red-800 { color: oklch(44.4% 0.177 26.899) }
.text-red-900 { color: oklch(39.6% 0.141 25.723) }
.text-red-950 { color: oklch(25.8% 0.092 26.042) }
.text-orange-50 { color: oklch(98% 0.016 73.684) }
.text-orange-100 { color: oklch(95.4% 0.038 75.164) }
.text-orange-200 { color: oklch(90.1% 0.076 70.697) }
.text-orange-300 { color: oklch(83.7% 0.128 66.29) }
.text-orange-400 { color: oklch(75% 0.183 55.934) }
.text-orange-500 { color: oklch(70.5% 0.213 47.604) }
.text-orange-600 { color: oklch(64.6% 0.222 41.116) }
.text-orange-700 { color: oklch(55.3% 0.195 38.402) }
.text-orange-800 { color: oklch(47% 0.157 37.304) }
.text-orange-900 { color: oklch(40.8% 0.123 38.172) }
.text-orange-950 { color: oklch(26.6% 0.079 36.259) }
.text-amber-50 { color: oklch(98.7% 0.022 95.277) }
.text-amber-100 { color: oklch(96.2% 0.059 95.617) }
.text-amber-200 { color: oklch(92.4% 0.12 95.746) }
.text-amber-300 { color: oklch(87.9% 0.169 91.605) }
.text-amber-400 { color: oklch(82.8% 0.189 84.429) }
.text-amber-500 { color: oklch(76.9% 0.188 70.08) }
.text-amber-600 { color: oklch(66.6% 0.179 58.318) }
.text-amber-700 { color: oklch(55.5% 0.163 48.998) }
.text-amber-800 { color: oklch(47.3% 0.137 46.201) }
.text-amber-900 { color: oklch(41.4% 0.112 45.904) }
.text-amber-950 { color: oklch(27.9% 0.077 45.635) }
.text-yellow-50 { color: oklch(98.7% 0.026 102.212) }
.text-yellow-100 { color: oklch(97.3% 0.071 103.193) }
.text-yellow-200 { color: oklch(94.5% 0.129 101.54) }
.text-yellow-300 { color: oklch(90.5% 0.182 98.111) }
.text-yellow-400 { color: oklch(85.2% 0.199 91.936) }
.text-yellow-500 { color: oklch(79.5% 0.184 86.047) }
.text-yellow-600 { color: oklch(68.1% 0.162 75.834) }
.text-yellow-700 { color: oklch(55.4% 0.135 66.442) }
.text-yellow-800 { color: oklch(47.6% 0.114 61.907) }
.text-yellow-900 { color: oklch(42.1% 0.095 57.708) }
.text-yellow-950 { color: oklch(28.6% 0.066 53.813) }
.text-lime-50 { color: oklch(98.6% 0.031 120.757) }
.text-lime-100 { color: oklch(96.7% 0.067 122.328) }
.text-lime-200 { color: oklch(93.8% 0.127 124.321) }
.text-lime-300 { color: oklch(89.7% 0.196 126.665) }
.text-lime-400 { color: oklch(84.1% 0.238 128.85) }
.text-lime-500 { color: oklch(76.8% 0.233 130.85) }
.text-lime-600 { color: oklch(64.8% 0.2 131.684) }
.text-lime-700 { color: oklch(53.2% 0.157 131.589) }
.text-lime-800 { color: oklch(45.3% 0.124 130.933) }
.text-lime-900 { color: oklch(40.5% 0.101 131.063) }
.text-lime-950 { color: oklch(27.4% 0.072 132.109) }
.text-green-50 { color: oklch(98.2% 0.018 155.826) }
.text-green-100 { color: oklch(96.2% 0.044 156.743) }
.text-green-200 { color: oklch(92.5% 0.084 155.995) }
.text-green-300 { color: oklch(87.1% 0.15 154.449) }
.text-green-400 { color: oklch(79.2% 0.209 151.711) }
.text-green-500 { color: oklch(72.3% 0.219 149.579) }
.text-green-600 { color: oklch(62.7% 0.194 149.214) }
.text-green-700 { color: oklch(52.7% 0.154 150.069) }
.text-green-800 { color: oklch(44.8% 0.119 151.328) }
.text-green-900 { color: oklch(39.3% 0.095 152.535) }
.text-green-950 { color: oklch(26.6% 0.065 152.934) }
.text-emerald-50 { color: oklch(97.9% 0.021 166.113) }
.text-emerald-100 { color: oklch(95% 0.052 163.051) }
.text-emerald-200 { color: oklch(90.5% 0.093 164.15) }
.text-emerald-300 { color: oklch(84.5% 0.143 164.978) }
.text-emerald-400 { color: oklch(76.5% 0.177 163.223) }
.text-emerald-500 { color: oklch(69.6% 0.17 162.48) }
.text-emerald-600 { color: oklch(59.6% 0.145 163.225) }
.text-emerald-700 { color: oklch(50.8% 0.118 165.612) }
.text-emerald-800 { color: oklch(43.2% 0.095 166.913) }
.text-emerald-900 { color: oklch(37.8% 0.077 168.94) }
.text-emerald-950 { color: oklch(26.2% 0.051 172.552) }
.text-teal-50 { color: oklch(98.4% 0.014 180.72) }
.text-teal-100 { color: oklch(95.3% 0.051 180.801) }
.text-teal-200 { color: oklch(91% 0.096 180.426) }
.text-teal-300 { color: oklch(85.5% 0.138 181.071) }
.text-teal-400 { color: oklch(77.7% 0.152 181.912) }
.text-teal-500 { color: oklch(70.4% 0.14 182.503) }
.text-teal-600 { color: oklch(60% 0.118 184.704) }
.text-teal-700 { color: oklch(51.1% 0.096 186.391) }
.text-teal-800 { color: oklch(43.7% 0.078 188.216) }
.text-teal-900 { color: oklch(38.6% 0.063 188.416) }
.text-teal-950 { color: oklch(27.7% 0.046 192.524) }
.text-cyan-50 { color: oklch(98.4% 0.019 200.873) }
.text-cyan-100 { color: oklch(95.6% 0.045 203.388) }
.text-cyan-200 { color: oklch(91.7% 0.08 205.041) }
.text-cyan-300 { color: oklch(86.5% 0.127 207.078) }
.text-cyan-400 { color: oklch(78.9% 0.154 211.53) }
.text-cyan-500 { color: oklch(71.5% 0.143 215.221) }
.text-cyan-600 { color: oklch(60.9% 0.126 221.723) }
.text-cyan-700 { color: oklch(52% 0.105 223.128) }
.text-cyan-800 { color: oklch(45% 0.085 224.283) }
.text-cyan-900 { color: oklch(39.8% 0.07 227.392) }
.text-cyan-950 { color: oklch(30.2% 0.056 229.695) }
.text-sky-50 { color: oklch(97.7% 0.013 236.62) }
.text-sky-100 { color: oklch(95.1% 0.026 236.824) }
.text-sky-200 { color: oklch(90.1% 0.058 230.902) }
.text-sky-300 { color: oklch(82.8% 0.111 230.318) }
.text-sky-400 { color: oklch(74.6% 0.16 232.661) }
.text-sky-500 { color: oklch(68.5% 0.169 237.323) }
.text-sky-600 { color: oklch(58.8% 0.158 241.966) }
.text-sky-700 { color: oklch(50% 0.134 242.749) }
.text-sky-800 { color: oklch(44.3% 0.11 240.79) }
.text-sky-900 { color: oklch(39.1% 0.09 240.876) }
.text-sky-950 { color: oklch(29.3% 0.066 243.157) }
.text-blue-50 { color: oklch(97% 0.014 254.604) }
.text-blue-100 { color: oklch(93.2% 0.032 255.585) }
.text-blue-200 { color: oklch(88.2% 0.059 254.128) }
.text-blue-300 { color: oklch(80.9% 0.105 251.813) }
.text-blue-400 { color: oklch(70.7% 0.165 254.624) }
.text-blue-500 { color: oklch(62.3% 0.214 259.815) }
.text-blue-600 { color: oklch(54.6% 0.245 262.881) }
.text-blue-700 { color: oklch(48.8% 0.243 264.376) }
.text-blue-800 { color: oklch(42.4% 0.199 265.638) }
.text-blue-900 { color: oklch(37.9% 0.146 265.522) }
.text-blue-950 { color: oklch(28.2% 0.091 267.935) }
.text-indigo-50 { color: oklch(96.2% 0.018 272.314) }
.text-indigo-100 { color: oklch(93% 0.034 272.788) }
.text-indigo-200 { color: oklch(87% 0.065 274.039) }
.text-indigo-300 { color: oklch(78.5% 0.115 274.713) }
.text-indigo-400 { color: oklch(67.3% 0.182 276.935) }
.text-indigo-500 { color: oklch(58.5% 0.233 277.117) }
.text-indigo-600 { color: oklch(51.1% 0.262 276.966) }
.text-indigo-700 { color: oklch(45.7% 0.24 277.023) }
.text-indigo-800 { color: oklch(39.8% 0.195 277.366) }
.text-indigo-900 { color: oklch(35.9% 0.144 278.697) }
.text-indigo-950 { color: oklch(25.7% 0.09 281.288) }
.text-violet-50 { color: oklch(96.9% 0.016 293.756) }
.text-violet-100 { color: oklch(94.3% 0.029 294.588) }
.text-violet-200 { color: oklch(89.4% 0.057 293.283) }
.text-violet-300 { color: oklch(81.1% 0.111 293.571) }
.text-violet-400 { color: oklch(70.2% 0.183 293.541) }
.text-violet-500 { color: oklch(60.6% 0.25 292.717) }
.text-violet-600 { color: oklch(54.1% 0.281 293.009) }
.text-violet-700 { color: oklch(49.1% 0.27 292.581) }
.text-violet-800 { color: oklch(43.2% 0.232 292.759) }
.text-violet-900 { color: oklch(38% 0.189 293.745) }
.text-violet-950 { color: oklch(28.3% 0.141 291.089) }
.text-purple-50 { color: oklch(97.7% 0.014 308.299) }
.text-purple-100 { color: oklch(94.6% 0.033 307.174) }
.text-purple-200 { color: oklch(90.2% 0.063 306.703) }
.text-purple-300 { color: oklch(82.7% 0.119 306.383) }
.text-purple-400 { color: oklch(71.4% 0.203 305.504) }
.text-purple-500 { color: oklch(62.7% 0.265 303.9) }
.text-purple-600 { color: oklch(55.8% 0.288 302.321) }
.text-purple-700 { color: oklch(49.6% 0.265 301.924) }
.text-purple-800 { color: oklch(43.8% 0.218 303.724) }
.text-purple-900 { color: oklch(38.1% 0.176 304.987) }
.text-purple-950 { color: oklch(29.1% 0.149 302.717) }
.text-fuchsia-50 { color: oklch(97.7% 0.017 320.058) }
.text-fuchsia-100 { color: oklch(95.2% 0.037 318.852) }
.text-fuchsia-200 { color: oklch(90.3% 0.076 319.62) }
.text-fuchsia-300 { color: oklch(83.3% 0.145 321.434) }
.text-fuchsia-400 { color: oklch(74% 0.238 322.16) }
.text-fuchsia-500 { color: oklch(66.7% 0.295 322.15) }
.text-fuchsia-600 { color: oklch(59.1% 0.293 322.896) }
.text-fuchsia-700 { color: oklch(51.8% 0.253 323.949) }
.text-fuchsia-800 { color: oklch(45.2% 0.211 324.591) }
.text-fuchsia-900 { color: oklch(40.1% 0.17 325.612) }
.text-fuchsia-950 { color: oklch(29.3% 0.136 325.661) }
.text-pink-50 { color: oklch(97.1% 0.014 343.198) }
.text-pink-100 { color: oklch(94.8% 0.028 342.258) }
.text-pink-200 { color: oklch(89.9% 0.061 343.231) }
.text-pink-300 { color: oklch(82.3% 0.12 346.018) }
.text-pink-400 { color: oklch(71.8% 0.202 349.761) }
.text-pink-500 { color: oklch(65.6% 0.241 354.308) }
.text-pink-600 { color: oklch(59.2% 0.249 0.584) }
.text-pink-700 { color: oklch(52.5% 0.223 3.958) }
.text-pink-800 { color: oklch(45.9% 0.187 3.815) }
.text-pink-900 { color: oklch(40.8% 0.153 2.432) }
.text-pink-950 { color: oklch(28.4% 0.109 3.907) }
.text-rose-50 { color: oklch(96.9% 0.015 12.422) }
.text-rose-100 { color: oklch(94.1% 0.03 12.58) }
.text-rose-200 { color: oklch(89.2% 0.058 10.001) }
.text-rose-300 { color: oklch(81% 0.117 11.638) }
.text-rose-400 { color: oklch(71.2% 0.194 13.428) }
.text-rose-500 { color: oklch(64.5% 0.246 16.439) }
.text-rose-600 { color: oklch(58.6% 0.253 17.585) }
.text-rose-700 { color: oklch(51.4% 0.222 16.935) }
.text-rose-800 { color: oklch(45.5% 0.188 13.697) }
.text-rose-900 { color: oklch(41% 0.159 10.272) }
.text-rose-950 { color: oklch(27.1% 0.105 12.094) }
.text-slate-50 { color: oklch(98.4% 0.003 247.858) }
.text-slate-100 { color: oklch(96.8% 0.007 247.896) }
.text-slate-200 { color: oklch(92.9% 0.013 255.508) }
.text-slate-300 { color: oklch(86.9% 0.022 252.894) }
.text-slate-400 { color: oklch(70.4% 0.04 256.788) }
.text-slate-500 { color: oklch(55.4% 0.046 257.417) }
.text-slate-600 { color: oklch(44.6% 0.043 257.281) }
.text-slate-700 { color: oklch(37.2% 0.044 257.287) }
.text-slate-800 { color: oklch(27.9% 0.041 260.031) }
.text-slate-900 { color: oklch(20.8% 0.042 265.755) }
.text-slate-950 { color: oklch(12.9% 0.042 264.695) }
.text-gray-50 { color: oklch(98.5% 0.002 247.839) }
.text-gray-100 { color: oklch(96.7% 0.003 264.542) }
.text-gray-200 { color: oklch(92.8% 0.006 264.531) }
.text-gray-300 { color: oklch(87.2% 0.01 258.338) }
.text-gray-400 { color: oklch(70.7% 0.022 261.325) }
.text-gray-500 { color: oklch(55.1% 0.027 264.364) }
.text-gray-600 { color: oklch(44.6% 0.03 256.802) }
.text-gray-700 { color: oklch(37.3% 0.034 259.733) }
.text-gray-800 { color: oklch(27.8% 0.033 256.848) }
.text-gray-900 { color: oklch(21% 0.034 264.665) }
.text-gray-950 { color: oklch(13% 0.028 261.692) }
.text-zinc-50 { color: oklch(98.5% 0 0) }
.text-zinc-100 { color: oklch(96.7% 0.001 286.375) }
.text-zinc-200 { color: oklch(92% 0.004 286.32) }
.text-zinc-300 { color: oklch(87.1% 0.006 286.286) }
.text-zinc-400 { color: oklch(70.5% 0.015 286.067) }
.text-zinc-500 { color: oklch(55.2% 0.016 285.938) }
.text-zinc-600 { color: oklch(44.2% 0.017 285.786) }
.text-zinc-700 { color: oklch(37% 0.013 285.805) }
.text-zinc-800 { color: oklch(27.4% 0.006 286.033) }
.text-zinc-900 { color: oklch(21% 0.006 285.885) }
.text-zinc-950 { color: oklch(14.1% 0.005 285.823) }
.text-neutral-50 { color: oklch(98.5% 0 0) }
.text-neutral-100 { color: oklch(97% 0 0) }
.text-neutral-200 { color: oklch(92.2% 0 0) }
.text-neutral-300 { color: oklch(87% 0 0) }
.text-neutral-400 { color: oklch(70.8% 0 0) }
.text-neutral-500 { color: oklch(55.6% 0 0) }
.text-neutral-600 { color: oklch(43.9% 0 0) }
.text-neutral-700 { color: oklch(37.1% 0 0) }
.text-neutral-800 { color: oklch(26.9% 0 0) }
.text-neutral-900 { color: oklch(20.5% 0 0) }
.text-neutral-950 { color: oklch(14.5% 0 0) }
.text-stone-50 { color: oklch(98.5% 0.001 106.423) }
.text-stone-100 { color: oklch(97% 0.001 106.424) }
.text-stone-200 { color: oklch(92.3% 0.003 48.717) }
.text-stone-300 { color: oklch(86.9% 0.005 56.366) }
.text-stone-400 { color: oklch(70.9% 0.01 56.259) }
.text-stone-500 { color: oklch(55.3% 0.013 58.071) }
.text-stone-600 { color: oklch(44.4% 0.011 73.639) }
.text-stone-700 { color: oklch(37.4% 0.01 67.558) }
.text-stone-800 { color: oklch(26.8% 0.007 34.298) }
.text-stone-900 { color: oklch(21.6% 0.006 56.043) }
.text-stone-950 { color: oklch(14.7% 0.004 49.25) }

.hover\:bg-white:hover { background-color: white }

.min-w-36 { min-width: 9rem; /* 144px */ }
.min-w-\[200px\] { min-width: 200px; }
.min-w-\[300px\] { min-width: 300px; }
.min-w-\[350px\] { min-width: 350px; }
.min-w-\[400px\] { min-width: 400px; }
.min-w-\[500px\] { min-width: 500px; }
.min-h-32 { min-height: 8rem; /* 128px */ }
.min-h-\[250px\] { min-height: 250px; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[350px\] { min-height: 350px; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[500px\] { min-height: 500px; }

.grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; }
/* 2xl: variant missing from Unfold's compiled utility set (96rem = 1536px). */
@media (min-width: 96rem) {
    .\32 xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Axis gap utilities - Unfold's compiled set ships only the two-axis gap-N. */
.gap-x-1 { column-gap: 0.25rem; /* 4px */ }
.gap-x-2 { column-gap: 0.5rem; /* 8px */ }
.gap-x-3 { column-gap: 0.75rem; /* 12px */ }
.gap-x-4 { column-gap: 1rem; /* 16px */ }
.gap-x-6 { column-gap: 1.5rem; /* 24px */ }
.gap-x-8 { column-gap: 2rem; /* 32px */ }
.gap-y-1 { row-gap: 0.25rem; /* 4px */ }
.gap-y-2 { row-gap: 0.5rem; /* 8px */ }
.gap-y-3 { row-gap: 0.75rem; /* 12px */ }
.gap-y-4 { row-gap: 1rem; /* 16px */ }

.rounded-md { border-radius: 0.375rem; }

.hover\:text-blue-600:hover { color: #2563eb; }
/* The violet links of the billing card header and the Timeline cards
   (leaseversion/_card_header_link.html, _billing_card.html). */
.hover\:text-violet-800:hover { color: oklch(43.2% 0.232 292.759); }

/* dark: accent-text specificity backfill.
   Unfold's dark: variant (:where(.dark, .dark *)) sits in a layer of its
   bundle; the base `text-COLOR` beside it is our unlayered backfill, which
   beats every layered rule -> the dark shade never shows. Re-assert here under
   `.dark` (0,2,0) so the dark shade wins over our light one. Var where Unfold
   emits it; hardcoded oklch (copied from the base-utility backfill above) for
   colors Unfold purged.
   New accent `dark:text-*` pairs must be added here. base-* and primary-* are
   out of scope (tracked in the backlog). */
/* Bug A: var present (Unfold ships these colors). */
.dark .dark\:text-red-400 { color: var(--color-red-400); }
.dark .dark\:text-red-300 { color: var(--color-red-300); }
.dark .dark\:text-red-200 { color: var(--color-red-200); }
.dark .dark\:text-orange-400 { color: var(--color-orange-400); }
.dark .dark\:text-orange-200 { color: var(--color-orange-200); }
.dark .dark\:text-yellow-200 { color: var(--color-yellow-200); }
.dark .dark\:text-green-400 { color: var(--color-green-400); }
.dark .dark\:text-green-300 { color: var(--color-green-300); }
.dark .dark\:text-green-200 { color: var(--color-green-200); }
.dark .dark\:text-blue-400 { color: var(--color-blue-400); }
.dark .dark\:text-blue-200 { color: var(--color-blue-200); }
.dark .dark\:text-white { color: var(--color-white); }
/* Bug B: var purged; hardcode oklch copied from the .text-* backfill above. */
.dark .dark\:text-amber-200 { color: oklch(92.4% 0.12 95.746); }
.dark .dark\:text-amber-300 { color: oklch(87.9% 0.169 91.605); }
.dark .dark\:text-amber-400 { color: oklch(82.8% 0.189 84.429); }
.dark .dark\:text-amber-500 { color: oklch(76.9% 0.188 70.08); }
.dark .dark\:text-yellow-400 { color: oklch(85.2% 0.199 91.936); }
.dark .dark\:text-lime-400 { color: oklch(84.1% 0.238 128.85); }
.dark .dark\:text-emerald-400 { color: oklch(76.5% 0.177 163.223); }
.dark .dark\:text-teal-400 { color: oklch(77.7% 0.152 181.912); }
.dark .dark\:text-cyan-400 { color: oklch(78.9% 0.154 211.53); }
.dark .dark\:text-sky-300 { color: oklch(82.8% 0.111 230.318); }
.dark .dark\:text-sky-400 { color: oklch(74.6% 0.16 232.661); }
.dark .dark\:text-indigo-400 { color: oklch(67.3% 0.182 276.935); }
.dark .dark\:text-violet-300 { color: oklch(81.1% 0.111 293.571); }
.dark .dark\:text-violet-400 { color: oklch(70.2% 0.183 293.541); }
.dark .dark\:text-purple-400 { color: oklch(71.4% 0.203 305.504); }
.dark .dark\:text-fuchsia-400 { color: oklch(74% 0.238 322.16); }
.dark .dark\:text-pink-400 { color: oklch(71.8% 0.202 349.761); }
.dark .dark\:text-rose-400 { color: oklch(71.2% 0.194 13.428); }
.dark .dark\:text-slate-300 { color: oklch(86.9% 0.022 252.894); }
.dark .dark\:text-gray-100 { color: oklch(96.7% 0.003 264.542); }
.dark .dark\:text-gray-400 { color: oklch(70.7% 0.022 261.325); }
.dark .dark\:text-gray-500 { color: oklch(55.1% 0.027 264.364); }
/* Bug B hover variants (purged colors). */
.dark .dark\:hover\:text-violet-300:hover { color: oklch(81.1% 0.111 293.571); }
.dark .dark\:hover\:text-purple-300:hover { color: oklch(82.7% 0.119 306.383); }

/* Dark mode: fix primary hover text contrast — primary-600/500 are unreadable against dark backgrounds */
@media (hover: hover) {
  .dark .hover\:text-primary-600:hover,
  .dark .hover\:text-primary-500:hover {
    color: var(--color-primary-300);
  }
  .dark .group:hover .group-hover\:text-primary-600,
  .dark .group:hover .group-hover\:text-primary-500 {
    color: var(--color-primary-300);
  }
}
/* …and the active sidebar item, which Unfold's app_list.html colours
   primary-500 */
.dark #nav-sidebar-apps .active {
  color: var(--color-primary-300);
}
.w-\[100px\] { width: 100px; }
.flex-1 { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.min-w-full { min-width: 100%; }

ss::selection { background-color: transparent; }
.selection\:bg-transparent *::selection { background-color: transparent; }

.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Building detail page – floor diagram */
.building-diagram { max-width: 420px; }
.building-diagram__stack { width: 300px; }
.building-diagram__underground { position: relative; padding-bottom: 8rem; isolation: isolate; }
.building-diagram__underground::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background-color: #f5f5f5; background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 10px, rgba(0, 0, 0, 0.04) 10px, rgba(0, 0, 0, 0.04) 20px); z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 125px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 125px), transparent); }
.dark .building-diagram__underground::before { background-color: var(--color-base-800); background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 20px); }
.building-diagram__roof { width: 300px; height: 9px; margin: 0 auto; background-color: var(--color-base-300); border-radius: 2px 2px 0 0; }
.dark .building-diagram__roof { background-color: var(--color-base-600); }
.building-diagram__ground { position: relative; height: 4px; }
.building-diagram__ground::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background-color: var(--color-base-400); }
.dark .building-diagram__ground::before { background-color: var(--color-base-600); }
.building-diagram__floor { position: relative; }
.building-diagram__floor--foreign { background-color: white; background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(0, 0, 0, 0.035) 4px, rgba(0, 0, 0, 0.035) 8px); }
.dark .building-diagram__floor--foreign { background-color: var(--color-base-800); background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(255, 255, 255, 0.045) 4px, rgba(255, 255, 255, 0.045) 8px); }
.building-diagram__windows { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 0; }
.building-diagram__window { display: inline-block; width: 12px; height: 18px; background-color: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: 1px; }
.dark .building-diagram__window { background-color: var(--color-base-700); border-color: var(--color-base-600); }
.building-diagram__floor .building-diagram__label { position: relative; z-index: 1; display: inline-block; padding: 0 6px; border-radius: 3px; background-color: inherit; }
.building-diagram__foundation { width: 300px; height: 9px; margin: 0 auto; background-color: var(--color-base-300); border-radius: 0 0 2px 2px; }
.dark .building-diagram__foundation { background-color: var(--color-base-600); }
.building-diagram__ground-decor { position: absolute; bottom: 100%; display: flex; align-items: flex-end; pointer-events: none; margin-bottom: -3px; filter: grayscale(1); }
.building-diagram__ground-decor--left { right: calc(50% + 158px); }
.building-diagram__ground-decor--right { left: calc(50% + 158px); }
.building-diagram__ground-decor > * + * { margin-left: -30px; }
.building-diagram__ground-decor > *:last-child { opacity: 1; filter: contrast(0.4) brightness(1.7); }
.building-diagram__tree { line-height: 1; }
.building-diagram__tree--big { font-size: 100px; opacity: 0.4; }
.building-diagram__tree--small { font-size: 56px; opacity: 0.25; }
.floor-switcher { display: inline-flex; flex-direction: column; align-items: stretch; flex-shrink: 0; min-width: 55px; }
.floor-switcher__stack { display: flex; flex-direction: column; overflow: hidden; }
.floor-switcher__ground { position: relative; height: 4px; margin-left: -15px; margin-right: -15px; background-color: var(--color-base-400); }
.dark .floor-switcher__ground { background-color: var(--color-base-600); }
.floor-switcher__tile { display: block; padding: 6px 10px; text-align: center; font-weight: 600; font-size: 0.85rem; line-height: 1.2; border-bottom: 1px solid var(--color-base-200); color: var(--color-base-800); text-decoration: none; }
.dark .floor-switcher__tile { border-bottom-color: var(--color-base-700); color: var(--color-base-100); }
.floor-switcher__stack > .floor-switcher__tile:last-child { border-bottom: 0; }
a.floor-switcher__tile:hover { background-color: var(--color-primary-100); }
.dark a.floor-switcher__tile:hover { background-color: var(--color-primary-900); }
.floor-switcher__tile--current { background-color: var(--color-primary-100); cursor: default; }
.dark .floor-switcher__tile--current { background-color: var(--color-primary-900); }
.border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; }
.border-x { border-left-style: var(--tw-border-style); border-left-width: 1px; border-right-style: var(--tw-border-style); border-right-width: 1px; }
.border-x-2 { border-left-style: var(--tw-border-style); border-left-width: 2px; border-right-style: var(--tw-border-style); border-right-width: 2px; }
.border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; }

/* Segmented-control rendering for horizontal radio switchers
   (SegmentedRadioSelectWidget → rest_service/templates/unfold/widgets/segmented_radio*.html).
   Mirrors the admin's horizontal filter chrome (admin/filter.html): separated
   pills on a shared inset track, active = a raised neutral pill. Real radio
   inputs are visually hidden but focusable; the active state is the input's
   :checked, so it stays keyboard/AT accessible. The track is the hidden
   inputs' containing block: anchored further up they leave a box that
   scrolls sideways and widen the whole page. */
.segmented-radio {
    position: relative;
    display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.25rem; border-radius: 0.5rem;
    background-color: var(--color-base-100);
}
.dark .segmented-radio { background-color: rgba(255, 255, 255, 0.06); }
.segmented-radio__input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.segmented-radio__segment {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 0.625rem; border-radius: 0.375rem;
    font-size: 0.875rem; line-height: 1.25rem; font-weight: 500;
    white-space: nowrap; user-select: none; cursor: pointer;
    color: var(--color-base-600); background-color: transparent;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.segmented-radio__segment:hover { background-color: rgba(0, 0, 0, 0.06); }
.segmented-radio__input:checked + .segmented-radio__segment {
    background-color: #fff; color: var(--color-base-900);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
}
.segmented-radio__input:focus-visible + .segmented-radio__segment {
    outline: 2px solid var(--color-primary-500); outline-offset: 1px;
}
.dark .segmented-radio__segment { color: var(--color-base-300); }
.dark .segmented-radio__segment:hover { background-color: rgba(255, 255, 255, 0.06); }
.dark .segmented-radio__input:checked + .segmented-radio__segment {
    background-color: var(--color-base-700); color: var(--color-base-100);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}
@media (prefers-reduced-motion: reduce) { .segmented-radio__segment { transition: none; } }
/* Compact variant – a switch inside a row of a card's key-value table (the
   billing card's "Prices" row). Sized so the row stays as tall as its
   neighbours: 2 × 2px track + 16px segment = the 20px line of the row's text. */
.segmented-radio--compact { gap: 2px; padding: 2px; border-radius: 0.375rem; vertical-align: top; }
.segmented-radio--compact .segmented-radio__segment {
    padding: 0 0.5rem; border-radius: 0.25rem;
    font-size: 0.75rem; line-height: 1rem;
}
/* On paper the control cannot be operated: it reads as the plain name of the
   reading the page was printed in, set like the other values of the table. */
@media print {
    /* the doubled class outranks the dark theme's track colour */
    .segmented-radio.segmented-radio--compact { padding: 0; background-color: transparent; }
    .segmented-radio--compact .segmented-radio__input:not(:checked) + .segmented-radio__segment { display: none; }
    .segmented-radio--compact .segmented-radio__input:checked + .segmented-radio__segment {
        padding: 0; background-color: transparent; box-shadow: none; font: inherit;
    }
}
/* Bulk lease-document upload page (lease/document_bulk_upload.html): one
   grid row per selected file – the file, the metadata fields, the row
   actions; the header row shares the grid. Rows carry no border of their
   own: the one divider is the thin line above a row that starts a document
   (leader) after another row, and a document's attachment rows are tinted
   instead – a border per row doubled up with that line. An attachment row
   hides its field cells (the page's JS also disables them) and shows the
   note across their columns. A row that Detach carried below its former
   document flashes once: the keyframes name only the start colour, so the
   fade ends on whatever background the row really has. Bad-extension rows
   are tinted red, which must win over the attachment tint – keep those
   rules last. */
.bulk-upload-grid {
    display: grid;
    /* The last column is fixed at two icon buttons – the first row shows
       only one (nothing above it to attach to), and max-content would then
       shift its fields out of line with the other rows. */
    grid-template-columns: 1.25rem minmax(12rem, 1.4fr) minmax(10rem, 1fr) minmax(9rem, 1fr) 8.5rem 8.5rem 4.25rem;
    column-gap: 0.75rem;
    align-items: center;
}
.bulk-upload-row + .bulk-upload-row--leader { border-top: 1px solid var(--color-base-300); }
.dark .bulk-upload-row + .bulk-upload-row--leader { border-top-color: var(--color-base-700); }
/* The dark value is what Unfold's own zebra (dark:bg-white/[.02]) compiles to. */
.bulk-upload-row--attachment { background-color: var(--color-base-50); }
.dark .bulk-upload-row--attachment { background-color: color-mix(in oklab, var(--color-white) 2%, transparent); }
.bulk-upload-row--attachment > :nth-child(2) { padding-left: 1rem; }
.bulk-upload-note { grid-column: 3 / 7; }
/* SortableJS placeholder while a row is dragged (Alpine's x-sort.ghost keeps it visible). */
.bulk-upload-row.sortable-ghost { opacity: 0.4; }
@keyframes bulk-upload-row-moved { from { background-color: var(--bulk-upload-flash); } }
.bulk-upload-row--moved { --bulk-upload-flash: var(--color-primary-100); animation: bulk-upload-row-moved 1.2s ease-out; }
.dark .bulk-upload-row--moved { --bulk-upload-flash: var(--color-primary-900); }
@media (prefers-reduced-motion: reduce) { .bulk-upload-row--moved { animation: none; } }
.bulk-upload-row--invalid { background-color: var(--color-red-50); }
.dark .bulk-upload-row--invalid { background-color: color-mix(in oklab, var(--color-red-900) 25%, transparent); }