/*
 * oth-components.css — BRIDGE / single source of truth per i componenti "bespoke"
 * che finora erano ridefiniti inline in ~ogni pagina (.btn-oth, .page-header,
 * .stat-box, .section, .action-btn, ...). Caricato globalmente in base.html DOPO
 * design-system.css/base-chrome.css. Usa i token --oth-* (definiti in base-chrome.css)
 * e --ds-* (design-system.css): niente hex hardcoded qui.
 *
 * Le pagine che hanno ancora il proprio <style> inline lo sovrascrivono (inline nel
 * <head> vince): questo file diventa attivo per una pagina solo quando le si toglie
 * il blocco inline duplicato. Migrazione progressiva, zero regressioni.
 */

/* ---- Page header ---------------------------------------------------------- */
.page-header {
    padding: 2rem 0 1rem;
    border-bottom: 1px solid var(--oth-border);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.page-title {
    font-size: var(--ds-text-3xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
}
.page-subtitle {
    font-size: 0.95rem;
    color: var(--oth-gray);
    margin: 0;
}

/* ---- Buttons (.btn-oth) --------------------------------------------------- */
.btn-oth {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--oth-black);
    background: var(--oth-white);
    color: var(--oth-black);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.btn-oth:hover { background: var(--oth-black); color: var(--oth-white); text-decoration: none; }
.btn-oth-success { border-color: var(--oth-success); color: var(--oth-success); }
.btn-oth-success:hover { background: var(--oth-success); color: var(--oth-white); }
.btn-oth-primary { border-color: var(--oth-blue); color: var(--oth-blue); }
.btn-oth-primary:hover { background: var(--oth-blue); color: var(--oth-white); }
.btn-oth-warning { border-color: var(--oth-warning); color: #856404; }
.btn-oth-warning:hover { background: var(--oth-warning); color: #856404; }
.btn-oth-danger { border-color: var(--oth-danger); color: var(--oth-danger); }
.btn-oth-danger:hover { background: var(--oth-danger); color: var(--oth-white); }
.btn-oth-info { border-color: var(--oth-info); color: var(--oth-info); }
.btn-oth-info:hover { background: var(--oth-info); color: var(--oth-white); }
.btn-oth-sm { padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.btn-oth-locked {
    background: var(--oth-success-soft, #d4edda);
    border-color: var(--oth-success);
    color: #155724;
    cursor: default;
    opacity: 0.9;
}
.btn-oth-locked:hover { background: var(--oth-success-soft, #d4edda); color: #155724; }

/* ---- Stats grid / boxes --------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-box {
    background: var(--oth-light-gray);
    border-left: 3px solid var(--oth-black);
    padding: 1.5rem;
}
.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--oth-gray);
    margin-bottom: 0.5rem;
}
.stat-number {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--oth-black);
    margin-bottom: 0.25rem;
}
.stat-meta { font-size: 0.85rem; color: var(--oth-gray); }

/* ---- Collapsible section -------------------------------------------------- */
.section {
    background: var(--oth-white);
    border: 1px solid var(--oth-border);
    margin-bottom: 2rem;
}
.section-header {
    background: var(--oth-light-gray);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--oth-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
}
.section-header:hover { background: var(--oth-border); }
.section-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-body {
    padding: 1.5rem;
    max-height: 5000px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.section-body.collapsed { max-height: 0; padding: 0 1.5rem; }
.collapse-icon { transition: transform 0.3s ease; }
.collapse-icon.collapsed { transform: rotate(-90deg); }

/* ---- Quick actions -------------------------------------------------------- */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.action-btn {
    background: var(--oth-light-gray);
    border: 1px solid var(--oth-border);
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--oth-black);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.action-btn:hover { background: var(--oth-black); color: var(--oth-white); text-decoration: none; }
.action-btn i { font-size: 1.5rem; }

/* ---- Status badge --------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    border: 1px solid;
}
.badge-success { background: #d4edda; border-color: var(--oth-success); color: #155724; }
.badge-warning { background: #fff3cd; border-color: var(--oth-warning); color: #856404; }

/* ---- Empty state (variante .empty-state, distinta da .empty-state-oth) ----- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--oth-gray); }
.empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.3; }

/* Bootstrap form-switch/checkbox -> monocromo OTH (era blu) */
.form-check-input:checked{background-color:var(--oth-blue);border-color:var(--oth-blue);}
.form-check-input:focus{border-color:var(--oth-blue);box-shadow:0 0 0 .2rem rgba(26,26,26,.25);}
