/* PQL – Capacità Portante – Design Moderno */

:root {
    --pql-accent:   #4361ee;
    --pql-success:  #2ec4b6;
    --pql-danger:   #e63946;
    --pql-muted:    #6c757d;
    --pql-bg:       #f4f6fb;
    --pql-surface:  #ffffff;
    --pql-radius:   .75rem;
    --pql-shadow:   0 2px 12px rgba(67,97,238,.08);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
    font-size: .875rem;
    background: var(--pql-bg);
    margin-bottom: 64px;
    color: #1e2533;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    background: var(--pql-surface) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.07);
}

/* ── Toolbar ────────────────────────────────────────────────── */
.toolbar {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .75rem 0;
    flex-wrap: wrap;
}

.toolbar .btn {
    font-size: .82rem;
    padding: .42rem .9rem;
    border-radius: .5rem;
    font-weight: 500;
    letter-spacing: .01em;
}

/* ── Pannelli ───────────────────────────────────────────────── */
.panel {
    background: var(--pql-surface);
    border-radius: var(--pql-radius);
    box-shadow: var(--pql-shadow);
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1rem;
    border-bottom: 1px solid #eef0f7;
    gap: .5rem;
}

.panel-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pql-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.panel-title i {
    color: var(--pql-accent);
    font-size: .85rem;
}

.panel-body {
    padding: .85rem 1rem;
}

/* ── Form controls ──────────────────────────────────────────── */
.form-label {
    font-size: .76rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: .2rem;
}

.form-control, .form-select {
    font-size: .83rem;
    border-radius: .45rem;
    border-color: #dde3ef;
    background: #fafbff;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--pql-accent);
    box-shadow: 0 0 0 3px rgba(67,97,238,.12);
    background: #fff;
}

.form-check-input:checked {
    background-color: var(--pql-accent);
    border-color: var(--pql-accent);
}

/* ── Calc layout (sidebar + main) ───────────────────────────── */
.calc-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: .75rem;
    align-items: start;
}

.calc-sidebar {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

@media (max-width: 900px) {
    .calc-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Unit label ─────────────────────────────────────────────── */
.unit {
    color: #8892aa;
    font-weight: 400;
    font-size: .9em;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Field hint (breve descrizione sotto il nome del campo) ─── */
.field-hint {
    display: block;
    font-weight: 400;
    font-size: .72em;
    color: #9aa0b4;
    margin-top: -.1rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

/* ── Delete button ──────────────────────────────────────────── */
.btn-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: .4rem;
    background: #fee2e2;
    color: var(--pql-danger);
    font-size: .8rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    padding: 0;
}

.btn-del:hover {
    background: var(--pql-danger);
    color: #fff;
}

/* ── Stratigrafia table ─────────────────────────────────────── */
#tabellaStratigrafia {
    font-size: .8rem;
    border-collapse: separate;
    border-spacing: 0;
}

#tabellaStratigrafia thead th {
    background: #f0f2fa;
    color: #5a6282;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    padding: .5rem .4rem;
    border: none;
    border-bottom: 2px solid #dde3ef;
    white-space: nowrap;
}

#tabellaStratigrafia tbody tr {
    transition: background .1s;
}

#tabellaStratigrafia tbody tr:hover {
    background: #f7f9ff;
}

#tabellaStratigrafia tbody td {
    padding: .3rem .3rem;
    border: none;
    border-bottom: 1px solid #eef0f7;
    vertical-align: middle;
}

#tabellaStratigrafia .strato-num {
    color: #adb5bd;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}

#tabellaStratigrafia input.form-control {
    background: transparent;
    border: 1px solid transparent;
    border-radius: .35rem;
    padding: .25rem .35rem;
    font-size: .81rem;
    text-align: right;
}

#tabellaStratigrafia input.form-control:hover {
    border-color: #dde3ef;
    background: #fff;
}

#tabellaStratigrafia input.form-control:focus {
    border-color: var(--pql-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(67,97,238,.1);
}

/* ── Nascondi spinner nativi ────────────────────────────────── */
#tabellaStratigrafia input[type="number"]::-webkit-outer-spin-button,
#tabellaStratigrafia input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#tabellaStratigrafia input[type="number"] {
    -moz-appearance: textfield;
}

/* ── Risultati metric cards ─────────────────────────────────── */
.results-section {
    border-radius: var(--pql-radius);
    overflow: hidden;
    box-shadow: var(--pql-shadow);
}

.results-header {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
}

.results-header.ok   { background: var(--pql-success); color: #fff; }
.results-header.fail { background: var(--pql-danger);  color: #fff; }

.results-body {
    background: var(--pql-surface);
    padding: 1.25rem;
}

.result-group-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8898aa;
    margin-bottom: .6rem;
    padding-bottom: .3rem;
    border-bottom: 2px solid #eef0f7;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .28rem 0;
    font-size: .83rem;
    border-bottom: 1px solid #f4f6fb;
}

.result-row:last-child { border-bottom: none; }

.result-label { color: #5a6282; }

.result-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1e2533;
}

.result-row.highlight-ok   { background: #eafaf8; border-radius: .35rem; padding: .35rem .5rem; margin: .15rem -.5rem 0; }
.result-row.highlight-fail { background: #fdecea; border-radius: .35rem; padding: .35rem .5rem; margin: .15rem -.5rem 0; }

.result-row.highlight-ok   .result-label,
.result-row.highlight-ok   .result-value { color: #1a8f86; font-weight: 700; }
.result-row.highlight-fail .result-label,
.result-row.highlight-fail .result-value { color: #c0392b; font-weight: 700; }

/* ── Verifica badge ─────────────────────────────────────────── */
.verifica-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .7rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.verifica-badge.ok   { background: rgba(255,255,255,.25); }
.verifica-badge.fail { background: rgba(255,255,255,.25); }

/* ── Alert ──────────────────────────────────────────────────── */
.alert {
    border: none;
    border-radius: .6rem;
    font-size: .85rem;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 48px;
    background: var(--pql-surface);
    border-top: 1px solid #eef0f7 !important;
}

html { position: relative; min-height: 100%; }

/* ── Print ──────────────────────────────────────────────────── */
@media print {
    .toolbar, .navbar, .footer { display: none !important; }
    .panel, .results-section { box-shadow: none; border: 1px solid #ddd; }
}