@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;
}

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

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

[data-slot="select-content"] {
    display: none;
}

[data-slot="select"][data-state="open"] [data-slot="select-content"] {
    display: block;
    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;
}

/* ============================================================
   TOOLTIP — CSS-only, shown on :hover, positioned per data-side
   ============================================================ */

[data-slot="tooltip-content"] {
    display: none;
    position: absolute;
    z-index: 50;
}

[data-slot="tooltip"]:hover [data-slot="tooltip-content"] {
    display: inline-flex;
    animation: tooltip-in 0.1s ease-out;
}

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

/* Positioning per side */
[data-slot="tooltip-content"][data-side="top"] {
    bottom: calc(100% + 8px);
    left: 50%;
    translate: -50% 0;
}

[data-slot="tooltip-content"][data-side="bottom"] {
    top: calc(100% + 8px);
    left: 50%;
    translate: -50% 0;
}

[data-slot="tooltip-content"][data-side="right"] {
    left: calc(100% + 8px);
    top: 50%;
    translate: 0 -50%;
}

[data-slot="tooltip-content"][data-side="left"] {
    right: calc(100% + 8px);
    top: 50%;
    translate: 0 -50%;
}

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

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"][open] {
    animation: sheet-slide-in-right 0.2s ease-out;
}

/* 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"][open] {
    animation: sheet-slide-in-left 0.2s ease-out;
}

/* 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"][open] {
    animation: sheet-slide-in-top 0.2s ease-out;
}

/* 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"][open] {
    animation: sheet-slide-in-bottom 0.2s ease-out;
}

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

@keyframes sheet-slide-in-right {
    from { translate: 100% 0; }
    to   { translate: 0 0; }
}

@keyframes sheet-slide-in-left {
    from { translate: -100% 0; }
    to   { translate: 0 0; }
}

@keyframes sheet-slide-in-top {
    from { translate: 0 -100%; }
    to   { translate: 0 0; }
}

@keyframes sheet-slide-in-bottom {
    from { translate: 0 100%; }
    to   { translate: 0 0; }
}

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

[data-slot="popover-content"] {
    display: none;
}

[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;
        }
    }

    html,
    body {
        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;
    }
}