/*! AppBuilder UI — Design System v1.0
 *  Componenti deterministici per app generate da LLM.
 *  Basato su Bootstrap 5, esteso con classi ab-* documentate.
 *  https://ui.brainprotocol.it
 */

/* ============================================================
   0. VARIABLES
   ============================================================ */
:root {
    --ab-primary: #2563eb;
    --ab-primary-hover: #1d4ed8;
    --ab-danger: #dc2626;
    --ab-danger-hover: #b91c1c;
    --ab-success: #16a34a;
    --ab-warning: #d97706;
    --ab-info: #0891b2;
    --ab-bg: #f8fafc;
    --ab-surface: #ffffff;
    --ab-border: #e2e8f0;
    --ab-text: #1e293b;
    --ab-text-light: #64748b;
    --ab-text-muted: #94a3b8;
    --ab-sidebar-bg: #1e293b;
    --ab-sidebar-text: #e2e8f0;
    --ab-sidebar-hover: rgba(255,255,255,0.1);
    --ab-sidebar-active: rgba(255,255,255,0.15);
    --ab-radius: 6px;
    --ab-radius-lg: 10px;
    --ab-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --ab-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --ab-shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
    --ab-transition: 0.2s ease;
    --ab-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ab-font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}

/* ============================================================
   1. AB-LAYOUT — Struttura pagina con sidebar
   Uso: <div class="ab-layout"> <nav class="ab-sidebar">...</nav> <main class="ab-main">...</main> </div>
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--ab-font);
    color: var(--ab-text);
    background: var(--ab-bg);
    line-height: 1.5;
    font-size: 0.9375rem;
}

.ab-layout {
    display: flex;
    min-height: 100vh;
}

/* ============================================================
   2. AB-SIDEBAR — Navigazione laterale
   Uso: <nav class="ab-sidebar"> <div class="ab-sidebar-logo">Nome App</div> <a class="ab-sidebar-link active">Sezione</a> </nav>
   ============================================================ */
.ab-sidebar {
    width: 240px;
    background: var(--ab-sidebar-bg);
    color: var(--ab-sidebar-text);
    padding: 1.5rem 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ab-sidebar-logo {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0 1.25rem 1.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ab-sidebar-section {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ab-text-muted);
    padding: 1rem 1.25rem 0.4rem;
}

.ab-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.25rem;
    color: var(--ab-sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background var(--ab-transition);
}

.ab-sidebar-link:hover { background: var(--ab-sidebar-hover); }
.ab-sidebar-link.active { background: var(--ab-sidebar-active); font-weight: 600; }

.ab-sidebar-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.ab-sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.8rem;
    color: var(--ab-text-muted);
}

/* ============================================================
   3. AB-MAIN — Area contenuto principale
   Uso: <main class="ab-main"> contenuto </main>
   ============================================================ */
.ab-main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    min-width: 0;
}

/* ============================================================
   4. AB-PAGE-HEADER — Intestazione pagina con titolo e azioni
   Uso: <div class="ab-page-header"> <h1>Titolo</h1> <div class="ab-page-actions"><button>...</button></div> </div>
   ============================================================ */
.ab-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ab-page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.ab-page-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ============================================================
   5. AB-BTN — Bottoni
   Varianti: ab-btn-primary, ab-btn-danger, ab-btn-success, ab-btn-outline
   Dimensioni: ab-btn-sm, ab-btn-lg
   Uso: <button class="ab-btn ab-btn-primary">Salva</button>
   ============================================================ */
.ab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    background: var(--ab-surface);
    color: var(--ab-text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
    transition: all var(--ab-transition);
    white-space: nowrap;
}

