/* Kit ui do Trilha — componentes. Atualizado por `trilha ui`; o tema fica em ui.theme.css.
   Consome só as variáveis do tema; classes têm prefixo ui-. */
:root {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color-scheme: light;
}
.dark { color-scheme: dark; }

/* base */
.ui-body { margin: 0; background: var(--background); color: var(--foreground); font: 14px/1.5 var(--ui-font); -webkit-font-smoothing: antialiased; }
.ui-body *, .ui-body *::before, .ui-body *::after { box-sizing: border-box; }
.ui-body a { color: inherit; }
.ui-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.ui-stack { display: flex; flex-direction: column; gap: 1rem; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ui-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.ui-muted { color: var(--muted-foreground); }
.ui-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ui-h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 .5rem; }
.ui-h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; margin: 0 0 .5rem; }
.ui-h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .25rem; }
.ui-lead { font-size: 1.125rem; color: var(--muted-foreground); margin: 0; }
.ui-code { font: .875em var(--ui-mono); background: var(--muted); padding: .15em .35em; border-radius: var(--radius-sm); }
.ui-icon { width: 1rem; height: 1rem; flex: none; }
.ui-focus:focus-visible, .ui-btn:focus-visible, .ui-input:focus-visible, .ui-textarea:focus-visible, .ui-select:focus-visible,
.ui-checkbox:focus-visible, .ui-switch:focus-visible, .ui-tab:focus-visible, .ui-nav a:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}

/* button */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); font: inherit; font-weight: 500; font-size: .875rem;
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s, opacity .15s; box-shadow: var(--ui-shadow); }
.ui-btn:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ui-btn .ui-icon { width: 1rem; height: 1rem; }
.ui-btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ui-btn-secondary:hover { background: color-mix(in oklch, var(--secondary) 80%, transparent); }
.ui-btn-outline { background: var(--background); color: var(--foreground); border-color: var(--input); }
.ui-btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.ui-btn-ghost { background: transparent; color: var(--foreground); box-shadow: none; }
.ui-btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.ui-btn-destructive { background: var(--destructive); color: #fff; }
.ui-btn-destructive:hover { background: color-mix(in oklch, var(--destructive) 90%, transparent); }
.ui-btn-link { background: transparent; color: var(--primary); box-shadow: none; padding: 0; height: auto; text-decoration: underline; text-underline-offset: 4px; }
.ui-btn-link:hover { background: transparent; }
.ui-btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; border-radius: var(--radius-sm); }
.ui-btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.ui-btn-icon { width: 2.25rem; padding: 0; }
.ui-btn-icon.ui-btn-sm { width: 2rem; }

/* card */
.ui-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--ui-shadow); display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0; }
.ui-card-header { display: grid; gap: .375rem; padding: 0 1.5rem; }
.ui-card-title { font-weight: 600; line-height: 1.2; margin: 0; }
.ui-card-description { color: var(--muted-foreground); font-size: .875rem; margin: 0; }
.ui-card-content { padding: 0 1.5rem; }
.ui-card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.5rem; }

/* forms */
.ui-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; line-height: 1; }
.ui-input, .ui-textarea, .ui-select { display: block; width: 100%; min-height: 2.25rem; padding: .375rem .75rem; border: 1px solid var(--input); border-radius: var(--radius-md);
  background: transparent; color: var(--foreground); font: inherit; font-size: .875rem; box-shadow: var(--ui-shadow); transition: border-color .15s, box-shadow .15s; }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--muted-foreground); }
