/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * TABLET RESPONSIVE CSS v1.0.2
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * @description Sistema completo de responsividade para tablets 7-12 polegadas
 * @version 1.0.2
 * @date 2026-02-05
 * @breakpoints 768px - 1024px
 * @compatibility iPad, Galaxy Tab, Surface, Fire HD
 *
 * ⛔ REGRA DE OURO - COMPONENTES AUTÔNOMOS:
 *    NENHUMA regra neste arquivo pode afetar os componentes autônomos!
 *    Seletores genéricos DEVEM ter exclusões para:
 *    - #header-mobile-component *
 *    - #footer-mobile-component *
 *    - #footer-desktop-component *
 *    - #header-desktop-component *
 *    - #sidebar-component *
 *
 * DISPOSITIVOS ALVO:
 * - iPad Mini (7.9"): 768×1024px
 * - iPad Air (10.9"): 820×1180px
 * - Galaxy Tab A (10.1"): 800×1280px
 * - Surface Go (10"): 800×1280px
 * - iPad Pro 11": 834×1194px
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. SIDEBAR - MENU LATERAL OTIMIZADO
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Sidebar mais estreito em tablets LANDSCAPE (220px vs 280px) */
  aside:not(.collapsed) {
    width: 220px !important;
  }

  /* Conteúdo principal ajustado - APENAS LANDSCAPE */
  main {
    margin-left: 220px !important;
  }

  aside.collapsed {
    width: 80px !important;
  }

  main.collapsed-sidebar {
    margin-left: 80px !important;
  }

  /* Menu items mais compactos */
  aside .menu-item {
    padding: 0.625rem 0.875rem !important;
  }

  aside .menu-item span {
    font-size: 0.875rem !important;
  }

  /* Logo do sidebar reduzida */
  aside .sidebar-header-gradient img {
    width: 40px !important;
    height: 40px !important;
  }

  aside .sidebar-header-gradient h1 {
    font-size: 1rem !important;
  }
}

/* Tablets landscape - sidebar colapsado por padrão */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  aside:not(.force-expanded) {
    width: 80px !important;
  }

  aside:not(.force-expanded) .menu-item span.ml-2 {
    display: none !important;
  }

  main {
    margin-left: 80px !important;
  }

  /* Tooltips para menu colapsado em tablets landscape */
  aside:not(.force-expanded) .menu-item::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    background: rgba(30, 30, 30, 0.95);
    color: #f5f5f5;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;  /* Aumentado de 0.75rem para melhor legibilidade */
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  aside:not(.force-expanded) .menu-item:hover::after {
    opacity: 1;
  }

  /* Dark mode: tooltips com fundo mais claro para contrastar */
  .dark aside:not(.force-expanded) .menu-item::after {
    background: rgba(75, 85, 99, 0.95);  /* Gray-600 com alpha */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(107, 114, 128, 0.3);  /* Borda sutil */
  }
}

/* Tablets portrait - sidebar overlay (menu controlado por Alpine.js)
   NOTA: NÃO afeta #sidebar-component (autônomo com CSS próprio) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Sidebar como overlay - NÃO sobrescrever transform do Alpine.js */
  aside:not(#sidebar-component) {
    position: fixed !important;
    z-index: 40 !important;
    width: 280px !important;
    /* Alpine.js controla: translate-x-0 (aberto) / -translate-x-full (fechado) */
  }

  /* CRÍTICO: Main ocupa 100% da largura - SEM margin-left em portrait */
  main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Overlay mais suave - Light mode */
  .sidebar-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(2px);  /* Safari */
    backdrop-filter: blur(2px);
  }

  /* Dark mode: overlay mais opaco para contrastar */
  .dark .sidebar-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(4px);  /* Safari */
    backdrop-filter: blur(4px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. HEADER/NAVBAR - OTIMIZADO PARA TABLETS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Header mobile em tablets - aumentar elementos */
  header.lg\:hidden {
    height: 72px !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Botões de ação maiores (48x48px touch-friendly) */
  header.lg\:hidden button,
  header.lg\:hidden a[class*="theme-button"] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Ícones do header - REMOVIDO: agora controlado centralmente em bootstrap-icons-premium.css */

  /* Logo não truncar */
  header.lg\:hidden h1 {
    font-size: 1rem !important;
    max-width: 280px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* Espaçamento entre botões */
  header.lg\:hidden .flex.gap-2 {
    gap: 0.625rem !important;
  }

  /* Badge de notificação maior */
  header button .animate-pulse {
    width: 18px !important;
    height: 18px !important;
    top: 6px !important;
    right: 6px !important;
  }
}

/* Tablets grandes (960px+) - mostrar header desktop */
@media (min-width: 960px) and (max-width: 1024px) and (orientation: landscape) {
  header.lg\:flex.hidden {
    display: flex !important;
  }

  header.lg\:hidden {
    display: none !important;
  }

  header.lg\:flex {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Compactar breadcrumb */
  header.lg\:flex nav[aria-label="Breadcrumb"] {
    max-width: 200px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  header.lg\:flex nav[aria-label="Breadcrumb"]::-webkit-scrollbar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. TIPOGRAFIA - ESCALA INTERMEDIÁRIA
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Base font-size */
  :root {
    font-size: clamp(14px, 1.75vw, 16px);
  }

  body {
    font-size: clamp(0.9375rem, 2vw, 1rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Headings responsivos - EXCETO componentes autônomos */
  h1:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .h1:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
    line-height: 1.2;
  }

  h2:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .h2:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    font-size: clamp(1.5rem, 3.5vw, 1.875rem) !important;
    line-height: 1.3;
  }

  h3:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .h3:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
    line-height: 1.4;
  }

  h4:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .h4:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  }

  h5:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .h5:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
  }

  h6:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .h6:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    font-size: clamp(0.875rem, 1.75vw, 1.125rem) !important;
  }

  /* Paragrafos - EXCETO componentes autônomos */
  p:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *),
  .text-base:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *) {
    line-height: clamp(1.5, 0.2vw + 1.4, 1.7);
    max-width: 75ch;
  }

  /* Texto pequeno mais legível - EXCETO componentes autônomos */
  .text-xs:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *) {
    font-size: 0.8125rem !important;
  }

  .text-sm:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *) {
    font-size: 0.9375rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. GRID SYSTEM - COLUNAS INTERMEDIÁRIAS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Grid KPIs: 3 colunas em tablets */
  .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.875rem !important;
  }

  /* Grid atalhos: 5-6 colunas em tablets (não 8-9) */
  .grid.grid-cols-4.md\:grid-cols-8,
  .grid.md\:grid-cols-8 {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .grid.md\:grid-cols-7 {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .grid.lg\:grid-cols-9 {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  /* Layout 3 colunas → 2 colunas em tablets */
  .grid.lg\:grid-cols-3:not(.keep-3-cols) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .lg\:col-span-2 {
    grid-column: span 1 / span 1 !important;
  }

  /* Gaps responsivos - EXCETO componentes autônomos */
  .gap-2:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 0.625rem !important;
  }

  .gap-3:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 0.875rem !important;
  }

  .gap-4:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 1rem !important;
  }

  .gap-5:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 1.125rem !important;
  }

  .gap-6:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 1.25rem !important;
  }
}

