/* ── Card ── */
.card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-hdr {
    padding: 16px 20px;
    border-bottom: 1.5px solid var(--border);
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-hdr h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--text2);
}

.card-body {
    padding: 20px;
}

/* ── Badge ── */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.badge-green  { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--border); }
.badge-red    { background: var(--red-bg);    color: var(--red);    border: 1px solid #ffcdd2; }
.badge-gold   { background: var(--gold-bg);   color: #856404;       border: 1px solid #ffe082; }
.badge-purple { background: #f3e8ff;          color: #7c3aed;       border: 1px solid #e9d5ff; }
.badge-teal   { background: #e6f7f5;          color: #0f766e;       border: 1px solid #99e6de; }
.badge-blue   { background: var(--blue-bg);   color: var(--blue);   border: 1px solid #b3d4f0; }

/* Retrocompatibilità */
.badge-admin { background: var(--gold-bg);  color: #856404; border: 1px solid #ffe082; }
.badge-user  { background: var(--blue-bg);  color: var(--blue); border: 1px solid #b3d4f0; }

/* ── Form ── */
.form-group {
    margin-bottom: 1rem;
}

.form-group label,
.f-group label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 5px;
}

.form-control,
.f-inp {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus,
.f-inp:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(30,107,30,.1);
}

select.form-control,
select.f-inp {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A987A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.error-text {
    color: var(--red);
    font-size: 11px;
    margin-top: 4px;
}

.error {
    background: #FFF0EE;
    border: 1.5px solid #FFCDD2;
    border-radius: 9px;
    padding: 10px 14px;
    color: var(--red);
    font-size: 13px;
    margin-bottom: 1rem;
}

.success {
    background: #F0FBF4;
    border: 1.5px solid #A8D5B5;
    border-radius: 9px;
    padding: 10px 14px;
    color: #1B6E3A;
    font-size: 13px;
    margin-bottom: 1rem;
}

.alert {
    padding: 10px 14px;
    border-radius: 9px;
    margin-bottom: 1rem;
    font-size: 13px;
}

.alert-success {
    background: #F0FBF4;
    border: 1.5px solid #A8D5B5;
    color: #1B6E3A;
}

.alert-error {
    background: #FFF0EE;
    border: 1.5px solid #FFCDD2;
    color: var(--red);
}

/* Checkbox personalizzata */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.checkbox-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

/* ── Tabella ── */
.table,
.comm-table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.comm-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    border-bottom: 2px solid var(--border);
    background: var(--surface2);
}

.table td,
.comm-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border2);
    font-size: 13px;
    vertical-align: middle;
}

.table tr:hover td,
.comm-table tr:hover td {
    background: var(--green-bg);
}

/* ── Spinner ── */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* ── Danger zone card ── */
.card-danger {
    background: var(--surface);
    border: 1.5px solid #ffcdd2;
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-top: 1.5rem;
}

.card-danger .card-body h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--red);
    margin-bottom: 8px;
}