.ui-input:focus-visible, .ui-textarea:focus-visible, .ui-select:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); }
.ui-input:disabled, .ui-textarea:disabled, .ui-select:disabled { opacity: .5; cursor: not-allowed; }
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"], .ui-select[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent); }
.ui-textarea { min-height: 4rem; resize: vertical; }
.ui-select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; }
.ui-field { display: grid; gap: .5rem; }
.ui-field-help { font-size: .8125rem; color: var(--muted-foreground); margin: 0; }
[aria-busy="true"] { opacity: .6; transition: opacity .12s ease; }
[aria-busy="true"] * { cursor: progress; }
.ui-field-error { font-size: .8125rem; color: var(--destructive); margin: 0; }
.ui-field[hidden] { display: none; }
.ui-checkbox, .ui-radio { appearance: none; width: 1rem; height: 1rem; flex: none; border: 1px solid var(--input); border-radius: 4px; background: transparent; cursor: pointer; display: inline-grid; place-content: center; box-shadow: var(--ui-shadow); vertical-align: middle; }
.ui-radio { border-radius: 50%; }
.ui-checkbox:checked, .ui-radio:checked { background: var(--primary); border-color: var(--primary); }
.ui-checkbox:checked::before { content: ""; width: .625rem; height: .625rem; background: var(--primary-foreground); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.ui-radio:checked::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary-foreground); }
.ui-switch { appearance: none; width: 2rem; height: 1.15rem; flex: none; border-radius: 999px; background: var(--input); position: relative; cursor: pointer; transition: background .15s; vertical-align: middle; border: 0; }
.ui-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.15rem - 4px); height: calc(1.15rem - 4px); border-radius: 50%; background: var(--background); transition: transform .15s; box-shadow: var(--ui-shadow); }
.ui-switch:checked { background: var(--primary); }
.ui-switch:checked::before { transform: translateX(calc(2rem - 1.15rem)); background: var(--primary-foreground); }
.ui-check-row { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }

/* badge, alert */
.ui-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: var(--radius-md); border: 1px solid transparent; padding: .125rem .5rem; font-size: .75rem; font-weight: 500; line-height: 1.25; white-space: nowrap; background: var(--primary); color: var(--primary-foreground); }
.ui-badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ui-badge-outline { background: transparent; color: var(--foreground); border-color: var(--border); }
.ui-badge-destructive { background: var(--destructive); color: #fff; }
.ui-alert { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; width: 100%; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--card-foreground); font-size: .875rem; }
.ui-alert .ui-icon { grid-row: span 2; margin-top: .125rem; }
.ui-alert-title { font-weight: 500; margin: 0; }
.ui-alert-description { color: var(--muted-foreground); margin: 0; grid-column: 2; }
.ui-alert-destructive { color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 50%, transparent); }
.ui-alert-destructive .ui-alert-description { color: color-mix(in oklch, var(--destructive) 90%, var(--foreground)); }

/* table */
.ui-table-wrap { width: 100%; overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; font-size: .875rem; caption-side: bottom; }
.ui-table caption { color: var(--muted-foreground); margin-top: 1rem; }
.ui-table th { text-align: left; font-weight: 500; color: var(--muted-foreground); height: 2.5rem; padding: 0 .5rem; vertical-align: middle; }
.ui-table td { padding: .5rem; vertical-align: middle; }
.ui-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.ui-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.ui-table thead tr { border-bottom: 1px solid var(--border); }
.ui-table tfoot { background: color-mix(in oklch, var(--muted) 50%, transparent); font-weight: 500; }
.ui-table .ui-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table [data-depth="1"] td:first-child { padding-left: 1.75rem; }
.ui-table [data-depth="2"] td:first-child { padding-left: 3rem; }
.ui-table [data-depth="3"] td:first-child { padding-left: 4.25rem; }

/* tabs */
.ui-tabs-list { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border-radius: var(--radius-lg); background: var(--muted); color: var(--muted-foreground); }
.ui-tab { border: 0; background: transparent; color: inherit; font: inherit; font-size: .875rem; font-weight: 500; padding: .25rem .75rem; border-radius: var(--radius-md); cursor: pointer; }
.ui-tab[aria-selected="true"] { background: var(--background); color: var(--foreground); box-shadow: var(--ui-shadow); }
.dark .ui-tab[aria-selected="true"] { background: var(--input); }
.ui-tab-panel { margin-top: .75rem; }
.ui-tab-panel[hidden] { display: none; }

