/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* CRÍTICO PARA WEBVIEW: Garantir scroll nativo */
    height: auto !important;
    min-height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
    padding-top: 0; /* Mobile não tem padding-top */

    /* CRÍTICO PARA WEBVIEW: Garantir scroll nativo */
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
}

/* ============================================
   CRÍTICO: Containers NÃO podem ser focáveis/clicáveis
   Isso previne o WebView de "ficar preso" dentro deles
   ============================================ */
.app-container,
.app-main,
.dashboard-container,
.dashboard-main,
.gestao-container,
.gestao-main,
.projeto-container,
.projeto-main,
.cadastro-container,
.cadastro-main,
.executar-container,
.executar-main,
.agenda-container,
.agenda-main,
.retalhos-container,
.retalhos-main,
.projects-section,
.stats-section,
.menu-grid,
.section,
article,
main {
    /* Container não é clicável/focável */
    pointer-events: none !important;
    /* Mas elementos DENTRO dele continuam funcionando */
}

/* Elementos interativos DENTRO dos containers voltam a funcionar */
.app-container > *,
.app-main > *,
.dashboard-container > *,
.dashboard-main > *,
.gestao-container > *,
.gestao-main > *,
.projeto-container > *,
.projeto-main > *,
.cadastro-container > *,
.cadastro-main > *,
.executar-container > *,
.executar-main > *,
.agenda-container > *,
.agenda-main > *,
.retalhos-container > *,
.retalhos-main > *,
.projects-section > *,
.stats-section > *,
.menu-grid > *,
section > *,
article > *,
main > * {
    pointer-events: auto !important;
}

/* ============================================
   HEADINGS - Prevenir travamento de scroll no mobile WebView
   Ao clicar em H1-H6, o WebView não deve focar ou selecionar texto
   ============================================ */
h1, h2, h3, h4, h5, h6,
.page-title,
.gestao-title,
.projects-title,
.category-title,
.detail-title,
.create-title,
.section-title {
    /* Previne seleção de texto */
    user-select: none !important;
    -webkit-user-select: none !important;
    /* Previne menu de contexto no WebView */
    -webkit-touch-callout: none !important;
    /* Sem highlight ao tocar */
    -webkit-tap-highlight-color: transparent !important;
}

/* Sidebar Toggle - Mobile/Base */
.sidebar-toggle {
    display: none; /* Oculto em mobile, visível em desktop */
}

/* Footer Global - Mobile/Base */
.app-footer {
    background: white;
    border-top: 1px solid #e9ecef;
    margin-top: 32px;
}

.footer-container {
    padding: 20px 16px;
    text-align: center;
    color: #6c757d;
    font-size: 14px;
}

.app-container {
    min-height: 100vh;
}

/* Sidebar e Main - Mobile (ocultos/ajustados) */
.app-sidebar {
    display: none; /* Oculto em mobile, visível em desktop */
}

.app-main {
    margin-left: 0;
    margin-top: 0;
}

/* Topbar toggle - Mobile (oculto) */
.sidebar-toggle {
    display: none;
}

/* Alertas */
.alert {
    padding: 12px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    font-size: 14px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Formulários */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.15s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: #4a9d8e;
    box-shadow: 0 0 0 2px rgba(74, 157, 142, 0.1);
}

/* Botões */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #4a9d8e;
    color: white;
}

.btn-primary:hover {
    background-color: #3d8478;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}