/*
 * 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; }
.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 > :first-child { width: 100%; }
.tx-input-wrap__button { position: absolute; right: 0.25rem; }
.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); }
.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-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; }

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