/*
|--------------------------------------------------------------------------
| LaraERP - tema grafico
|--------------------------------------------------------------------------
|
| Strato puramente visuale sopra Backstrap (bundle Backpack 5): colori,
| tipografia, bordi e ombre. Non cambia layout, dimensioni strutturali
| (altezza header, larghezza sidebar) né visibilità degli elementi.
| Per ritoccare l'aspetto generale basta modificare le variabili in :root.
|
*/

/* Inter (SIL OFL 1.1, vedi public/fonts/inter/LICENSE.txt), servito in locale */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --lx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --lx-font-size: .875rem;

    --lx-primary: #3b5bdb;
    --lx-primary-hover: #2f4ac0;
    --lx-primary-active: #283fa6;
    --lx-primary-soft: #edf2ff;
    --lx-primary-ring: rgba(59, 91, 219, .2);

    --lx-bg: #f4f6fa;
    --lx-surface: #ffffff;
    --lx-surface-alt: #f8fafc;
    --lx-border: #e3e8ef;
    --lx-border-strong: #cfd7e3;

    --lx-text: #1e293b;
    --lx-text-soft: #475569;
    --lx-text-muted: #64748b;

    --lx-radius: 8px;
    --lx-radius-sm: 6px;
    --lx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --lx-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --lx-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);

    /* le variabili Bootstrap usate da alcuni componenti/plugin */
    --primary: var(--lx-primary);
    --blue: var(--lx-primary);
    --font-family-sans-serif: var(--lx-font);
}

/* ------------------------------------------------------------------
 | Base e tipografia
 * ------------------------------------------------------------------ */

body {
    font-family: var(--lx-font);
    font-size: var(--lx-font-size);
    color: var(--lx-text);
    background-color: var(--lx-bg);
    border-top: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

.app-body,
.main {
    background-color: var(--lx-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--lx-font);
    font-weight: 600;
    letter-spacing: -.011em;
}

.text-muted {
    color: var(--lx-text-muted) !important;
}

a {
    color: var(--lx-primary);
}

a:hover {
    color: var(--lx-primary-hover);
}

code {
    color: #c2255c;
}

hr {
    border-top-color: var(--lx-border);
}

::selection {
    background: var(--lx-primary-soft);
    color: var(--lx-text);
}

/* Titolo di pagina (sezione "header" delle viste Backpack) */
.main > .container-fluid > h2 {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.02em;
}

.main > .container-fluid > h2 small {
    font-size: .875rem;
    font-weight: 400;
    color: var(--lx-text-muted);
    letter-spacing: 0;
}

/* Pagine custom che avvolgono il contenuto in un secondo .container-fluid:
   senza questo avrebbero 30px di margine in più rispetto al titolo e alle CRUD */
.main > .container-fluid > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: .8125rem;
    margin-bottom: .5rem;
}

.breadcrumb-item,
.breadcrumb-item.active {
    color: var(--lx-text-muted);
}

.breadcrumb-item a {
    color: var(--lx-text-soft);
}

.breadcrumb-item a:hover {
    color: var(--lx-primary);
}

/* ------------------------------------------------------------------
 | Header
 * ------------------------------------------------------------------ */

.app-header,
.app-header.bg-light {
    background-color: var(--lx-surface) !important;
    border-bottom: 1px solid var(--lx-border) !important;
    box-shadow: var(--lx-shadow-sm);
}

/* Backstrap mostra il logo al 20% di opacità: qui resta sempre leggibile */
.app-header.bg-light .navbar-brand,
.app-header .navbar-brand {
    font-family: var(--lx-font);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--lx-text);
    opacity: 1;
}

.app-header .navbar-brand b {
    font-weight: 700;
    color: var(--lx-primary);
}

/* Logo AMT accanto al nome: allineato alle voci della sidebar */
.app-header.bg-light .navbar-brand {
    padding-left: 1.5rem;
}

.app-header .navbar-brand .amt-logo {
    display: block;
    height: 18px;
    width: auto;
    filter: invert(1);
}

.app-header .navbar-brand .brand-divider {
    width: 1px;
    height: 22px;
    margin: 0 12px;
    background: var(--lx-border-strong);
}

/* Su schermi piccoli il brand è centrato e stretto: resta solo il nome */
@media (max-width: 991.98px) {
    .app-header .navbar-brand .amt-logo,
    .app-header .navbar-brand .brand-divider {
        display: none;
    }
}

.app-header .nav-link {
    color: var(--lx-text-soft);
}

.app-header .nav-link:hover {
    color: var(--lx-primary);
}

.app-header .navbar-toggler {
    color: var(--lx-text-soft);
}

.app-header .img-avatar {
    box-shadow: 0 0 0 2px var(--lx-surface), 0 0 0 3px var(--lx-border);
}

