/* === VARIABILI CSS CENTRALIZZATE === */
:root {
    /* Colore Principale (Blu) */
    --color-principale: #007cba;
    --color-principale-hover: #005a87;
    --color-principale-dark: #2271b1;
    --color-principale-darker: #1e5f8f;
    --color-principale-light: #00a0d2;
    --color-principale-lighter: #0073aa;
    
    /* Colore Secondario (Verde) */
    --color-secondario: #28a745;
    --color-secondario-hover: #218838;
    --color-secondario-dark: #1e7e34;
    --color-secondario-light: #40c057;
    --color-secondario-lighter: #51cf66;
    --color-secondario-pale: #d4edda;
    
    /* Colori Neutri/Grigi */
    --color-neutro-bg: #fafafa;
    --color-neutro-card: #f3f3f3;
    --color-neutro-border: #e0e0e0;
    --color-neutro-text: #222;
    --color-neutro-text-dark: #000;
    --color-neutro-text-light: #666;
    --color-neutro-text-muted: #999;
    --color-neutro-white: white;
    
    /* Colori di Sistema */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    
    /* Ombre e transizioni */
    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.15);
    --transition-fast: 0.2s ease;
    --border-radius: 4px;
}

/* ========================================
   UTILITY CLASSES - COLORI SISTEMA
   ======================================== */

/* Colori di testo - Sistema Principale */
.text-principale { color: var(--color-principale) !important; }
.text-principale-hover { color: var(--color-principale-hover) !important; }
.text-principale-dark { color: var(--color-principale-dark) !important; }
.text-principale-darker { color: var(--color-principale-darker) !important; }
.text-principale-light { color: var(--color-principale-light) !important; }
.text-principale-lighter { color: var(--color-principale-lighter) !important; }

/* Colori di testo - Sistema Secondario */
.text-secondario { color: var(--color-secondario) !important; }
.text-secondario-hover { color: var(--color-secondario-hover) !important; }
.text-secondario-dark { color: var(--color-secondario-dark) !important; }
.text-secondario-light { color: var(--color-secondario-light) !important; }
.text-secondario-lighter { color: var(--color-secondario-lighter) !important; }

/* Colori di sfondo - Sistema Principale */
.bg-principale { background-color: var(--color-principale) !important; }
.bg-principale-hover { background-color: var(--color-principale-hover) !important; }
.bg-principale-dark { background-color: var(--color-principale-dark) !important; }
.bg-principale-light { background-color: var(--color-principale-light) !important; }

/* Colori di sfondo - Sistema Secondario */
.bg-secondario { background-color: var(--color-secondario) !important; }
.bg-secondario-hover { background-color: var(--color-secondario-hover) !important; }
.bg-secondario-dark { background-color: var(--color-secondario-dark) !important; }
.bg-secondario-light { background-color: var(--color-secondario-light) !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: var(--color-neutro-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header fisso in alto */
#top-header {
    background: var(--color-neutro-white);
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-neutro-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

#site-title {
    font-size: 24px;
    font-weight: 300;
    color: var(--color-neutro-text);
    margin: 0;
}

#back-to-wp {
    background: var(--color-principale);
    color: var(--color-neutro-white);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    font-size: 14px;
    transition: background-color var(--transition-fast);
}

#back-to-wp:hover {
    background: var(--color-principale-hover);
    color: var(--color-neutro-white);
}

/* Layout Container - Flex per header-content-footer */
#main-layout {
    display: flex;
    padding-top: 60px;
    min-height: calc(100vh - 100px); /* Header 60px + Footer 40px */
}

/* Sidebar */
#sidebar {
    width: 220px;
    background: var(--color-neutro-white);
    color: var(--color-neutro-text);
    flex-shrink: 0;
    position: fixed;
    top: 60px;
    bottom: 40px; /* Spazio per il footer */
    left: 0;
    z-index: 1000;
    overflow-y: auto;
    border-right: 1px solid var(--color-neutro-border);
}

#sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar-menu li {
    border-bottom: 1px solid var(--color-neutro-border);
}

#sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    color: var(--color-neutro-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 4px solid transparent;
}

#sidebar-menu a:hover {
    background: var(--color-neutro-card);
    color: var(--color-neutro-text);
}

#sidebar-menu a.active {
    background: var(--color-principale-dark);
    color: var(--color-neutro-white);
    border-left: 4px solid var(--color-principale-darker);
}

/* Main Content */
#main-content {
    flex: 1;
    padding: 0;
    margin-left: 220px;
    margin-bottom: 40px; /* Spazio per il footer */
    min-height: calc(100vh - 100px); /* Header 60px + Footer 40px */
    background: var(--color-neutro-white);
}

