/* =========================================
   GLOBAL STYLES & LAYOUT
   ========================================= */
body {
    font-family: Arial, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
}

h1, h2, h3, h4 { color: #333; }
h1 { margin-bottom: 20px; }

/* Section visibility (SPA routing) */
.section { display: none; }
.section.active { display: block; }

/* Grid container for forms/cards */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Card component */
.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Utility classes */
.hidden { display: none !important; }
.total-row { background-color: #e8f5e9; font-weight: bold; }
.no-match-section { background-color: #fff3cd; border: 1px solid #ffc107; }

/* Back button */
.btn-back {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2196F3;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 20px;
}

.btn-back:hover { background-color: #1976D2; }

/* Messages / Alerts */
.message { padding: 10px; margin: 10px 0; border-radius: 4px; }
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }
.info { background-color: #d1ecf1; color: #0c5460; }