/* Tablets landscape - aproveitar espaço horizontal */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .grid.grid-cols-2 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid.grid-cols-1 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. CONTAINERS E PADDING
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Containers com padding intermediário */
  .container,
  [data-dashboard="true"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Content area */
  .content-area,
  main > div {
    padding: 1.125rem !important;
  }

  /* Cards padding */
  .bg-white.rounded-xl,
  .dark\:bg-gray-800.rounded-xl {
    padding: 1.25rem !important;
  }

  /* Dashboard cards */
  [data-dashboard="true"] .rounded-xl[class*="bg-gradient"] {
    padding: 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. FORMULÁRIOS - INPUTS E CAMPOS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Inputs otimizados */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select:not([multiple]),
  textarea {
    font-size: 15px !important;
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
  }

  /* Labels de formulário - mais específico para não afetar outros labels (charts, badges, etc) */
  form label,
  .form-group label,
  .form-control + label,
  label[for] {
    font-size: 0.9375rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Checkboxes e radios - WCAG 2.1 compliant (44x44px mínimo para touch targets)
     IMPORTANTE: Exclui checkboxes com classes de tamanho explícitas (w-4, w-5, h-4, h-5)
     para não quebrar layouts compactos intencionais */
  input[type="checkbox"]:not([class*="w-4"]):not([class*="w-5"]):not([class*="h-4"]):not([class*="h-5"]),
  input[type="radio"]:not([class*="w-4"]):not([class*="w-5"]):not([class*="h-4"]):not([class*="h-5"]) {
    width: 2.75rem !important;    /* 44px - WCAG AA compliant */
    height: 2.75rem !important;   /* 44px - WCAG AA compliant */
    cursor: pointer;
  }

  /* Checkboxes compactos (w-4, w-5) mantêm tamanho original mas ganham área de toque maior via padding */
  input[type="checkbox"][class*="w-4"],
  input[type="checkbox"][class*="w-5"],
  input[type="radio"][class*="w-4"],
  input[type="radio"][class*="w-5"] {
    /* Não altera tamanho, mas adiciona margem para área de toque */
    margin: 0.5rem !important;
  }

  /* Labels ao lado de checkboxes/radios também devem ser touch-friendly */
  input[type="checkbox"]:not([class*="w-4"]):not([class*="w-5"]) + label,
  input[type="radio"]:not([class*="w-4"]):not([class*="w-5"]) + label {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 0.5rem !important;
  }

  /* Grid de formulários: 2 colunas */
  .grid:not(.empresa-grid-sidebar):not(.form-sidebar-grid):not(.keep-1-col) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.125rem !important;
  }

  /* Selects - dropdown maior */
  select {
    background-size: 18px 18px !important;
    padding-right: 2.5rem !important;
  }

  /* Textarea altura mínima */
  textarea {
    min-height: 100px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. BOTÕES E TOUCH TARGETS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Botões com área mínima de 44x44px - EXCETO componentes autônomos
     IMPORTANTE: Exclui botões com padding explícito para não sobrescrever layouts customizados */
  .btn:not([class*="px-8"]):not([class*="px-10"]):not([class*="px-12"]):not([class*="py-4"]):not([class*="py-5"]):not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  button:not(.modal-close-btn):not(.menu-item):not([class*="px-8"]):not([class*="px-10"]):not([class*="px-12"]):not([class*="py-4"]):not([class*="py-5"]):not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  a.btn:not([class*="px-8"]):not([class*="px-10"]):not([class*="px-12"]):not([class*="py-4"]):not([class*="py-5"]):not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    min-height: 46px !important;
    min-width: 46px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
  }

  .btn-sm:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    min-height: 42px !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.9375rem !important;
  }

  /* Botões icon-only - EXCETO componentes autônomos */
  .btn-icon:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  button[class*="w-9"]:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  button[class*="w-10"]:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  a[class*="w-9"]:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  a[class*="w-10"]:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    min-width: 46px !important;
    min-height: 46px !important;
    width: 46px !important;
    height: 46px !important;
  }

  /* Ícones dentro de botões - EXCETO componentes autônomos */
  .btn:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) i,
  button:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) i,
  a.btn:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) i {
    font-size: 1.125rem !important;
  }

  /* FAB maior */
  .fixed.bottom-6.right-6.z-20 > a,
  .fixed.bottom-6.right-6.z-20 > button {
    width: 4rem !important;
    height: 4rem !important;
    font-size: 1.75rem !important;
  }

  /* Espaçamento entre botões adjacentes - EXCETO componentes autônomos */
  .flex.gap-1:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 0.5rem !important;
  }

  .flex.gap-2:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    gap: 0.75rem !important;
  }

  /* Feedback visual touch - EXCETO componentes autônomos */
  button:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *):active,
  a.btn:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *):active,
  .touchable:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *):active {
    transform: scale(0.97) !important;
    opacity: 0.95 !important;
  }

  button:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  a.btn:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *),
  .touchable:not(#footer-desktop-component *):not(#footer-mobile-component *):not(#header-desktop-component *):not(#header-mobile-component *):not(#sidebar-component *) {
    transition: all 0.15s ease-in-out !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. MODAIS E DIALOGS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Modal padrão */
  .modal-content-teleport {
    max-width: min(85vw, 680px) !important;
    max-height: calc(90vh - 2rem) !important;
    margin: 1rem !important;
  }

  .modal-content-teleport.modal-sm {
    max-width: min(75vw, 480px) !important;
  }

  .modal-content-teleport.modal-lg {
    max-width: min(90vw, 760px) !important;
  }

  .modal-content-teleport.modal-xl {
    max-width: min(92vw, 860px) !important;
  }

  /* Body com mais altura */
  .modal-body-scrollable {
    max-height: calc(80vh - 160px) !important;
    padding: 1.25rem !important;
  }

  /* Botão fechar maior */
  .modal-close-btn {
    font-size: 1.75rem !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }

  /* Footer botões */
  .modal-footer-fixed .btn {
    font-size: 1rem !important;
    padding: 0.875rem 1.5rem !important;
    min-height: 48px !important;
  }

  /* Bootstrap modals compatibility */
  .modal-dialog {
    max-width: 88vw !important;
    margin: 1.5rem auto !important;
  }

  .modal-dialog.modal-lg {
    max-width: min(90vw, 760px) !important;
  }

  .modal-dialog.modal-xl {
    max-width: min(92vw, 860px) !important;
  }
}

