/*
 * Taxio UI – small layout layer on top of BlazorBlueprint.
 * BlazorBlueprint ships a prebuilt, `bb:`-prefixed Tailwind sheet, so our own layout helpers live here
 * (no Tailwind build needed). Colors always come from the BlazorBlueprint theme variables.
 */

/* ---------- Layout helpers ---------- */
.tx-stack { display: flex; flex-direction: column; gap: var(--tx-gap, 0.75rem); min-width: 0; }
.tx-row { display: flex; flex-direction: row; align-items: center; gap: var(--tx-gap, 0.75rem); min-width: 0; }
.tx-row--wrap { flex-wrap: wrap; }
.tx-row--end { justify-content: flex-end; }
.tx-row--between { justify-content: space-between; }
.tx-row--start { align-items: flex-start; }
.tx-gap-0 { --tx-gap: 0; }
.tx-gap-1 { --tx-gap: 0.25rem; }
.tx-gap-2 { --tx-gap: 0.5rem; }
.tx-gap-3 { --tx-gap: 0.75rem; }
.tx-gap-4 { --tx-gap: 1rem; }
.tx-gap-6 { --tx-gap: 1.5rem; }
.tx-spacer { flex: 1 1 auto; }
.tx-grow { flex: 1 1 0; min-width: 0; }
.tx-full { width: 100%; }
.tx-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tx-mt-2 { margin-top: 0.5rem; } .tx-mt-4 { margin-top: 1rem; } .tx-mb-2 { margin-bottom: 0.5rem; } .tx-mb-4 { margin-bottom: 1rem; }
.tx-p-4 { padding: 1rem; } .tx-p-6 { padding: 1.5rem; }

/* Responsive grid: --tx-cols columns on wide screens, one column on phones. */
.tx-grid { display: grid; grid-template-columns: 1fr; gap: var(--tx-gap, 1rem); }
@media (min-width: 640px) {
    .tx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .tx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) { .tx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Typography ---------- */
.tx-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tx-subtitle { font-size: 1.125rem; font-weight: 600; }
.tx-caption { font-size: 0.8125rem; }
.tx-muted { color: var(--muted-foreground); }
.tx-strong { font-weight: 600; }
.tx-text-primary { color: var(--primary); }
.tx-text-info { color: oklch(0.55 0.15 245); }
.tx-text-success { color: oklch(0.58 0.15 150); }
.tx-text-warning { color: oklch(0.65 0.16 65); }
.tx-text-error { color: var(--destructive); }
.dark .tx-text-info { color: oklch(0.75 0.12 245); }
.dark .tx-text-success { color: oklch(0.78 0.15 150); }
.dark .tx-text-warning { color: oklch(0.82 0.15 75); }

/* ---------- Page container (responsive margins) ---------- */
.tx-page { margin: 0.5rem; }
@media (min-width: 640px) { .tx-page { margin: 1.5rem; } }
@media (min-width: 1280px) { .tx-page { margin: 2rem auto; max-width: 1280px; padding: 0 2rem; } }

/* ---------- App shell ---------- */
.tx-shell { display: flex; min-height: 100vh; background: var(--background); color: var(--foreground); }
.tx-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tx-shell__header { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); background: var(--card); position: sticky; top: 0; z-index: 20; }
.tx-shell__content { flex: 1 1 auto; padding-bottom: 5rem; }
/* The sidebar stays in view on long pages (BlazorBlueprint makes it sticky but as tall as the page); its menu scrolls itself. */
.tx-sidebar { height: 100vh; height: 100dvh; min-height: 0; align-self: flex-start; }
.tx-logo { height: 32px; width: auto; }
.tx-logo-on-dark { display: none; }
.dark .tx-logo-on-dark { display: inline; }
.dark .tx-logo-on-light { display: none; }

/* ---------- Floating action button ---------- */
.tx-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30; height: 3.5rem; width: 3.5rem; border-radius: 9999px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); }