/* Container principale per il contenuto delle pagine - senza padding, gestito da Bootstrap su #main-content */
#gestionale-content-container {
    max-width: 100%;
    margin: 0 auto;
    /* Rimuovi animazioni per migliori performance */
    animation: none !important;
    transition: none !important;
}

/* Ottimizzazioni performance - rimuovi animazioni da contenitori grandi */
.container, .container-fluid, .table-responsive, tbody {
    animation: none !important;
}

/* Page Header - Grigio chiaro come nell'immagine */
.page-header {
    background: var(--color-neutro-card);
    color: var(--color-neutro-text);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    border-bottom: 1px solid var(--color-neutro-border);
}

/* Header Bar - Blu con testo bianco per titoli sezioni principali */
#header-bar {
    background: var(--color-principale);
    color: var(--color-neutro-white);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 20px 0;
    border-bottom: 1px solid var(--color-principale-dark);
    font-weight: 500;
}

#header-bar h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-neutro-white);
    display: flex;
    align-items: center;
    gap: 8px;
}

#header-bar .btn {
    background-color: var(--color-neutro-white);
    border-color: var(--color-neutro-white);
    color: var(--color-principale);
    font-size: 14px;
    padding: 6px 12px;
    font-weight: 500;
}

#header-bar .btn:hover {
    background-color: var(--color-neutro-card);
    border-color: var(--color-neutro-card);
    color: var(--color-principale-dark);
}

/* Summary Bar - Barra informazioni con margine */
#summary-bar {
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-header .btn {
    background-color: var(--color-principale-light);
    border-color: var(--color-principale-light);
    color: var(--color-neutro-white);
    font-size: 14px;
    padding: 6px 12px;
}

.page-header .btn:hover {
    background-color: var(--color-principale-lighter);
    border-color: var(--color-principale-lighter);
}

/* Content Wrapper - Area principale bianca */
.content-wrapper {
    background: var(--color-neutro-white);
    padding: 20px;
    margin: 0;
    min-height: calc(100vh - 160px); /* Header + Page Header + Footer */
}

/* === STRUTTURA PAGINA E SPAZI === */

/* Container principale per contenuto di pagina */
.page-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Wrapper per sezioni principali */
.content-section {
    margin-bottom: 30px;
}

.content-section:last-child {
    margin-bottom: 0;
}

/* Intestazione pagina con spazio consistente */
.page-title-section {
    margin-bottom: 25px;
}

/* Sezione azioni (pulsanti, filtri) */
.actions-section {
    margin-bottom: 20px;
}

/* Sezione contenuto principale (tabelle) */
.main-table-section {
    margin-bottom: 0;
}

/* Raggruppa tabella + paginazione come unico blocco */
.table-with-pagination {
    margin-bottom: 30px;
}

/* Spazi interni ai contenitori */
.inner-content {
    padding: 20px;
}

.inner-content-sm {
    padding: 15px;
}

.inner-content-lg {
    padding: 25px;
}

/* === SEZIONI GERARCHICHE === */

/* Sezione Filtri e Opzioni - Font più piccoli, stile secondario */
.filters-section {
    background: var(--color-neutro-card);
    border: 1px solid var(--color-neutro-border);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 20px;
    font-size: 13px;
}

.filters-section h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutro-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filters-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filters-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group label {
    font-size: 12px;
    color: var(--color-neutro-text-light);
    font-weight: 500;
    margin: 0;
}

.filter-group select,
.filter-group input {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--color-neutro-border);
    border-radius: 3px;
    background: var(--color-neutro-white);
}

/* Sezione Contenuto Principale - Tabelle e dati importanti */
.main-content-section {
    background: var(--color-neutro-white);
    border: 1px solid var(--color-neutro-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
    margin-bottom: 20px;
}

.main-content-section .table {
    font-size: 14px; /* Font normale per contenuto principale */
    margin: 0;
}

.main-content-section .table th {
    font-size: 14px;
    font-weight: 600;
    background: var(--color-neutro-card);
    color: var(--color-neutro-text-dark);
}

.main-content-section .table td {
    font-size: 14px;
    color: var(--color-neutro-text);
}

/* Sezione Statistiche e Info Secondarie */
.stats-section {
    background: var(--color-neutro-card);
    border: 1px solid var(--color-neutro-border);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    margin-bottom: 15px;
    font-size: 12px;
}

.stats-section .stats-text {
    color: var(--color-neutro-text-light);
    font-size: 12px;
    margin: 0;
}

.stats-section .stats-number {
    font-weight: 600;
    color: var(--color-neutro-text);
}

/* Stili specifici per la dashboard - come nelle immagini */
.dashboard-section {
    margin-bottom: 30px;
}

.section-header {
    background: var(--color-neutro-card);
    color: var(--color-neutro-text);
    padding: 12px 16px;
    margin-bottom: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 1px solid var(--color-neutro-border);
    border-bottom: none;
}

.section-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0;
    border: 1px solid var(--color-neutro-border);
    border-top: none;
}