/* ------------------------------------------------------------------
 | Sidebar
 * ------------------------------------------------------------------ */

.sidebar.bg-light,
.sidebar.sidebar-pills {
    background-color: var(--lx-surface) !important;
    border-right: 1px solid var(--lx-border);
}

.sidebar.sidebar-pills .nav-link {
    color: var(--lx-text-soft) !important;
    border-radius: var(--lx-radius-sm);
    font-weight: 450;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar.sidebar-pills .nav-link .nav-icon {
    color: var(--lx-text-muted) !important;
}

.sidebar.sidebar-pills .nav-link:hover {
    background-color: var(--lx-surface-alt) !important;
    color: var(--lx-text) !important;
}

.sidebar.sidebar-pills .nav-link:hover .nav-icon {
    color: var(--lx-text-soft) !important;
}

.sidebar.sidebar-pills .nav-link.active,
.sidebar.sidebar-pills .nav-link.active:hover {
    background-color: var(--lx-primary-soft) !important;
    color: var(--lx-primary) !important;
    font-weight: 600;
}

.sidebar.sidebar-pills .nav-link.active .nav-icon,
.sidebar.sidebar-pills .nav-link.active:hover .nav-icon {
    color: var(--lx-primary) !important;
}

/* Voci di gruppo (dropdown) */
.sidebar.sidebar-pills .nav-dropdown-toggle {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.sidebar.sidebar-pills .nav-dropdown.open {
    background: var(--lx-surface-alt);
    border-radius: var(--lx-radius);
}

.sidebar.sidebar-pills .nav-dropdown.open > .nav-link.nav-dropdown-toggle {
    color: var(--lx-text) !important;
}

.sidebar.sidebar-pills .nav-dropdown-items .nav-link {
    font-size: .8125rem;
}

.sidebar.sidebar-pills .nav-title {
    color: var(--lx-text-muted) !important;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--lx-border-strong);
}

/* Sidebar ridotta (icone): i flyout usano il colore primario */
.sidebar-minimized .sidebar .nav-item:hover > .nav-link,
.sidebar-minimized .sidebar .nav-link:hover,
.sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
    background: var(--lx-primary) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------
 | Footer
 * ------------------------------------------------------------------ */

.app-footer {
    background: transparent;
    border-top: 1px solid var(--lx-border);
    color: var(--lx-text-muted);
    font-size: .75rem;
}

.app-footer a {
    color: var(--lx-text-soft);
}

/* ------------------------------------------------------------------
 | Card e box
 * ------------------------------------------------------------------ */

.card {
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow);
}

.card > .list-group:first-child .list-group-item:first-child,
.card-header:first-child {
    border-radius: calc(var(--lx-radius) - 1px) calc(var(--lx-radius) - 1px) 0 0;
}

.card-header {
    background-color: var(--lx-surface);
    border-bottom: 1px solid var(--lx-border);
    font-weight: 600;
}

.card-footer {
    background-color: var(--lx-surface-alt);
    border-top: 1px solid var(--lx-border);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--lx-radius) - 1px) calc(var(--lx-radius) - 1px);
}

.card-title {
    font-weight: 600;
}

.card-accent-primary {
    border-top-color: var(--lx-primary);
}

.callout-primary {
    border-left-color: var(--lx-primary);
}

.callout-primary h4 {
    color: var(--lx-primary);
}

.shadow-xs {
    box-shadow: var(--lx-shadow-sm) !important;
}

.border-xs {
    border-color: var(--lx-border) !important;
}

/* ------------------------------------------------------------------
 | Pulsanti
 * ------------------------------------------------------------------ */

.btn {
    font-size: var(--lx-font-size);
    font-weight: 500;
    border-radius: var(--lx-radius-sm);
}

.btn-sm,
.btn-group-sm > .btn {
    font-size: .8125rem;
    border-radius: 5px;
}

.btn-lg,
.btn-group-lg > .btn {
    font-size: 1rem;
    border-radius: var(--lx-radius);
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--lx-primary-ring);
}

.btn-primary,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
    color: #fff;
    box-shadow: var(--lx-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--lx-primary-hover);
    border-color: var(--lx-primary-hover);
    color: #fff;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--lx-primary-active);
    border-color: var(--lx-primary-active);
    color: #fff;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
}