.ab-btn:hover { background: var(--ab-bg); border-color: #cbd5e1; }
.ab-btn-primary { background: var(--ab-primary); color: #fff; border-color: var(--ab-primary); }
.ab-btn-primary:hover { background: var(--ab-primary-hover); border-color: var(--ab-primary-hover); }
.ab-btn-danger { background: transparent; color: var(--ab-danger); border-color: var(--ab-danger); }
.ab-btn-danger:hover { background: #fef2f2; }
.ab-btn-success { background: var(--ab-success); color: #fff; border-color: var(--ab-success); }
.ab-btn-success:hover { opacity: 0.9; }
.ab-btn-outline { background: transparent; }
.ab-btn-outline:hover { background: var(--ab-bg); }
.ab-btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.ab-btn-lg { padding: 0.65rem 1.5rem; font-size: 1rem; }
.ab-btn:disabled, .ab-btn.disabled { opacity: 0.5; pointer-events: none; }
.ab-btn-icon { padding: 0.5rem; }

/* ============================================================
   6. AB-CARD — Card per preview di contenuti
   Varianti: ab-card-horizontal
   Uso: <div class="ab-card"> <div class="ab-card-img" style="background-image:url(...)"></div> <div class="ab-card-body"><h3 class="ab-card-title">...</h3></div> </div>
   ============================================================ */
.ab-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ab-card {
    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
    overflow: hidden;
    transition: box-shadow var(--ab-transition);
}

.ab-card:hover { box-shadow: var(--ab-shadow-md); }

.ab-card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
}

.ab-card-img-empty {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ab-text-muted);
    font-size: 2rem;
}

.ab-card-body { padding: 1rem 1.25rem; }

.ab-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--ab-text);
}

.ab-card-subtitle {
    font-size: 0.8rem;
    color: var(--ab-text-light);
    margin-bottom: 0.5rem;
}

.ab-card-text {
    font-size: 0.85rem;
    color: var(--ab-text-light);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.ab-card-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.ab-card-details {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--ab-text-light);
    margin-bottom: 0.5rem;
}

.ab-card-footer {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ab-border);
}

/* Card orizzontale */
.ab-card-horizontal {
    display: flex;
}

.ab-card-horizontal .ab-card-img {
    width: 200px;
    height: auto;
    min-height: 140px;
    flex-shrink: 0;
}

/* ============================================================
   7. AB-TABLE — Tabella dati
   Uso: <div class="ab-table-wrap"><table class="ab-table"><thead>...</thead><tbody>...</tbody></table></div>
   Varianti: ab-table-striped, ab-table-compact
   ============================================================ */
.ab-table-wrap { overflow-x: auto; }

.ab-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    overflow: hidden;
    box-shadow: var(--ab-shadow);
}

.ab-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--ab-bg);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ab-text-light);
    border-bottom: 2px solid var(--ab-border);
}

.ab-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ab-border);
    font-size: 0.875rem;
    vertical-align: middle;
}

.ab-table tr:last-child td { border-bottom: none; }
.ab-table tbody tr:hover td { background: #f1f5f9; }

.ab-table-striped tbody tr:nth-child(even) td { background: #fafbfc; }
.ab-table-compact th, .ab-table-compact td { padding: 0.5rem 0.75rem; }

.ab-table-actions { white-space: nowrap; }
.ab-table-actions form { display: inline; }
.ab-table-empty { text-align: center; color: var(--ab-text-light); padding: 2rem !important; }

.ab-table-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

/* ============================================================
   8. AB-FORM — Form e campi
   Uso: <form class="ab-form"> <div class="ab-field"><label>Nome</label><input class="ab-input"></div> </form>
   ============================================================ */
.ab-form {
    background: var(--ab-surface);
    padding: 1.5rem;
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
}

.ab-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.ab-form-grid-full { grid-column: 1 / -1; }

.ab-field { margin-bottom: 1rem; }

.ab-field label,
.ab-label {
    display: block;
    font-size: 0.825rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
    color: var(--ab-text);
}

.ab-label-hint {
    font-weight: 400;
    color: var(--ab-text-muted);
    font-size: 0.75rem;
}

.ab-input,
.ab-select,
.ab-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--ab-surface);
    color: var(--ab-text);
    transition: border-color var(--ab-transition), box-shadow var(--ab-transition);
}

.ab-input:focus,
.ab-select:focus,
.ab-textarea:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.ab-input:disabled, .ab-select:disabled, .ab-textarea:disabled {
    background: var(--ab-bg);
    color: var(--ab-text-muted);
}

.ab-textarea { resize: vertical; min-height: 100px; }

.ab-input-error { border-color: var(--ab-danger); }
.ab-input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }

.ab-error { color: var(--ab-danger); font-size: 0.78rem; margin-top: 0.2rem; }
.ab-help { color: var(--ab-text-muted); font-size: 0.78rem; margin-top: 0.2rem; }

.ab-form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ab-border);
}