.stat-card {
    background: var(--color-neutro-white);
    padding: 20px;
    border-right: 1px solid var(--color-neutro-border);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background-color var(--transition-fast);
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-bottom: none;
}

.stat-card:last-child {
    border-right: none;
}

.stat-card:hover {
    background: var(--color-neutro-card);
    transform: none;
    box-shadow: none;
}

/* Colori delle card usando il sistema principale/secondario */
.stat-card.stat-clienti .stat-icon { 
    background: var(--color-principale); 
    color: var(--color-neutro-white); 
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-card.stat-movimentazioni .stat-icon { 
    background: var(--color-secondario); 
    color: var(--color-neutro-white); 
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-card.stat-autori .stat-icon { 
    background: var(--color-warning); 
    color: var(--color-neutro-white); 
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-card.stat-reports .stat-icon { 
    background: var(--color-info); 
    color: var(--color-neutro-white); 
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-content h3 {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-neutro-text);
}

.stat-content p {
    margin: 0;
    color: var(--color-neutro-text-light);
    font-size: 14px;
}

/* Azioni Rapide */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0;
    border: 1px solid var(--color-neutro-border);
    border-top: none;
}

.quick-action-btn {
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-neutro-white);
    font-weight: 500;
    border-right: 1px solid var(--color-neutro-border);
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
}

.quick-action-btn:last-child {
    border-right: none;
}

.quick-action-btn:hover {
    opacity: 0.9;
    color: var(--color-neutro-white);
}

.btn-primary-action { background: var(--color-principale); }
.btn-success-action { background: var(--color-secondario); }
.btn-info-action { background: var(--color-info); }

/* Sistema Modulare */
.system-status {
    background: #f8f9fa;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-top: none;
}

.system-status p {
    margin-bottom: 20px;
    color: #666;
    line-height: 1.6;
}

.features-list h4 {
    color: #333;
    font-size: 16px;
    margin-bottom: 12px;
}

.features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
}

/* RIMOSSE CLASSI TEXT CHE CONFLIGGONO CON BOOTSTRAP */

.stat-link {
    color: #007cba;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.stat-link:hover { color: #005a87; }
.stat-link.disabled { color: #999; cursor: not-allowed; }

.system-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.system-info h3 {
    color: #333;
    font-size: 18px;
    margin-bottom: 15px;
}

.info-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    font-size: 14px;
}

.info-label { font-weight: 600; color: #333; }
.info-value { color: #666; }

/* Footer fisso in basso */
#bottom-footer {
    background: #f8f9fa;
    color: #666;
    padding: 10px 20px;
    text-align: center;
    font-size: 11px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    border-top: 1px solid #e0e0e0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bottom-footer .footer-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#bottom-footer .footer-links {
    display: flex;
    gap: 10px;
}

#bottom-footer .footer-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

#bottom-footer .footer-links a:hover {
    color: #333;
}

/* === UTILITY CLASSES CENTRALIZZATE === */

/* RIMOSSE CLASSI BOTTONI CHE CONFLIGGONO CON BOOTSTRAP */

/* RIMOSSE CLASSI CARDS CHE CONFLIGGONO CON BOOTSTRAP */

/* Status badges */
.badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 12px;
}

.badge-success { background: var(--color-secondario-pale); color: var(--color-secondario-dark); }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }
.badge-info { background: #d1ecf1; color: #0c5460; }
.badge-primary { background: rgba(0, 124, 186, 0.1); color: var(--color-principale-dark); }

/* Tabelle responsive */
.table-responsive {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.table th,
.table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-neutro-border);
    font-size: 14px;
}

.table th {
    background: var(--color-neutro-bg);
    font-weight: 600;
    color: var(--color-neutro-text);
}

.table tr:hover {
    background: var(--color-neutro-card);
}

/* === TABELLA AUTORI === */
#autori-table thead th {
    background-color: var(--color-principale-darker) !important;
    color: var(--color-neutro-white) !important;
}

#autori-table tbody tr:nth-child(even) {
    background-color: var(--color-neutro-bg);
}

#autori-table tbody tr:nth-child(odd) {
    background-color: var(--color-neutro-white);
}