.btn-outline-primary {
    color: var(--lx-primary);
    border-color: var(--lx-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
    color: #fff;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--lx-primary);
}

.btn-ghost-primary {
    color: var(--lx-primary);
}

.btn-ghost-primary:hover,
.btn-ghost-primary:not(:disabled):not(.disabled):active,
.btn-ghost-primary:not(:disabled):not(.disabled).active {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
    color: #fff;
}

.btn-link {
    color: var(--lx-primary);
}

.btn-link:hover {
    color: var(--lx-primary-hover);
}

/* "secondary"/"light"/"default" di Backstrap: pulsanti neutri con bordo */
.btn-secondary,
.btn-default,
.btn-light {
    background-color: var(--lx-surface);
    border-color: var(--lx-border-strong);
    color: var(--lx-text);
    box-shadow: var(--lx-shadow-sm);
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-light.dropdown-toggle {
    background-color: var(--lx-surface-alt);
    border-color: var(--lx-border-strong);
    color: var(--lx-text);
}

.btn-outline-secondary {
    border-color: var(--lx-border-strong);
    color: var(--lx-text-soft);
}

.btn-outline-secondary:hover {
    background-color: var(--lx-surface-alt);
    border-color: var(--lx-border-strong);
    color: var(--lx-text);
}

/* ------------------------------------------------------------------
 | Form
 * ------------------------------------------------------------------ */

.form-group > label,
.col-form-label {
    font-weight: 500;
    color: var(--lx-text-soft);
}

.form-control,
.custom-select,
.input-group-text {
    font-size: var(--lx-font-size);
    border-color: var(--lx-border-strong);
    border-radius: var(--lx-radius-sm);
    color: var(--lx-text);
}

.form-control-sm,
.custom-select-sm {
    font-size: .8125rem;
}

.form-control::placeholder {
    color: #94a3b8;
}

.input-group-text {
    background-color: var(--lx-surface-alt);
    color: var(--lx-text-muted);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--lx-primary);
    box-shadow: 0 0 0 3px var(--lx-primary-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--lx-surface-alt);
}

.form-text,
.help-block {
    color: var(--lx-text-muted);
    font-size: .8125rem;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--lx-primary-ring);
}

.custom-range::-webkit-slider-thumb { background-color: var(--lx-primary); }
.custom-range::-moz-range-thumb { background-color: var(--lx-primary); }

.switch-primary .switch-input:checked + .switch-slider {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary-hover);
}

/* Select2 (tema bootstrap usato da Backpack): "body" perché il suo CSS
   viene caricato dopo questo file nelle pagine con campi select2 */
body .select2-container--bootstrap .select2-selection,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    border-color: var(--lx-border-strong);
    border-radius: var(--lx-radius-sm);
    font-size: var(--lx-font-size);
}

body .select2-container--bootstrap.select2-container--focus .select2-selection,
body .select2-container--bootstrap.select2-container--open .select2-selection,
body .select2-container--default.select2-container--focus .select2-selection--multiple,
body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--lx-primary);
    box-shadow: 0 0 0 3px var(--lx-primary-ring);
}

body .select2-dropdown {
    border-color: var(--lx-border-strong);
    border-radius: var(--lx-radius-sm);
    box-shadow: var(--lx-shadow-lg);
    font-size: var(--lx-font-size);
}

body .select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--lx-primary);
}

/* Barre di filtri in linea: spazio verticale quando i campi vanno a capo */
.form-inline {
    row-gap: .5rem;
}

/* Select2 multiplo nelle barre di filtri: stessa altezza e angoli dei campi .form-control-sm */
body .form-inline .select2-container--bootstrap .select2-selection--multiple {
    min-height: calc(1.5em + .5rem + 2px);
    font-size: .8125rem;
    border-radius: 5px;
}

body .form-inline .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: calc(1.5em + .5rem);
    min-height: 0; /* Backstrap impone 36px dentro i form */
    padding: 0 .5rem;
    font-size: .8125rem;
    line-height: 1.5;
}

body .form-inline .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    margin: 3px 0 0 4px;
    padding: 0 6px;
    font-size: .75rem;
    line-height: 1.6;
    border-color: var(--lx-border-strong);
}

/* ------------------------------------------------------------------
 | Tabelle (liste CRUD e tabelle generiche)
 * ------------------------------------------------------------------ */

.table td,
.table th {
    border-top-color: var(--lx-border);
}

/* thead-dark/table-dark mantengono il loro sfondo scuro */
.table thead:not(.thead-dark):not(.table-dark) th {
    background-color: var(--lx-surface-alt);
    border-bottom: 1px solid var(--lx-border);
    color: var(--lx-text-soft);
    font-size: .8125rem;
    font-weight: 600;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

.table-hover tbody tr:hover {
    background-color: var(--lx-primary-soft);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--lx-border);
}

#crudTable {
    border-radius: var(--lx-radius) !important;
    border: 1px solid var(--lx-border) !important;
    box-shadow: var(--lx-shadow) !important;
}

