/* ============================================================
   Road Rescue App – Stile principale
   ============================================================ */

/* ── Variabili ──────────────────────────────────────────────── */
:root {
    --rra-blue:        #4a5568;
    --rra-blue-light:  #e9ecef;
    --rra-blue-dark:   #2d3748;
    --rra-section-bg:  #f8f9fa;
    --rra-border:      #dee2e6;
    --rra-text:        #212529;
    --rra-muted:       #6c757d;
    --rra-radius:      0.5rem;
    --rra-shadow:      0 2px 12px rgba(0,0,0,.08);
}

/* ── Reset & Base ───────────────────────────────────────────── */
body {
    background-color: #eef0f2;
    color: var(--rra-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    background: linear-gradient(135deg, var(--rra-blue) 0%, var(--rra-blue-dark) 100%) !important;
    border-bottom: 3px solid rgba(255,255,255,.15);
}

.navbar-brand {
    font-size: 1.1rem;
    letter-spacing: .3px;
    color: #32CD32;   /* ← metti qui il colore che vuoi */
}

/* ── Form sections (modulo rapportino) ──────────────────────── */
.form-section {
    background: #fff;
    border-radius: var(--rra-radius);
    box-shadow: var(--rra-shadow);
    overflow: hidden;
    border: 1px solid var(--rra-border);
}

.section-header {
    background: linear-gradient(90deg, var(--rra-blue), var(--rra-blue-dark));
    color: #fff;
    padding: .55rem 1rem;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .6px;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.section-body {
    padding: 1rem 1rem .75rem;
}

/* ── Form labels ────────────────────────────────────────────── */
.form-label.form-label-sm {
    font-size: .78rem;
    font-weight: 600;
    color: var(--rra-muted);
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.required-field::after {
    content: ' *';
    color: #dc3545;
}

/* ── Tipo Intervento grid ───────────────────────────────────── */
.tipo-intervento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .4rem;
}

.tipo-item {
    position: relative;
}

.tipo-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tipo-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border: 2px solid var(--rra-border);
    border-radius: var(--rra-radius);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 500;
    background: var(--rra-section-bg);
    color: var(--rra-muted);
    transition: all .15s ease;
    user-select: none;
    white-space: nowrap;
}

.tipo-label i {
    font-size: 1.1rem;
    opacity: .6;
}

.tipo-check:checked + .tipo-label {
    background: var(--rra-blue);
    border-color: var(--rra-blue);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

.tipo-check:checked + .tipo-label i {
    opacity: 1;
}

.tipo-label:hover {
    border-color: var(--rra-blue);
    color: var(--rra-blue);
}

.tipo-check:checked + .tipo-label:hover {
    color: #fff;
}

/* ── Totale servizi ─────────────────────────────────────────── */
.totale-box {
    background: linear-gradient(135deg, var(--rra-blue), var(--rra-blue-dark));
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
}

/* ── Pagamento toggle ───────────────────────────────────────── */
.pagamento-toggle {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    border: 2px solid var(--rra-border);
    border-radius: var(--rra-radius);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    background: var(--rra-section-bg);
    color: var(--rra-muted);
    transition: all .15s ease;
    user-select: none;
}

.pagamento-toggle:hover {
    border-color: var(--rra-blue);
}

.pagamento-toggle.pagamento-pagato.active {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.pagamento-toggle.pagamento-non-pagato.active {
    background: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

/* ── Firma canvas ───────────────────────────────────────────── */
.firma-container {
    position: relative;
    border: 2px dashed var(--rra-border);
    border-radius: var(--rra-radius);
    background: #fff;
    overflow: hidden;
    cursor: crosshair;
}

.firma-canvas {
    display: block;
    width: 100%;
    height: 160px;
    touch-action: none;
}

.firma-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .72rem;
    color: #adb5bd;
    pointer-events: none;
    white-space: nowrap;
}

.firma-container.has-signature {
    border-color: var(--rra-blue);
    border-style: solid;
}

.firma-container.has-signature .firma-hint {
    display: none;
}

.firma-preview-img {
    max-height: 100px;
    width: auto;
    max-width: 100%;
}

/* ── Foto thumbnail (form) ──────────────────────────────────── */
.foto-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.foto-preview-img {
    width: 80px;
    height: 65px;
    object-fit: cover;
    border-radius: .35rem;
    border: 2px solid var(--rra-border);
}

/* ── Foto thumbnail (modifica – foto esistenti) ─────────────── */
.foto-thumb-wrap {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
}

.foto-thumb {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    border: 2px solid var(--rra-border);
    border-radius: .5rem;
    transition: transform .2s;
}

.foto-thumb:hover { transform: scale(1.04); }

.foto-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: .65rem;
}

.foto-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #dc3545;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Dettaglio rapportino ───────────────────────────────────── */
.detail-section-header {
    background: linear-gradient(90deg, var(--rra-blue), var(--rra-blue-dark));
    color: #fff !important;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.detail-field {
    padding: .4rem .6rem;
    background: var(--rra-section-bg);
    border-radius: .4rem;
    border: 1px solid var(--rra-border);
    height: 100%;
}

.detail-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--rra-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: .2rem;
}

.detail-value {
    font-size: .9rem;
    font-weight: 500;
    color: var(--rra-text);
}

/* ── Dashboard KPI cards ────────────────────────────────────── */
.kpi-card {
    transition: transform .15s, box-shadow .15s;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.4rem;
}

/* ── Autisti avatar ─────────────────────────────────────────── */
.autista-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rra-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Utilità ────────────────────────────────────────────────── */
.btn-xs {
    padding: .15rem .4rem;
    font-size: .75rem;
}

.x-small {
    font-size: .72rem;
}

.font-monospace {
    font-family: 'Courier New', Courier, monospace !important;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 576px) {
    .tipo-intervento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .section-body {
        padding: .75rem;
    }

    .navbar-brand span {
        display: none;
        color: #32CD32;   /* ← metti qui il colore che vuoi *
    }
}

@media (max-width: 400px) {
    .tipo-intervento-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Print styles ───────────────────────────────────────────── */
@media print {
    .navbar, footer, .btn, form { display: none !important; }
    .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
    body { background: #fff; }
}