#autori-table tbody tr:hover {
    background-color: rgba(0, 124, 186, 0.1) !important;
}

/* Rimuovi lo sfondo bianco dalle celle per far emergere i colori delle righe */
#autori-table tbody td {
    background-color: transparent;
}

/* === PAGINAZIONE === */
#pagination-section {
    margin: 20px 0;
}

.pagination-container {
    background: var(--color-neutro-white);
    border: 1px solid var(--color-neutro-border);
    border-top: none;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: between;
    align-items: center;
    font-size: 13px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.pagination-info {
    color: var(--color-neutro-text-light);
    font-size: 13px;
}

.pagination-links {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-links a,
.pagination-links span {
    padding: 6px 12px;
    border: 1px solid var(--color-neutro-border);
    border-radius: 3px;
    text-decoration: none;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.pagination-links a {
    color: var(--color-principale);
    background: var(--color-neutro-white);
}

.pagination-links a:hover {
    background: var(--color-principale);
    color: var(--color-neutro-white);
    border-color: var(--color-principale);
}

.pagination-links span.current {
    background: var(--color-principale);
    color: var(--color-neutro-white);
    border-color: var(--color-principale);
}

.pagination-links span.disabled {
    color: var(--color-neutro-text-muted);
    background: var(--color-neutro-card);
    cursor: not-allowed;
}

/* Form comuni */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--color-neutro-text);
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 14px;
    transition: border-color var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-principale);
    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
}

/* RIMOSSE CLASSI MARGIN CHE CONFLIGGONO CON BOOTSTRAP - mantenuti solo mb-6 e mt-6 che Bootstrap non ha */
.mb-6 { margin-bottom: 2.5rem; }
.mt-6 { margin-top: 2.5rem; }

/* RIMOSSE CLASSI CHE CONFLIGGONO CON BOOTSTRAP */

/* Separatori visivi */
.section-divider {
    height: 1px;
    background: var(--color-neutro-border);
    margin: 20px 0;
}

.section-spacer {
    height: 20px;
}

/* Layout utilities per sezioni */
.section-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.section-grid.two-columns {
    grid-template-columns: 1fr 1fr;
}

.section-grid.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
}

/* === UTILITY CLASSES PER CONTENITORI === */

/* Contenitori con spazi laterali specifici */
.container-narrow {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-wide {
    max-width: 100%;
    padding: 0 40px;
}

.container-full {
    max-width: 100%;
    padding: 0;
}

/* Spazi interni standardizzati */
.content-padding-sm { padding: 15px; }
.content-padding-md { padding: 20px; }
.content-padding-lg { padding: 30px; }
.content-padding-xl { padding: 40px; }

/* Margini laterali per distinzione elementi */
.element-spacing-sm { margin: 0 10px; }
.element-spacing-md { margin: 0 15px; }
.element-spacing-lg { margin: 0 25px; }
.element-spacing-xl { margin: 0 35px; }

/* Text utilities - SOLO QUELLE NON IN BOOTSTRAP */
.text-muted { color: var(--color-neutro-text-muted); }
.text-light { color: var(--color-neutro-text-light); }
.text-dark { color: var(--color-neutro-text); }

/* Font sizes - Sistema gerarchico */
.text-xs { font-size: 11px; }      /* Testo molto piccolo - note, timestamp */
.text-sm { font-size: 12px; }      /* Testo piccolo - filtri, opzioni secondarie */
.text-base { font-size: 14px; }    /* Testo normale - contenuto principale */
.text-lg { font-size: 16px; }      /* Testo grande - titoli sezioni */
.text-xl { font-size: 18px; }      /* Testo molto grande - titoli principali */
.text-2xl { font-size: 20px; }     /* Testo extra large - titoli pagina */

/* Font weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ========================================
   FORM SECTIONS STYLES - Clean & Minimal
   Integrato nel sistema di design esistente
   NOTA: Bootstrap utilities (d-flex, align-items-center, etc.)
   sono fornite dal framework - non duplicate qui
   ======================================== */

/* Layout pulito e minimalista per form usando variabili esistenti */
.as-form-section-first {
    margin-top: 0;
}

.as-form-section .card-header {
    background-color: #FBFBFB;
    border-bottom: 1px dashed var(--color-neutro-border);
    border-radius: 0;
    padding: 0.75rem 1.15rem;
    font-weight: 600;
    color: var(--color-neutro-text);
    font-size: 1.15rem;
}

.as-form-section .card-header i {
    color: var(--color-neutro-text-light);
    margin-right: 0.5rem;
}

.as-form-section .card-body {
    padding: 1.5rem;
}

/* Form controls puliti usando variabili esistenti */
.as-form-section .form-control {
    border: 1px solid var(--color-neutro-border);
    border-radius: 0;
    padding: 0.75rem;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
    background: var(--color-neutro-white);
}

.as-form-section .form-control:focus {
    border-color: var(--color-principale);
    box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.1);
}

