@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

/* ============================================================
   TOKENS DO DESIGN SYSTEM
   ============================================================ */

:root {
    /* Informa ao navegador o esquema da página: pinta scrollbars e controles nativos. */
    color-scheme: light;
    --background: oklch(1 0 0);
    --foreground: oklch(0.141 0.005 285.823);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.141 0.005 285.823);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.141 0.005 285.823);
    --primary: oklch(0.488 0.243 264.376);
    --primary-foreground: oklch(0.97 0.014 254.604);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.967 0.001 286.375);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: oklch(0.705 0.015 286.067);
    --chart-1: oklch(0.809 0.105 251.813);
    --chart-2: oklch(0.623 0.214 259.815);
    --chart-3: oklch(0.546 0.245 262.881);
    --chart-4: oklch(0.488 0.243 264.376);
    --chart-5: oklch(0.424 0.199 265.638);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.141 0.005 285.823);
    --sidebar-primary: oklch(0.546 0.245 262.881);
    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
    --sidebar-accent: oklch(0.967 0.001 286.375);
    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.705 0.015 286.067);
    /* Toasts — sem variante dark */
    --toast-success-bg: oklch(0.97 0.025 145);
    --toast-success-border: oklch(0.87 0.07 145);
    --toast-success-text: oklch(0.33 0.12 145);
    --toast-info-bg: oklch(0.965 0.018 264);
    --toast-info-border: oklch(0.86 0.06 264);
    --toast-info-text: oklch(0.38 0.16 264);
    --toast-error-bg: oklch(0.97 0.018 27);
    --toast-error-border: oklch(0.87 0.07 27);
    --toast-error-text: oklch(0.38 0.18 27);
    --toast-warning-bg: oklch(0.97 0.04 85);
    --toast-warning-border: oklch(0.87 0.08 85);
    --toast-warning-text: oklch(0.38 0.12 85);
}

.dark {
    /* Scrollbars e controles nativos passam a ser escuros. */
    color-scheme: dark;
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.21 0.006 285.885);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.424 0.199 265.638);
    --primary-foreground: oklch(0.97 0.014 254.604);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --accent: oklch(0.274 0.006 286.033);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.552 0.016 285.938);
    --chart-1: oklch(0.809 0.105 251.813);
    --chart-2: oklch(0.623 0.214 259.815);
    --chart-3: oklch(0.546 0.245 262.881);
    --chart-4: oklch(0.488 0.243 264.376);
    --chart-5: oklch(0.424 0.199 265.638);
    --sidebar: oklch(0.21 0.006 285.885);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.623 0.214 259.815);
    --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
    --sidebar-accent: oklch(0.274 0.006 286.033);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.552 0.016 285.938);
    /* Toasts — variante escura (fundo translúcido escuro + texto claro) */
    --toast-success-bg: oklch(0.27 0.05 145);
    --toast-success-border: oklch(0.4 0.08 145);
    --toast-success-text: oklch(0.87 0.12 145);
    --toast-info-bg: oklch(0.27 0.05 264);
    --toast-info-border: oklch(0.4 0.08 264);
    --toast-info-text: oklch(0.85 0.1 264);
    --toast-error-bg: oklch(0.27 0.06 27);
    --toast-error-border: oklch(0.42 0.1 27);
    --toast-error-text: oklch(0.85 0.12 27);
    --toast-warning-bg: oklch(0.28 0.05 85);
    --toast-warning-border: oklch(0.42 0.08 85);
    --toast-warning-text: oklch(0.88 0.1 85);
}

/* ============================================================
   MAPEAMENTO TAILWIND v4
   ============================================================ */

