/* 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
    );
}
/* A draft the Timeline's filter hides, standing under its paper
   (lease/document_timeline.html, col.version_hidden): the card whole but
   dimmed, full while the pointer is over it, a link in it has the focus
   or a link lands on it – the fade in slow enough to notice, the fade back
   short. The three values to tune live here. */
.timeline-version-card--dimmed {
    --dimmed-card-opacity: .2;
    --dimmed-card-fade-in: .4s;
    --dimmed-card-fade-out: .15s;
    opacity: var(--dimmed-card-opacity);
    transition: opacity var(--dimmed-card-fade-out) ease-in;
}
.timeline-version-card--dimmed:is(:hover, :focus-within, :target) {
    opacity: 1;
    transition: opacity var(--dimmed-card-fade-in) ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .timeline-version-card--dimmed,
    .timeline-version-card--dimmed:is(:hover, :focus-within, :target) { transition: none; }
}
/* 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); it sticks to the top with the other banners (see
   .instance-banners below).
   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 {
    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. */
.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 */
}

/* The banners stay at the top of long pages. From Unfold's lg breakpoint up
   they stick as one block, the .instance-banners around them: stuck one by
   one, they would all stick at the same top and the later would cover the
   earlier. Below it the block dissolves and each sticks on its own, but for
   a --static one – the connection survey's strip, which wraps to some
   180 px on a phone and would take half its screen – which scrolls away.
   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). */
.instance-banners {
    display: contents;
}
.instance-warning-banner:not(.instance-warning-banner--static) {
    position: sticky;
    top: 0;
    z-index: 50;
}
@media (min-width: 1024px) {
    .instance-banners {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .instance-warning-banner:not(.instance-warning-banner--static) {
        position: static;
    }
}

/* The survey strip's sentence whose tooltip holds the address: only the
   cursor tells of the tooltip – the address is for support, and the staff
   the strip asks need not notice it. */
.instance-warning-banner__hint {
    cursor: help;
}

/* 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); }
.h-\[calc\(100vh-255px\)\] { height: calc(100vh - 255px); }

/* 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); }