/* ============================================
   SISTEMA RESPONSIVO E ADAPTATIVO
   Design Adaptável para Todas as Resoluções
   ============================================ */

/* Base: Escala de fonte responsiva usando clamp() */
:root {
    /* Escala fluida de tamanhos (min, preferred, max) */
    --font-size-xs: clamp(0.625rem, 0.7vw, 0.75rem);      /* 10-12px */
    --font-size-sm: clamp(0.75rem, 0.85vw, 0.875rem);     /* 12-14px */
    --font-size-base: clamp(0.875rem, 1vw, 1rem);         /* 14-16px */
    --font-size-lg: clamp(1rem, 1.125vw, 1.125rem);       /* 16-18px */
    --font-size-xl: clamp(1.125rem, 1.25vw, 1.25rem);     /* 18-20px */
    --font-size-2xl: clamp(1.25rem, 1.5vw, 1.5rem);       /* 20-24px */
    --font-size-3xl: clamp(1.5rem, 1.875vw, 1.875rem);    /* 24-30px */
    --font-size-4xl: clamp(1.875rem, 2.25vw, 2.25rem);    /* 30-36px */

    /* Espaçamentos fluidos */
    --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);          /* 4-8px */
    --spacing-sm: clamp(0.5rem, 0.75vw, 0.75rem);         /* 8-12px */
    --spacing-md: clamp(0.75rem, 1vw, 1rem);              /* 12-16px */
    --spacing-lg: clamp(1rem, 1.5vw, 1.5rem);             /* 16-24px */
    --spacing-xl: clamp(1.5rem, 2vw, 2rem);               /* 24-32px */
    --spacing-2xl: clamp(2rem, 3vw, 3rem);                /* 32-48px */

    /* Container responsivo */
    --container-max-width: min(100%, 1920px);
    --container-padding: clamp(1rem, 2vw, 2rem);

    /* Tabelas responsivas */
    --table-font-size: clamp(0.75rem, 0.85vw, 0.875rem);
    --table-padding: clamp(0.5rem, 0.75vw, 0.75rem);

    /* Botões e inputs */
    --input-height: clamp(2rem, 2.5vw, 2.5rem);
    --button-padding: clamp(0.5rem, 0.75vw, 1rem) clamp(1rem, 1.5vw, 1.5rem);
}

/* ============================================
   BREAKPOINTS PRINCIPAIS
   ============================================ */

/* 4K e Ultra Wide (2560px+) - Monitores grandes */
@media screen and (min-width: 2560px) {
    :root {
        /* Aumentar levemente os tamanhos para aproveitar espaço */
        --font-size-base: 1.125rem;
        --spacing-md: 1.25rem;
    }

    body {
        font-size: var(--font-size-base);
        max-width: 2560px;
        margin: 0 auto;
    }

    .container, .content-wrapper {
        max-width: 2400px;
        margin: 0 auto;
    }
}

/* Full HD (1920px-2559px) - Monitores modernos padrão */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    :root {
        --font-size-base: 1rem;
        --spacing-md: 1rem;
    }

    body {
        font-size: var(--font-size-base);
    }
}

/* Desktop HD (1366px-1919px) - Notebooks padrão */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
    :root {
        --font-size-base: 0.9375rem;  /* 15px */
        --spacing-md: 0.875rem;
    }

    .container {
        padding: 0 1.5rem;
    }

    /* Reduzir padding de tabelas */
    table td, table th {
        padding: 0.625rem 0.75rem !important;
        font-size: var(--table-font-size) !important;
    }
}

/* Tablets Landscape e Notebooks pequenos (1024px-1365px) */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
    :root {
        --font-size-base: 0.875rem;  /* 14px */
        --spacing-md: 0.75rem;
        --table-font-size: 0.8125rem;  /* 13px */
    }

    body {
        font-size: var(--font-size-base);
        zoom: 0.9;  /* Zoom automático 90% */
    }

    /* Sidebar mais estreita */
    .sidebar {
        width: 200px !important;
    }

    /* Tabelas compactas */
    table {
        font-size: var(--table-font-size) !important;
    }

    table td, table th {
        padding: 0.5rem 0.625rem !important;
    }

    /* Modais menores */
    .modal-content {
        max-width: 90% !important;
        margin: 2rem auto !important;
    }

    /* Botões compactos */
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
    }
}