/* ---------- Forms ---------- */
.tx-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.tx-form-grid > .tx-form-item { grid-column: span 12; min-width: 0; }
@media (min-width: 640px) { .tx-form-grid > .tx-form-item { grid-column: span var(--tx-span, 6); } }
.tx-form-grid > .tx-form-item--full { grid-column: span 12; }
.tx-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.tx-input-wrap > :not(.tx-input-wrap__icon):not(.tx-input-wrap__button) { width: 100%; }
.tx-input-wrap__button { position: absolute; right: 0.25rem; }
.tx-input-wrap__icon { position: absolute; left: 0.75rem; z-index: 1; color: var(--muted-foreground); pointer-events: none; }
.tx-input-wrap:focus-within .tx-input-wrap__icon { color: var(--foreground); }
.tx-phone-input { display: flex; gap: 0.5rem; width: 100%; }
.tx-phone-input__code { flex: 0 0 7.5rem; }
.tx-phone-input > :last-child { flex: 1 1 auto; min-width: 0; }
.tx-readonly { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 40%, transparent); min-height: 3.25rem; }
.tx-readonly__label { font-size: 0.75rem; color: var(--muted-foreground); }
.tx-readonly__value { font-size: 0.9375rem; word-break: break-word; }
.tx-section-header { font-weight: 600; margin: 0.5rem 0 0.25rem; }

/* ---------- Tables ---------- */
.tx-table-toolbar { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
/* Phones: the toolbar buttons go under the table heading instead of squeezing it. */
@media (max-width: 639.98px) { .tx-table-toolbar .tx-row.tx-full { flex-wrap: wrap; } }
.tx-table-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.125rem; }
.tx-table-wrap { overflow-x: auto; }
.tx-row-clickable { cursor: pointer; }

/* ---------- Loading overlay ---------- */
.tx-loading-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: color-mix(in oklch, var(--background) 60%, transparent); backdrop-filter: blur(1px); }

/* ---------- Navigation ---------- */
.tx-nav-note { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------- Small utilities used by the shared components ---------- */
.tx-icon-sm { width: 1rem; height: 1rem; }
.tx-icon-md { width: 1.25rem; height: 1.25rem; }
.tx-icon-lg { width: 1.5rem; height: 1.5rem; }
.tx-icon-xl { width: 2rem; height: 2rem; }
.tx-pr-10 { padding-right: 2.5rem; }
.tx-pl-10 { padding-left: 2.5rem; }
.tx-pt-6 { padding-top: 1.5rem; }
.tx-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.tx-p-3 { padding: 0.75rem; }
.tx-box { border: 1px solid var(--border); border-radius: var(--radius); }
.tx-list-item { display: block; width: 100%; text-align: left; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; cursor: pointer; }
.tx-list-item:hover { background: var(--accent); color: var(--accent-foreground); }
.tx-mx-auto { margin-left: auto; margin-right: auto; }
.tx-text-center { text-align: center; }

/* Plain data table used for small read-only lists (dashboards, nested lists) */
.tx-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tx-table th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tx-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tx-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-kpi { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.tx-kpi:hover { box-shadow: 0 6px 18px rgb(0 0 0 / 0.12); transform: translateY(-1px); }
.tx-kpi__value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.tx-kpi__icon { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: 9999px; background: color-mix(in oklch, var(--primary) 15%, transparent); color: var(--primary-foreground); }
.tx-kpi__icon > * { color: oklch(0.45 0.1 80); }
.tx-py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.tx-restricted { padding: 0.75rem; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 50%, transparent); height: 100%; }
@media (min-width: 1024px) { .tx-grid--7-5 { grid-template-columns: 7fr 5fr; } }
@media (min-width: 1024px) { .tx-grid--1-3 { grid-template-columns: 1fr 3fr; } }

/* Dialogs taller than the viewport scroll instead of being cut off. */
div[role="dialog"] { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* Icon and text of a dropdown menu item (profile menu, row action menus) apart. */
[role="menuitem"] { gap: 0.5rem; }

/* Icons inside tab triggers */
button[role="tab"] svg { margin-right: 0.4rem; flex-shrink: 0; }
.tx-min-w-0 { min-width: 0; max-width: 100%; }
div[role="tablist"] { max-width: 100%; overflow-x: auto; justify-content: flex-start; }
button[role="tab"] { flex-shrink: 0; }

/* ---------- Chips (statuses) ----------
   A chip never wraps, never shrinks and keeps its text centred, also in a narrow table column. */
.tx-chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; white-space: nowrap; flex-shrink: 0; text-align: center; line-height: 1.25; }
.tx-chip__icon { width: 0.8125rem; height: 0.8125rem; }
.tx-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.tx-chips--nowrap { flex-wrap: nowrap; }
.tx-nowrap { white-space: nowrap; }
.tx-cell-lines { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }

/* ---------- Help ("?" next to a label) ---------- */
.tx-help { display: inline-flex; vertical-align: middle; margin-left: 0.125rem; }
.tx-help__button.tx-help__button { width: 1.375rem; height: 1.375rem; min-width: 1.375rem; padding: 0; border-radius: 999px; color: var(--muted-foreground); }
.tx-help__button:hover { color: var(--foreground); }
.tx-help__icon { width: 0.9375rem; height: 0.9375rem; }
.tx-help__content { max-width: 18rem; font-size: 0.8125rem; line-height: 1.45; white-space: pre-line; }
.tx-field-label { display: inline-flex; align-items: center; gap: 0.125rem; }
.tx-field-help { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.4; }

/* ---------- Empty states ---------- */
.tx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2rem 1rem; }
.tx-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px; background: color-mix(in oklch, var(--muted) 70%, transparent); color: var(--muted-foreground); }
.tx-empty__title { font-weight: 600; font-size: 1rem; }
.tx-empty__message { margin: 0; max-width: 32rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.5; }
.tx-empty__actions { margin-top: 0.5rem; }

