/**
 * Cliente Dashboard - CSS Client Dashboard
 * 
 * VERSIONE TEMA SCURO UNIVOCO - VALORI FISSI
 * Tutti i colori sono hardcoded per massima compatibilità
 * Risolve problemi di testi bianchi su sfondo bianco
 * IDENTICA STRATEGIA AL PLUGIN 1
 * 
 * @package Cliente_Dashboard
 * @subpackage Assets/CSS
 * @since 1.0.0
 */

/* ==========================================================================
   CLIENT DASHBOARD - LAYOUT PRINCIPALE
   ========================================================================== */

.cliente-dashboard-container {
    background: #1a1a1a !important;
    color: #ffffff !important;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    width: 100%;
    max-width: 6rem;
    margin: 0 auto;
    padding: 2rem 0;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   HEADER E CONTROLLI
   ========================================================================== */

.cliente-dashboard-container .header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #444444;
}

.cliente-dashboard-container h1 {
    color: #000000 !important; /* NERO per leggibilità come richiesto */
    font-size: 1.875rem;
    font-weight: 700;
    flex: 1;
    text-align: center;
    margin: 0;
}

.cliente-dashboard-container h2#client-header {
    color: #000000 !important; /* NERO per leggibilità come richiesto */
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Theme toggle button */
.cliente-dashboard-container #theme-toggle {
    padding: 0.5rem;
    border-radius: 9999px;
    background: #444444 !important;
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 0.75rem;
}

.cliente-dashboard-container #theme-toggle:hover {
    background: #555555 !important;
}