@theme inline {
    /* Fontes */
    --font-sans: 'Figtree', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    /* Cores */
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    /* Border radius */
    --radius-sm: calc(var(--radius) * 0.6);
    --radius-md: calc(var(--radius) * 0.8);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) * 1.4);
    --radius-2xl: calc(var(--radius) * 1.8);
    --radius-3xl: calc(var(--radius) * 2.2);
    --radius-4xl: calc(var(--radius) * 2.6);
    /* Animações — substitui tw-animate-css */
    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;
    --animate-fade-in: fade-in 0.2s ease-out;
    --animate-fade-out: fade-out 0.2s ease-out;
    --animate-slide-in-from-top: slide-in-from-top 0.2s ease-out;
    --animate-slide-in-from-bottom: slide-in-from-bottom 0.2s ease-out;
    --animate-slide-in-from-left: slide-in-from-left 0.2s ease-out;
    --animate-slide-in-from-right: slide-in-from-right 0.2s ease-out;
    --animate-zoom-in: zoom-in 0.2s ease-out;
    --animate-zoom-out: zoom-out 0.2s ease-out;
    --animate-spin-slow: spin 2s linear infinite;
    --animate-pulse-subtle: pulse-subtle 2s ease-in-out infinite;
    --animate-toast-in: toast-in 0.3s ease-out;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes accordion-down {
    from {
        height: 0;
        opacity: 0;
    }

    to {
        height: var(--radix-accordion-content-height, auto);
        opacity: 1;
    }
}