/* DataTables: ricerca, info, paginazione */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    color: var(--lx-text-muted);
    font-size: .8125rem;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--lx-radius-sm);
}

/* Filtri lista Backpack */
.navbar-filters .backpack-filter label {
    color: var(--lx-text-muted);
    font-size: .75rem;
    letter-spacing: .03em;
}

.navbar-filters .nav-link {
    color: var(--lx-text-soft);
    font-size: .8125rem;
}

.navbar-filters .navbar-nav > .active > a,
.navbar-filters .navbar-nav > .open > a,
.navbar-filters li > a:active {
    background-color: var(--lx-primary-soft);
    color: var(--lx-primary);
}

/* ------------------------------------------------------------------
 | Paginazione, nav, tab
 * ------------------------------------------------------------------ */

.page-link {
    color: var(--lx-primary);
    border-color: var(--lx-border);
}

.page-link:hover {
    color: var(--lx-primary-hover);
    background-color: var(--lx-surface-alt);
    border-color: var(--lx-border);
}

.page-link:focus {
    box-shadow: 0 0 0 3px var(--lx-primary-ring);
}

.page-item.active .page-link {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--lx-radius-sm);
    border-bottom-left-radius: var(--lx-radius-sm);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--lx-radius-sm);
    border-bottom-right-radius: var(--lx-radius-sm);
}

.nav-pills .nav-link {
    border-radius: var(--lx-radius-sm);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--lx-primary);
}

.nav-tabs {
    border-bottom-color: var(--lx-border);
}

.nav-tabs .nav-link {
    color: var(--lx-text-soft);
    border-top-left-radius: var(--lx-radius-sm);
    border-top-right-radius: var(--lx-radius-sm);
}

.nav-tabs .nav-link:hover {
    color: var(--lx-text);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--lx-primary);
    border-color: var(--lx-border) var(--lx-border) var(--lx-surface);
    font-weight: 600;
}

.nav-fill .nav-link.active {
    border-top-color: var(--lx-primary);
}

.tab-content {
    border-color: var(--lx-border);
}

/* ------------------------------------------------------------------
 | Badge, alert, list group, progress
 * ------------------------------------------------------------------ */

.badge {
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: .01em;
}

.badge-pill {
    border-radius: 10rem;
}

.badge-primary,
.tag-primary,
.tag-blue {
    background-color: var(--lx-primary);
}

.alert {
    border-radius: var(--lx-radius);
}

.alert-primary {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary-hover);
}

.list-group-item {
    border-color: var(--lx-border);
}

.list-group-item.active {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary);
}

.list-group-item-accent-primary {
    border-left-color: var(--lx-primary);
}

.progress {
    border-radius: 999px;
    background-color: #e9edf5;
}

.progress-bar {
    background-color: var(--lx-primary);
}

/* ------------------------------------------------------------------
 | Dropdown, modali, tooltip, popover
 * ------------------------------------------------------------------ */

.dropdown-menu {
    border: 1px solid var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-lg);
    font-size: var(--lx-font-size);
}

.dropdown-item {
    color: var(--lx-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--lx-surface-alt);
    color: var(--lx-text);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--lx-primary);
    color: #fff;
}

.dropdown-header {
    color: var(--lx-text-muted);
    background-color: var(--lx-surface-alt);
}

.modal-content {
    border: 1px solid var(--lx-border);
    border-radius: 12px;
    box-shadow: var(--lx-shadow-lg);
}

.modal-header {
    border-bottom-color: var(--lx-border);
}

.modal-footer {
    border-top-color: var(--lx-border);
}

.modal-title {
    font-weight: 600;
}

.modal-primary .modal-content {
    border-color: var(--lx-primary);
}

.modal-primary .modal-header {
    background-color: var(--lx-primary);
}

.tooltip-inner {
    border-radius: var(--lx-radius-sm);
    font-size: .75rem;
}

.popover {
    border-color: var(--lx-border);
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-lg);
}

/* ------------------------------------------------------------------
 | Utility di colore Bootstrap legate al primario
 * ------------------------------------------------------------------ */

.text-primary { color: var(--lx-primary) !important; }
a.text-primary:hover,
a.text-primary:focus { color: var(--lx-primary-hover) !important; }
.bg-primary { background-color: var(--lx-primary) !important; }
.border-primary { border-color: var(--lx-primary) !important; }

/* Notifiche Noty e barra di caricamento */
.noty_theme__backstrap.noty_type__primary {
    background-color: var(--lx-primary);
    border-color: var(--lx-primary-hover);
}

.noty_theme__backstrap.noty_bar {
    border-radius: var(--lx-radius);
    box-shadow: var(--lx-shadow-lg);
    font-family: var(--lx-font);
}

.pace .pace-progress {
    background: var(--lx-primary);
}