/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
    --accent-color: #1e3a8a; /* blu notte */
    --accent-hover: #1d4ed8; /* blu più chiaro */
    --sidebar-bg: #f8fafc;
    --border-color: #e2e8f0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

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

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

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

/* Centratura e aspetto pulito per la pagina di login */
.login-container {
    max-width: 420px;
    width: 90%;
}


.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 40;
}

.sidebar-overlay.active {
    display: block;
}

.sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    background-color: white;
}

.sidebar.active {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .sidebar {
        transform: translateX(0);
    }
}

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

.toggle-switch input:checked + .toggle-bg {
    background-color: var(--accent-color);
}

.toggle-switch input:checked + .toggle-bg .toggle-dot {
    transform: translateX(1.25rem);
}

/* Stile per i tab */
.tab-button.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: #f7f9fd; /* Un leggero sfondo per il tab attivo */
}