/* =========================================================
   MAIN-V2-MOBILE.CSS
   Camada responsiva para o sistema definido em main-v2.css.
   Carregar DEPOIS de main-v2.css:

   <link rel="stylesheet" href="main-v2.css">
   <link rel="stylesheet" href="main-v2-mobile.css">

   Estratégia: mobile-first apenas nesta camada, via @media,
   preservando 100% do visual "dark tech" original em telas
   maiores. Dois breakpoints:
     - 1024px -> tablet / notebook pequeno
     - 640px  -> smartphone
========================================================= */

/* =========================================================
   TABLET / NOTEBOOK PEQUENO (<= 1024px)
========================================================= */
@media (max-width: 1024px) {

    .app-shell,
    .app-footer {
        width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
    }

    .app-shell {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* Grids principais passam de 4 para 2 colunas */
    .stats-grid,
    .result-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* Workspace de cálculo: sidebar deixa de ser fixa lateral */
    .calculation-workspace,
    .show-two-columns {
        grid-template-columns: 1fr;
    }

    .calculation-live-sidebar {
        position: static;
        top: auto;
    }

    .live-compact-card {
        max-width: none;
        margin-left: 0;
    }
}

/* =========================================================
   SMARTPHONE (<= 640px)
========================================================= */
@media (max-width: 640px) {

    .app-shell,
    .app-footer {
        width: calc(100% - 24px);
    }

    .app-footer {
        margin-top: 36px;
        margin-bottom: 20px;
        padding-top: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* ---------- Hero ---------- */
    .page-hero {
        margin-bottom: 20px;
    }

    .page-hero h1 {
        font-size: clamp(28px, 9vw, 40px);
        letter-spacing: 0.05em;
    }

    .page-hero p {
        max-width: 100%;
        line-height: 1.6;
    }

    .section-gap {
        margin-bottom: 18px;
    }

    /* ---------- Navbar ---------- */
    .app-topbar {
        height: auto;
        min-height: 64px;
        margin: 14px 12px;
        padding: 12px 16px;
        border-radius: 22px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .navbar-logo {
        width: 120px;
    }

    .app-nav {
        order: 3;
        width: 100%;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-nav::-webkit-scrollbar {
        display: none;
    }

    .app-nav a {
        flex-shrink: 0;
        font-size: 11px;
    }

    .btn-logout {
        padding: 9px 16px;
        font-size: 11px;
    }

    /* ---------- Botões ---------- */
    .btn-logout,
    .btn-primary-red,
    .btn-secondary-tech,
    .login-form button {
        padding: 12px 18px;
        font-size: 12px;
    }

    .form-actions {
        flex-direction: column-reverse;
        gap: 10px;
        margin-top: 20px;
    }

    .form-actions .btn-primary-red,
    .form-actions .btn-secondary-tech,
    .form-actions .btn-logout {
        width: 100%;
    }

    .table-actions {
        flex-wrap: wrap;
    }

    /* ---------- Cards / painéis ---------- */
    .panel-card {
        padding: 18px;
        border-radius: 18px;
    }

    .stat-card {
        padding: 16px;
    }

    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .panel-header > * {
        width: 100%;
    }

    .empty-state {
        padding: 32px 18px;
    }

    /* ---------- Grids que ainda eram 2 colunas ---------- */
    .stats-grid,
    .result-summary-grid,
    .formula-grid,
    .form-grid,
    .detail-list.two,
    .live-mini-grid,
    .calculation-main .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.wide,
    .detail-list .wide {
        grid-column: auto;
    }

    /* ---------- Tabelas ----------
       Em telas pequenas, mantemos a tabela real (sem reestruturar
       em cards) mas garantimos rolagem horizontal suave e reduzimos
       densidade, já que não há marcação data-label no HTML atual. */
    .table-wrap,
    .panel-card .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-dark-tech,
    .population-table {
        min-width: 560px;
    }

    .table-dark-tech th,
    .table-dark-tech td,
    .compact-table th,
    .compact-table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    .no-scroll-table {
        overflow-x: auto;
    }

    /* ---------- Formulários ---------- */
    .section-title {
        gap: 10px;
        margin-bottom: 18px;
    }

    .section-title span {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .form-field input,
    .form-field select,
    .form-field textarea,
    .population-table input,
    .login-form input {
        padding: 12px 13px;
        font-size: 16px; /* evita zoom automático no iOS */
    }

    .check-option {
        padding: 12px;
    }

    /* ---------- Login ---------- */
    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .login-brand h1 {
        font-size: 22px;
    }

    /* ---------- Dashboard ---------- */
    .stat-card strong {
        font-size: 30px;
        margin: 10px 0 4px;
    }

    .dashboard-status {
        max-width: none;
    }

    /* ---------- Calculation workspace ---------- */
    .calculation-show-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    .calculation-main .panel-card {
        padding: 16px;
    }

    .calculation-main .section-title h2 {
        font-size: 19px;
    }

    .live-compact-card {
        padding: 16px;
    }

    .live-compact-header h2 {
        font-size: 22px;
    }

    .live-main-metric strong {
        font-size: 28px;
    }

    .result-summary-card {
        padding: 18px;
        border-radius: 18px;
    }

    .result-summary-card strong {
        font-size: 26px;
    }

    /* ---------- Alertas / caixas de destaque ---------- */
    .forced-alert {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 16px 18px;
        gap: 14px;
    }

    .forced-alert-icon {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .form-total,
    .mini-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    /* ---------- Fórmulas ---------- */
    .formula-card {
        padding: 16px;
    }

    .formula-list > div {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* =========================================================
   TELAS MUITO PEQUENAS (<= 380px)
========================================================= */
@media (max-width: 380px) {

    .app-shell,
    .app-footer {
        width: calc(100% - 16px);
    }

    .app-topbar {
        margin: 10px 8px;
        padding: 10px 12px;
    }

    .navbar-logo {
        width: 100px;
    }

    .panel-card {
        padding: 14px;
        border-radius: 16px;
    }

    .page-hero h1 {
        font-size: 26px;
    }
}