/**
 * RESPONSIVE MOBILE TYPOGRAPHY & LAYOUT
 * =====================================
 *
 * Arquivo separado para fácil reversão
 * Para desabilitar: comente a importação em index.html
 * Para reverter totalmente: delete este arquivo + linha de importação
 *
 * Created: 2025-02-17
 * Branch: feature/responsive-mobile
 */

/* ===== RESPONSIVE ROOT TYPOGRAPHY ===== */
/* Escala automaticamente com tamanho de tela */

:root {
    font-size: 16px; /* Base: 1rem = 16px */
}

/* Tablet (600px+) */
@media (min-width: 600px) {
    :root {
        font-size: 16px;
    }
}

/* Mobile normal (480-600px) - Reduz para 14px */
@media (max-width: 600px) {
    :root {
        font-size: 14px; /* 1rem = 14px */
    }
}

/* Mobile pequeno (360-480px) - Reduz para 13px */
@media (max-width: 480px) {
    :root {
        font-size: 13px; /* 1rem = 13px */
    }
}

/* Mobile muito pequeno (<360px) - Reduz para 12px */
@media (max-width: 360px) {
    :root {
        font-size: 12px; /* 1rem = 12px */
    }
}

/* ===== BODY BASE ===== */
body {
    font-size: 1rem; /* Escalável com root */
    line-height: 1.5; /* Melhor legibilidade */
    letter-spacing: 0.3px;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* 0-360px: Galaxy S5, Moto G (CRÍTICO) */
@media (max-width: 360px) {
    /* Tipografia compacta */
    .stat-label {
        font-size: 0.75rem;
    }

    .stat-value {
        font-size: 1.3rem; /* Reduzido de 1.8rem */
    }

    .section-title {
        font-size: 0.9rem;
    }

    .admin-tab {
        font-size: 0.85rem;
    }

    .tab-count {
        font-size: 0.65rem;
    }

    .badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    /* Layout compacto */
    .admin-main {
        padding: 12px;
    }

    .admin-nav {
        padding: 0 16px;
    }

    .admin-tabs {
        padding: 8px 16px 0;
    }

    .stats-grid {
        gap: 10px;
        margin-bottom: 20px;
    }

    .stat-card {
        padding: 12px;
    }

    /* Tabelas */
    .admin-table {
        font-size: 0.8rem;
    }

    .admin-table th {
        padding: 8px 10px;
        font-size: 0.65rem;
    }

    .admin-table td {
        padding: 8px 10px;
    }

    /* Inputs - CRÍTICO: >= 16px para evitar zoom automático */
    input,
    select,
    textarea {
        font-size: 16px;
        padding: 10px;
    }

    /* Botões - Touch targets >= 44px */
    .action-btn {
        padding: 8px 12px;
        min-height: 44px;
    }

    .btn-primary,
    .btn-danger {
        min-height: 48px;
    }

    /* Search */
    .search-input {
        min-width: auto;
        width: 100%;
    }

    /* Modal */
    .modal-content {
        width: 90vw;
        margin: 0 auto;
    }
}

/* 361-480px: iPhone SE, Galaxy A (COMUM) */
@media (min-width: 361px) and (max-width: 480px) {
    .stat-label {
        font-size: 0.8rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .admin-main {
        padding: 16px;
    }

    .stats-grid {
        gap: 12px;
        margin-bottom: 24px;
    }

    .stat-card {
        padding: 16px;
    }

    .admin-table th {
        padding: 10px 12px;
        font-size: 0.7rem;
    }

    .admin-table td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* Inputs - Ainda >= 16px para Android */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .search-input {
        min-width: 250px;
    }
}

/* 481-768px: Tablets pequenas */
@media (min-width: 481px) and (max-width: 768px) {
    .stat-value {
        font-size: 1.6rem;
    }

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

    .admin-main {
        padding: 20px;
    }

    .search-input {
        min-width: 350px;
    }

    input,
    select,
    textarea {
        font-size: 14px;
    }
}

/* 769px+: Desktop / Tablets grandes */
@media (min-width: 769px) {
    .stat-value {
        font-size: 1.8rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .admin-main {
        padding: 32px;
    }
}

/* ===== LANDSCAPE MODE (Qualquer tamanho) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .admin-nav {
        height: 48px;
    }

    .admin-tabs {
        padding: 8px 16px 0;
    }

    .admin-tab {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .stat-card {
        padding: 12px;
    }

    .admin-main {
        padding: 12px;
    }

    .stats-grid {
        margin-bottom: 16px;
    }
}

/* ===== SAFE AREA (iPhone X+, notches) ===== */
@supports (padding: max(0px)) {
    .admin-nav,
    .admin-main {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* ===== FIX: Prevent text size adjustment on orientation change ===== */
@media (orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* ===== ICON SCALING FOR SMALL ANDROID SCREENS ===== */
/* Reduz ícones da toolbar para caber em telas pequenas */

/* 320-360px: Galaxy S5, Moto G (CRÍTICO) */
@media (max-width: 360px) {
    /* ===== DESIGN STUDIO GRID - REDUZIR COLUNA TOOLBAR ===== */

    /* Reduz a coluna da toolbar de 80px para 50px */
    .design-studio {
        grid-template-columns: 50px 1fr !important;
    }

    /* ===== STUDIO TOOLBAR - ULTRA COMPACTO ===== */

    /* Tool icon containers - MUITO REDUZIDOS (40px -> 24px) */
    .tool-icon {
        width: 24px !important;
        height: 24px !important;
        padding: 2px !important;
        border-radius: 4px;
    }

    .tool-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Tool items com menos espaço */
    .tool-item {
        padding: 2px !important;
        gap: 2px !important;
        margin: 0 !important;
    }

    .tool-item span {
        font-size: 0.5rem !important;
    }

    /* Studio toolbar - espaçamento MÍNIMO */
    .studio-toolbar {
        gap: 1px !important;
        padding: 2px 1px !important;
    }

    /* Toolbar title escondido */
    .toolbar-title {
        font-size: 0.4rem !important;
        margin-bottom: 1px !important;
        height: 14px;
    }

    /* Toolbar items container */
    .toolbar-items {
        gap: 1px !important;
    }

    /* Studio toolbar buttons */
    .studio-toolbar button {
        padding: 2px 3px !important;
        font-size: 0.6rem !important;
        min-height: auto !important;
        height: 28px;
        min-width: 28px;
        width: 28px;
    }

    .studio-toolbar button svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Action divider minimizado */
    .action-divider {
        margin: 1px 0 !important;
        height: 0.5px;
    }

    /* All SVG icons ultra reduzidos */
    [class*="tool"] svg,
    [class*="icon"] svg,
    button svg {
        width: 12px !important;
        height: 12px !important;
    }

    button > svg,
    .button > svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* CRÍTICO: Reduzir SVGs na toolbar especificamente */
    .studio-toolbar svg {
        width: 12px !important;
        height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
    }

    .tool-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Bottom navigation icons */
    .tab-icon,
    nav button,
    .bottom-nav button {
        padding: 6px;
        font-size: 0.7rem;
    }

    /* Toolbar buttons */
    .toolbar button,
    .action-bar button {
        padding: 4px 6px;
        min-height: 32px;
    }

    /* Icon containers */
    [role="toolbar"] {
        gap: 1px;
    }

    /* Studio tools container */
    .studio-tools,
    .tools-container {
        gap: 1px;
        padding: 2px 1px;
    }
}

/* 361-480px: iPhone SE, Galaxy A (COMUM) */
@media (min-width: 361px) and (max-width: 480px) {
    [class*="tool"] svg,
    [class*="icon"] svg {
        width: 20px;
        height: 20px;
    }

    .studio-tools,
    .tools-container {
        gap: 8px;
        padding: 10px 6px;
    }

    [role="toolbar"] {
        gap: 6px;
    }
}