/* Form controls disabilitati */
.form-control:disabled {
    opacity: 0.4;
}

.as-form-section .form-label {
    font-weight: 500;
    color: var(--color-neutro-text);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Textarea specifico */
.as-form-section textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* File input */
.as-form-section input[type="file"].form-control {
    padding: 0.5rem;
}

.as-form-section .form-text {
    font-size: 0.85rem;
    color: var(--color-neutro-text-light);
}

/* Checkbox e form elements */
.as-form-section .form-check-input {
    border-radius: 0;
}

.as-form-section .form-check-input:checked {
    background-color: var(--color-principale);
    border-color: var(--color-principale);
}

/* Immagini */
.as-form-section .img-thumbnail {
    border-radius: 0;
    border: 1px solid var(--color-neutro-border);
    padding: 0.25rem;
}

/* Spacing più ordinato */
.as-form-section .row.g-3 > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* ========================================
   SHADOW UTILITIES - Custom Extensions
   ======================================== */

.as-form-section .row.g-4 > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Divider sections - rimuove border top per sezioni consecutive */
.as-form-section + .as-form-section {
    border-top: none;
}

/* Sezione azioni form */
.as-form-actions {
    margin-top: 3rem;
}

/* Buttons minimalisti usando variabili esistenti */
.as-form-actions .btn-lg {
    padding: 0.75rem 2rem;
    border-radius: 0;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.as-form-actions .btn-primary {
    background-color: var(--color-principale);
    border-color: var(--color-principale);
}

.as-form-actions .btn-primary:hover {
    background-color: var(--color-principale-hover);
    border-color: var(--color-principale-hover);
    transform: none;
    box-shadow: none;
}

.as-form-actions .btn-outline-secondary {
    color: var(--color-neutro-text-light);
    border-color: var(--color-neutro-text-light);
}

.as-form-actions .btn-outline-secondary:hover {
    background-color: var(--color-neutro-text-light);
    border-color: var(--color-neutro-text-light);
    color: var(--color-neutro-white);
}

/* Alert pulito usando variabili esistenti */
.as-form-actions .alert {
    border-radius: 0;
    border: 1px solid var(--color-info);
    background-color: rgba(23, 162, 184, 0.1);
    color: var(--color-info);
}

/* Header pagina form usando variabili esistenti */
.as-form-header {
    background: var(--color-neutro-white);
    border-bottom: 2px solid var(--color-neutro-border);
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.as-form-header h1 {
    color: var(--color-neutro-text);
    font-weight: 600;
}

.as-form-header .badge {
    background-color: var(--color-neutro-card);
    color: var(--color-neutro-text);
    font-weight: 500;
}

.as-form-header .btn {
    border-radius: 0;
    border: 1px solid var(--color-neutro-border);
    color: var(--color-neutro-text);
    background: var(--color-neutro-white);
}

.as-form-header .btn:hover {
    background: var(--color-neutro-card);
    border-color: var(--color-neutro-text-light);
}

/* Stili per anteprima codice usando variabili esistenti */
#code-preview {
    min-height: 20px;
}

#code-preview .preview-code {
    color: var(--color-success);
    font-weight: 500;
}

#code-preview .error-code {
    color: var(--color-danger);
    font-weight: 500;
}

/* Animazioni rimosse per migliorare le performance */

/* ========================================
   STILI COMPLEMENTARI DA APP.CSS
   Integrati nel sistema di variabili esistente
   ======================================== */

/* Custom Bootstrap overrides usando variabili esistenti */
.bg-gradient-primary {
    background: linear-gradient(45deg, var(--color-principale), var(--color-principale-light)) !important;
}

.navbar-brand {
    font-size: 1.5rem;
}

/* Dashboard stats cards migliorati */
.stats-card {
    border-left: 4px solid var(--color-principale);
}

.stats-card.success {
    border-left-color: var(--color-secondario);
}

.stats-card.info {
    border-left-color: var(--color-info);
}

.stats-card.warning {
    border-left-color: var(--color-warning);
}

/* Activity list */
.list-group-item {
    transition: background-color var(--transition-fast);
}

.list-group-item:hover {
    background-color: var(--color-neutro-card);
}

/* Form controls enhanced */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-principale);
    box-shadow: 0 0 0 0.2rem rgba(0, 124, 186, 0.25);
}