/* ============================================================
   9. AB-TOGGLE — Interruttore si/no
   Uso: <label class="ab-toggle"><input type="checkbox"><span class="ab-toggle-slider"></span><span>Attivo</span></label>
   ============================================================ */
.ab-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.ab-toggle input { display: none; }

.ab-toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: #cbd5e1;
    border-radius: 11px;
    transition: background var(--ab-transition);
}

.ab-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--ab-transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ab-toggle input:checked + .ab-toggle-slider { background: var(--ab-primary); }
.ab-toggle input:checked + .ab-toggle-slider::after { transform: translateX(18px); }

/* ============================================================
   10. AB-CHECKBOX / AB-RADIO — Selezione multipla / singola
   Uso: <label class="ab-checkbox"><input type="checkbox"><span>Opzione</span></label>
   ============================================================ */
.ab-checkbox,
.ab-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
}

.ab-checkbox input,
.ab-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--ab-primary);
}

/* ============================================================
   11. AB-BADGE — Etichette e tag
   Varianti: ab-badge-success, ab-badge-danger, ab-badge-warning, ab-badge-info, ab-badge-{custom}
   Uso: <span class="ab-badge ab-badge-success">Attivo</span>
   ============================================================ */
.ab-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.725rem;
    font-weight: 500;
    background: #e0e7ff;
    color: #3730a3;
    line-height: 1.6;
}

.ab-badge-success { background: #dcfce7; color: #166534; }
.ab-badge-danger { background: #fee2e2; color: #991b1b; }
.ab-badge-warning { background: #fef3c7; color: #92400e; }
.ab-badge-info { background: #cffafe; color: #155e75; }
.ab-badge-neutral { background: #f1f5f9; color: #475569; }

/* Alias semantici per difficolta */
.ab-badge-facile { background: #dcfce7; color: #166534; }
.ab-badge-media { background: #fef3c7; color: #92400e; }
.ab-badge-difficile { background: #fee2e2; color: #991b1b; }

/* ============================================================
   12. AB-ALERT — Messaggi di feedback
   Varianti: ab-alert-success, ab-alert-danger, ab-alert-warning, ab-alert-info
   Uso: <div class="ab-alert ab-alert-success">Salvato con successo.</div>
   ============================================================ */
.ab-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--ab-radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.ab-alert-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.ab-alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ab-alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ab-alert-info { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }

.ab-alert-dismissible {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ab-alert-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    line-height: 1;
}

.ab-alert-close:hover { opacity: 1; }

/* ============================================================
   13. AB-MODAL — Finestra modale
   Uso: <div class="ab-modal-overlay"><div class="ab-modal"><div class="ab-modal-header">...</div><div class="ab-modal-body">...</div><div class="ab-modal-footer">...</div></div></div>
   ============================================================ */
.ab-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ab-modal {
    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.ab-modal-sm { max-width: 360px; }
.ab-modal-lg { max-width: 700px; }

.ab-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ab-border);
    font-weight: 600;
}

.ab-modal-body { padding: 1.25rem; }

.ab-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ab-border);
}

/* ============================================================
   14. AB-STATS — Griglia di statistiche/KPI
   Uso: <div class="ab-stats"> <div class="ab-stat"><div class="ab-stat-value">42</div><div class="ab-stat-label">Ricette</div></div> </div>
   ============================================================ */
.ab-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ab-stat {
    background: var(--ab-surface);
    padding: 1.25rem;
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
    text-align: center;
}

.ab-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ab-primary);
    line-height: 1.2;
}

.ab-stat-label {
    font-size: 0.8rem;
    color: var(--ab-text-light);
    margin-top: 0.25rem;
}

.ab-stat-trend {
    font-size: 0.75rem;
    margin-top: 0.3rem;
}

.ab-stat-trend-up { color: var(--ab-success); }
.ab-stat-trend-down { color: var(--ab-danger); }

/* ============================================================
   15. AB-EMPTY — Stato vuoto
   Uso: <div class="ab-empty-state"><div class="ab-empty-icon">...</div><p>Nessun elemento.</p><a class="ab-btn ab-btn-primary">Crea</a></div>
   ============================================================ */
.ab-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--ab-text-light);
    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
}

.ab-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.ab-empty-state p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ============================================================
   16. AB-TABS — Navigazione a tab
   Uso: <div class="ab-tabs"><a class="ab-tab active">Tab 1</a><a class="ab-tab">Tab 2</a></div>
   ============================================================ */
.ab-tabs {
    display: flex;
    border-bottom: 2px solid var(--ab-border);
    margin-bottom: 1.5rem;
    gap: 0;
}

.ab-tab {
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    color: var(--ab-text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--ab-transition);
    cursor: pointer;
}

.ab-tab:hover { color: var(--ab-text); }

.ab-tab.active {
    color: var(--ab-primary);
    border-bottom-color: var(--ab-primary);
    font-weight: 500;
}

/* ============================================================
   17. AB-BREADCRUMB — Percorso di navigazione
   Uso: <nav class="ab-breadcrumb"><a href="/">Home</a><span>Ricette</span><span>Carbonara</span></nav>
   ============================================================ */
.ab-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.825rem;
    color: var(--ab-text-light);
    margin-bottom: 1rem;
}