/* Tablets Portrait (768px-1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --font-size-base: 0.8125rem;  /* 13px */
        --spacing-md: 0.625rem;
        --table-font-size: 0.75rem;  /* 12px */
    }

    body {
        font-size: var(--font-size-base);
        zoom: 0.85;  /* Zoom automático 85% */
    }

    /* Layout de coluna única */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar oculta ou colapsada */
    .sidebar {
        position: fixed;
        left: -250px;
        transition: left 0.3s ease;
        z-index: 1000;
    }

    .sidebar.active {
        left: 0;
    }

    /* Tabelas scrolláveis */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
        font-size: var(--table-font-size) !important;
    }

    /* Formulários full-width */
    .form-group {
        margin-bottom: 0.75rem;
    }

    input, select, textarea {
        font-size: 16px !important;  /* Previne zoom iOS */
    }
}

/* Mobile Landscape e Tablets pequenos (720px-767px) */
@media screen and (min-width: 720px) and (max-width: 767px) {
    :root {
        --font-size-base: 0.75rem;  /* 12px */
        --spacing-md: 0.5rem;
    }

    body {
        font-size: var(--font-size-base);
        zoom: 0.8;  /* Zoom automático 80% */
    }

    /* Layout simplificado */
    .container {
        padding: 0 0.75rem !important;
    }

    /* Headers compactos */
    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1.125rem !important; }
    h3 { font-size: 1rem !important; }
    h4 { font-size: 0.875rem !important; }

    /* Tabelas ultra-compactas */
    table {
        font-size: 0.6875rem !important;  /* 11px */
    }

    table td, table th {
        padding: 0.375rem 0.5rem !important;
        white-space: nowrap;
    }

    /* Botões menores */
    .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Esconder elementos não essenciais */
    .hide-on-small {
        display: none !important;
    }
}

/* Mobile Portrait (até 719px) */
@media screen and (max-width: 719px) {
    :root {
        --font-size-base: 0.6875rem;  /* 11px */
        --spacing-md: 0.375rem;
    }

    body {
        font-size: var(--font-size-base);
        zoom: 0.75;  /* Zoom automático 75% */
    }

    /* Layout mobile-first */
    .container {
        padding: 0 0.5rem !important;
    }

    /* Menu hamburguer */
    .sidebar {
        position: fixed;
        width: 100% !important;
        left: -100%;
        top: 0;
        bottom: 0;
        background: white;
        z-index: 9999;
        transition: left 0.3s ease;
    }

    .sidebar.active {
        left: 0;
    }

    /* Tabelas em cards */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        padding: 0.5rem;
    }

    td {
        border: none;
        position: relative;
        padding-left: 50% !important;
        text-align: right !important;
        font-size: 0.75rem !important;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
        color: var(--cafe-expresso);
    }

    /* Modals full-screen */
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Botões full-width */
    .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================
   COMPONENTES RESPONSIVOS
   ============================================ */

/* Container responsivo */
.container-responsive {
    width: 100%;
    max-width: var(--container-max-width);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin: 0 auto;
}

/* Grid responsivo */
.grid-responsive {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Tabela responsiva wrapper */
.table-wrapper-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--spacing-md) 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.table-wrapper-responsive table {
    min-width: 100%;
    font-size: var(--table-font-size);
}

