/* ==========================================================================
   AGRIPlanum - v2.1
   File: main.css
   Author: Arleu Júnior
   Description: Core stylesheet with variables, layout, components, and modules.
   Last Updated: 2025-09-19
   ========================================================================== */

/* ==========================================================================
   1. IMPORTS & VARIABLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* :root defines global variables for consistent theming across the application. */
:root {
    --primary-color: #2E7D32;
    --primary-hover: #1B5E20;
    --accent-color: #0288D1;
    --background-light: #F5F5F5;
    --surface-color: #FFFFFF;
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-on-primary: #FFFFFF;
    --border-color: #E0E0E0;
    --status-preferential: #0288D1;
    --status-tolerated: #FBC02D;
    --status-error: #D32F2F;
    --font-primary: 'Roboto', sans-serif;
}

/* ==========================================================================
   2. GENERAL LAYOUT & STRUCTURE
   ========================================================================== */

/* Basic body styles and flexbox for a sticky footer layout. */
body { background-color: var(--background-light); font-family: var(--font-primary); color: var(--text-primary); margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
main { flex-grow: 1; }
footer { text-align: center; padding: 20px; color: var(--text-secondary); font-size: 14px; }

/* Utility classes for toggling visibility of screens and views. */
.screen, .view { display: none; }
.screen.active, .view.active { display: block; }
.hidden { display: none !important; }

/* ==========================================================================
   3. CORE COMPONENTS
   ========================================================================== */

/* The .card is the main container for most content views like auth and modules. */
.card {
    width: 400px; margin: 50px auto; background-color: var(--surface-color); border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border: 1px solid var(--border-color); padding: 0; overflow: hidden;
}

.logo-container { text-align: center; margin-bottom: 15px; }
#setup-screen .logo-container img { max-width: 1000px; height: auto; margin-top: 20px; }
#main-app-screen .logo-container img { max-width: 300px; height: auto; }
#auth-screen .logo-container img {
    max-width: 400px;
    height: auto;
    margin-bottom: 20px;
}

/* Standard header for cards, with primary color background. */
.card-header { background-color: var(--primary-color); color: var(--text-on-primary); padding: 15px 20px; position: relative; text-align: center; }
.header-titles { display: inline-block; }
.card-header h2 { margin: 0; font-size: 1.5em; color: var(--text-on-primary); }
.card-header h3 { margin: 5px 0 0; font-size: 0.9em; font-weight: 400; color: var(--text-on-primary); opacity: 0.9; }
.card-body { padding: 20px; }

/* Modal styles for creating a popup overlay. */
.modal { position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }
.modal-content { background-color: var(--surface-color); margin: 10% auto; padding: 20px; border: 1px solid var(--border-color); border-radius: 8px; width: 80%; max-width: 500px; }
.close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-btn:hover, .close-btn:focus { color: var(--text-primary); }

/* ==========================================================================
   4. FORMS & BUTTONS
   ========================================================================== */

/* Base styles for form elements for a clean and consistent look. */
label { display: block; margin-bottom: 5px; color: var(--text-secondary); margin-top: 15px; font-weight: bold; text-align: left; }
input, select {
    width: 100%; padding: 12px; border-radius: 5px; border: 1px solid var(--border-color);
    box-sizing: border-box; font-family: var(--font-primary); font-size: 16px;
    background-color: #f9f9f9; transition: border-color 0.3s, box-shadow 0.3s;
}
/* Style for placeholder text in required select elements. */
select:required:invalid { color: var(--text-secondary); }
option { color: var(--text-primary); }
/* Focus styles for better accessibility and user experience. */
input:focus, select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 5px rgba(2, 136, 209, 0.5); }