.ab-breadcrumb a {
    color: var(--ab-primary);
    text-decoration: none;
}

.ab-breadcrumb a:hover { text-decoration: underline; }

.ab-breadcrumb span:not(:last-child)::after,
.ab-breadcrumb a::after {
    content: '/';
    margin-left: 0.4rem;
    color: var(--ab-text-muted);
}

/* ============================================================
   18. AB-SEARCH — Campo di ricerca
   Uso: <div class="ab-search"><input type="search" class="ab-search-input" placeholder="Cerca..."></div>
   ============================================================ */
.ab-search {
    position: relative;
    max-width: 320px;
}

.ab-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.2rem;
    border: 1px solid var(--ab-border);
    border-radius: var(--ab-radius);
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--ab-surface);
}

.ab-search-input:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.ab-search::before {
    content: '\1F50D';
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.4;
}

/* ============================================================
   19. AB-TOOLBAR — Barra azioni sopra tabella/cards
   Uso: <div class="ab-toolbar"><div class="ab-search">...</div><div class="ab-toolbar-actions"><button>...</button></div></div>
   ============================================================ */
.ab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.ab-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ============================================================
   20. AB-AVATAR — Immagine utente / iniziali
   Varianti: ab-avatar-sm, ab-avatar-lg
   Uso: <div class="ab-avatar">GF</div>  oppure  <img class="ab-avatar" src="...">
   ============================================================ */
.ab-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    object-fit: cover;
    flex-shrink: 0;
}

.ab-avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.ab-avatar-lg { width: 48px; height: 48px; font-size: 1rem; }

/* ============================================================
   21. AB-FILE-UPLOAD — Area upload file
   Uso: <div class="ab-file-upload"><input type="file"><div class="ab-file-upload-content"><p>Trascina un file o clicca per selezionare</p><span class="ab-file-upload-hint">Max 10MB</span></div></div>
   ============================================================ */
.ab-file-upload {
    position: relative;
    border: 2px dashed var(--ab-border);
    border-radius: var(--ab-radius-lg);
    padding: 2rem;
    text-align: center;
    transition: border-color var(--ab-transition);
    cursor: pointer;
}

.ab-file-upload:hover { border-color: var(--ab-primary); }

.ab-file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ab-file-upload-content p {
    color: var(--ab-text-light);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.ab-file-upload-hint {
    font-size: 0.75rem;
    color: var(--ab-text-muted);
}

.ab-file-upload-preview {
    margin-top: 0.75rem;
}

.ab-file-upload-preview img {
    max-width: 120px;
    border-radius: 4px;
}

.ab-file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ab-primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.ab-file-link:hover { text-decoration: underline; }

/* ============================================================
   22. AB-PAGINATION — Paginazione
   Uso: componente Laravel {{ $items->links() }} — stilizzato automaticamente
   ============================================================ */
.ab-main nav[role="navigation"] { margin-top: 1.5rem; }

.ab-main nav[role="navigation"] .flex.justify-between {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

/* ============================================================
   23. AB-DIVIDER — Separatore
   Uso: <hr class="ab-divider">  oppure  <div class="ab-divider-label">Oppure</div>
   ============================================================ */
.ab-divider {
    border: none;
    border-top: 1px solid var(--ab-border);
    margin: 1.5rem 0;
}

.ab-divider-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--ab-text-muted);
    font-size: 0.8rem;
    margin: 1.5rem 0;
}

