/**
 * ╔══════════════════════════════════════════════════════════════════════════════╗
 * ║  COMPONENTS RESPONSIVE CSS v1.0                                              ║
 * ║  Melhorias globais de responsividade, acessibilidade e dark mode             ║
 * ║  Data: 2026-01-31                                                            ║
 * ╚══════════════════════════════════════════════════════════════════════════════╝
 *
 * Este arquivo contém correções e melhorias globais aplicadas a todos os
 * componentes do ERP DotCompany para garantir:
 *  - Touch targets mínimos de 44px
 *  - Safe areas para iPhones com notch
 *  - Contraste adequado no dark mode
 *  - Suporte a viewport dinâmico (100dvh)
 *  - Responsividade em telas ultra-pequenas (320px)
 */

/* =============================================================================
   1. SAFE AREAS PARA IPHONES COM NOTCH
   ============================================================================= */

/* Container com safe-area bottom */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Padding bottom com safe-area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .modal-footer,
    .fixed-bottom,
    .sticky-bottom,
    [class*="fixed"][class*="bottom-0"] {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* =============================================================================
   2. ALTURA DINÂMICA DO VIEWPORT (para teclado virtual)
   ============================================================================= */

/* Container com altura dinâmica */
@supports (height: 100dvh) {
    .h-screen-safe,
    .h-dvh {
        height: 100dvh;
    }

    .min-h-screen-safe,
    .min-h-dvh {
        min-height: 100dvh;
    }

    .max-h-screen-safe,
    .max-h-dvh {
        max-height: 100dvh;
    }
}

/* =============================================================================
   3. TOUCH TARGETS MÍNIMOS (44px)
   ============================================================================= */

/* Classe utilitária para touch target */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* Em dispositivos touch, aumentar área de toque de botões de ícone */
@media (pointer: coarse) {
    .btn-icon,
    .icon-button,
    [class*="p-1"][class*="rounded"],
    [class*="p-2"][class*="rounded"],
    button:has(> i.bi:only-child),
    button:has(> svg:only-child) {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Checkboxes e radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Labels de checkbox/radio também precisam de área mínima */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* =============================================================================
   4. CONTRASTE DARK MODE MELHORADO
   ============================================================================= */

/* Melhorar contraste de textos cinza no dark mode */
.dark .text-gray-500 {
    color: #9ca3af !important; /* gray-400 em vez de gray-500 */
}

/* Textos de placeholders e hints */
.dark .text-gray-400,
.dark [class*="text-gray-400"] {
    color: #a1a1aa !important; /* zinc-400 - mais visível */
}

/* Ícones no dark mode */
.dark .text-gray-300 {
    color: #d1d5db !important;
}

/* Bordas no dark mode - mais visíveis */
.dark .border-gray-700 {
    border-color: #4b5563 !important; /* gray-600 */
}

/* Backgrounds de cards no dark mode */
.dark .bg-gray-800\/50,
.dark .bg-gray-900\/50 {
    background-color: rgba(31, 41, 55, 0.7) !important;
}

/* =============================================================================
   5. RESPONSIVIDADE ULTRA-PEQUENA (320px)
   ============================================================================= */

@media (max-width: 359px) {
    /* Reduzir padding em containers */
    .p-4 {
        padding: 0.75rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Textos menores */
    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

    /* Grids de 2 colunas em vez de 3 */
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Gaps menores */
    .gap-4 {
        gap: 0.5rem !important;
    }

    .gap-3 {
        gap: 0.375rem !important;
    }
}

/* =============================================================================
   6. OVERFLOW PREVENTION
   ============================================================================= */

/* Prevenir scroll horizontal em containers principais */
.overflow-x-safe {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Em mobile, prevenir overflow em modals e drawers */
@media (max-width: 768px) {
    .modal-content,
    .drawer-content,
    [role="dialog"] > div {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* =============================================================================
   7. ACESSIBILIDADE - FOCUS VISIBLE
   ============================================================================= */

/* Focus ring visível para navegação por teclado */
:focus-visible {
    outline: 2px solid var(--color-primary, #0f4c3a);
    outline-offset: 2px;
}

/* Remover outline padrão para mouse */
:focus:not(:focus-visible) {
    outline: none;
}

/* Focus em inputs e selects */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary, #0f4c3a);
    outline-offset: 1px;
    border-color: transparent;
}

/* =============================================================================
   8. BREAKPOINT XS CUSTOMIZADO (para Tailwind)
   ============================================================================= */

/* Breakpoint xs para telas entre 320px e 480px */
@media (min-width: 360px) and (max-width: 479px) {
    .xs\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xs\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xs\:flex-row {
        flex-direction: row;
    }

    .xs\:flex-wrap {
        flex-wrap: wrap;
    }

    .xs\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

/* =============================================================================
   9. ANIMAÇÕES REDUZIDAS (acessibilidade)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   10. PRINT STYLES (ocultar elementos interativos)
   ============================================================================= */

@media print {
    .ia-chat-container,
    .alertas-sino-component,
    [role="dialog"],
    .modal,
    .toast,
    .notification {
        display: none !important;
    }
}

/* =============================================================================
   11. DARK MODE COMPLETO - TOUCH TARGETS E COMPONENTES RESPONSIVOS
   =============================================================================

   Paleta Dark Mode:
   --bg-page: #09090B
   --bg-surface: #18181B
   --bg-card: #1F1F23
   --bg-hover: #27272A
   --text-primary: #F9FAFB
   --text-secondary: #E5E7EB
   --text-muted: #9CA3AF
   --border: #27272A
   --border-light: #3F3F46
   --color-primary: #A78BFA
*/

/* Touch targets em dark mode */
@media (pointer: coarse) {
    .dark .btn-icon,
    .dark .icon-button,
    .dark button:has(> i.bi:only-child),
    .dark button:has(> svg:only-child) {
        background-color: #1F1F23;
        border-color: #3F3F46;
        color: #E5E7EB;
    }

    .dark .btn-icon:hover,
    .dark .icon-button:hover,
    .dark button:has(> i.bi:only-child):hover {
        background-color: #27272A;
        border-color: #A78BFA;
    }

    /* Checkboxes e radio buttons dark mode */
    .dark input[type="checkbox"],
    .dark input[type="radio"] {
        background-color: #1F1F23;
        border-color: #3F3F46;
    }

    .dark input[type="checkbox"]:checked,
    .dark input[type="radio"]:checked {
        background-color: #A78BFA;
        border-color: #A78BFA;
    }

    /* Labels de checkbox/radio dark mode */
    .dark label:has(input[type="checkbox"]),
    .dark label:has(input[type="radio"]) {
        color: #E5E7EB;
    }
}

/* Modal e drawer containers em dark mode */
@media (max-width: 768px) {
    .dark .modal-content,
    .dark .drawer-content,
    .dark [role="dialog"] > div {
        background-color: #1F1F23;
        border: 1px solid #3F3F46;
        color: #F9FAFB;
    }
}

/* Focus visible em dark mode */
.dark :focus-visible {
    outline: 2px solid #A78BFA;
    outline-offset: 2px;
}

.dark :focus:not(:focus-visible) {
    outline: none;
}

.dark input:focus-visible,
.dark select:focus-visible,
.dark textarea:focus-visible {
    outline: 2px solid #A78BFA;
    outline-offset: 1px;
    border-color: transparent;
}

/* Responsividade ultra-pequena dark mode */
@media (max-width: 359px) {
    .dark .p-4,
    .dark .p-6 {
        background-color: #18181B;
    }
}

/* Breakpoint xs dark mode */
@media (min-width: 360px) and (max-width: 479px) {
    .dark .xs\:grid-cols-2,
    .dark .xs\:grid-cols-3 {
        background-color: inherit;
    }
}

/* =============================================================================
   12. DARK MODE - COMPONENTES ADICIONAIS
   ============================================================================= */

/* Safe areas dark mode */
.dark .safe-area-bottom {
    background-color: #18181B;
}

/* Modal footer dark mode */
.dark .modal-footer {
    background-color: #1F1F23;
    border-top: 1px solid #27272A;
}

/* Fixed/Sticky elements dark mode */
.dark .fixed-bottom,
.dark .sticky-bottom {
    background-color: #1F1F23;
    border-top: 1px solid #27272A;
}

/* Overflow containers dark mode */
.dark .overflow-x-safe {
    background-color: #09090B;
}

/* Scrollbars dark mode - Definido em theme-styles.css (linhas 860-868) */

/* Border utilities dark mode */
.dark .border {
    border-color: #27272A !important;
}

.dark .border-t {
    border-top-color: #27272A !important;
}

.dark .border-b {
    border-bottom-color: #27272A !important;
}

.dark .border-l {
    border-left-color: #27272A !important;
}

.dark .border-r {
    border-right-color: #27272A !important;
}

/* Dividers dark mode */
.dark hr,
.dark .divider {
    border-color: #27272A !important;
}

/* Shadow utilities dark mode */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

/* Ring utilities dark mode */
.dark .ring-1,
.dark .ring-2 {
    --tw-ring-color: #3F3F46 !important;
}

/* Backdrop dark mode */
.dark .backdrop-blur,
.dark [class*="backdrop-blur"] {
    background-color: rgba(9, 9, 11, 0.8);
}

/* =============================================================================
   13. DARK MODE - TEXTOS E CORES UTILITÁRIAS
   ============================================================================= */

/* Texto primário */
.dark .text-black,
.dark .text-gray-900 {
    color: #F9FAFB !important;
}

.dark .text-gray-800 {
    color: #E5E7EB !important;
}

.dark .text-gray-700 {
    color: #D1D5DB !important;
}

.dark .text-gray-600 {
    color: #9CA3AF !important;
}

/* Background utilities */
.dark .bg-white {
    background-color: #1F1F23 !important;
}

.dark .bg-gray-50 {
    background-color: #18181B !important;
}

.dark .bg-gray-100 {
    background-color: #1F1F23 !important;
}

.dark .bg-gray-200 {
    background-color: #27272A !important;
}

/* Hover states dark mode */
.dark .hover\:bg-gray-50:hover {
    background-color: #27272A !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: #27272A !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: #3F3F46 !important;
}

/* Links dark mode */
.dark a:not([class*="btn"]):not([class*="nav"]) {
    color: #A78BFA;
}

.dark a:not([class*="btn"]):not([class*="nav"]):hover {
    color: #C4B5FD;
}

/* Selection dark mode */
.dark ::selection {
    background-color: rgba(167, 139, 250, 0.3);
    color: #F9FAFB;
}

/* Placeholder dark mode global */
.dark ::placeholder {
    color: #9CA3AF !important;
    opacity: 1;
}