/* Base button styles. */
.btn { padding: 12px; border-radius: 5px; border: none; cursor: pointer; font-family: var(--font-primary); font-size: 16px; font-weight: bold; transition: background-color 0.3s; }
.btn.btn-primary { width: 100%; background-color: var(--primary-color); color: var(--text-on-primary); margin-top: 25px; }
.btn.btn-primary:hover { background-color: var(--primary-hover); }
.btn.btn-secondary { width: auto; padding: 5px 10px; font-size: 12px; margin-top: 10px; background-color: transparent; color: var(--accent-color); border: 1px solid var(--accent-color); }
.btn.btn-secondary:hover { background-color: #e3f2fd; }

/* Special button styles for use inside card headers. */
.header-button { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-on-primary); font-size: 1.5em; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; padding: 5px 10px; height: auto; width: auto; }
.header-button:hover { opacity: 1; }
.back-button { width: auto; padding: 8px 15px; font-size: 14px; margin-bottom: 20px; background-color: transparent; color: var(--accent-color); border: 2px solid var(--accent-color); border-radius: 20px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; text-align: center; }
.back-button:hover { background-color: var(--accent-color); color: white; }

/* ==========================================================================
   5. SPECIFIC MODULES
   ========================================================================== */

/* 5.1 Dashboard
   -------------------------------------------------------------------------- */
/* Creates a responsive two-column grid for the main navigation buttons. */
.dashboard-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; }
.dashboard-button {
    width: calc(50% - 8px); /* Two columns with a gap. */
    height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px;
    cursor: pointer; transition: all 0.2s ease-in-out; padding: 10px; font-family: var(--font-primary);
}
.dashboard-button:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); border-color: var(--primary-color); }
.dashboard-button:disabled { cursor: not-allowed; opacity: 0.5; }
.dashboard-button i { font-size: 2.2em; color: var(--primary-color); margin-bottom: 8px; }
.dashboard-button span { font-size: 0.9em; color: var(--text-secondary); font-weight: bold; text-align: center; }
#setup-container { text-align: center; }
#setup-container .subtitle { font-size: 0.9em; color: var(--text-secondary); }
#setup-container select { text-align: center; }

/* 5.2 Calculators & Planners (Internal Modules)
   -------------------------------------------------------------------------- */
.module-description { font-size: 0.9em; color: var(--text-secondary); text-align: center; margin-bottom: 20px; }
#cultivar-info { margin-top: 10px; padding: 10px; background-color: #e3f2fd; border-left: 4px solid var(--accent-color); font-size: 14px; color: var(--text-primary); min-height: 40px; }
#results-container, #sowing-results-container, #soil-results-container { margin-top: 30px; padding: 15px; border: 1px dashed var(--border-color); border-radius: 5px; background-color: #fafafa; }
#results-container ul, #soil-results-container ul { list-style-type: none; padding-left: 0; margin-top: 10px; }
#results-container li, #soil-results-container li { background-color: #f0f0f0; margin-bottom: 5px; padding: 8px; border-radius: 4px; }

