/*
   Override Radzen → tema BeProf.
   Caricato DOPO material-base.css e PRIMA di app.min.css (Tailwind).
   Le variabili --rz-* sopravvivono al cascade Tailwind perché sono in :root,
   le nostre utility .bg-bp-primary continuano a funzionare normalmente.

   Filosofia: i componenti Radzen (DropDown, DatePicker, Upload, ecc.) ereditano
   automaticamente la palette BeProf — niente refactor sui consumer.
*/

:root {
    /* === COLORI PRINCIPALI === */
    --rz-primary: var(--bp-primary);
    --rz-primary-color: var(--bp-primary);
    --rz-primary-light: var(--bp-primary-light);
    --rz-primary-lighter: var(--bp-primary-light);
    --rz-primary-darker: var(--bp-primary);
    --rz-on-primary: var(--bp-white);

    --rz-secondary: var(--bp-text-muted);
    --rz-on-secondary: var(--bp-white);

    --rz-info: var(--bp-primary);
    --rz-success: var(--bp-success-text);
    --rz-warning: #d97706;
    --rz-danger: #dc2626;

    /* === TESTO === */
    --rz-text-color: var(--bp-text-dark);
    --rz-text-h1-color: var(--bp-text-dark);
    --rz-text-h2-color: var(--bp-text-dark);
    --rz-text-h3-color: var(--bp-text-dark);
    --rz-text-h4-color: var(--bp-text-dark);
    --rz-text-h5-color: var(--bp-text-dark);
    --rz-text-h6-color: var(--bp-text-dark);
    --rz-text-secondary-color: var(--bp-text-muted);
    --rz-text-tertiary-color: var(--bp-text-muted);
    --rz-text-contrast-color: var(--bp-white);
    --rz-text-disabled-color: var(--bp-text-muted);

    /* === SFONDO === */
    --rz-base-background-color: var(--bp-white);
    --rz-base-100: var(--bp-white);
    --rz-base-200: var(--bp-header-bg);
    --rz-base-300: var(--bp-body-bg);
    --rz-content-background-color: var(--bp-white);
    --rz-body-background-color: var(--bp-body-bg);

    /* === BORDI === */
    --rz-border-color: var(--bp-border);
    --rz-border: 1px solid var(--bp-border);
    --rz-input-border-color: var(--bp-input-border);
    --rz-input-focus-border-color: var(--bp-primary);
    --rz-border-radius: var(--bp-radius);

    /* === INPUT === */
    --rz-input-background-color: var(--bp-white);
    --rz-input-color: var(--bp-text-dark);
    --rz-input-placeholder-color: var(--bp-text-muted);
    --rz-input-disabled-background-color: var(--bp-body-bg);
    --rz-input-disabled-color: var(--bp-text-muted);
    --rz-input-padding: 0 12px;
    --rz-input-height: 44px;

    /* === BUTTON === */
    --rz-button-radius: var(--bp-radius);
    --rz-button-font-weight: 600;

    /* === CARD / SHADOW === */
    --rz-card-background-color: var(--bp-white);
    --rz-card-box-shadow: var(--bp-card-shadow);
    --rz-card-border-radius: var(--bp-radius);
    --rz-card-padding: 1.25rem;
    --rz-shadow-3: var(--bp-card-shadow);
    --rz-shadow-4: var(--bp-card-shadow);

    /* === DROPDOWN/POPUP === */
    --rz-popup-background-color: var(--bp-white);
    --rz-popup-shadow: var(--bp-card-shadow);
    --rz-popup-border-radius: var(--bp-radius);

    /* === DATAGRID (già usato — solo tweak compatti) === */
    --rz-grid-header-background-color: var(--bp-header-bg);
    --rz-grid-header-color: var(--bp-text-dark);
    --rz-grid-row-background-color: var(--bp-white);
    --rz-grid-row-alternate-background-color: var(--bp-white);
    --rz-grid-row-hover-background-color: var(--bp-body-bg);
    --rz-grid-cell-padding: 12px 16px;
    --rz-grid-border-color: var(--bp-border);

    /* === FONT === */
    --rz-text-font-family: 'Nunito', sans-serif;
    --rz-text-font-size: 14px;

    /* === SPAZI === */
    --rz-spacing: 8px;

    /* === DIALOG === */
    --rz-dialog-background-color: var(--bp-white);
    --rz-dialog-border-radius: var(--bp-radius-lg);
    --rz-dialog-shadow: var(--bp-card-shadow);
    --rz-dialog-title-color: var(--bp-text-dark);
}

/* === Tweaks specifici (selettori, non variabili) === */

/* DataGrid: header più chiaro coerente con il pattern delle nostre tabelle custom */
.rz-data-grid .rz-grid-table thead th {
    font-weight: 600;
    font-size: 13px;
}

/* DropDown: forziamo l'altezza coerente con i nostri input Tailwind h-11 (44px) */
.rz-dropdown {
    min-height: 44px;
    border-radius: var(--bp-radius);
}

/* Bottoni Radzen: angoli più morbidi (default Material è troppo squadrato) */
.rz-button {
    border-radius: var(--bp-radius);
    text-transform: none;
    letter-spacing: normal;
}

