/* ============================================================
   assets/css/style.css - HACCP Il Galeone
   Design mobile-first, tema blu scuro aziendale
   ============================================================ */

:root {
    --primary:      #1a2a5e;
    --primary-dark: #111d45;
    --primary-light:#2c45a0;
    --accent:       #1a73e8;
    --success:      #28a745;
    --warning:      #ffc107;
    --danger:       #dc3545;
    --bg:           #f0f2f8;
    --card-bg:      #ffffff;
    --border:       #dee2e6;
    --text:         #212529;
    --text-muted:   #6c757d;
    --radius:       12px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ---- Navbar ---- */
.bg-primary-haccp { background: var(--primary) !important; }

/* ---- Intestazione HACCP ---- */
.haccp-header {
    background: #fff;
    font-size: .8rem;
}
.firma-placeholder {
    font-family: cursive;
    color: var(--primary);
    font-size: .9rem;
}

/* ---- Cards ---- */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(26,42,94,.08);
    transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(26,42,94,.13); }

/* Dashboard stat cards */
.stat-card {
    border-left: 5px solid var(--accent);
}
.stat-card.danger  { border-left-color: var(--danger); }
.stat-card.warning { border-left-color: var(--warning); }
.stat-card.success { border-left-color: var(--success); }

.stat-icon { font-size: 2.4rem; opacity: .18; }
.stat-num  { font-size: 2rem; font-weight: 700; line-height: 1; }

/* ---- Bottoni touch-friendly ---- */
.btn { min-height: 48px; border-radius: 8px; font-weight: 500; }
.btn-sm { min-height: 36px; }

/* ---- Checkbox grandi ---- */
.form-check-input.big-check {
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
    border: 2px solid var(--primary-light);
}
.form-check-input.big-check:checked { background-color: var(--success); border-color: var(--success); }

/* ---- Tabelle ---- */
.table-responsive { border-radius: var(--radius); overflow: hidden; }
.table thead th { background: var(--primary); color: #fff; font-size: .85rem; font-weight: 600; }
.table-hover tbody tr:hover { background: rgba(26,115,232,.06); }

/* ---- Alert semaforo ---- */
.badge-ok    { background: var(--success); color: #fff; }
.badge-warn  { background: var(--warning); color: #000; }
.badge-alert { background: var(--danger);  color: #fff; }

/* ---- Alert temperatura fuori range ---- */
.alert-fuori-range {
    animation: pulse-danger 1.5s infinite;
    border: 2px solid var(--danger);
}
@keyframes pulse-danger {
    0%,100% { box-shadow: 0 0 0 0 rgba(220,53,69,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(220,53,69,0); }
}

/* ---- Card verifica merce ---- */
.check-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem;
    cursor: pointer;
    transition: all .2s;
}
.check-card.si    { border-color: var(--success); background: rgba(40,167,69,.06); }
.check-card.no    { border-color: var(--danger);  background: rgba(220,53,69,.06); }
.check-card .icon { font-size: 2rem; }

/* ---- Pulizie checklist ---- */
.pulizia-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    margin-bottom: .4rem;
    transition: background .2s;
}
.pulizia-row.eseguita { background: rgba(40,167,69,.07); }
.pulizia-row.mancante { background: rgba(220,53,69,.07); border-left: 4px solid var(--danger); }

/* ---- Canvas firma ---- */
.firma-canvas-wrap {
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #f8f9fa;
    touch-action: none;
}
.firma-canvas-wrap canvas { display: block; width: 100% !important; height: 120px !important; }

/* ---- Loader ---- */
#spinner-overlay { background: rgba(0,0,0,.45); z-index: 9999; }

/* ---- Footer ---- */
.footer-haccp { background: #fff; color: var(--text-muted); font-size: .8rem; }

/* ---- Section headers ---- */
.section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(26,42,94,.06);
    padding: .5rem 1rem;
    border-radius: 8px;
    margin: 1.2rem 0 .6rem;
}

/* ---- Login page ---- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}
.login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-logo { font-size: 3rem; color: var(--accent); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .stat-num { font-size: 1.5rem; }
    .haccp-header { font-size: .72rem; }
}