/* Buttons enhanced */
.btn-primary {
    background-color: var(--color-principale);
    border-color: var(--color-principale);
}

.btn-primary:hover {
    background-color: var(--color-principale-hover);
    border-color: var(--color-principale-hover);
}

/* Tables enhanced */
.table th {
    border-top: none;
    font-weight: 600;
    color: var(--color-neutro-text-dark);
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Animazioni rimosse per migliorare le performance */

/* Custom utilities usando variabili esistenti */
.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.text-gradient {
    background: linear-gradient(45deg, var(--color-principale), var(--color-principale-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.25rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}

/* Footer enhanced */
footer {
    border-top: 1px solid var(--color-neutro-border);
}

/* ===== TITOLO PAGINA PRINCIPALE ===== */
#titolo-pagina-principale {
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    border: none;
}

#titolo-pagina-principale .as-module-header {
    background: var(--color-principale) !important;
    border-radius: 8px;
    padding: 1.5rem;
    color: white;
}

/* Bottone Aggiungi nel header principale */
.btn-header-add {
    background-color: var(--color-principale-darker) !important;
    border-color: var(--color-principale-darker) !important;
    color: white !important;
}

.btn-header-add:hover {
    background-color: var(--color-secondario) !important;
    border-color: var(--color-secondario) !important;
    color: white !important;
}

.btn-header-add:focus {
    background-color: var(--color-principale-darker) !important;
    border-color: var(--color-principale-darker) !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 95, 143, 0.25) !important;
}

/* Bottoni Esporta e Condividi nel header principale */
.btn-header-action {
    background-color: var(--color-principale-darker) !important;
    border-color: var(--color-principale-darker) !important;
    color: white !important;
}

.btn-header-action:hover {
    background-color: var(--color-secondario) !important;
    border-color: var(--color-secondario) !important;
    color: white !important;
}

.btn-header-action:focus {
    background-color: var(--color-principale-darker) !important;
    border-color: var(--color-principale-darker) !important;
    color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 95, 143, 0.25) !important;
}

/* Bottone Filtri Avanzati */
.btn-outline-secondary:hover {
    background-color: var(--color-secondario) !important;
    border-color: var(--color-secondario) !important;
    color: white !important;
}

/* ===== CLASSI AS- PER COMPATIBILITÀ MODULI ===== */


/* Keyframes duplicate rimosse per migliorare le performance */

/* Sezioni generiche */
.as-section {
    background: white;
}

/* Header moduli */
.as-module-header {
    background: linear-gradient(135deg, var(--color-principale) 0%, var(--color-principale-hover) 100%);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: var(--shadow-light);
}

.as-icon-container {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottoni personalizzati */
.as-btn-primary {
    background: var(--color-principale) !important;
    border-color: var(--color-principale) !important;
    color: white !important;
    transition: var(--transition-fast);
    font-weight: 500;
    box-shadow: var(--shadow-light);
}

.as-btn-primary:hover {
    background: var(--color-principale-hover) !important;
    border-color: var(--color-principale-hover) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

.as-btn-primary:focus {
    background: var(--color-principale-hover) !important;
    border-color: var(--color-principale-hover) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 189, 234, 0.25) !important;
    color: white !important;
}

.as-btn-primary:active {
    background: var(--color-principale-dark) !important;
    border-color: var(--color-principale-dark) !important;
    transform: translateY(0);
    color: white !important;
}

/* Tabelle */
.as-table-container {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.as-table {
    min-width: 900px;
    margin-bottom: 0;
}

.as-table th,
.as-table td {
    vertical-align: middle;
    transition: var(--transition-fast);
}

.as-table th:first-child,
.as-table td:first-child {
    text-align: center;
}

.as-table tbody tr:hover {
    background-color: rgba(0, 124, 186, 0.08);
    transition: background-color 0.2s ease;
}

/* Draft table specific - manteniamo solo queste per la tabella bozze */
.as-col-draft-name { width: 30%; }
.as-col-draft-creator { width: 20%; }
.as-col-draft-date { width: 20%; }
.as-col-draft-actions { width: 10%; }

/* Utility classes */
.as-text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.as-hover-lift:hover {
    transform: translateY(-2px);
    transition: var(--transition-fast);
}

.as-clickable {
    cursor: pointer;
    transition: var(--transition-fast);
}

.as-clickable:hover {
    opacity: 0.8;
}

/* === TABELLA BOZZE AUTORI === */
#draft-management-section .table tbody tr {
    border-top: 1px solid var(--bs-border-color);
    transition: var(--transition-fast);
}

#draft-management-section .table tbody tr:first-child {
    border-top: none;
}