/* ---------- Section intro (one sentence under a heading) ---------- */
.tx-intro { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.5; max-width: 60rem; }

/* ---------- Rating stars ---------- */
.tx-stars { display: inline-flex; align-items: center; gap: 0.0625rem; white-space: nowrap; font-size: 1rem; line-height: 1; }
.tx-stars__on { color: #f5b301; }
.tx-stars__off { color: color-mix(in oklch, var(--muted-foreground) 35%, transparent); }
.tx-stars__number { margin-left: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--foreground); }
.tx-stars--sm { font-size: 0.8125rem; }

/* ---------- Key / value details ---------- */
.tx-detail-field { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.tx-detail-field__label { font-size: 0.8125rem; color: var(--muted-foreground); }
.tx-detail-field__value { overflow-wrap: anywhere; }
.tx-detail-field__secondary { font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tx-quote { margin: 0; padding: 0.5rem 0.75rem; border-left: 3px solid color-mix(in oklch, var(--primary) 70%, transparent); background: color-mix(in oklch, var(--muted) 45%, transparent); border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.9375rem; line-height: 1.5; }
.tx-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tx-timeline__item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.tx-timeline__item:last-child { border-bottom: none; }
.tx-timeline__time { font-size: 0.8125rem; color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) { .tx-timeline__item { grid-template-columns: 1fr; gap: 0.125rem; } }

/* ---------- Usage of a limit ("3 / 20") ---------- */
.tx-usage { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.tx-usage__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.tx-usage__label { font-size: 0.875rem; color: var(--muted-foreground); }
.tx-usage__value { font-size: 1.125rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-usage__value .tx-muted { font-size: 0.875rem; font-weight: 500; }
.tx-usage__track { height: 0.375rem; border-radius: 999px; background: color-mix(in oklch, var(--muted-foreground) 18%, transparent); overflow: hidden; }
.tx-usage__bar { height: 100%; border-radius: inherit; background: var(--primary); }
.tx-usage--full .tx-usage__bar { background: oklch(0.7 0.16 60); }
.tx-usage__hint { font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------- Choice cards (radio options as cards) ---------- */
.tx-choices { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .tx-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tx-choice { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.tx-choice:hover:not(.tx-choice--locked) { border-color: color-mix(in oklch, var(--primary) 60%, var(--border)); }
.tx-choice:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.tx-choice--selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in oklch, var(--primary) 6%, var(--card)); }
.tx-choice--locked { cursor: not-allowed; background: color-mix(in oklch, var(--muted) 35%, var(--card)); }
.tx-choice--locked .tx-choice__title, .tx-choice--locked .tx-choice__text { color: var(--muted-foreground); }
.tx-choice__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.tx-choice__radio { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 999px; border: 2px solid var(--muted-foreground); }
.tx-choice--selected .tx-choice__radio { border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--card); background: var(--primary); }
.tx-choice__title { font-weight: 600; }
.tx-choice__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted-foreground); }
.tx-choice__body { padding-top: 0.25rem; cursor: default; }

/* ---------- Checklist (first steps) ---------- */
.tx-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tx-checklist__item { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.tx-checklist__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 2px solid var(--border); color: transparent; }
.tx-checklist__item--done .tx-checklist__mark { border-color: transparent; background: oklch(0.62 0.15 150); color: #fff; }
.tx-checklist__item--done .tx-checklist__text { color: var(--muted-foreground); }
.tx-checklist__text { flex: 1 1 14rem; min-width: 0; font-size: 0.9375rem; }
.tx-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.tx-feature-list li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tx-feature-list__yes { color: oklch(0.58 0.15 150); }
.dark .tx-feature-list__yes { color: oklch(0.78 0.15 150); }
.tx-feature-list__no { color: var(--muted-foreground); }
.tx-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--primary) 75%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; margin-left: 0.25rem; }
.tx-link:hover { text-decoration-color: var(--primary); }
.tx-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Ratings ---------- */
.tx-ratings { display: flex; flex-direction: column; }
.tx-rating { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; padding: 0.875rem 0; border-bottom: 1px solid var(--border); }
.tx-rating:last-child { border-bottom: none; }
.tx-rating__body { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.tx-rating__score { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.tx-rating__score--low { color: var(--destructive); }
.tx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: color-mix(in oklch, var(--primary) 22%, transparent); color: var(--foreground); font-size: 0.8125rem; font-weight: 700; flex: none; }
.tx-link--plain { margin-left: 0; font-weight: 500; }
.tx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.tx-filters > .tx-filter { flex: 0 1 13rem; min-width: 10rem; }

/* ---------- Sidebar counters ---------- */
.tx-nav-badge { font-variant-numeric: tabular-nums; }
.tx-nav-badge--attention { background: color-mix(in oklch, var(--primary) 85%, transparent); color: #071a3d; border-radius: 999px; padding: 0 0.4rem; min-width: 1.25rem; justify-content: center; font-weight: 700; }

/* ---------- Company switcher (header) ---------- */
.tx-company-switch { display: inline-flex; align-items: center; gap: 0.5rem; max-width: min(22rem, 55vw); min-width: 0; }
.tx-company-switch__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.tx-company-switch--static { padding: 0 0.5rem; font-size: 0.875rem; }
@media (max-width: 479.98px) { .tx-company-switch--static { display: none; } }

/* ---------- "Treba vyriešiť" (dashboard attention items) ---------- */
.tx-attention { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.tx-attention__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; font-weight: 800; font-size: 0.875rem; }
.tx-attention--warn { border-color: color-mix(in oklch, oklch(0.75 0.16 65) 45%, var(--border)); background: color-mix(in oklch, oklch(0.85 0.12 75) 14%, transparent); }
.tx-attention--warn .tx-attention__icon { background: oklch(0.8 0.15 75); color: #3b2500; }
.tx-attention--info .tx-attention__icon { background: color-mix(in oklch, oklch(0.6 0.15 245) 20%, transparent); color: oklch(0.45 0.15 245); }
.dark .tx-attention--info .tx-attention__icon { color: oklch(0.8 0.12 245); }
.tx-attention--ok .tx-attention__icon { background: color-mix(in oklch, oklch(0.62 0.15 150) 20%, transparent); color: oklch(0.5 0.15 150); }

/* KPI grids keep two columns on phones (the dashboard numbers stay side by side). */
@media (max-width: 639.98px) {
    .tx-kpis, .tx-grid.tx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .tx-kpis .tx-kpi__value, .tx-grid--4 .tx-kpi__value { font-size: 1.5rem; }
}

/* Small read-only tables become cards on phones: each cell on its own line with its column name. */
@media (max-width: 639.98px) {
    .tx-table--cards thead { display: none; }
    .tx-table--cards, .tx-table--cards tbody, .tx-table--cards tr, .tx-table--cards td { display: block; width: 100%; }
    .tx-table--cards tr { padding: 0.625rem 0; border-bottom: 1px solid var(--border); }
    .tx-table--cards tbody tr:last-child { border-bottom: none; }
    .tx-table--cards td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.25rem; border: 0; text-align: right; }
    .tx-table--cards td::before { content: attr(data-label); color: var(--muted-foreground); font-size: 0.8125rem; text-align: left; flex: none; }
}

/* Data tables (GenericTableComponent) become card rows on phones instead of scrolling sideways. */
@media (max-width: 639.98px) {
    .tx-table-wrap--cards { overflow-x: visible; }
    .tx-table-wrap--cards table, .tx-table-wrap--cards tbody, .tx-table-wrap--cards tr { display: block; width: 100%; }
    .tx-table-wrap--cards thead { display: none; }
    .tx-table-wrap--cards tbody tr { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
    .tx-table-wrap--cards tbody td { display: block; padding: 0.1875rem 0; border: 0; }
    .tx-table-wrap--cards td:empty { display: none; }
    .tx-table-wrap--cards .tx-cell { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; min-height: 1.75rem; }
    .tx-table-wrap--cards .tx-cell::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--muted-foreground); font-size: 0.8125rem; text-align: left; }
    .tx-table-wrap--cards .tx-cell > * { min-width: 0; }
    .tx-table-wrap--cards .tx-table-actions { justify-content: flex-end; padding-top: 0.25rem; }
}

/* Version in the sidebar footer and on the sign-in page */
.tx-version {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Sign-in pages (AuthLayout of the console and of the simulator) ----------
   Phones: a compact navy header (logo + headline) with the form on a sheet below it.
   From 1024px: the navy brand panel on the left, the form card on the right. */
.tx-auth {
    --tx-auth-navy: #071a3d;
    --tx-auth-yellow: #ffc107;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--background);
    color: var(--foreground);
}

.tx-auth__brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1rem 2.75rem;
    color: #fff;
    background:
        radial-gradient(520px 320px at 0% 0%, rgb(255 193 7 / 0.16), transparent 65%),
        linear-gradient(160deg, #0d2b5e 0%, var(--tx-auth-navy) 55%, #041026 100%);
}
.dark .tx-auth__brand {
    background:
        radial-gradient(520px 320px at 0% 0%, rgb(255 193 7 / 0.12), transparent 65%),
        linear-gradient(160deg, #0a2350 0%, #061633 55%, #030c1f 100%);
}

.tx-auth__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(115deg, transparent 15%, #000 75%);
    mask-image: linear-gradient(115deg, transparent 15%, #000 75%);
}
.tx-auth__streets path { fill: none; stroke: rgb(255 255 255 / 0.06); stroke-width: 16; stroke-linecap: round; }
.tx-auth__route { fill: none; stroke: var(--tx-auth-yellow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 14; opacity: 0.7; }
.tx-auth__stop { fill: #fff; stroke: rgb(255 255 255 / 0.25); stroke-width: 10; }
.tx-auth__stop--end { fill: var(--tx-auth-yellow); stroke: rgb(255 193 7 / 0.25); stroke-width: 14; }

.tx-auth__logo { display: inline-flex; align-self: flex-start; border-radius: 0.5rem; }
.tx-auth__logo img { display: block; height: 32px; width: auto; }

.tx-auth__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    margin: 0;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgb(255 193 7 / 0.35);
    border-radius: 999px;
    background: rgb(255 193 7 / 0.12);
    color: var(--tx-auth-yellow);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tx-auth__pitch { display: flex; flex-direction: column; }
.tx-auth__headline { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.tx-auth__lead { margin: 1rem 0 0; max-width: 42ch; color: rgb(226 232 240 / 0.8); font-size: 1.0625rem; line-height: 1.55; }

.tx-auth__benefits { display: flex; flex-direction: column; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none; max-width: 30rem; }
.tx-auth__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 0.875rem;
    background: rgb(255 255 255 / 0.04);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgb(203 213 225 / 0.9);
    font-size: 0.9rem;
    line-height: 1.45;
}
.tx-auth__benefits strong { display: block; margin-bottom: 0.125rem; color: #fff; font-size: 0.975rem; font-weight: 600; }
.tx-auth__benefit-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--tx-auth-yellow);
    color: var(--tx-auth-navy);
    box-shadow: 0 6px 16px -6px rgb(255 193 7 / 0.6);
}
.tx-auth__tagline { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.1); color: rgb(203 213 225 / 0.65); font-size: 0.8125rem; }

/* phones and tablets: only the logo and the headline in the header */
@media (max-width: 1023.98px) {
    .tx-auth__eyebrow, .tx-auth__lead, .tx-auth__benefits, .tx-auth__tagline { display: none; }
}

.tx-auth__main {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-top: -1.5rem;
    padding: 0 1rem;
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--background);
}

.tx-auth__toolbar { display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem; padding-top: 0.5rem; }
.tx-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.25rem;
    border-radius: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.tx-auth__back:hover { color: var(--foreground); }
.tx-auth__back:hover svg { transform: translateX(-2px); }
.tx-auth__back svg { transition: transform 0.15s ease; }

.tx-auth__langs { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 999px; }
.tx-auth__lang {
    min-width: 2.5rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted-foreground);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.tx-auth__lang:hover { color: var(--foreground); }
.tx-auth__lang--on { background: var(--muted); color: var(--foreground); }

.tx-auth__center { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 1rem 0 2rem; }
.tx-auth__card { width: 100%; max-width: 26rem; margin: 0 auto; }

.tx-auth__heading h1 { margin: 0; font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.tx-auth__heading p, .tx-auth__done p { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.55; }
.tx-auth__heading-icon, .tx-auth__done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    background: color-mix(in oklch, var(--primary) 18%, transparent);
    color: oklch(0.45 0.1 75);
}
.dark .tx-auth__heading-icon, .dark .tx-auth__done-icon { color: var(--primary); }
.tx-auth__done { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 1.75rem; }
.tx-auth__done h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.tx-auth__done-icon { width: 3.5rem; height: 3.5rem; border-radius: 999px; }
.tx-auth__done-icon--warn { background: color-mix(in oklch, var(--destructive) 14%, transparent); color: var(--destructive); }
.dark .tx-auth__done-icon--warn { color: var(--destructive); }

.tx-auth__alert { margin-top: 1.25rem; }
.tx-auth__form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.tx-auth__form .tx-form-grid { gap: 1.125rem; }
/* 44px touch targets; 16px text so phones do not zoom into the field */
.tx-auth__form .tx-input-wrap > input { height: 2.75rem; font-size: 1rem; border-radius: 0.625rem; }
.tx-auth__form .tx-input-wrap__button { right: 0.375rem; width: 2.25rem; height: 2.25rem; }
.tx-auth__row { display: flex; justify-content: flex-end; margin-top: -0.25rem; }

.tx-auth__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.25rem;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--primary) 75%, transparent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.tx-auth__link:hover { text-decoration-color: var(--primary); }

.tx-auth__submit { width: 100%; height: 2.875rem; gap: 0.5rem; border-radius: 0.625rem; font-size: 1rem; font-weight: 600; }
.tx-auth__submit:not(:disabled):hover svg { transform: translateX(2px); }
.tx-auth__submit svg { transition: transform 0.15s ease; }
.tx-auth__form .tx-auth__submit { margin-top: 0.25rem; box-shadow: 0 10px 24px -12px color-mix(in oklch, var(--primary) 80%, transparent); }
.tx-auth__aside { display: flex; justify-content: center; margin: 1.5rem 0 0; }

.tx-auth__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.75rem;
}
.tx-auth__footer .tx-version { padding: 0; }
.tx-auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }
.tx-auth__links a { color: inherit; text-decoration: none; padding: 0.25rem 0; border-radius: 0.25rem; }
.tx-auth__links a:hover { color: var(--foreground); text-decoration: underline; }

.tx-auth a:focus-visible, .tx-auth__lang:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (min-width: 640px) {
    .tx-auth__brand { padding: 1.5rem 2rem 3rem; }
    .tx-auth__main { padding: 0 2rem; }
    .tx-auth__center { justify-content: center; }
    .tx-auth__headline { font-size: 1.625rem; }
    .tx-auth__card {
        max-width: 28rem;
        padding: 2.25rem 2rem;
        border: 1px solid var(--border);
        border-radius: 1.25rem;
        background: var(--card);
        box-shadow: 0 24px 60px -28px rgb(7 26 61 / 0.35);
    }
    .dark .tx-auth__card { background: color-mix(in oklch, var(--muted) 22%, var(--card)); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7); }
    .tx-auth__footer { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
    .tx-auth { display: grid; grid-template-columns: minmax(26rem, 44%) minmax(0, 1fr); }
    .tx-auth__brand {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        gap: 2rem;
        padding: 2.5rem 3rem;
    }
    .dark .tx-auth__brand { border-right: 1px solid rgb(255 255 255 / 0.06); }
    .tx-auth__logo img { height: 44px; }
    .tx-auth__pitch { flex: 1 1 auto; justify-content: center; }
    .tx-auth__headline { margin-top: 1rem; max-width: 15ch; font-size: clamp(2.125rem, 3vw, 2.875rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
    .tx-auth__main {
        margin-top: 0;
        padding: 0 2.5rem;
        border-radius: 0;
        background:
            radial-gradient(640px 320px at 100% 0%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 70%),
            var(--background);
    }
    .tx-auth__toolbar { min-height: 4.5rem; }
}

@media (min-width: 1024px) and (max-height: 720px) {
    .tx-auth__lead { display: none; }
    .tx-auth__benefits { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tx-auth__back svg, .tx-auth__submit svg { transition: none; }
}