/* Cards responsivos */
.card-responsive {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.card-responsive:hover {
    box-shadow: var(--shadow-md);
}

/* Texto responsivo */
.text-responsive {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.text-responsive-sm {
    font-size: var(--font-size-sm);
}

.text-responsive-lg {
    font-size: var(--font-size-lg);
}

/* ============================================
   UTILITÁRIOS RESPONSIVOS
   ============================================ */

/* Esconder em resoluções específicas */
@media screen and (max-width: 1023px) {
    .hide-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }

    .show-mobile {
        display: none !important;
    }
}

/* Ajuste de zoom manual (classe helper) */
.zoom-125 { zoom: 1.25; transform-origin: top left; }
.zoom-110 { zoom: 1.10; transform-origin: top left; }
.zoom-100 { zoom: 1.00; transform-origin: top left; }
.zoom-90  { zoom: 0.90; transform-origin: top left; }
.zoom-80  { zoom: 0.80; transform-origin: top left; }
.zoom-75  { zoom: 0.75; transform-origin: top left; }

/* Controle de zoom via CSS */
.auto-scale {
    transform-origin: top left;
    will-change: transform;
}

/* ============================================
   IMPRESSÃO
   ============================================ */

@media print {
    body {
        zoom: 1 !important;
        font-size: 12pt !important;
    }

    .no-print, .sidebar, .navbar, .btn, .modal {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    table {
        page-break-inside: avoid;
    }
}

/* ============================================
   ACESSIBILIDADE - Preferências do Sistema
   ============================================ */

/* Respeitar preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Modo escuro (se preferência do sistema) */
@media (prefers-color-scheme: dark) {
    :root {
        --creme-juta: #1a1a1a;
        --carvao: #f0f0f0;
    }

    /* Aplicar apenas se não houver tema manual */
    body:not([data-theme]) {
        background-color: #1a1a1a;
        color: #f0f0f0;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    }

    body {
        border: 2px solid currentColor;
    }
}

/* ============================================
   WIDGET DE CONTROLE DE ZOOM
   ============================================ */

.zoom-control-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(74, 44, 42, 0.15);
    padding: 12px 16px;
    z-index: 9998;
    min-width: 180px;
    transition: all 0.3s ease;
}

.zoom-control-widget:hover {
    box-shadow: 0 6px 20px rgba(74, 44, 42, 0.25);
    transform: translateY(-2px);
}

.zoom-control-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--cafe-expresso);
    font-weight: 600;
}

.zoom-control-header i {
    color: var(--verde-folha);
}

#zoom-level-display {
    font-size: 18px;
    font-weight: 700;
    color: var(--terracota);
}

.zoom-control-buttons {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.zoom-btn {
    flex: 1;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--verde-folha), #6a8a68);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.zoom-btn:hover {
    background: linear-gradient(135deg, #6a8a68, var(--verde-folha));
    transform: scale(1.05);
}

.zoom-btn:active {
    transform: scale(0.95);
}

.zoom-control-info {
    text-align: center;
    color: #666;
    font-size: 11px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

/* Notificação de zoom */
.zoom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-left: 4px solid var(--verde-folha);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    max-width: 400px;
    z-index: 9999;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.zoom-notification-content {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.zoom-notification-content > i {
    font-size: 24px;
    color: var(--verde-folha);
    margin-top: 2px;
}

.zoom-notification-content > div {
    flex: 1;
}

.zoom-notification-content strong {
    display: block;
    color: var(--cafe-expresso);
    margin-bottom: 4px;
    font-size: 14px;
}

.zoom-notification-content p {
    margin: 0 0 8px 0;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

.zoom-notification-content small {
    color: #999;
    font-size: 11px;
}

.zoom-notification-content button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.zoom-notification-content button:hover {
    color: var(--terracota);
}

/* Responsividade do widget de zoom */
@media screen and (max-width: 767px) {
    .zoom-control-widget {
        bottom: 10px;
        right: 10px;
        min-width: 150px;
        padding: 10px 12px;
    }

    #zoom-level-display {
        font-size: 16px;
    }

    .zoom-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .zoom-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* ============================================
   FIM DO SISTEMA RESPONSIVO
   ============================================ */