.ab-divider-label::before,
.ab-divider-label::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--ab-border);
}

/* ============================================================
   24. AB-LIST — Lista semplice
   Uso: <ul class="ab-list"><li class="ab-list-item"><span>Testo</span><span class="ab-badge">Tag</span></li></ul>
   ============================================================ */
.ab-list {
    list-style: none;
    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
    overflow: hidden;
}

.ab-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ab-border);
    font-size: 0.875rem;
}

.ab-list-item:last-child { border-bottom: none; }
.ab-list-item:hover { background: #f8fafc; }

/* ============================================================
   25. AB-KV — Coppie chiave-valore (dettaglio record)
   Uso: <dl class="ab-kv"><dt>Nome</dt><dd>Carbonara</dd><dt>Tempo</dt><dd>25 min</dd></dl>
   ============================================================ */
.ab-kv {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.5rem 1rem;
    background: var(--ab-surface);
    padding: 1.25rem;
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
}

.ab-kv dt {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ab-text-light);
}

.ab-kv dd {
    font-size: 0.875rem;
    color: var(--ab-text);
    margin: 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.ab-inline { display: inline; }
.ab-flex { display: flex; }
.ab-flex-col { flex-direction: column; }
.ab-gap-sm { gap: 0.5rem; }
.ab-gap-md { gap: 1rem; }
.ab-gap-lg { gap: 1.5rem; }
.ab-justify-between { justify-content: space-between; }
.ab-items-center { align-items: center; }
.ab-text-center { text-align: center; }
.ab-text-right { text-align: right; }
.ab-text-muted { color: var(--ab-text-muted); }
.ab-text-sm { font-size: 0.8rem; }
.ab-mt-1 { margin-top: 0.5rem; }
.ab-mt-2 { margin-top: 1rem; }
.ab-mb-1 { margin-bottom: 0.5rem; }
.ab-mb-2 { margin-bottom: 1rem; }
.ab-hidden { display: none; }
.ab-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   26. AB-TOAST — Notifiche temporanee (rimpiazza alert() nativo)
   Uso JS: abToast('Salvato con successo', 'success')
   ============================================================ */
.ab-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.ab-toast {
    padding: 0.75rem 1.25rem;
    border-radius: var(--ab-radius);
    background: var(--ab-surface);
    box-shadow: var(--ab-shadow-lg);
    font-size: 0.875rem;
    color: var(--ab-text);
    border-left: 4px solid var(--ab-primary);
    pointer-events: auto;
    animation: ab-toast-in 0.3s ease, ab-toast-out 0.3s ease 2.7s forwards;
    max-width: 360px;
}

.ab-toast-success { border-left-color: var(--ab-success); }
.ab-toast-danger { border-left-color: var(--ab-danger); }
.ab-toast-warning { border-left-color: var(--ab-warning); }
.ab-toast-info { border-left-color: var(--ab-info); }

@keyframes ab-toast-in {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ab-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* ============================================================
   27. AB-CONFIRM — Dialog di conferma (rimpiazza confirm() nativo)
   Uso JS: abConfirm('Eliminare?', 'Questa azione non si può annullare.').then(ok => { ... })
   ============================================================ */
.ab-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1rem;
    animation: ab-fade-in 0.15s ease;
}

.ab-confirm {
    background: var(--ab-surface);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow-lg);
    width: 100%;
    max-width: 400px;
    animation: ab-scale-in 0.15s ease;
}

.ab-confirm-body {
    padding: 1.5rem;
}

.ab-confirm-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.ab-confirm-text {
    font-size: 0.875rem;
    color: var(--ab-text-light);
}

.ab-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--ab-border);
}

@keyframes ab-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ab-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .ab-sidebar { display: none; }
    .ab-main { padding: 1rem; }
    .ab-cards { grid-template-columns: 1fr; }
    .ab-stats { grid-template-columns: repeat(2, 1fr); }
    .ab-page-header { flex-direction: column; align-items: flex-start; }
    .ab-toolbar { flex-direction: column; align-items: stretch; }
    .ab-search { max-width: none; }
    .ab-card-horizontal { flex-direction: column; }
    .ab-card-horizontal .ab-card-img { width: 100%; height: 160px; }
    .ab-form-grid { grid-template-columns: 1fr; }
    .ab-kv { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .ab-stats { grid-template-columns: 1fr; }
}