@keyframes accordion-up {
    from {
        height: var(--radix-accordion-content-height, auto);
        opacity: 1;
    }

    to {
        height: 0;
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slide-in-from-top {
    from {
        transform: translateY(-0.5rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-from-bottom {
    from {
        transform: translateY(0.5rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-from-left {
    from {
        transform: translateX(-0.5rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-from-right {
    from {
        transform: translateX(0.5rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoom-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoom-out {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.95);
        opacity: 0;
    }
}

@keyframes pulse-subtle {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Toast slide-in — Tailwind has no directional slide-from-right utility */
@keyframes toast-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================
   BASE
   ============================================================ */

/* AlertDialog — reuses existing zoom-in and fade-in keyframes */
dialog[data-slot="alert-dialog"] {
    animation: zoom-in 0.15s ease-out;
}

dialog[data-slot="alert-dialog"]::backdrop {
    animation: fade-in 0.15s ease-out;
}

/* Quem pediu menos movimento no sistema (prefers-reduced-motion) vê a caixa aparecer direto. */
@media (prefers-reduced-motion: reduce) {
    dialog[data-slot="alert-dialog"],
    dialog[data-slot="alert-dialog"]::backdrop {
        animation: none;
    }
}

/* Dialog — fade + scale for both open and close via @starting-style */
dialog[data-slot="dialog"] {
    opacity: 0;
    scale: 0.97;
    transition:
        opacity 0.15s ease-out,
        scale 0.15s ease-out,
        display 0.15s allow-discrete,
        overlay 0.15s allow-discrete;
}

dialog[data-slot="dialog"][open] {
    opacity: 1;
    scale: 1;
}

@starting-style {
    dialog[data-slot="dialog"][open] {
        opacity: 0;
        scale: 0.97;
    }
}

dialog[data-slot="dialog"]::backdrop {
    background: oklch(0 0 0 / 0%);
    backdrop-filter: blur(2px);
    transition:
        background 0.15s ease-out,
        display 0.15s allow-discrete,
        overlay 0.15s allow-discrete;
}

dialog[data-slot="dialog"][open]::backdrop {
    background: oklch(0 0 0 / 10%);
}

@starting-style {
    dialog[data-slot="dialog"][open]::backdrop {
        background: oklch(0 0 0 / 0%);
    }
}

/* ============================================================
   DROPDOWN MENU — visibility and animation via data-state
   (Tailwind does not scan C# TagHelper constants reliably)
   ============================================================ */

[data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu-sub-content"] {
    display: none;
}

[data-slot="dropdown-menu"][data-state="open"] > [data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu"][data-state="open"] [data-slot="dropdown-menu-content"] {
    display: block;
    animation: dropdown-in 0.1s ease-out;
}

[data-slot="dropdown-menu-sub"][data-state="open"] > [data-slot="dropdown-menu-sub-content"] {
    display: block;
    animation: dropdown-in 0.1s ease-out;
}

/* Sub-trigger active state when its sub-menu is open */
[data-slot="dropdown-menu-sub"][data-state="open"] > [data-slot="dropdown-menu-sub-trigger"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

@keyframes dropdown-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Menos movimento (prefers-reduced-motion): o menu e o submenu aparecem direto. */
@media (prefers-reduced-motion: reduce) {
    [data-slot="dropdown-menu"][data-state="open"] > [data-slot="dropdown-menu-content"],
    [data-slot="dropdown-menu"][data-state="open"] [data-slot="dropdown-menu-content"],
    [data-slot="dropdown-menu-sub"][data-state="open"] > [data-slot="dropdown-menu-sub-content"] {
        animation: none;
    }
}

/* ============================================================
   SELECT — visibility, animation and item indicator via data-state
   ============================================================ */

/* The panel is a popover, so the browser hides it until it is shown in the top layer. Which is also
   why display lives here and not in a utility class: it is the open state, not a static style. */
[data-slot="select-content"] {
    display: none;
}

[data-slot="select"][data-state="open"] [data-slot="select-content"] {
    display: flex;
    animation: dropdown-in 0.1s ease-out;
}

/* Tick indicator — visible only on selected item */
[data-slot="select-item"] [data-slot="select-item-indicator"] {
    visibility: hidden;
}

[data-slot="select-item"][data-selected="true"] [data-slot="select-item-indicator"] {
    visibility: visible;
}

/* Rodapé "Criar" (create-label). Inteiro aqui, e não em classes utilitárias: o markup nasce numa constante do
   SelectTagHelper, que o scanner do Tailwind não varre, e hover/foco/travado são estado do componente.
   Mobile primeiro: 44px de alvo de toque, que voltam à altura de opção (36px) a partir do md. */
[data-slot="select-footer"] {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    padding: 0.25rem;
}

[data-slot="select-create"] {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    color: var(--color-primary);
    cursor: pointer;
    outline: none;
}

.dark [data-slot="select-create"] {
    color: var(--color-sidebar-primary);
}

[data-slot="select-create"]:hover,
[data-slot="select-create"]:focus-visible {
    background-color: var(--color-accent);
}

[data-slot="select-create"] [data-slot="select-create-label"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-slot="select-create"][data-locked] {
    color: var(--color-muted-foreground);
}

[data-slot="select-create"] [data-slot="select-create-plan"] {
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
}

@media (width >= 48rem) {
    [data-slot="select-create"] {
        min-height: 2.25rem;
    }
}

/* ============================================================
   CHECKBOX — estado indeterminado
   ============================================================ */

/* Os estados do checkbox moram aqui, e não em classes utilitárias, pelo mesmo motivo do select e do
   dropdown: as classes do cd-checkbox vivem em constantes C#, que o scanner do Tailwind não varre.
   As variantes peer-checked:* nunca chegaram ao output.css — o visual de marcado funcionava por
   acidente, porque transactions.js repetia as mesmas classes num arquivo .js, que é varrido.
   Estado é comportamento, não estilo estático; aqui ele fica explícito e à prova de scanner. */

/* Os indicadores são SVG (Lucide check/minus), centrados pelo viewBox — o glifo da fonte HugeIcons
   vinha desenhado no canto inferior esquerdo do em-box e não centralizava por mais que a caixa fosse
   flex. Tamanho, cor e opacidade padrão ficam aqui porque as classes nascem numa constante C# do
   TagHelper, que o scanner do Tailwind não varre. size-3 (0.75rem) num quadrado de 1rem. */
[data-slot="checkbox"] .cd-checkbox-tick,
[data-slot="checkbox"] .cd-checkbox-dash {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary-foreground);
    opacity: 0;
    transition: opacity 0.15s;
}

/* O traço (indeterminado) fica sobre o tique, centrado na caixa. */
[data-slot="checkbox"] .cd-checkbox-dash {
    position: absolute;
    inset: 0;
    margin: auto;
}

/* A variante "done" das linhas de OS pinta o indicador de branco (a caixa é que fica verde). */
[data-slot="checkbox"] span[data-variant="done"] .cd-checkbox-tick,
[data-slot="checkbox"] span[data-variant="done"] .cd-checkbox-dash {
    color: #fff;
}

/* Marcado e indeterminado pintam a caixa; o traço do indeterminado tem precedência sobre o tique. */
[data-slot="checkbox"] > input:checked ~ span,
[data-slot="checkbox"] > input:indeterminate ~ span {
    background-color: var(--primary);
    border-color: transparent;
}

[data-slot="checkbox"] > input:checked ~ span .cd-checkbox-tick {
    opacity: 1;
}

[data-slot="checkbox"] > input:indeterminate ~ span .cd-checkbox-tick {
    opacity: 0;
}

[data-slot="checkbox"] > input:indeterminate ~ span .cd-checkbox-dash {
    opacity: 1;
}

/* A variante "done" das linhas de OS é verde, não primária. */
[data-slot="checkbox"] > input:checked ~ span[data-variant="done"],
[data-slot="checkbox"] > input:indeterminate ~ span[data-variant="done"] {
    background-color: var(--color-green-600);
    border-color: var(--color-green-600);
}

/* Foco visível e desabilitado: o anel é a única pista de onde o teclado está. */
[data-slot="checkbox"] > input:focus-visible ~ span {
    outline: none;
    box-shadow: 0 0 0 1px var(--ring);
}

[data-slot="checkbox"] > input:disabled ~ span {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ============================================================
   RADIO GROUP — estados do item (cd-radio-group-item)
   ============================================================ */

/* Mesmo motivo do checkbox: as classes do cd-radio-group-item vivem numa constante C#, que o scanner do
   Tailwind não varre, e o mesmo item também é clonado pelo JS (lista de marcas da OS). Os estados do
   RadioGroupItem do shadcn ficam aqui: indicador (bolinha fill-primary size-2), foco, desabilitado e o fundo
   do tema escuro (dark:bg-input/30). */
[data-slot="radio-group-indicator"] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--primary);
    opacity: 0;
}

[data-slot="radio-group-option"] > input:checked ~ [data-slot="radio-group-item"] {
    border-color: var(--primary);
}

[data-slot="radio-group-option"] > input:checked ~ [data-slot="radio-group-item"] [data-slot="radio-group-indicator"] {
    opacity: 1;
}

[data-slot="radio-group-option"] > input:focus-visible ~ [data-slot="radio-group-item"] {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}

[data-slot="radio-group-option"]:has(> input:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
}

.dark [data-slot="radio-group-item"] {
    background-color: color-mix(in oklab, var(--input) 30%, transparent);
}

/* ============================================================
   TOOLTIP — open state and arrow per data-side (behavior in tooltip.js)
   ============================================================ */

/* Quem mostra e posiciona é o tooltip.js: o balão vive na top layer (popover="manual") e é ancorado
   em coordenadas de viewport, com virada de lado quando não cabe. Era `:hover` + `position:absolute`,
   o que nunca abria por teclado e ficava recortado por overflow:hidden — inclusive na sidebar
   colapsada, o principal uso do componente. As coordenadas por data-side saíram junto. */
/* Só o estado mora aqui, como no cd-select: posição, margem e coordenadas são escritas inline por
   cdFixedAnchor.place, e o padding vem das classes Tailwind do TagHelper. */
/* overflow: visible desfaz o `overflow: auto` que o navegador dá a todo [popover]. Com ele a seta (que
   fica 5px para fora) virava rolagem: a seta sumia recortada e o Chrome tornava o balão focável pelo
   Tab (rolável sem filho focável), e o foco caía no balão em vez de ir ao próximo campo. */
[data-slot="tooltip-content"] {
    display: none;
    overflow: visible;
}

[data-slot="tooltip-content"][data-state="delayed-open"],
[data-slot="tooltip-content"][data-state="instant-open"] {
    display: inline-flex;
    animation: tooltip-in 0.1s ease-out;
}

@keyframes tooltip-in {
    from { opacity: 0; scale: 0.95; }
    to   { opacity: 1; scale: 1; }
}

/* Menos movimento (prefers-reduced-motion): o balão aparece direto. */
@media (prefers-reduced-motion: reduce) {
    [data-slot="tooltip-content"][data-state="delayed-open"],
    [data-slot="tooltip-content"][data-state="instant-open"] {
        animation: none;
    }
}

/* Arrow — small rotated square, positioned per side */
[data-slot="tooltip-arrow"] {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--foreground);
    rotate: 45deg;
    border-radius: 2px;
    flex-shrink: 0;
}

[data-slot="tooltip-content"][data-side="top"] [data-slot="tooltip-arrow"] {
    bottom: -5px;
    left: 50%;
    translate: -50% 0;
}

[data-slot="tooltip-content"][data-side="bottom"] [data-slot="tooltip-arrow"] {
    top: -5px;
    left: 50%;
    translate: -50% 0;
}

[data-slot="tooltip-content"][data-side="right"] [data-slot="tooltip-arrow"] {
    left: -5px;
    top: 50%;
    translate: 0 -50%;
}

[data-slot="tooltip-content"][data-side="left"] [data-slot="tooltip-arrow"] {
    right: -5px;
    top: 50%;
    translate: 0 -50%;
}

/* ============================================================
   TABS — active state, content visibility, orientation layout
   (Tailwind does not scan C# TagHelper constants reliably)
   ============================================================ */

/* Content panels — hidden by default, shown when active */
[data-slot="tabs-content"] {
    display: none;
}

[data-slot="tabs-content"][data-active="true"] {
    display: flex;
    flex-direction: column;
}

/* Horizontal orientation: root stacks list above content, list fills h-9 */
[data-slot="tabs"][data-orientation="horizontal"] {
    flex-direction: column;
}

[data-slot="tabs"][data-orientation="horizontal"] [data-slot="tabs-list"] {
    height: 2.25rem; /* h-9 */
}

/* Vertical orientation: list stacks in column beside content */
[data-slot="tabs"][data-orientation="vertical"] {
    flex-direction: row;
}

[data-slot="tabs"][data-orientation="vertical"] [data-slot="tabs-list"] {
    height: fit-content;
    flex-direction: column;
}

[data-slot="tabs"][data-orientation="vertical"] [data-slot="tabs-trigger"] {
    width: 100%;
    justify-content: flex-start;
}

/* Default variant — active trigger gets card-like background */
[data-slot="tabs-list"][data-variant="default"] [data-slot="tabs-trigger"][data-active="true"] {
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
}

/* Line variant — transparent, active trigger gets underline indicator via ::after */
[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"] {
    background-color: transparent;
}

[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
    content: '';
    position: absolute;
    background-color: var(--foreground);
    opacity: 0;
    transition: opacity 0.15s;
}

/* Horizontal underline: bottom edge */
[data-slot="tabs"][data-orientation="horizontal"] [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
    inset-inline: 0;
    bottom: -5px;
    height: 2px;
}

/* Vertical underline: right edge */
[data-slot="tabs"][data-orientation="vertical"] [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
    inset-block: 0;
    right: -4px;
    width: 2px;
}

[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-active="true"] {
    color: var(--foreground);
}

[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-active="true"]::after {
    opacity: 1;
}

/* ============================================================
   SHEET — native <dialog> side panel with slide animations
   ============================================================ */

dialog[data-slot="sheet-content"] {
    position: fixed;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    max-width: none;
    max-height: none;
    background-color: var(--popover);
    color: var(--popover-foreground);
    font-size: 0.875rem;
    box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
    overflow: auto;
}

/* Layout and animation applied only when open — avoids overriding browser display:none */
dialog[data-slot="sheet-content"][open] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* A entrada era @keyframes, que só anima ao abrir: a gaveta sumia seca ao fechar. Como transição
   com display/overlay allow-discrete (mesmo padrão do cd-dialog), o mesmo deslocamento serve para
   entrar e sair. O translate de cada lado fica no bloco do respectivo data-side. */
dialog[data-slot="sheet-content"] {
    transition:
        translate 0.2s ease-out,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}

dialog[data-slot="sheet-content"]::backdrop {
    background: oklch(0 0 0 / 10%);
    backdrop-filter: blur(2px);
    animation: sheet-backdrop-in 0.2s ease-out;
}

/* Right */
dialog[data-slot="sheet-content"][data-side="right"] {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 75%;
    max-width: 24rem;
    height: 100%;
    border-left: 1px solid var(--border);
}

dialog[data-slot="sheet-content"][data-side="right"] {
    translate: 100% 0;
}

dialog[data-slot="sheet-content"][data-side="right"][open] {
    translate: 0 0;
}

@starting-style {
    dialog[data-slot="sheet-content"][data-side="right"][open] {
        translate: 100% 0;
    }
}

/* Left */
dialog[data-slot="sheet-content"][data-side="left"] {
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 75%;
    max-width: 24rem;
    height: 100%;
    border-right: 1px solid var(--border);
}

dialog[data-slot="sheet-content"][data-side="left"] {
    translate: -100% 0;
}

dialog[data-slot="sheet-content"][data-side="left"][open] {
    translate: 0 0;
}

@starting-style {
    dialog[data-slot="sheet-content"][data-side="left"][open] {
        translate: -100% 0;
    }
}

/* Top */
dialog[data-slot="sheet-content"][data-side="top"] {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border);
}

dialog[data-slot="sheet-content"][data-side="top"] {
    translate: 0 -100%;
}

dialog[data-slot="sheet-content"][data-side="top"][open] {
    translate: 0 0;
}

@starting-style {
    dialog[data-slot="sheet-content"][data-side="top"][open] {
        translate: 0 -100%;
    }
}

/* Bottom */
dialog[data-slot="sheet-content"][data-side="bottom"] {
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: auto;
    border-top: 1px solid var(--border);
}

dialog[data-slot="sheet-content"][data-side="bottom"] {
    translate: 0 100%;
}

dialog[data-slot="sheet-content"][data-side="bottom"][open] {
    translate: 0 0;
}

@starting-style {
    dialog[data-slot="sheet-content"][data-side="bottom"][open] {
        translate: 0 100%;
    }
}

@keyframes sheet-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Os @keyframes sheet-slide-in-* saíram: o deslocamento agora é transição, que anima nos dois
   sentidos. */

/* ============================================================
   POPOVER — visibility and animation via data-state
   ============================================================ */

/* O painel vive na top layer (popover="manual"), então quem controla a exibição é o próprio
   navegador: a regra de display precisa vir de :popover-open, não do data-state do pai — um popover
   fechado pelo UA continua sendo descendente do gatilho no DOM. As classes de posição saíram do
   TagHelper porque popover.js ancora o painel em coordenadas de viewport. */
[data-slot="popover-content"] {
    display: none;
}

[data-slot="popover-content"]:popover-open {
    display: flex;
    animation: dropdown-in 0.1s ease-out;
}

/* Navegador sem a API de popover: o painel continua sendo um bloco fixo mostrado pelo data-state. */
@supports not selector(:popover-open) {
    [data-slot="popover"][data-state="open"] [data-slot="popover-content"] {
        display: flex;
        animation: dropdown-in 0.1s ease-out;
    }
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground;
    }
}

/* ============================================================
   PRINT STYLES — stamped report output
   Tailwind has no print utilities for hiding/showing complex
   app regions, page margins or running headers/footers.
   ============================================================ */

.print-only {
    display: none;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 18mm 14mm 22mm 14mm;

        @bottom-right {
            content: counter(page) " / " counter(pages);
            font-size: 10px;
            color: #444;
        }
    }

    /* On screen the body is one viewport tall and clips the rest (_Layout.cshtml); on paper the content has to
       run across the pages, so both let go of the height and the clip. */
    html,
    body {
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide app chrome and screen-only controls */
    #sidebar,
    #topbar,
    #sidebar-toggle,
    #sidebar-overlay,
    #toast-container,
    .screen-only,
    [data-report-table] thead [data-sort-icon] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reset layout containers so content can flow naturally */
    #app-shell,
    #sidebar-inset,
    main {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Reveal print region */
    .print-only {
        display: block !important;
    }

    /* Print header block */
    .report-print-header {
        border-bottom: 1px solid #000;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }

    .report-print-title {
        font-size: 16px;
        font-weight: 700;
    }

    .report-print-subtitle {
        font-size: 14px;
        font-weight: 600;
        margin-top: 4px;
    }

    .report-print-meta {
        font-size: 11px;
        line-height: 1.4;
    }

    /* Print table */
    .print-only table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        font-size: 10px;
        page-break-inside: auto;
    }

    .print-only tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    .print-only th,
    .print-only td {
        border: 1px solid #444;
        padding: 3px 4px;
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        vertical-align: top;
    }

    .print-only th {
        background: #f0f0f0 !important;
        font-weight: 600;
        text-align: left;
    }

    .print-only tfoot td {
        background: #f0f0f0 !important;
        font-weight: 600;
    }

    /* Avoid breaking the summary band */
    .print-only > .flex.shrink-0 {
        page-break-inside: avoid;
    }

    /* Page root hides overflow in screen mode; printing must not clip */
    #report-page {
        display: block !important;
        overflow: visible !important;
        height: auto !important;
    }

    #report-page * {
        overflow: visible !important;
    }
}