/* Badge styles for displaying planting window status. */
.badge { padding: 4px 10px; border-radius: 12px; color: white; font-size: 0.9em; font-weight: bold; white-space: nowrap; display: inline-block; }
.badge.preferential { background-color: var(--status-preferential); }
.badge.tolerated { background-color: var(--status-tolerated); color: #333; }
.badge.not-recommended { background-color: var(--status-error); }

/* 5.3 Soil Analysis Module
   -------------------------------------------------------------------------- */
.form-grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.input-group { width: calc(50% - 10px); }
.input-group label { font-size: 0.9em; margin-top: 0; }
/* Status indicators for soil analysis results. */
#soil-results-container li { display: flex; justify-content: space-between; align-items: center; border-left: 5px solid #ccc; }
#soil-results-container li.ok { border-left-color: var(--primary-color); }
#soil-results-container li.low, #soil-results-container li.high { border-left-color: var(--status-error); }
#soil-results-container li.attention { border-left-color: var(--status-tolerated); }

/* 5.4 Map Module
   -------------------------------------------------------------------------- */
#map-container { height: 350px; width: 100%; border-radius: 8px; border: 1px solid var(--border-color); }
.map-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
#map-results { font-size: 1.1em; color: var(--text-primary); }
.info-message { color: var(--primary-color); font-weight: bold; }
#plant-modal .modal-content { max-width: 450px; }

/* 5.5 Details View
   -------------------------------------------------------------------------- */
.details-header { text-align: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.details-header h3 { margin: 0; color: var(--primary-color); }
/* Key-value pair list for displaying item details. */
.info-list { list-style: none; padding: 0; }
.info-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.info-list li span:first-child { font-weight: bold; color: var(--text-secondary); }
/* Scrollable container for tables with many rows. */
.table-container { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 4px; }
#details-plant-table { width: 100%; border-collapse: collapse; }
#details-plant-table th, #details-plant-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-color); }
#details-plant-table th { background-color: #f9f9f9; font-size: 0.9em; }
#details-plant-table tbody tr:last-child td { border-bottom: none; }

/* 5.6 Popups & Action Buttons
   -------------------------------------------------------------------------- */
.popup-content .popup-actions { margin-top: 10px; text-align: right; }
.popup-actions .btn-details { padding: 6px 10px; line-height: 1; font-size: 14px; border: 1px solid var(--accent-color); background-color: #E1F5FE; color: var(--accent-color); cursor: pointer; border-radius: 4px; margin-right: 5px; }
.popup-actions .btn-details:hover { background-color: var(--accent-color); color: white; }
.btn-delete { padding: 6px 10px; line-height: 1; font-size: 14px; border: 1px solid #D32F2F; background-color: #FFEBEE; color: #D32F2F; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; font-weight: bold; }
.btn-delete:hover { background-color: #D32F2F; color: white; }

/* ==========================================================================
   6. AUTHENTICATION MODULE
   ========================================================================== */
#auth-container { text-align: center; padding: 20px 30px 30px 30px; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form h2 { margin-top: 0; font-size: 1.8em; color: var(--text-primary); }
.auth-form .subtitle { font-size: 1em; color: var(--text-secondary); margin-bottom: 20px; }
.auth-form input { text-align: left; margin-bottom: 10px; }
/* Link to toggle between login and registration forms. */
.toggle-form { margin-top: 25px; font-size: 0.9em; color: var(--text-secondary); }
.toggle-form a { color: var(--primary-color); font-weight: bold; text-decoration: none; }
.toggle-form a:hover { text-decoration: underline; }
.error-message { color: var(--status-error); font-weight: bold; min-height: 20px; margin-top: 15px; margin-bottom: 0; }

/* ==========================================================================
   7. WELCOME SCREEN MODULE
   ========================================================================== */

/* Defines a full-screen, fixed-position container for the welcome/splash screen. */
.welcome-screen.active {
    display: flex; align-items: center; justify-content: center;
    height: 100vh; width: 100%; position: fixed; top: 0; left: 0;
    background-image: url('background.png'); background-size: cover; background-position: center;
    color: white;
}
/* Creates a dark overlay on top of the background image for better text readability. */
.welcome-screen.active::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 1;
}
/* Centered content for the welcome screen. */
.welcome-content { position: relative; z-index: 2; text-align: center; padding: 20px; max-width: 500px; }
.welcome-content .logo-container img { width: 150px; height: 150px; background-color: white; border-radius: 50%; padding: 15px; box-sizing: border-box; margin-bottom: 20px;   display: block; margin-left: auto; margin-right: auto; object-fit: contain }
.welcome-content h1 { font-size: 2.5em; margin: 0 0 10px 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.welcome-content p { font-size: 1.2em; margin-bottom: 30px; opacity: 0.9; }
.welcome-content .btn { width: auto; padding: 15px 30px; font-size: 1.1em; display: inline-flex; align-items: center; gap: 10px; }
.welcome-content .btn i { font-size: 1.2em; }

/* ==========================================================================
   8. MISCELLANEOUS COMPONENTS
   ========================================================================== */
/* Component for an input field with an attached button (e.g., generate tag). */
.input-with-button { display: flex; align-items: center; }
.input-with-button input { flex-grow: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-icon {
    padding: 12px; border: 1px solid var(--border-color); background-color: #f0f0f0;
    cursor: pointer; border-left: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px;
    font-size: 16px; line-height: 1.5;
}
.btn-icon:hover { background-color: #e0e0e0; }
#use-gps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 1em; box-sizing: border-box; }
/* Layout for action buttons at the bottom of a form. */
.form-actions { display: flex; justify-content: space-between; margin-top: 20px; }
.form-actions .btn { width: 48%; margin-top: 0; }