@tailwind base;
@tailwind components;
@tailwind utilities;

/* ✅ OTIMIZAÇÃO: Font-display swap para todas as fontes (previne FOIT) */
@font-face {
  font-family: 'system-ui';
  font-display: swap;
}

/* Modern Scrollbar Styles */
/* Para navegadores Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #D4BAA8;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #C7916B;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Firefox: apenas em scroll containers (evita non-composited em elementos animados) */
html, body {
  scrollbar-width: thin;
  scrollbar-color: #D4BAA8 transparent;
}

/* Scrollbar mais fina e moderna para cards */
.card-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.card-scrollbar::-webkit-scrollbar-thumb {
  background: #D4BAA8;
  border-radius: 10px;
}

.card-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #C7916B;
}

.card-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #D4BAA8 transparent;
}

/* Dynamic Viewport Height support */
@supports (height: 100dvh) {
  :root {
    --dvh: 100dvh;
  }
}

@supports not (height: 100dvh) {
  :root {
    --dvh: 100vh;
  }
}

/* ✅ Desabilitar zoom no admin */
body[data-admin="true"] {
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  --primary-foreground: 30 18% 18%;
  /* Prevenir zoom por qualquer método */
  zoom: 1;
  -ms-zoom: 1;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body[data-admin="true"] * {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

body[data-admin="true"] input,
body[data-admin="true"] textarea,
body[data-admin="true"] [contenteditable="true"],
body[data-admin="true"] .select-text {
  touch-action: auto;
  -ms-touch-action: auto;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

:root {
  --header-height: 88px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 80px;
  }
}

/* Vinyl Player Animations */
@keyframes vinyl-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes vinyl-spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes vinyl-spin-realistic {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Realistic vinyl rotation classes */
.vinyl-spin {
  animation: vinyl-spin 1.2s linear infinite;
  will-change: transform; /* ✅ OTIMIZAÇÃO PERFORMANCE: Composição de animação */
}

.vinyl-spin-slow {
  animation: vinyl-spin-slow 1.5s linear infinite;
  will-change: transform; /* ✅ OTIMIZAÇÃO PERFORMANCE: Composição de animação */
}

.vinyl-spin-realistic {
  animation: vinyl-spin-realistic 1.3s linear infinite;
  will-change: transform; /* ✅ OTIMIZAÇÃO PERFORMANCE: Composição de animação */
}

/* Play/Pause control classes */
.vinyl-playing {
  animation-play-state: running;
}

.vinyl-paused {
  animation-play-state: paused;
}

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* MusicLovely warm beige-brown palette */
    --background: 34 32% 94%;  /* #F6F1EA creme quente */
    --foreground: 30 18% 18%;  /* #2E2B27 marrom escuro */

    --card: 0 0% 100%;  /* #FFFFFF branco puro */
    --card-foreground: 30 18% 18%;  /* #2E2B27 */

    --popover: 0 0% 100%;
    --popover-foreground: 30 18% 18%;

    --primary: 24 42% 58%;  /* #C7855E caramelo quente */
    --primary-foreground: 0 0% 100%;

    --primary-600: 24 37% 51%;  /* #B37352 tom profundo */

    --secondary: 34 32% 94%;  /* #F6F1EA */
    --secondary-foreground: 30 18% 18%;

    --muted: 34 32% 94%;
    --muted-foreground: 30 10% 38%;  /* #6B6259 marrom acinzentado */

    --accent: 38 60% 76%;  /* #E7B980 brilho suave */
    --accent-foreground: 30 18% 18%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 25% 87%;  /* #E7DFD6 bege claro */
    --input: 30 25% 87%;
    --ring: 24 42% 58%;

    --radius: 1rem;

    /* Glass effect variables */
    --glass-bg: 255 255 255 / 0.7;
    --glass-border: 255 255 255 / 0.3;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* Gradiente hero */
    --gradient-hero: linear-gradient(135deg, hsl(38 60% 76%) 0%, hsl(24 42% 58%) 50%, hsl(24 37% 51%) 100%);

    /* Quiz specific colors - terracotta/orange theme */
    --quiz-primary: 14 70% 53%;  /* #C85A3E terracota/laranja */
    --quiz-primary-hover: 14 65% 45%;  /* #B34E32 laranja escuro */
    --quiz-background: 30 100% 98%;  /* #FFF9F5 creme claro */
    --quiz-card-bg: 0 0% 100%;  /* #FFFFFF branco puro */
    --quiz-border: 0 0% 90%;  /* #E5E5E5 cinza muito claro */
    --quiz-text-muted: 0 0% 42%;  /* #6B6B6B cinza médio */

    /* Sombras suaves */
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 24 42% 58%;
  }

  .dark {
    --background: 30 18% 18%;
    --foreground: 34 32% 94%;

    --card: 30 15% 22%;
    --card-foreground: 34 32% 94%;

    --popover: 30 15% 22%;
    --popover-foreground: 34 32% 94%;

    --primary: 24 42% 58%;
    --primary-foreground: 0 0% 100%;

    --primary-600: 24 37% 51%;

    --secondary: 30 15% 25%;
    --secondary-foreground: 34 32% 94%;

    --muted: 30 15% 25%;
    --muted-foreground: 30 20% 60%;

    --accent: 38 60% 76%;
    --accent-foreground: 30 18% 18%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 15% 30%;
    --input: 30 15% 30%;
    --ring: 24 42% 58%;

    /* Glass effect variables - dark mode */
    --glass-bg: 30 15% 22% / 0.7;
    --glass-border: 255 255 255 / 0.1;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 24 42% 58%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 24 42% 58%;
  }

  * {
    @apply border-border;
  }

  html {
    /* Dynamic viewport height para mobile - resolve problemas com barras de navegação */
    height: 100%;
    /* ✅ CORREÇÃO PRODUÇÃO: Prevenir scroll horizontal, scroll vertical será controlado pelo body */
    overflow-x: hidden;
    overflow-y: hidden; /* ✅ CORREÇÃO: Remover scroll do html para evitar duplicação */
  }

  body {
    @apply bg-background text-foreground;
    /* Dynamic viewport height */
    height: 100vh;
    height: 100dvh;
    /* ✅ CORREÇÃO PRODUÇÃO: Prevenir scroll duplo - body não terá scroll quando há main-scroll-container */
    overflow-x: hidden;
    overflow-y: auto; /* ✅ Permitir scroll apenas quando não há container customizado */
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(231, 185, 128, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(199, 133, 94, 0.08) 0%, transparent 50%);
    background-attachment: fixed;
  }
  
  /* ✅ CORREÇÃO PRODUÇÃO: Quando há main-scroll-container, desabilitar scroll do body */
  body:has(#main-scroll-container) {
    overflow-y: hidden; /* ✅ Desabilitar scroll do body quando há container customizado */
    height: 100vh;
    height: 100dvh;
  }
  
  /* ✅ Fallback para navegadores que não suportam :has() */
  @supports not selector(:has(*)) {
    body.has-custom-scroll {
      overflow-y: hidden;
      height: 100vh;
      height: 100dvh;
    }
  }

  /* Fix para mobile - prevent text size adjustment */
  @media screen and (max-width: 768px) {
    body {
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
  }
}

@layer utilities {
  /* Header com cor sólida do background (sem transparência ou blur) */
  header {
    background-color: hsl(var(--background)) !important;
    backdrop-filter: none !important;
  }
  
  /* Safe area para iPhone com notch */
  header {
    padding-top: env(safe-area-inset-top);
  }

  /* Compact card styles */
  .compact-card .space-y-6 {
    @apply space-y-3;
  }
  
  .compact-card .space-y-4 {
    @apply space-y-2;
  }
  
  .compact-card .p-6 {
    @apply p-4;
  }
  
  .compact-card .py-8 {
    @apply py-4;
  }

  .glass {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .glass-strong {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.7) 100%
    );
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .dark .glass {
    background: linear-gradient(
      135deg,
      rgba(48, 43, 38, 0.7) 0%,
      rgba(48, 43, 38, 0.5) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .dark .glass-strong {
    background: linear-gradient(
      135deg,
      rgba(48, 43, 38, 0.85) 0%,
      rgba(48, 43, 38, 0.7) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  /* Music Player Progress Bar */
  .music-progress-bar::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: hsl(var(--primary-foreground));
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid hsl(var(--primary));
  }

  .music-progress-bar::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
  }

  .music-progress-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: hsl(var(--primary-foreground));
    cursor: pointer;
    border: 2px solid hsl(var(--primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .music-progress-bar::-moz-range-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* ✅ Scrollbar moderna e customizada - aplicada apenas no container de conteúdo */
  .main-scroll-container::-webkit-scrollbar {
    width: 10px;
  }

  .main-scroll-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  .main-scroll-container::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
  }

  .main-scroll-container::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.5);
    background-clip: padding-box;
  }

  .main-scroll-container::-webkit-scrollbar-thumb:active {
    background: hsl(var(--primary) / 0.7);
    background-clip: padding-box;
  }

  /* Firefox */
  .main-scroll-container {
    margin-top: var(--home-header-offset);
    height: calc(var(--dvh) - var(--home-header-offset));
    max-height: calc(var(--dvh) - var(--home-header-offset));
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
  }

  :root {
    --home-header-offset: 80px;
  }

  @media (min-width: 640px) {
    :root {
      --home-header-offset: 88px;
    }
  }
  
  /* ✅ CORREÇÃO PRODUÇÃO: Esconder scrollbar do body quando há main-scroll-container */
  body:has(#main-scroll-container)::-webkit-scrollbar,
  body.has-custom-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
  }
  
  body:has(#main-scroll-container),
  body.has-custom-scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Compact mobile cards */
  @media (max-width: 768px) {
    .mobile-compact-card .space-y-6 {
      @apply space-y-3;
    }
    
    .mobile-compact-card .space-y-4 {
      @apply space-y-2;
    }
    
    .mobile-compact-card .p-6 {
      @apply p-4;
    }
    
    .mobile-compact-card .p-8 {
      @apply p-4;
    }
    
    .mobile-compact-card .py-8 {
      @apply py-4;
    }
    
    .mobile-compact-card .gap-6 {
      @apply gap-3;
    }
    
    .mobile-compact-card .gap-4 {
      @apply gap-2;
    }

    .mobile-compact-header {
      @apply text-2xl;
    }
  }

  /* Enhanced Tabs - Modern UI/UX */
  .enhanced-tabs {
    @apply w-full;
  }

  .enhanced-tabs-list {
    @apply inline-flex items-center justify-center;
  }

  /* Modern Variant - Gradient with smooth animations */
  .enhanced-tabs-modern {
    @apply h-14 rounded-lg p-1.5 text-amber-800 border border-amber-200 shadow-sm;
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fde68a 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
  }
  /* Sobrescrever qualquer classe Tailwind de gradiente no modern */
  .enhanced-tabs-modern.bg-gradient-to-r,
  .enhanced-tabs-modern[class*="from-amber-50"],
  .enhanced-tabs-modern[class*="to-orange-50"],
  .enhanced-tabs-modern[class*="via-yellow-50"] {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fde68a 100%) !important;
    background-image: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fde68a 100%) !important;
  }

  .enhanced-tabs-modern .enhanced-tabs-trigger {
    @apply px-8 py-3 rounded-md transition-all duration-300 flex items-center gap-2 font-semibold text-base;
    transform: translateY(0);
  }
  .enhanced-tabs-modern.enhanced-tabs-lyrics .enhanced-tabs-trigger:not([data-active="true"]) {
    background: transparent !important;
    background-image: none !important;
  }

  .enhanced-tabs-modern.enhanced-tabs-lyrics .enhanced-tabs-trigger:hover:not([data-active="true"]) {
    background: linear-gradient(to right, #fde68a, #fed7aa) !important;
    background-image: linear-gradient(to right, #fde68a, #fed7aa) !important;
    @apply text-amber-900 shadow-md;
    transform: translateY(-1px);
  }

  .enhanced-tabs-modern .enhanced-tabs-trigger[data-active="true"] {
    background: linear-gradient(to right, #d97706, #ea580c) !important;
    @apply text-white shadow-lg;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  }

  /* Gerenciar Letras: 3 botões ocupam toda a largura, degradê no container */
  .enhanced-tabs-lyrics,
  .enhanced-tabs-modern.enhanced-tabs-lyrics,
  div.enhanced-tabs-modern.enhanced-tabs-lyrics,
  .items-center.justify-center.enhanced-tabs-modern.enhanced-tabs-lyrics {
    @apply w-full gap-1 md:gap-2;
    padding: 0.375rem !important;
    background: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
    background-image: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
  }
  /* Sobrescrever qualquer classe Tailwind que possa estar aplicando gradiente */
  .enhanced-tabs-lyrics.bg-gradient-to-r,
  .enhanced-tabs-modern.enhanced-tabs-lyrics.bg-gradient-to-r,
  .enhanced-tabs-lyrics[class*="from-amber-50"],
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="from-amber-50"],
  .enhanced-tabs-lyrics[class*="to-orange-50"],
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="to-orange-50"],
  .enhanced-tabs-lyrics[class*="via-yellow-50"],
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="via-yellow-50"],
  div.items-center.justify-center.enhanced-tabs-modern.enhanced-tabs-lyrics,
  div[class*="items-center"][class*="justify-center"][class*="enhanced-tabs-modern"][class*="enhanced-tabs-lyrics"] {
    background: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
    background-image: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
  }
  .enhanced-tabs-modern.enhanced-tabs-lyrics,
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="bg-gradient"],
  .enhanced-tabs-modern.enhanced-tabs-lyrics.bg-gradient-to-r,
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="from-amber-50"],
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="to-orange-50"],
  .enhanced-tabs-modern.enhanced-tabs-lyrics[class*="via-yellow-50"] {
    background: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
    background-image: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
    background-color: transparent !important;
  }
  /* Sobrescrever qualquer classe Tailwind de gradiente */
  div.enhanced-tabs-modern.enhanced-tabs-lyrics,
  div[class*="enhanced-tabs-modern"][class*="enhanced-tabs-lyrics"] {
    background: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
    background-image: linear-gradient(to right, #fef3c7, #fed7aa, #fde68a) !important;
  }
  /* Remover gradiente dos botões e aplicar apenas no container */
  .enhanced-tabs-lyrics button:not([aria-selected="true"]),
  .enhanced-tabs-lyrics button[aria-selected="false"] {
    background: transparent !important;
    background-image: none !important;
  }
  .enhanced-tabs-lyrics.grid,
  .enhanced-tabs-lyrics[class*="grid"] {
    display: flex !important;
    grid-template-columns: none !important;
  }
  .enhanced-tabs-lyrics button {
    @apply flex-1 justify-center rounded-md py-2 md:py-3 flex items-center gap-2 font-semibold text-sm md:text-base min-w-0;
    transform: none;
    white-space: normal !important;
    word-break: break-word;
  }
  .enhanced-tabs-lyrics button:not([aria-selected="true"]),
  .enhanced-tabs-lyrics button[aria-selected="false"],
  .enhanced-tabs-lyrics button[role="tab"]:not([aria-selected="true"]) {
    background: transparent !important;
    background-image: none !important;
  }
  /* Remover gradiente dos botões inativos */
  .enhanced-tabs-lyrics button.bg-gradient-to-r:not([aria-selected="true"]),
  .enhanced-tabs-lyrics button[class*="from-amber-50"]:not([aria-selected="true"]),
  .enhanced-tabs-lyrics button[class*="to-orange-50"]:not([aria-selected="true"]) {
    background: transparent !important;
    background-image: none !important;
  }
  .enhanced-tabs-lyrics button:not([aria-selected="true"]):hover,
  .enhanced-tabs-lyrics button[aria-selected="false"]:hover {
    background: rgba(254, 243, 199, 0.3) !important;
    background-image: none !important;
  }
  .enhanced-tabs-lyrics button[aria-selected="true"] {
    background: linear-gradient(to right, #d97706, #ea580c) !important;
    background-image: linear-gradient(to right, #d97706, #ea580c) !important;
  }
  .enhanced-tabs-lyrics button[class*="whitespace-nowrap"] {
    white-space: normal !important;
  }
  .enhanced-tabs-lyrics button span:not(.flex-shrink-0),
  .enhanced-tabs-lyrics button > span {
    white-space: normal !important;
    word-break: break-word;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline !important;
  }
  .enhanced-tabs-lyrics button .truncate,
  .enhanced-tabs-lyrics button span.truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .enhanced-tabs-lyrics button .hidden,
  .enhanced-tabs-lyrics button span.hidden {
    display: none !important;
  }
  .enhanced-tabs-lyrics button span.sm\\:hidden {
    display: none !important;
  }
  .enhanced-tabs-lyrics button span.hidden.sm\\:inline {
    display: inline !important;
  }

  /* Pills Variant - Rounded modern look */
  .enhanced-tabs-pills {
    @apply h-10 rounded-full bg-muted p-1 text-muted-foreground;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  }

  .enhanced-tabs-pills .enhanced-tabs-trigger {
    @apply px-4 py-2 rounded-full transition-all duration-200;
  }

  .enhanced-tabs-pills .enhanced-tabs-trigger:hover {
    @apply bg-background text-foreground shadow-sm;
    transform: translateY(-1px);
  }

  .enhanced-tabs-pills .enhanced-tabs-trigger[data-active="true"] {
    @apply bg-background text-foreground shadow-md;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* Underline Variant - Clean minimal */
  .enhanced-tabs-underline {
    @apply h-10 border-b border-border bg-transparent p-0 text-muted-foreground;
  }

  .enhanced-tabs-underline .enhanced-tabs-trigger {
    @apply px-4 py-2 border-b-2 border-transparent transition-all duration-200;
  }

  .enhanced-tabs-underline .enhanced-tabs-trigger:hover {
    @apply text-foreground;
  }

  .enhanced-tabs-underline .enhanced-tabs-trigger[data-active="true"] {
    @apply border-primary text-primary;
  }

  /* Enhanced animations and micro-interactions */
  .enhanced-tabs-trigger {
    position: relative;
    overflow: hidden;
  }

  .enhanced-tabs-trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  .enhanced-tabs-trigger:hover::before {
    left: 100%;
  }

  /* Badge styling for tabs */
  .enhanced-tabs-badge {
    @apply ml-1 px-1.5 py-0.5 text-xs font-medium rounded-full;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
  }

  .enhanced-tabs-badge[data-active="true"] {
    @apply bg-white text-amber-600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Responsive design */
  @media (max-width: 768px) {
    .enhanced-tabs-modern {
      @apply h-10 p-0.5;
    }
    
    .enhanced-tabs-modern .enhanced-tabs-trigger {
      @apply px-2 py-1.5 text-sm;
    }
    
    .enhanced-tabs-pills {
      @apply h-8;
    }
    
    .enhanced-tabs-pills .enhanced-tabs-trigger {
      @apply px-2 py-1 text-sm;
    }
  }

  /* Focus states for accessibility */
  .enhanced-tabs-trigger:focus-visible {
    @apply outline-none ring-2 ring-amber-500 ring-offset-2;
  }

  /* Loading state */
  .enhanced-tabs-loading {
    @apply opacity-50 pointer-events-none;
  }

  .enhanced-tabs-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

/* Scroll Animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.6s ease-out forwards;
}

.animate-fade-in-scale {
  animation: fade-in-scale 0.6s ease-out forwards;
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 0.6s ease-out forwards;
}

/* Scroll animation: apenas transform+opacity (composited, evita jank) */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Staggered animations */
.scroll-animate-delay-1 {
  transition-delay: 0.1s;
}

.scroll-animate-delay-2 {
  transition-delay: 0.2s;
}

.scroll-animate-delay-3 {
  transition-delay: 0.3s;
}

.scroll-animate-delay-4 {
  transition-delay: 0.4s;
}

.scroll-animate-delay-5 {
  transition-delay: 0.5s;
}

.scroll-animate-delay-6 {
  transition-delay: 0.6s;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scroll-animate,
  .scroll-animate-left,
  .scroll-animate-right,
  .scroll-animate-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .animate-fade-in-up,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-fade-in-scale,
  .animate-slide-in-bottom {
    animation: none;
  }
}

/* Responsividade de Tabelas */
.table-responsive {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 100%;
  table-layout: fixed;
}

.table-responsive td {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Mobile Table Optimization */
@media (max-width: 768px) {
  .table-responsive {
    font-size: 0.875rem;
  }
  
  .table-responsive th,
  .table-responsive td {
    padding: 0.125rem 0.25rem;
  }
}

/* Pulse animations - usando cores do tema (caramelo/marrom) */
/* ✅ OTIMIZAÇÃO PERFORMANCE: Animações compostas usando transform e opacity ao invés de box-shadow */
@keyframes pulse-glow-mobile {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.95;
  }
}

@keyframes pulse-glow-desktop {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.95;
  }
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Botão pulsar - Fallback padrão (mobile) */
.btn-pulse {
  animation: pulse-glow-mobile 2s ease-in-out infinite;
  will-change: transform, opacity; /* ✅ OTIMIZAÇÃO PERFORMANCE: Composição de animação */
}

/* Desktop: Cores mais claras para botões desktop */
@media screen and (min-width: 769px) {
  .btn-pulse {
    animation: pulse-glow-desktop 2s ease-in-out infinite;
  }
}

.badge-pulse {
  animation: pulse-badge 1.5s ease-in-out infinite;
  display: inline-block;
  position: relative;
  z-index: 1;
  isolation: isolate;
  will-change: transform, opacity; /* ✅ OTIMIZAÇÃO PERFORMANCE: Composição de animação */
}

/* Reduced motion: desabilitar animação pulsar se usuário preferir */
@media (prefers-reduced-motion: reduce) {
  .btn-pulse {
    animation: none;
    transform: none;
  }
  
  .badge-pulse {
    animation: none;
  }
}

/* Admin Mobile Compact System */
:root {
  --admin-header-height: 48px;
  --admin-header-height-mobile: 36px;
  --admin-spacing-sm: 0.25rem;
  --admin-spacing-md: 0.375rem;
  --admin-spacing-lg: 0.5rem;
  --admin-card-padding-mobile: 0.5rem;
  --admin-card-gap-mobile: 0.375rem;
  --admin-card-padding-desktop: 0.75rem;
  --admin-card-gap-desktop: 0.5rem;
}

/* ✅ REDUZIR TAMANHO DE FONTE EM TODA ÁREA ADMINISTRATIVA (EXCETO SIDEBAR) */
body[data-admin="true"] main,
body[data-admin="true"] main * {
  font-size: 0.875rem; /* 14px base - reduzido de 18px */
}

/* Textos reduzidos - EXCETO SIDEBAR */
body[data-admin="true"] main .text-xs,
body[data-admin="true"] main .text-sm,
body[data-admin="true"] main .text-base,
body[data-admin="true"] main .text-lg,
body[data-admin="true"] main .text-xl,
body[data-admin="true"] main .text-2xl,
body[data-admin="true"] main .text-3xl {
  font-size: inherit;
}

body[data-admin="true"] main .text-xs {
  font-size: 0.75rem !important; /* 12px - reduzido de 15px */
}

body[data-admin="true"] main .text-sm {
  font-size: 0.8125rem !important; /* 13px - reduzido de 16px */
}

body[data-admin="true"] main .text-base {
  font-size: 0.875rem !important; /* 14px - reduzido de 18px */
}

body[data-admin="true"] main .text-lg {
  font-size: 1rem !important; /* 16px - reduzido de 20px */
}

body[data-admin="true"] main .text-xl {
  font-size: 1.125rem !important; /* 18px - reduzido de 24px */
}

body[data-admin="true"] main .text-2xl {
  font-size: 1.5rem !important; /* 24px - reduzido de 30px */
}

body[data-admin="true"] main .text-3xl {
  font-size: 1.875rem !important; /* 30px - reduzido de 36px */
}

/* Botões reduzidos - EXCETO SIDEBAR */
body[data-admin="true"] main button {
  font-size: 0.8125rem !important; /* 13px - reduzido de 16px */
  min-height: 32px;
  padding: 0.5rem 0.75rem;
}

/* Inputs reduzidos - EXCETO SIDEBAR */
body[data-admin="true"] main input,
body[data-admin="true"] main select,
body[data-admin="true"] main textarea {
  font-size: 0.8125rem !important; /* 13px - reduzido de 16px */
  min-height: 32px;
}

/* Labels reduzidos - EXCETO SIDEBAR */
body[data-admin="true"] main label {
  font-size: 0.8125rem !important; /* 13px - reduzido de 16px */
}

/* Badges reduzidos - EXCETO SIDEBAR */
body[data-admin="true"] main .badge {
  font-size: 0.75rem !important; /* 12px - reduzido de 15px */
  padding: 0.25rem 0.5rem;
}

/* Ícones reduzidos - EXCETO gráficos Recharts e SIDEBAR */
body[data-admin="true"] main svg:not(.recharts-surface) {
  width: 1rem !important; /* 16px - reduzido de 22px */
  height: 1rem !important;
}

/* Garantir que gráficos Recharts não sejam afetados */
body[data-admin="true"] .recharts-wrapper svg,
[data-path^="/admin"] .recharts-wrapper svg {
  width: auto !important;
  height: auto !important;
}

/* Sidebar mantém tamanho original - não reduzir */
body[data-admin="true"] [data-sidebar],
body[data-admin="true"] [data-sidebar] *,
body[data-admin="true"] nav[data-sidebar],
body[data-admin="true"] nav[data-sidebar] * {
  font-size: inherit !important;
}

body[data-admin="true"] [data-sidebar] a,
body[data-admin="true"] [data-sidebar] button,
body[data-admin="true"] nav[data-sidebar] a,
body[data-admin="true"] nav[data-sidebar] button {
  font-size: 1.0625rem !important; /* 17px - mantém original */
}

/* Header reduzido */
body[data-admin="true"] header {
  font-size: 0.875rem;
}

body[data-admin="true"] header * {
  font-size: inherit;
}

/* Títulos de cards reduzidos - EXCETO SIDEBAR */
body[data-admin="true"] main .card-title {
  font-size: 0.9375rem !important; /* 15px - reduzido de 20px */
}

/* Conteúdo de cards reduzido - EXCETO SIDEBAR */
body[data-admin="true"] main .card-content {
  font-size: 0.8125rem !important; /* 13px - reduzido de 16px */
}

/* ✅ Reduzir inputs, selects e textareas - EXCETO SIDEBAR */
body[data-admin="true"] main input,
body[data-admin="true"] main select,
body[data-admin="true"] main textarea {
  @apply text-sm;
  min-height: 32px;
  padding: 0.5rem 0.625rem;
}

/* ✅ Reduzir labels - EXCETO SIDEBAR */
body[data-admin="true"] main label {
  @apply text-sm font-medium;
}

/* ✅ Reduzir badges - EXCETO SIDEBAR */
body[data-admin="true"] main .badge {
  @apply text-xs;
  padding: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
    :root {
      --admin-header-height: 56px;
    }
    
    /* Header mobile maior */
    body[data-admin="true"] header {
      height: var(--admin-header-height) !important;
      min-height: var(--admin-header-height) !important;
    }
    
    /* Aplicar apenas em rotas admin */
    body[data-admin="true"] .admin-mobile-compact,
    [data-path^="/admin"] .admin-mobile-compact {
      --space-y-6: 0.5rem;
      --space-y-4: 0.375rem;
      --space-y-3: 0.25rem;
      --space-y-2: 0.125rem;
    }
    
    /* Reduzir padding do main no mobile */
    body[data-admin="true"] main > div {
      padding: 0.375rem !important;
    }
    
    /* Garantir que sidebar não ocupe muito espaço no mobile e fique à esquerda */
    body[data-admin="true"] [data-sidebar] {
      width: 100% !important;
      max-width: 280px !important;
      left: 0 !important;
      right: auto !important;
    }
    
    /* Garantir que sidebar fique à esquerda no desktop também */
    body[data-admin="true"] [data-side="left"] {
      left: 0 !important;
      right: auto !important;
    }
    
    /* Ajustar botões do header no mobile */
    body[data-admin="true"] header button {
      min-height: 36px !important;
      height: 36px !important;
      padding: 0.375rem 0.625rem !important;
    }
    
    /* Ajustar texto do header no mobile */
    body[data-admin="true"] header h2 {
      font-size: 0.875rem !important;
      line-height: 1.4 !important;
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }
    
    /* Garantir que o container principal não tenha overflow horizontal */
    body[data-admin="true"] .flex.w-full {
      max-width: 100vw;
      overflow-x: hidden;
    }
    
    /* Ajustar sidebar trigger no mobile */
    body[data-admin="true"] [data-sidebar-trigger] {
      min-width: 32px !important;
      width: 32px !important;
      height: 32px !important;
      padding: 0.25rem !important;
    }
    
    /* Garantir que o conteúdo do main não ultrapasse a largura */
    body[data-admin="true"] main {
      max-width: 100%;
      overflow-x: hidden;
    }
    
    /* AUDITORIA: Garantir que o botão do menu fique à esquerda - SEM MUDAR NADA DO HEADER */
    body[data-admin="true"] header > div:first-child {
      position: relative !important;
      left: 0 !important;
      right: auto !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      order: 1 !important;
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      width: auto !important;
      min-width: auto !important;
      max-width: none !important;
      z-index: 10 !important;
    }
    
    /* Garantir que o SidebarTrigger dentro do primeiro div também fique à esquerda */
    body[data-admin="true"] header > div:first-child [data-sidebar="trigger"],
    body[data-admin="true"] header > div:first-child button {
      margin-left: 0 !important;
      margin-right: auto !important;
      position: relative !important;
      left: 0 !important;
      right: auto !important;
      float: left !important;
    }
    
    /* Garantir que o header mantenha o layout flex sem interferir */
    body[data-admin="true"] header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
    }
    
    /* Forçar o primeiro elemento do header a ficar à esquerda */
    body[data-admin="true"] header > div:first-child {
      align-self: flex-start !important;
      order: 1 !important;
      flex: 0 0 auto !important;
      margin-right: auto !important;
    }
    
    /* Garantir que o SidebarTrigger dentro do primeiro div fique à esquerda */
    body[data-admin="true"] header > div:first-child [data-sidebar="trigger"],
    body[data-admin="true"] header > div:first-child button {
      margin-left: 0 !important;
      margin-right: auto !important;
      position: relative !important;
      left: 0 !important;
      right: auto !important;
    }
    
    /* Título no centro - sem sobrepor o menu */
    body[data-admin="true"] header > div:nth-child(2) {
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: auto !important;
      max-width: calc(100% - 120px) !important;
      z-index: 1 !important;
    }
    
    /* Botões à direita */
    body[data-admin="true"] header > div:last-child {
      position: relative !important;
      right: 0 !important;
      left: auto !important;
      margin-left: auto !important;
      margin-right: 0 !important;
      order: 3 !important;
      flex-shrink: 0 !important;
      z-index: 10 !important;
    }
    
    /* Garantir que cards e containers não ultrapassem a largura */
    body[data-admin="true"] main .container,
    body[data-admin="true"] main [class*="container"],
    body[data-admin="true"] main [class*="max-w"] {
      max-width: 100% !important;
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }
    /* Garantir que o container pai da barra de pesquisa não limite o tamanho */
    body[data-admin="true"] main .container > div:has(.search-bar-container) {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Barra de pesquisa e filtros - layout horizontal em todas as versões */
    /* Container da barra de pesquisa - ocupa o espaço restante */
    body[data-admin="true"] main .search-bar-container {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      max-width: none !important;
    }
    body[data-admin="true"] main .search-bar-container [data-testid="search-input"] {
      width: 100% !important;
    }
    /* Filtros muito pequenos - lado a lado em todas as versões */
    body[data-admin="true"] main [data-testid="filter-status"],
    body[data-admin="true"] main [data-testid="filter-plan"],
    body[data-admin="true"] main [data-testid="filter-provider"] {
      width: 60px !important;
      min-width: 60px !important;
      max-width: 60px !important;
      flex-shrink: 0 !important;
    }
    @media (min-width: 768px) {
      body[data-admin="true"] main [data-testid="filter-status"],
      body[data-admin="true"] main [data-testid="filter-plan"],
      body[data-admin="true"] main [data-testid="filter-provider"] {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
      }
    }
    /* Garantir que os botões dos filtros sejam compactos */
    body[data-admin="true"] main [data-testid="filter-status"] button,
    body[data-admin="true"] main [data-testid="filter-plan"] button,
    body[data-admin="true"] main [data-testid="filter-provider"] button {
      padding-left: 0.25rem !important;
      padding-right: 0.25rem !important;
      font-size: 0.625rem !important;
    }
    @media (min-width: 768px) {
      body[data-admin="true"] main [data-testid="filter-status"] button,
      body[data-admin="true"] main [data-testid="filter-plan"] button,
      body[data-admin="true"] main [data-testid="filter-provider"] button {
        font-size: 0.75rem !important;
      }
    }
    
    /* Ajustar grid para mobile - uma coluna quando necessário */
    body[data-admin="true"] main [class*="grid"] {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Exceção: grids com 2 colunas explícitas podem manter 2 colunas */
    body[data-admin="true"] main .admin-grid-2,
    body[data-admin="true"] main [class*="grid-cols-2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    /* Garantir que tabelas sejam scrolláveis horizontalmente */
    body[data-admin="true"] main table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    
    /* Ajustar tamanho de fonte em tabelas mobile */
    body[data-admin="true"] main table th,
    body[data-admin="true"] main table td {
      font-size: 0.75rem !important;
      padding: 0.375rem 0.5rem !important;
    }

    /* Cards compactos em duas colunas */
    body[data-admin="true"] .admin-grid-2,
    [data-path^="/admin"] .admin-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--admin-card-gap-mobile);
    }

    /* Cards compactos - reduzir padding */
    body[data-admin="true"] main .admin-card-compact {
      padding: var(--admin-card-padding-mobile);
    }
    
    /* Cards compactos desktop - reduzir padding */
    @media (min-width: 769px) {
      body[data-admin="true"] main .admin-card-compact {
        padding: var(--admin-card-padding-desktop);
      }
    }

    body[data-admin="true"] .admin-card-compact .space-y-6,
    [data-path^="/admin"] .admin-card-compact .space-y-6 {
      @apply space-y-1;
    }

    body[data-admin="true"] .admin-card-compact .space-y-4,
    [data-path^="/admin"] .admin-card-compact .space-y-4 {
      @apply space-y-1;
    }

    body[data-admin="true"] .admin-card-compact .p-6,
    [data-path^="/admin"] .admin-card-compact .p-6 {
      @apply p-3;
    }

    body[data-admin="true"] .admin-card-compact .p-4,
    [data-path^="/admin"] .admin-card-compact .p-4 {
      @apply p-2;
    }

    body[data-admin="true"] .admin-card-compact .py-8,
    [data-path^="/admin"] .admin-card-compact .py-8 {
      @apply py-2;
    }

    body[data-admin="true"] .admin-card-compact .py-6,
    [data-path^="/admin"] .admin-card-compact .py-6 {
      @apply py-2;
    }

    body[data-admin="true"] .admin-card-compact .gap-6,
    [data-path^="/admin"] .admin-card-compact .gap-6 {
      @apply gap-2;
    }

    body[data-admin="true"] .admin-card-compact .gap-4,
    [data-path^="/admin"] .admin-card-compact .gap-4 {
      @apply gap-2;
    }

    /* Gráficos em coluna no mobile - um embaixo do outro */
    body[data-admin="true"] .grid.grid-cols-1 {
      grid-template-columns: 1fr !important;
      display: grid !important;
    }
    
    /* Garantir que cards de gráficos não tenham largura mínima no mobile */
    body[data-admin="true"] .admin-chart-card {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Gráficos lado a lado em duas colunas apenas no desktop */
    @media (min-width: 768px) {
      body[data-admin="true"] .admin-charts-grid,
      [data-path^="/admin"] .admin-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--admin-card-gap-desktop) !important;
      }
    }

    /* Aumentar um pouco os tamanhos de fonte em mobile */
    body[data-admin="true"] .admin-text-lg,
    [data-path^="/admin"] .admin-text-lg {
      @apply text-base;
    }

    body[data-admin="true"] .admin-text-base,
    [data-path^="/admin"] .admin-text-base {
      @apply text-sm;
    }

    body[data-admin="true"] .admin-text-xl,
    [data-path^="/admin"] .admin-text-xl {
      @apply text-lg;
    }

    /* Reduzir padding em headers de cards - EXCETO SIDEBAR */
    body[data-admin="true"] main .admin-card-compact .card-header {
      @apply py-1.5 px-2;
    }

    body[data-admin="true"] main .admin-card-compact .card-content {
      @apply py-1.5 px-2;
    }
    
    /* Desktop - padding um pouco maior mas ainda reduzido */
    @media (min-width: 769px) {
      body[data-admin="true"] main .admin-card-compact .card-header {
        @apply py-2 px-3;
      }

      body[data-admin="true"] main .admin-card-compact .card-content {
        @apply py-2 px-3;
      }
    }

    /* Remover padding inferior dos cards de gráficos */
    body[data-admin="true"] .admin-chart-card .card-content,
    [data-path^="/admin"] .admin-chart-card .card-content {
      padding-bottom: 0 !important;
      margin-bottom: 0 !important;
    }

    body[data-admin="true"] .admin-chart-card,
    [data-path^="/admin"] .admin-chart-card {
      padding-bottom: 0 !important;
    }
  }
}

/* Switch iOS Style - Garantir dimensões fixas */
[data-radix-switch-root] {
  overflow: visible !important;
}

[data-radix-switch-root]:hover {
  opacity: 0.9;
}

/* Admin Sidebar - Cores customizadas */
/* Hover em qualquer item do menu */
[data-sidebar="menu-item"] a:hover {
  background-color: #A87D5C !important;
  color: white !important;
}

/* Admin Sidebar - Reduzir tamanho de fonte */
body[data-admin="true"] [data-sidebar] a,
body[data-admin="true"] [data-sidebar] button,
body[data-admin="true"] nav[data-sidebar] a,
body[data-admin="true"] nav[data-sidebar] button,
body[data-admin="true"] [data-sidebar] a span,
body[data-admin="true"] [data-sidebar] button span,
body[data-admin="true"] nav[data-sidebar] a span,
body[data-admin="true"] nav[data-sidebar] button span {
  font-size: 12px !important;
}

/* ✅ Sidebar no desktop - permite retrair para mostrar apenas ícones */
@media (min-width: 768px) {
  /* Mostrar botão de toggle no desktop */
  body[data-admin="true"] [data-sidebar="trigger"] {
    display: flex !important;
  }
  
  /* Quando expandida: largura completa (16rem = 256px) */
  body[data-admin="true"] .group.peer[data-state="expanded"] > div:first-child {
    width: 16rem !important;
  }
  
  body[data-admin="true"] .group.peer[data-state="expanded"] > div:last-child {
    width: 16rem !important;
  }
  
  /* Quando colapsada: apenas ícones (3rem = 48px) */
  body[data-admin="true"] .group.peer[data-state="collapsed"] > div:first-child {
    width: 3rem !important;
  }
  
  body[data-admin="true"] .group.peer[data-state="collapsed"] > div:last-child {
    width: 3rem !important;
  }
  
  /* Garantir que a sidebar interna também ajuste quando colapsada */
  body[data-admin="true"] .group.peer[data-state="collapsed"] [data-sidebar="sidebar"] {
    width: 3rem !important;
  }
  
  /* Garantir que textos sejam ocultados quando colapsada */
  body[data-admin="true"] .group.peer[data-state="collapsed"] [data-sidebar="menu-item"] span:not([class*="icon"]) {
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

body[data-admin="true"] [data-sidebar] .truncate,
body[data-admin="true"] nav[data-sidebar] .truncate {
  font-size: 12px !important;
}

body[data-admin="true"] [data-sidebar] [class*="SidebarGroupLabel"],
body[data-admin="true"] nav[data-sidebar] [class*="SidebarGroupLabel"],
body[data-admin="true"] [data-sidebar] [data-sidebar="group-label"],
body[data-admin="true"] nav[data-sidebar] [data-sidebar="group-label"] {
  font-size: 11px !important;
}