/* Notification: posizione e angoli */
.rz-notification {
    border-radius: var(--bp-radius);
}

/* Dialog: shadow più morbido */
.rz-dialog {
    border-radius: var(--bp-radius-lg);
}

/* DatePicker: rimossi override su .rz-inputtext — rompevano il popup. Usa default Radzen. */

/* === Steps / Stepper: focus su step attivo + spaziatura migliorata === */
.rz-steps {
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}
.rz-steps .rz-steps-item {
    padding: 0.25rem 0.5rem;
}
.rz-steps .rz-steps-item.rz-state-highlight .rz-steps-number,
.rz-steps .rz-steps-item.rz-steps-current .rz-steps-number {
    background-color: var(--bp-primary);
    color: var(--bp-white);
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 4px rgba(25, 55, 96, 0.15);
}
.rz-steps .rz-steps-item.rz-state-highlight .rz-steps-title,
.rz-steps .rz-steps-item.rz-steps-current .rz-steps-title {
    color: var(--bp-primary);
    font-weight: 600;
}
.rz-steps .rz-steps-item .rz-steps-number {
    transition: all 0.2s ease;
}

/* Step completati (prima del corrente) */
.rz-steps .rz-steps-item.rz-steps-complete .rz-steps-number {
    background-color: var(--bp-primary);
    color: var(--bp-white);
    opacity: 0.6;
}

/* Tree: focus visibile su nodo selezionato */
.rz-tree-node.rz-state-highlight > .rz-treenode-content,
.rz-tree-node > .rz-treenode-content.rz-state-highlight {
    background-color: var(--bp-primary) !important;
    color: var(--bp-white) !important;
}
.rz-tree-node > .rz-treenode-content:hover {
    background-color: var(--bp-header-bg);
}
.rz-tree-node > .rz-treenode-content.rz-state-active {
    background-color: var(--bp-primary);
    color: var(--bp-white);
}

/* === CheckBox: stato attivo coordinato col tema === */
.rz-chkbox .rz-chkbox-box.rz-state-active,
.rz-chkbox .rz-chkbox-box.rz-state-active:hover,
.rz-chkbox .rz-chkbox-box.rz-state-active:focus {
    background-color: var(--bp-primary);
    border-color: var(--bp-primary);
}
.rz-chkbox .rz-chkbox-box.rz-state-active .rz-chkbox-icon {
    color: var(--bp-white);
}
.rz-chkbox .rz-chkbox-box {
    border-color: var(--bp-input-border);
    border-radius: 4px;
}

/* === Switch: dimensioni più compatte + colore on === */
.rz-switch {
    width: 36px;
    height: 20px;
    background-color: var(--bp-input-border);
    border-radius: 999px;
}
.rz-switch .rz-switch-circle {
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
    background-color: var(--bp-white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.rz-switch.rz-switch-checked {
    background-color: var(--bp-primary);
}
.rz-switch.rz-switch-checked .rz-switch-circle {
    transform: translateX(16px);
    background-color: var(--bp-white);
}
/* Disattiva ripple/aura del circle (Material default) — lasciava un pallino viola quando attivo */
.rz-switch .rz-switch-circle::before,
.rz-switch .rz-switch-circle::after,
.rz-switch.rz-switch-checked .rz-switch-circle::before,
.rz-switch.rz-switch-checked .rz-switch-circle::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* === RadioButton: stato attivo === */
.rz-radiobutton .rz-radiobutton-box.rz-state-active {
    background-color: var(--bp-primary);
    border-color: var(--bp-primary);
}
.rz-radiobutton .rz-radiobutton-box.rz-state-active .rz-radiobutton-icon {
    background-color: var(--bp-white);
}

/* === DropDown popup items: hover + selected con palette BeProf === */
/* Item hover (mouse sopra) */
.rz-dropdown-item:hover,
.rz-listbox-item:hover,
.rz-multiselect-item:hover,
.rz-autocomplete-item:hover {
    background-color: var(--bp-header-bg) !important;
    color: var(--bp-text-dark) !important;
}

/* Item selezionato (highlight) */
.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-item.rz-state-focus,
.rz-listbox-item.rz-state-highlight,
.rz-listbox-item.rz-state-focus,
.rz-multiselect-item.rz-state-highlight,
.rz-autocomplete-item.rz-state-highlight {
    background-color: var(--bp-primary) !important;
    color: var(--bp-white) !important;
}

/* Item disabilitato */
.rz-dropdown-item.rz-state-disabled,
.rz-listbox-item.rz-state-disabled {
    color: var(--bp-text-muted) !important;
    opacity: 0.6;
}

/* Popup panel: stile coordinato */
.rz-dropdown-panel,
.rz-listbox,
.rz-autocomplete-panel,
.rz-multiselect-panel {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-card-shadow);
}

/* Filter input dentro al dropdown (search) */
.rz-dropdown-filter-container .rz-dropdown-filter,
.rz-multiselect-filter-container .rz-multiselect-filter {
    border: 1px solid var(--bp-input-border);
    border-radius: var(--bp-radius-sm);
}