/* =================================================== */
/* 1. VARIABILI E FONT MATERIAL DESIGN */
/* =================================================== */
:root {
    /* Colori Base */
    --color-primary: #2196F3; /* Blu 500 */
    --color-primary-dark: #1976D2; /* Blu 700 */
    --color-accent: #FF9800; /* Arancione 500 */
    --color-background: #FAFAFA; /* Grigio 50 */

    /* Testo e Bordi */
    --color-text-dark: rgba(0, 0, 0, 0.87);
    --color-border-light: rgba(0, 0, 0, 0.12);
    --color-input-border: rgba(0, 0, 0, 0.42);
}

body {
    background-color: var(--color-background);
    color: var(--color-text-dark);
    /* Se usi Google Fonts, decommenta e includi nel tuo HTML: */
    font-family: 'Roboto', sans-serif; 
}

/* =================================================== */
/* 2. LAYOUT & PANNELLI (Finestre, Dialoghi) */
/* =================================================== */

/* Ombra Material (Elevazione 2dp) per Pannelli e Finestre */
.panel, .window {
    border: none !important;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* Header del Pannello/Finestra: Colore Primario */
.panel-header, .window-header, .dialog-header {
    background: var(--color-primary) !important;
    border-bottom: none !important;
    color: white !important;
    font-weight: 500;
    padding: 12px;
}

.panel-title, .window-title {
    color: white !important;
}

/* Bottone di chiusura/massimizzazione (rendi bianco) */
.panel-tool a, .window-header .panel-tool a {
    filter: invert(100%); /* Rende l'icona bianca */
}

/* =================================================== */
/* 3. PULSANTI (LinkButton) */
/* =================================================== */

.l-btn {
    border-radius: 4px;
    border: none !important;
    transition: all 0.3s ease;
}

/* Pulsanti principali (simulano i Contained Buttons di Material) */
.l-btn-plain {
    background-color: var(--color-accent) !important;
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
}

.l-btn-plain:hover {
    background-color: var(--color-primary-dark) !important; /* Passa al Blu Scuro */
    box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
}

/* Pulsanti di default (simulano i Text Buttons di Material) */
.l-btn:not(.l-btn-plain) {
    background: none !important;
    color: var(--color-primary) !important;
}

.l-btn:not(.l-btn-plain):hover {
    background: rgba(33, 150, 243, 0.1) !important; /* Blu con opacità */
}

/* =================================================== */
/* 4. DATAGRID & PAGER */
/* =================================================== */

/* Header Datagrid: Piatto e colore Primario */
.datagrid-header, .datagrid-header td {
    background: var(--color-primary) !important;
    color: white;
    border-color: rgba(255, 255, 255, 0.2) !important;
    font-weight: 500;
}

/* Riga selezionata (Ripple Effect con opacità) */
.datagrid-row-selected {
    background: rgba(33, 150, 243, 0.15) !important;
    color: var(--color-text-dark);
}

/* Pager (Footer della Datagrid) */
.datagrid-pager {
    border-top: 1px solid var(--color-border-light);
    background: white;
}

/* Pulsanti del Pager */
.pagination-btn-separator {
    background-color: var(--color-border-light);
}

/* =================================================== */
/* 5. FORM (Input, ComboBox, NumericBox) */
/* =================================================== */

/* Input generico (rimuove il bordo 3D) */
.textbox, .textbox .textbox-text, .searchbox .searchbox-text {
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: white !important;
    border: none !important; /* Rimuove tutti i bordi */
}

/* Sottolineatura Material (non il bordo completo) */
.textbox-f {
    border-bottom: 1px solid var(--color-input-border) !important;
}

/* Focus: Sottolineatura più spessa e colore di Accento/Primario */
.textbox-f:focus-within {
    border-bottom: 2px solid var(--color-accent) !important;
}

/* Area di testo per input */
.textbox .textbox-text {
    padding: 8px 0 !important;
}

/* =================================================== */
/* 6. TAB & ACCORDION */
/* =================================================== */

/* Contenitore dei Tab: Sfondo bianco e piatto */
.tabs-header, .tabs-wrap {
    background: white !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

/* Tab non selezionato */
.tabs-unselected {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Tab Selezionato: Sottolineatura Material (colore Accento) */
.tabs-selected a.tabs-inner {
    border-bottom: 2px solid var(--color-accent) !important;
    color: var(--color-text-dark) !important;
    font-weight: 500;
    background: white !important;
}

/* Header dell'Accordion */
.accordion-header {
    background: white !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    padding: 12px;
    font-weight: 500;
}

/* =================================================== */
/* 7. TOOLTIP & MENU */
/* =================================================== */

/* Stile Tooltip in Material (Sfondo scuro) */
.tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right {
    background-color: #333333;
    color: white;
    border: none !important;
    border-radius: 4px;
    opacity: 0.9;
}

/* Menu e Submenu: Stile a card con ombra */
.menu-shadow, .menu-item {
    border: none !important;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
}

/* Voci di Menu: Hover leggero */
.menu-item-hover {
    background-color: var(--color-background) !important;
}