/* Logout button */
.cliente-dashboard-container .logout-button,
.cliente-dashboard-container a[href*="logout"] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.cliente-dashboard-container .logout-button:hover,
.cliente-dashboard-container a[href*="logout"]:hover {
    background: #b91c1c !important;
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ==========================================================================
   GRID LAYOUT PRINCIPALE
   ========================================================================== */

.cliente-dashboard-container .grid {
    display: grid;
    gap: 2rem;
}

.cliente-dashboard-container .grid.grid-cols-1 {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cliente-dashboard-container .grid.md\\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   SEZIONI/CARD
   ========================================================================== */

.cliente-dashboard-container .bg-white,
.cliente-dashboard-container .dark\\:bg-slate-900 {
    background: #2a2a2a !important;
    border: 1px solid #444444;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header delle sezioni */
.cliente-dashboard-container .bg-gray-800,
.cliente-dashboard-container .dark\\:bg-slate-950 {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 1rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.cliente-dashboard-container .bg-gray-800 h3,
.cliente-dashboard-container .dark\\:bg-slate-950 h3 {
    color: #ffffff !important;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

/* Contenuto delle sezioni */
.cliente-dashboard-container .p-6 {
    padding: 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 400px;
}

/* ==========================================================================
   TABELLE
   ========================================================================== */

.cliente-dashboard-container table {
    width: 100%;
    background: #2a2a2a !important;
    border: 1px solid #444444;
    border-radius: 0.5rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cliente-dashboard-container table thead th {
    background: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #444444;
    text-align: left;
}

.cliente-dashboard-container table tbody td {
    background: #2a2a2a !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #444444;
    font-size: 0.875rem;
}

.cliente-dashboard-container table tbody tr:nth-child(even) td {
    background: #333333 !important;
}

.cliente-dashboard-container table tbody tr:hover td {
    background: #3a3a3a !important;
}

/* Forza visibilità di tutti i contenuti tabella */
.cliente-dashboard-container table *,
.cliente-dashboard-container table td *,
.cliente-dashboard-container table th * {
    color: #ffffff !important;
}

/* Override specifici per classi Tailwind nelle tabelle */
.cliente-dashboard-container .text-gray-500,
.cliente-dashboard-container .text-gray-400,
.cliente-dashboard-container .text-gray-300,
.cliente-dashboard-container .text-gray-200,
.cliente-dashboard-container .text-gray-100,
.cliente-dashboard-container .text-gray-600,
.cliente-dashboard-container .text-gray-700,
.cliente-dashboard-container .text-gray-800,
.cliente-dashboard-container .dark\\:text-gray-400,
.cliente-dashboard-container .dark\\:text-gray-300 {
    color: #ffffff !important;
}

/* ==========================================================================
   COLORI STATUS E BADGE
   ========================================================================== */

.cliente-dashboard-container .text-orange-600,
.cliente-dashboard-container .dark\\:text-orange-300 {
    color: #f59e0b !important;
}

.cliente-dashboard-container .text-green-600,
.cliente-dashboard-container .dark\\:text-green-300 {
    color: #10b981 !important;
}

.cliente-dashboard-container .font-bold {
    font-weight: 700;
}

/* ==========================================================================
   TITOLI E SOTTOTITOLI
   ========================================================================== */

.cliente-dashboard-container h4 {
    color: #ffffff !important;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.cliente-dashboard-container h3.font-bold {
    color: #ffffff !important;
    font-weight: 700;
}

/* ==========================================================================
   SCROLLBAR PERSONALIZZATE
   ========================================================================== */

.cliente-dashboard-container .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.cliente-dashboard-container .custom-scrollbar::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.cliente-dashboard-container .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 3px;
}

.cliente-dashboard-container .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.cliente-dashboard-container .footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #444444;
    text-align: center;
}

.cliente-dashboard-container .footer .text-sm {
    font-size: 0.875rem;
}

.cliente-dashboard-container .footer .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* ==========================================================================
   TEMPLATE SPECIFICO - NUOVE CLASSI SENZA TAILWIND
   ========================================================================== */

/* Header actions */
.cliente-dashboard-container .header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Dashboard grid */
.cliente-dashboard-container .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .cliente-dashboard-container .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Sezioni dashboard */
.cliente-dashboard-container .dashboard-section {
    background: #2a2a2a !important;
    border: 1px solid #444444;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cliente-dashboard-container .section-header {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 1rem;
    border-bottom: 1px solid #444444;
}

.cliente-dashboard-container .section-header h3 {
    color: #ffffff !important;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.cliente-dashboard-container .section-content {
    padding: 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 400px;
}

.cliente-dashboard-container .subsection {
    margin-bottom: 1.5rem;
}

.cliente-dashboard-container .subsection:last-child {
    margin-bottom: 0;
}

.cliente-dashboard-container .subsection h4 {
    color: #ffffff !important;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Table container */
.cliente-dashboard-container .table-container {
    overflow-x: auto;
}

/* Dashboard table */
.cliente-dashboard-container .dashboard-table {
    width: 100%;
    background: #2a2a2a !important;
    border: 1px solid #444444;
    border-radius: 0.5rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin: 0;
}

.cliente-dashboard-container .dashboard-table thead th {
    background: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #444444;
    text-align: left;
}

.cliente-dashboard-container .dashboard-table tbody td {
    background: #2a2a2a !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #444444;
    font-size: 0.875rem;
}

.cliente-dashboard-container .dashboard-table tbody tr:nth-child(even) td {
    background: #333333 !important;
}

.cliente-dashboard-container .dashboard-table tbody tr:hover td {
    background: #3a3a3a !important;
}

/* Text alignment */
.cliente-dashboard-container .text-right {
    text-align: right !important;
}

/* Status colors */
.cliente-dashboard-container .status-due {
    color: #f59e0b !important;
    font-weight: 700;
}

.cliente-dashboard-container .status-paid {
    color: #10b981 !important;
    font-weight: 700;
}

/* Empty state */
.cliente-dashboard-container .empty-state {
    text-align: center;
    color: #999999 !important;
    font-style: italic;
}

/* Footer */
.cliente-dashboard-container .dashboard-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #444444;
    text-align: center;
}

.cliente-dashboard-container .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.cliente-dashboard-container .user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #cccccc !important;
}

/* ==========================================================================
   OVERRIDE GLOBALI PER MASSIMA COMPATIBILITÀ
   ========================================================================== */

/* Forza tutti i testi dentro cliente-dashboard-container ad essere bianchi */
.cliente-dashboard-container,
.cliente-dashboard-container *:not(h1):not(h2#client-header) {
    color: #ffffff !important;
}

/* Eccezioni specifiche per i due titoli neri */
.cliente-dashboard-container h1.text-3xl.font-bold {
    color: #000000 !important;
}

.cliente-dashboard-container h2#client-header {
    color: #000000 !important;
}

/* Forza sfondi scuri per tutti gli elementi */
.cliente-dashboard-container {
    background: #1a1a1a !important;
}

.cliente-dashboard-container .bg-white,
.cliente-dashboard-container .dark\\:bg-slate-900 {
    background: #2a2a2a !important;
}

.cliente-dashboard-container .bg-gray-800,
.cliente-dashboard-container .dark\\:bg-slate-950,
.cliente-dashboard-container .bg-gray-100,
.cliente-dashboard-container .dark\\:bg-slate-800 {
    background: #1a1a1a !important;
}

/* ==========================================================================
   LINKS E INTERAZIONI
   ========================================================================== */

.cliente-dashboard-container a:not(.logout-button):not([href*="logout"]) {
    color: #60a5fa !important;
    text-decoration: none;
}

.cliente-dashboard-container a:not(.logout-button):not([href*="logout"]):hover {
    color: #93c5fd !important;
    text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .cliente-dashboard-container {
        padding: 1rem;
    }
    
    .cliente-dashboard-container .header-controls {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    
    .cliente-dashboard-container .logout-button,
    .cliente-dashboard-container a[href*="logout"] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .cliente-dashboard-container .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .cliente-dashboard-container h1 {
        font-size: 1.5rem;
    }
    
    .cliente-dashboard-container h2#client-header {
        font-size: 1.25rem;
    }
    
    .cliente-dashboard-container table {
        font-size: 0.75rem;
    }
    
    .cliente-dashboard-container table th,
    .cliente-dashboard-container table td {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .cliente-dashboard-container {
        padding: 0.5rem;
    }
    
    .cliente-dashboard-container .p-6 {
        padding: 1rem;
        max-height: 300px;
    }
    
    .cliente-dashboard-container h1 {
        font-size: 1.25rem;
    }
    
    .cliente-dashboard-container h2#client-header {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   ANIMAZIONI E TRANSIZIONI
   ========================================================================== */

.cliente-dashboard-container * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Fade in per dashboard */
.cliente-dashboard-container {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.cliente-dashboard-container .text-center { text-align: center !important; }
.cliente-dashboard-container .font-semibold { font-weight: 600 !important; }
.cliente-dashboard-container .font-bold { font-weight: 700 !important; }
.cliente-dashboard-container .mb-6 { margin-bottom: 1.5rem !important; }
.cliente-dashboard-container .mb-3 { margin-bottom: 0.75rem !important; }
.cliente-dashboard-container .pb-4 { padding-bottom: 1rem !important; }

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .cliente-dashboard-container #theme-toggle,
    .cliente-dashboard-container .logout-button,
    .cliente-dashboard-container a[href*="logout"] {
        display: none !important;
    }
    
    .cliente-dashboard-container {
        background: white !important;
        color: black !important;
    }
    
    .cliente-dashboard-container table th,
    .cliente-dashboard-container table td {
        color: black !important;
        border-color: #ccc !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

.cliente-dashboard-container *:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Riduzione movimento per utenti con vestibular disorders */
@media (prefers-reduced-motion: reduce) {
    .cliente-dashboard-container * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}