:root {
    /* Colori di base */
    --color-primary: #1a202c;
    --color-secondary: #4a5568;
    --color-accent: #4299e1;
    --color-page: #f7fafc;
    --color-card: #ffffff;
    --color-header: #ffffff;
    --color-sidebar: #2d3748;
    --color-sidebar-hover: #4a5568;
    --color-sidebar-border: #4a5568;
    --color-footer: #ffffff;
}

#sidebar-menu {
    width: 16rem; /* 64 in Tailwind */
    will-change: transform;
}

#sidebar-menu.show {
    transform: translateX(0) !important;
}

#sidebar-overlay {
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#sidebar-overlay.show {
    opacity: 1;
}




/* Applicazione dei colori alle classi Tailwind */
.bg-page {
    background-color: var(--color-page);
}

.bg-card {
    background-color: var(--color-card);
}

.bg-header {
    background-color: var(--color-header);
}

.bg-sidebar {
    background-color: var(--color-sidebar);
}

.bg-sidebar-hover {
    background-color: var(--color-sidebar-hover);
}

.bg-footer {
    background-color: var(--color-footer);
}

.border-sidebar-border {
    border-color: var(--color-sidebar-border);
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-accent {
    color: var(--color-accent);
}

.bg-accent {
    background-color: var(--color-accent);
}

.menu-item {
    color: var(--color-page);
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Stili aggiuntivi per la tabella mobile */
@media (max-width: 640px) {
    .mobileTable thead {
        display: none;
    }
    .mobileTable tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
    }
    .mobileTable td {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem;
        border-bottom: 1px solid #edf2f7;
    }
    .mobileTable td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #4a5568;
        margin-right: 1rem;
    }
    .mobileTable td:last-child {
        border-bottom: none;
    }
}