#draft-management-section .table tbody tr:hover {
    background-color: rgba(255, 193, 7, 0.1);
    border-top-color: var(--bs-warning);
    border-bottom-color: var(--bs-warning);
}

#draft-management-section .table tbody tr td {
    border-top: none;
    border-bottom: none;
    vertical-align: middle;
}

#draft-management-section .table tbody tr:hover:last-child td {
    border-bottom-color: var(--bs-warning);
}

/* === IMMAGINI AVATAR AUTORI === */
.as-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-neutro-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition-fast);
}

.as-avatar:hover {
    transform: scale(1.05);
    border-color: var(--color-principale);
    box-shadow: 0 4px 12px rgba(0, 124, 186, 0.2);
}

.as-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-neutro-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-neutro-medium);
}

.as-avatar-placeholder i {
    font-size: 2.5rem;
    color: var(--color-neutro-medium);
}

/* === MODAL EXPORT - PULSANTI HOVER === */
#exportModal .btn-outline-success:hover,
#exportModal .btn-outline-success:focus,
#exportModal .btn-outline-success:active {
    color: white !important;
}

#exportModal .btn-outline-success:hover .text-muted,
#exportModal .btn-outline-success:focus .text-muted,
#exportModal .btn-outline-success:active .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

#exportModal .btn-outline-success:hover .fw-bold,
#exportModal .btn-outline-success:focus .fw-bold,
#exportModal .btn-outline-success:active .fw-bold {
    color: white !important;
}

#exportModal .btn-outline-success:hover i,
#exportModal .btn-outline-success:focus i,
#exportModal .btn-outline-success:active i {
    color: white !important;
}

/* ========================================
   COMPONENTI UI RIUTILIZZABILI - PLUGIN WIDE
   ======================================== */

/* Sezioni principali - layout base per tutti i moduli */
.as-section {
    background: white;
}

/* Titoli delle sezioni - styling unificato */
.as-card-header h2 {
    color: var(--color-principale) !important;
}

/* Icone delle sezioni - styling unificato con colori sistema */
.as-card-header i {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    color: var(--color-principale) !important;
}

/* Header del modulo - gradiente standard per tutti i moduli */
.as-module-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* Container icone - styling standard */
.as-icon-container {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ombra del testo - effetto standard */
.as-text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Sezioni form disabilitate - stato riutilizzabile */
.section-disabled {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}

.section-disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 249, 250, 0.6);
    z-index: 1;
    border-radius: 0.5rem;
}

/* Campi che devono rimanere accessibili per la verifica similitudini */
.section-disabled .similarity-required-field {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    opacity: 1;
}

/* Evidenziazione per i campi necessari alla verifica */
.section-disabled .similarity-required-field {
    border: 1px solid #ffc107 !important;
    background-color: #fff9c4 !important;
}

/* Pulsanti header - stili standard per tutti i moduli */
.btn-header-action {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #495057;
    transition: all 0.2s ease;
}

.btn-header-action:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #212529;
    transform: translateY(-1px);
}

.btn-header-add {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    transition: all 0.2s ease;
}

.btn-header-add:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
    color: white;
    transform: translateY(-1px);
}

/* ========================================
   COMPONENTE AUTOCOMPLETAMENTO - GLOBALE
   ======================================== */

/* Lista autocompletamento - componente riutilizzabile per tutti i moduli */
.autocomplete-list {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 150px;
    overflow-y: auto;
    z-index: 9999;
    font-size: 0.875rem;
}

/* Item lista autocompletamento - styling standard */
.autocomplete-item {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Stati hover e selezione item autocompletamento */
.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: #f8f9fa;
}

/* Ultimo item senza bordo inferiore */
.autocomplete-item:last-child {
    border-bottom: none;
}

/* Sistema di notifiche toast - componente globale */
.as-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    padding: 12px 16px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.as-notification.success {
    border-left: 4px solid #28a745;
}

.as-notification.error {
    border-left: 4px solid #dc3545;
}

.as-notification.warning {
    border-left: 4px solid #ffc107;
}

.as-notification.info {
    border-left: 4px solid #17a2b8;
}

.as-notification-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.as-notification.success .as-notification-icon {
    color: #28a745;
}

.as-notification.error .as-notification-icon {
    color: #dc3545;
}

.as-notification.warning .as-notification-icon {
    color: #ffc107;
}

.as-notification.info .as-notification-icon {
    color: #17a2b8;
}

.as-notification-content {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
}

.as-notification-close {
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s ease;
}

.as-notification-close:hover {
    color: #495057;
}