/* Tablets portrait - modals quase fullscreen */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .modal-content-teleport {
    max-width: 92vw !important;
    max-height: 88vh !important;
  }

  .modal-content-teleport.modal-lg,
  .modal-content-teleport.modal-xl {
    max-width: 95vw !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. TABELAS E LISTAS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tabelas legíveis */
  table {
    font-size: 0.9375rem !important;
  }

  table th,
  table td {
    padding: 0.75rem 0.875rem !important;
  }

  /* Scroll horizontal suave */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Sticky column - Light mode */
  table th.sticky,
  table td.sticky {
    left: 0;
    position: sticky;
    z-index: 20;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
    background: inherit;
  }

  /* Dark mode: shadow mais forte para visibilidade */
  .dark table th.sticky,
  .dark table td.sticky {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4), 1px 0 0 rgba(75, 85, 99, 0.3);
  }

  /* Cards de lista */
  .swipe-content {
    padding: 0.875rem !important;
  }

  .swipe-content .w-12.h-12 {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  /* Paginação */
  .flex.items-center.justify-between.mt-6 button {
    min-height: 48px !important;
    min-width: 48px !important;
    font-size: 1rem !important;
    padding: 0.625rem 1rem !important;
  }
}

/* Tablets landscape - permitir view table */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Habilitar tabela em landscape */
  [x-show*="!isMobile && view === 'table'"] {
    display: block !important;
  }

  /* Cards em 2 colunas */
  .space-y-2,
  .space-y-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. TOASTS E NOTIFICAÇÕES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  #notification-container,
  .toast-container {
    top: 1.5rem !important;
    right: 1.5rem !important;
  }

  .toast {
    min-width: 340px !important;
    max-width: 450px !important;
    font-size: 0.9375rem !important;
  }

  .toast h4 {
    font-size: 1.0625rem !important;
  }

  .toast .bi {
    font-size: 1.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. CARDS DASHBOARD E KPIs
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Cards KPI - Classes específicas por dashboard
     IMPORTANTE: Usar classes específicas ao invés de seletores genéricos para evitar colisões */
  .dashboard-stat-card,
  main [data-dashboard="true"] [class*="stat-card"],
  main .dashboard-container [class*="stat-card"] {
    padding: 1.125rem !important;
  }

  /* Valores KPI - Requer contexto de main/dashboard */
  .dashboard-stat-card h3,
  main [data-dashboard="true"] [class*="stat-card"] h3,
  main [data-dashboard="true"] [class*="stat-card"] .text-2xl,
  main [data-dashboard="true"] [class*="stat-card"] .text-3xl {
    font-size: 1.75rem !important;
  }

  /* Labels KPI */
  main [data-dashboard="true"] [class*="stat-card"] .text-xs,
  main [data-dashboard="true"] [class*="stat-card"] .text-sm {
    font-size: 0.8125rem !important;
  }

  /* Ícones KPI */
  main [data-dashboard="true"] [class*="stat-card"] .w-10.h-10 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* Atalhos rápidos - Classes específicas
     IMPORTANTE: Evita afetar elementos não relacionados */
  .salon-shortcut,
  .dist-shortcut,
  .dashboard-shortcut,
  main [data-dashboard="true"] [class*="shortcut"],
  main .dashboard-container [class*="shortcut"] {
    min-height: 80px !important;
    padding: 0.75rem !important;
  }

  .salon-shortcut i,
  .dist-shortcut i,
  main [data-dashboard="true"] [class*="shortcut"] i {
    font-size: 1.375rem !important;
  }

  .salon-shortcut span,
  .dist-shortcut span,
  main [data-dashboard="true"] [class*="shortcut"] span {
    font-size: 0.6875rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. BOTTOM NAVIGATION E FAB
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Ocultar bottom nav em tablets landscape */
  .bottom-nav,
  nav[x-show*="isMobile"] {
    display: none !important;
  }

  /* FAB visível em landscape */
  .fixed.bottom-6.right-6.z-20 {
    display: flex !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Manter bottom nav em portrait mas com mais espaço */
  .bottom-nav,
  nav.fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0.5rem) !important;
    height: auto !important;
    min-height: 4.5rem !important;
  }

  /* Itens do bottom nav */
  .bottom-nav a,
  .bottom-nav button {
    min-height: 48px !important;
    font-size: 0.75rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Dropdown user menu */
  [x-data*="open"] .fixed.w-56 {
    width: min(320px, 90vw) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* Itens de dropdown */
  .dropdown-item,
  .menu-item,
  [role="menuitem"] {
    min-height: 48px !important;
    padding: 0.875rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  /* Ícones em dropdowns */
  .dropdown-item i,
  [role="menuitem"] i {
    font-size: 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13.5 FORMULÁRIOS COM SIDEBAR (WIZARD NF-e, etc.)
   ═══════════════════════════════════════════════════════════════════════════════
   USANDO CLASSES ESPECÍFICAS para garantir funcionamento com Tailwind v4 browser runtime
   Classes adicionadas nos templates: tablet-form-grid, tablet-form-content,
   tablet-form-sidebar, tablet-sidebar-cards
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Tablets - Reorganizar layout de formulários com sidebar */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Grid principal: forçar coluna única em tablets */
  .tablet-form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Conteúdo principal: largura total, vem primeiro */
  .tablet-form-content {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
  }

  /* Sidebar: largura total, vai para baixo do conteúdo */
  .tablet-form-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
  }

  /* Container dos cards do sidebar: layout horizontal flex */
  .tablet-sidebar-cards {
    position: relative !important;
    top: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  /* Cards do sidebar lado a lado (50% cada) */
  .tablet-sidebar-cards > div {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: 280px !important;
    padding: 1rem !important;
  }

  /* Se tiver 3+ cards, o terceiro em diante ocupa 100% */
  .tablet-sidebar-cards > div:nth-child(n+3) {
    flex: 1 1 100% !important;
  }

  /* Títulos dos cards do sidebar */
  .tablet-sidebar-cards h3 {
    font-size: 0.9375rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Wizard steps: mais compactos */
  .wizard-step {
    padding: 1rem 0.75rem !important;
  }

  .wizard-step-number {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Texto dos wizard steps */
  .wizard-step .font-bold {
    font-size: 0.875rem !important;
  }

  /* Cards de seleção de tipo de operação */
  .grid[class*="md:grid-cols-3"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Terceiro card (se existir) ocupa linha inteira */
  .grid[class*="md:grid-cols-3"] > label:nth-child(3) {
    grid-column: span 2 !important;
  }

  /* Cards de tipo de operação mais compactos */
  .grid[class*="md:grid-cols-3"] label > div[class*="rounded-2xl"] {
    padding: 1rem !important;
  }

  /* Ícones menores nos cards de tipo */
  .grid[class*="md:grid-cols-3"] .w-16 {
    width: 3rem !important;
    height: 3rem !important;
  }

  .grid[class*="md:grid-cols-3"] .w-16 i {
    font-size: 1.25rem !important;
  }

  /* Texto menor nos cards de tipo */
  .grid[class*="md:grid-cols-3"] .text-lg {
    font-size: 1rem !important;
  }

  .grid[class*="md:grid-cols-3"] .text-xs {
    font-size: 0.6875rem !important;
    line-height: 1.4 !important;
  }

  /* Lista de características nos cards de tipo */
  .grid[class*="md:grid-cols-3"] label > div > div:last-child {
    font-size: 0.75rem !important;
  }
}

/* Tablets Portrait - Layout ainda mais compacto */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Cards do sidebar: todos em coluna única se muito estreito */
  [class*="lg:col-span-1"] > [class*="lg:sticky"] > div {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Mas Progresso e Resumo podem ficar lado a lado */
  [class*="lg:col-span-1"] > [class*="lg:sticky"] > div:nth-child(1),
  [class*="lg:col-span-1"] > [class*="lg:sticky"] > div:nth-child(2) {
    min-width: calc(50% - 0.5rem) !important;
    flex: 1 1 calc(50% - 0.5rem) !important;
  }

  /* Cards de tipo: 1 coluna em portrait estreito */
  .grid[class*="md:grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  .grid[class*="md:grid-cols-3"] > label:nth-child(3) {
    grid-column: span 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. ACESSIBILIDADE E FOCUS STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Focus visível - APENAS botões e links
     IMPORTANTE: Não inclui input/select pois conflita com animações de base_form */
  button:focus-visible,
  a:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.5) !important;
    outline-offset: 2px !important;
  }

  .dark button:focus-visible,
  .dark a:focus-visible {
    outline-color: rgba(168, 85, 247, 0.5) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15. SUBSCRIPTION BANNER
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Banner layout */
  .subscription-banner .flex-col.sm\:flex-row {
    flex-direction: row !important;
  }

  /* Botões do banner */
  .subscription-banner .flex-1.md\:flex-none {
    flex: none !important;
  }

  .subscription-banner .btn {
    padding: 0.75rem 1.25rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16. FIXES ESPECÍFICOS - iPad
   ═══════════════════════════════════════════════════════════════════════════════ */

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* iPad Retina - ajustes finos */
  body {
    font-size: 16px;
    letter-spacing: 0.01em;
  }

  h1, h2, h3 {
    letter-spacing: -0.01em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   17. PRINT STYLES (opcional para tablets)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print and (min-width: 768px) and (max-width: 1024px) {
  /* NOTA: aside genérico para compatibilidade, sidebar-component tem regras próprias */
  aside:not(#sidebar-component) {
    display: none !important;
  }

  main {
    margin-left: 0 !important;
  }

  .no-print {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIM DO ARQUIVO tablet-responsive.css
   ═══════════════════════════════════════════════════════════════════════════════ */