/**
 * Design tokens shadcn/ui para Django.
 * Compatível com Tailwind CSS v3 (preset) e v4 (@theme inline).
 *
 * Uso com Tailwind v3: importe tailwind.preset.js no tailwind.config.js
 * Uso com Tailwind v4: @import este arquivo no seu CSS principal
 */

/* Identidade VIP: preto + amarelo */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 48 100% 50%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 7%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 48 100% 95%;
  --accent-foreground: 0 0% 7%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 35%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 7%;
  --info: 210 10% 25%;
  --info-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 48 100% 45%;
  --radius: 0.5rem;
  --chart-1: 48 100% 50%;
  --chart-2: 0 0% 15%;
  --chart-3: 45 90% 40%;
  --chart-4: 0 0% 45%;
  --chart-5: 42 100% 60%;
}

.dark {
  --background: 0 0% 6%;
  --foreground: 0 0% 98%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 98%;
  --primary: 48 100% 50%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14%;
  --muted-foreground: 0 0% 65%;
  --accent: 48 80% 18%;
  --accent-foreground: 48 100% 70%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 7%;
  --info: 0 0% 70%;
  --info-foreground: 0 0% 7%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 48 100% 50%;
  --chart-1: 48 100% 50%;
  --chart-2: 0 0% 80%;
  --chart-3: 45 90% 45%;
  --chart-4: 0 0% 55%;
  --chart-5: 42 100% 60%;
}

@layer base {
  * {
    @apply border-border;
  }

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

@keyframes shadcn-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shadcn-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

[data-slot="toast-viewport"] {
  position: fixed;
  z-index: 100;
  display: flex;
  max-height: 100vh;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  pointer-events: none;
}

@media (min-width: 640px) {
  [data-slot="toast-viewport"] {
    bottom: 0;
    right: 0;
    top: auto;
    width: 420px;
  }
}

[data-slot="toast"] {
  pointer-events: auto;
  position: relative;
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  animation: shadcn-toast-in 180ms ease-out;
}

[data-slot="toast"][data-state="closed"] {
  animation: shadcn-toast-out 160ms ease-in forwards;
}

[data-slot="toast"][data-variant="success"] {
  border-color: hsl(var(--success) / 0.4);
  background: hsl(var(--success));
  color: hsl(var(--success-foreground));
}

[data-slot="toast"][data-variant="destructive"] {
  border-color: hsl(var(--destructive) / 0.4);
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

[data-slot="toast"][data-variant="warning"] {
  border-color: hsl(var(--warning) / 0.4);
  background: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}

[data-slot="toast"][data-variant="info"] {
  border-color: hsl(var(--info) / 0.4);
  background: hsl(var(--info));
  color: hsl(var(--info-foreground));
}

[data-slot="toast-title"] {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

[data-slot="toast-description"] {
  font-size: 0.875rem;
  opacity: 0.9;
  line-height: 1.4;
}

[data-slot="toast-close"] {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 2px);
  opacity: 0.7;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  [data-slot="toast-close"]:hover {
    opacity: 1;
    background: rgb(0 0 0 / 0.08);
  }

  .dark [data-slot="toast-close"]:hover {
    background: rgb(255 255 255 / 0.08);
  }

  .app-header [data-header-user-trigger]:hover,
  .app-header [data-header-icon-trigger]:hover {
    background-color: rgb(255 255 255 / 0.1) !important;
    color: hsl(var(--primary)) !important;
  }
}

/* dialog: classes Tailwind (ex.: grid) sobrescrevem o display:none nativo */
dialog:not([open]) {
  display: none !important;
}

dialog[data-slot="dialog-content"] {
  border: none !important;
  outline: none !important;
}

dialog[data-slot="dialog-content"][open] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: 90vh;
  overflow-y: auto;
  width: min(calc(100vw - 2rem), 72rem);
  border: none !important;
  outline: none !important;
}

dialog[data-slot="dialog-content"].dialog-audit-detail[open] {
  width: min(calc(100vw - 2rem), 72rem);
  max-height: 85vh;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
}

dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

/* Header: evita conflito de utilities do Tailwind CDN (ex.: bg-muted vs bg-primary)
   ao regenerar CSS quando filtros/ícones mutam o DOM. */
.app-header [data-slot="avatar-fallback"] {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.app-header [data-header-user-trigger],
.app-header [data-header-icon-trigger] {
  color: #fff !important;
}

.app-header [data-slot="dropdown-menu-content"],
.app-header details[data-shadcn-dropdown] > div {
  border-color: hsl(var(--border)) !important;
}

/* Tabelas: scroll horizontal no mobile, sem alterar overflow ao abrir menus. */
div.relative.w-full:has(> table[data-slot="table"]) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page-main {
  min-width: 0;
  max-width: 100%;
}