/* dialog */
.ui-dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); color: var(--foreground); padding: 1.5rem; width: min(32rem, calc(100% - 2rem)); box-shadow: var(--ui-shadow-lg); }
.ui-dialog::backdrop { background: rgb(0 0 0 / .5); }
.ui-dialog-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 .25rem; }
.ui-dialog-description { color: var(--muted-foreground); font-size: .875rem; margin: 0 0 1rem; }
.ui-dialog-footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.ui-dialog-close { position: absolute; top: .75rem; right: .75rem; }

/* misc */
.ui-separator { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.ui-skeleton { background: var(--accent); border-radius: var(--radius-md); animation: ui-pulse 2s cubic-bezier(.4,0,.6,1) infinite; min-height: 1rem; }
@keyframes ui-pulse { 50% { opacity: .5; } }
.ui-progress { position: relative; height: .5rem; width: 100%; overflow: hidden; border-radius: 999px; background: color-mix(in oklch, var(--primary) 20%, transparent); }
.ui-progress > div { height: 100%; background: var(--primary); transition: width .3s; }
.ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; list-style: none; padding: 0; margin: 0; font-size: .875rem; color: var(--muted-foreground); }
.ui-breadcrumb a { text-decoration: none; }
.ui-breadcrumb a:hover { color: var(--foreground); }
.ui-breadcrumb li[aria-current] { color: var(--foreground); font-weight: 500; }
.ui-breadcrumb .ui-icon { width: .875rem; height: .875rem; }
.ui-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background: var(--muted); color: var(--muted-foreground); font-size: .875rem; font-weight: 500; flex: none; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-collapsible { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ui-collapsible > summary { cursor: pointer; padding: .75rem 1rem; font-weight: 500; font-size: .875rem; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ui-collapsible > summary::-webkit-details-marker { display: none; }
.ui-collapsible > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-right: .25rem; }
.ui-collapsible[open] > summary::after { transform: rotate(-135deg); }
.ui-collapsible > :not(summary) { padding: 0 1rem .75rem; }
.ui-kbd { font: .75em var(--ui-mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: .1em .35em; background: var(--muted); }

/* nav & sidebar */
.ui-nav { display: flex; align-items: center; gap: .25rem; }
.ui-nav a { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem; border-radius: var(--radius-md); font-size: .875rem; font-weight: 500; text-decoration: none; color: var(--muted-foreground); }
.ui-nav a:hover, .ui-nav a[aria-current="page"] { color: var(--foreground); background: var(--accent); }
.ui-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--background) 85%, transparent); backdrop-filter: blur(8px); }
.ui-header .ui-container { display: flex; align-items: center; gap: 1rem; height: 3.5rem; }
.ui-brand { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.ui-spacer { flex: 1; }
.ui-sidebar { background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border); padding: 1rem; }
.ui-sidebar .ui-nav { flex-direction: column; align-items: stretch; }

/* popover menu (native popover attribute) */
.ui-menu { margin: 0; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--ui-shadow-md); min-width: 10rem; inset: auto; position: fixed; }
.ui-menu:popover-open { display: grid; }
.ui-menu button, .ui-menu a { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .375rem .5rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: .875rem; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.ui-menu button:hover, .ui-menu a:hover { background: var(--accent); color: var(--accent-foreground); }

/* toast */
.ui-toaster { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; max-width: 24rem; }
.ui-toast { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--ui-shadow-lg); font-size: .875rem; transition: opacity .4s, transform .4s; }
.ui-toast-success { border-color: color-mix(in oklch, var(--chart-2) 60%, transparent); }
.ui-toast-success .ui-icon { color: var(--chart-2); }
.ui-toast-error { border-color: color-mix(in oklch, var(--destructive) 60%, transparent); }
.ui-toast-error .ui-icon { color: var(--destructive); }
.ui-toast.ui-fading { opacity: 0; transform: translateY(.5rem); }

@media (prefers-reduced-motion: reduce) { .ui-body * { transition: none !important; animation: none !important; } }

/* theme toggle icons */
.ui-only-dark { display: none; }
.dark .ui-only-dark { display: inline; }
.dark .ui-only-light { display: none; }