/* =========================================
 * Stile: Estetica Calcolatrice/CRT Anni '80
 * Applicato a tutta la SPA
 * ========================================= */
body {
    background-color: #0a190a; /* Nero molto scuro / Verde militare spento */
    color: #00ff00; /* Verde brillante tipico dei vecchi monitor */
    font-family: 'Courier New', Courier, monospace; /* Font monospaced obbligatorio */
    padding: 20px;
    margin: 0;
    /* Effetto CRT leggero di scansione per immersione */
    background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.05) 1px, transparent 1px),
                      linear-gradient(to right, rgba(0, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 100% 4px, 4px 100%;
}

* {
    box-sizing: border-box;
}

/* Contenitore principale */
#app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

/* Stile della Mappa */
#map {
    height: 400px; /* Altezza fissa per le mappe */
    width: 100%;
    border: 2px solid #008000; /* Bordo verde più scuro */
    margin-bottom: 20px;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); /* Glow */
}

/* Sezione moduli e schede */
.card {
    background-color: #051105; /* Più scuro del body */
    border: 1px solid #006400;
    padding: 15px;
    margin-bottom: 20px;
}

/* Stile dei pulsanti (simulando tasti fisici) */
button, .btn {
    background-color: #002200; /* Grigio/nero quasi nero */
    color: #00ff00;
    border: 2px solid #00ff00;
    padding: 8px 15px;
    margin-right: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    transition: background-color 0.1s;
    box-shadow: 
        0 0 5px #00ff00, /* Glow principale */
        inset 0 0 8px rgba(0, 255, 0, 0.3); /* Glow interno */
    text-transform: uppercase;
}

button:hover, .btn:hover {
    background-color: #004400;
    box-shadow: 
        0 0 10px #00ff00,
        inset 0 0 10px rgba(0, 255, 0, 0.5);
}

button:active, .btn:active {
    transform: translateY(1px);
    box-shadow: 
        0 0 3px #00ff00, 
        inset 0 0 5px rgba(0, 255, 0, 0.7);
}

/* Form elements */
input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #000d00;
    color: #00ff00;
    border: 1px dashed #006400;
    font-family: inherit;
}

/* Il prezzo in evidenza */
.price-highlight {
    font-size: 1.5em;
    color: #ffff00; /* Giallo acceso per l'attenzione */
    font-weight: bold;
}

/* Messaggi di stato */
.status-message {
    padding: 10px;
    border: 1px dashed #ff0000;
    background-color: #330000;
    color: #ffaaaa;
}