/* Classe specifica per forzare colore principale su icone e titoli */
.text-sistema-principale {
    color: var(--color-principale, #007cba) !important;
}

/* Responsive adjustments per componenti globali */
@media (max-width: 768px) {
    .as-notification {
        min-width: 280px;
        right: 10px;
        top: 10px;
    }
    
    .as-card-header h2 {
        font-size: 1.1rem;
    }
    
    .as-card-header i {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }
}

/* === AUTOCOMPLETE BOOTSTRAP GLOBALI === */
.dropdown-menu .dropdown-item {
    font-size: 0.875rem; /* Ridotto da default Bootstrap */
    padding: 0.5rem 0.75rem;
}

.dropdown-menu .dropdown-item .fw-bold {
    font-size: 0.9rem; /* Principale leggermente più grande */
    line-height: 1.3;
}

.dropdown-menu .dropdown-item .small {
    font-size: 0.75rem; /* Secondari più piccoli */
    line-height: 1.2;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--color-principale);
    color: white;
}

.dropdown-menu .dropdown-item:hover .small,
.dropdown-menu .dropdown-item:focus .small {
    color: rgba(255,255,255,0.9);
}

/* ===================================
   REPEATER FIELDS - STILI GLOBALI
   Sistema per campi multipli editabili
   =================================== */

.artesistema-repeater-container {
    margin: 0;
}

.artesistema-repeater-table {
    margin-bottom: 0.75rem;
    font-size: 0.875rem; /* Testo più piccolo */
}

.artesistema-repeater-table input,
.artesistema-repeater-table select,
.artesistema-repeater-table textarea {
    width: 100%;
    font-size: 0.8125rem; /* 13px - più compatto */
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: background-color 0.15s ease-in-out;
}

.artesistema-repeater-table input:focus,
.artesistema-repeater-table select:focus,
.artesistema-repeater-table textarea:focus {
    background-color: #fffbf0;
    outline: none;
    box-shadow: none;
}

.artesistema-repeater-table thead th {
    font-weight: 600;
    font-size: 0.75rem; /* 12px - header più piccolo */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 0.4rem 0.5rem; /* Padding ridotto */
    color: #495057;
    vertical-align: middle;
}

.artesistema-repeater-table tbody td {
    padding: 0.2rem 0.4rem; /* Ultra compatte */
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.artesistema-repeater-table .repeater-row {
    transition: background-color 0.15s ease;
}

.artesistema-repeater-table .repeater-row:hover {
    background-color: #f8f9fa;
}

.artesistema-repeater-table .no-data-row td {
    padding: 1.5rem 1rem; /* Ridotto da 2rem */
    font-style: italic;
    color: #6c757d;
    font-size: 0.875rem;
    text-align: center;
}

/* Bottoni repeater */
.repeater-remove-row {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 0.2rem;
    transition: all 0.2s ease;
    border: 1px solid #dc3545;
    background-color: transparent;
    color: #dc3545;
}

.repeater-remove-row:hover {
    background-color: #dc3545;
    color: white;
    transform: scale(1.05);
}

.repeater-add-row {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.repeater-add-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Validazione visiva */
.artesistema-repeater-table input.is-invalid {
    border-color: #dc3545;
    background-color: #fff5f5;
}

.artesistema-repeater-table input.is-valid {
    border-color: #28a745;
    background-color: #f1f9f3;
}

/* Sezioni repeater più compatte */
.as-section.repeater-section {
    margin-bottom: 1rem !important;
}

.as-section.repeater-section .p-4 {
    padding: 1.25rem !important; /* Ridotto da 1.5rem (p-4 default) */
}

.as-section.repeater-section .as-card-header {
    padding: 0.75rem 1rem !important; /* Header più compatto */
}

.as-section.repeater-section .as-card-header h2 {
    font-size: 1rem; /* Titolo più piccolo */
    margin-bottom: 0;
}

.as-section.repeater-section .as-card-header p {
    font-size: 0.8125rem; /* Descrizione più piccola */
    margin-bottom: 0;
}

/* Divisori più sottili */
.as-section.repeater-section .border-bottom {
    border-bottom-width: 1px !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.as-section.repeater-section h6 {
    font-size: 0.875rem;
    margin-bottom: 0.5rem !important;
    font-weight: 600;
}

/* Responsive per repeater */
@media (max-width: 768px) {
    .artesistema-repeater-table {
        font-size: 0.75rem;
    }
    
    .artesistema-repeater-table input,
    .artesistema-repeater-table select {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
    
    .artesistema-repeater-table thead th {
        font-size: 0.7rem;
        padding: 0.3rem 0.4rem;
    }
    
    .artesistema-repeater-table tbody td {
        padding: 0.25rem 0.4rem;
    }
}