/* ==========================================================================
   ORTOSUITE — full CSS amb comentaris d’orientació (sense canvis funcionals)
   ========================================================================== */


/* ==========================================================================
   0) Imports de tema base (DevExpress Blazor + Bootstrap 5)
   ========================================================================== */
@import url("/_content/DevExpress.Blazor.Themes/office-white.bs5.min.css");


/* ==========================================================================
   1) Variables globals (colors corporatius + variables XAF/Bootstrap)
   ========================================================================== */
:root {
    /* Paleta corporativa */
    --primary-color: #1a3e68;
    --secondary-color: #66cc99;
    --base-color: #e5e7eb;
    --danger-color: #fa815f;
    /* VARIABLES DE XAF I BS */
    --dxbl-color-primary: var(--primary-color);
    --dxbl-btn-link-hover-color: var(--primary-color);
    --dxbl-color-primary-hover: var(--primary-color);
    --dxbl-color-primary-active: var(--primary-color);
    /* Bootstrap: primaris + elements que no sempre hereten bé */
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 26, 62, 104;
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--primary-color);
    --bs-btn-primary-bg: var(--primary-color);
    --bs-btn-primary-border-color: var(--bs-primary);
    --bs-btn-primary-hover-bg: #16355a;
    --bs-btn-primary-hover-border-color: #16355a;
    --bs-btn-primary-active-bg: #112946;
    --bs-btn-primary-active-border-color: #112946;
    --bs-focus-ring-color: rgba(26, 62, 104, .25);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    /* Elements opcionals */
    --bs-alert-link-color: var(--primary-color);
    --bs-progress-bar-bg: var(--primary-color);
    --gutter: 32px;
}

.dxbl-btn-primary:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-bg: var(--primary-color);
    --dxbl-btn-border-color: var(--primary-color);
    --dxbl-btn-active-bg: var(--secondary-color);
    --dxbl-btn-active-border-color: var(--secondary-color);
    --dxbl-btn-hover-bg: var(--secondary-color);
    --dxbl-btn-hover-border-color: var(--secondary-color);
    --dxbl-btn-disabled-bg: var(--secondary-color);
    --dxbl-btn-disabled-border-color: var(--secondary-color);
    --dxbl-btn-focus-shadow-color: var(--secondary-color);
}

.dxbl-text-edit {
    --dxbl-text-edit-focus-border-color: var(--secondary-color);
}

.dxbl-btn-group-vertical > .dxbl-btn-split > .dxbl-btn.dxbl-btn-outline-secondary, .dxbl-btn-group-vertical > .dxbl-btn.dxbl-btn-outline-secondary, .dxbl-btn-group > .dxbl-btn-split > .dxbl-btn.dxbl-btn-outline-secondary, .dxbl-btn-group > .dxbl-btn.dxbl-btn-outline-secondary {
    
    --dxbl-btn-focus-shadow-color: var(--secondary-color);
   
}
.dxbl-tabs {
    --dxbl-tabs-tab-selected-color: var(--secondary-color);
    --dxbl-tabs-tab-focus-outline-color: var(--secondary-color);
}

.dxbl-list-box-item-selected, .dxbl-list-box-render-container .dxbl-list-box-item-selected {
    background-color: var(--secondary-color) !important;
}

.dxbl-navigation-filter, .dxbl-navigation-filter .dxbl-image {
    color: white !important;
}

.header-left-side .btn-secondary {
    --bs-btn-hover-bg: var(--primary-color);
    
}
/* ==========================================================================
   2) Estructura bàsica de pàgina (alçada i contenidor app)
   ========================================================================== */
html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}


/* ==========================================================================
   3) Logotip capçalera (com a màscara sobre currentColor)
   ========================================================================== */
.header-logo {
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('../images/Logo_osOk.svg');
  mask: url('../images/Logo_osOk.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 84px;
  height: 24px;
}


/* ==========================================================================
   4) Pestanyes (tabs) — estil general i dins main-content
   ========================================================================== */
.dxbl-tabs {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 5px;
    margin: 15px;
}

.main-content .dxbl-tabs {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Ombra moderna */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 15px;
    margin: 0px;
}


/* ==========================================================================
   5) Targetes (cards) de llistes i detalls — suavitza i dona aire
   ========================================================================== */
/* Suavitza les cards que embolcallen llistes i detalls */
.dxbl-grid .card, .dxbl-fl .card {
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
    border: 1px solid var(--dxbl-accent-color-20);
}

/* Marges i respiració */
.dxbl-grid .card, .dxbl-fl .card {
    margin: .75rem;
    padding: .5rem;
}


/* ==========================================================================
   6) Enllaços clicables al menú de navegació XAF
   ========================================================================== */
.clickable-xaf-nav-item > a .xaf-nav-link, .clickable-xaf-nav-item > div > a .xaf-nav-link {
    text-decoration: none;
}


/* ==========================================================================
   7) Àrea principal (fons)
   ========================================================================== */
.main-content.xaf-flex-auto {
    background-color: white;
}


/* ==========================================================================
   8) Groups de FormLayout (marcs, ombres i header)
   ========================================================================== */
.dxbl-fl-group .dxbl-group {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
}

.dxbl-fl-group {
    padding-top: 5px;
}

    .dxbl-fl-group .dxbl-group .dxbl-group-header {
        background-color: #fff;
        z-index: auto;
        font-weight: bold;
        border-bottom: 1px solid #EEE;
    }


/* ==========================================================================
   9) (Possiblement residual) selector tab-item — no tocar
   ========================================================================== */
dxbl-tab-item {
    /*border-radius: 25px;*/
}


/* ==========================================================================
   10) Pestanyes (tabs) dins main-content — duplicat intencionat
       (es manté per assegurar la cascada exacta actual)
   ========================================================================== */
.main-content .dxbl-tabs {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* Ombra moderna */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 15px;
}


/* ==========================================================================
   11) Capçalera de la llista de pestanyes i estat actiu
   ========================================================================== */
.dxbl-tabs > .dxbl-tabs-tablist {
    background-color: transparent;
}

    .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
        font-weight: bold;
        color: #000;
    }

        /* Línia sota la pestanya seleccionada */
        .dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after, .dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
            background-color: var(--dxbl-color-primary);
        }


/* ==========================================================================
   12) Icones dins pestanyes (to i opacitat)
   ========================================================================== */
.dxbl-tabs .dxbl-image {
/*    filter: brightness(0) invert(0);
    opacity: 0.4;*/
}


/* ==========================================================================
   13) MENÚ lateral i sidebar (colors, fons i estats)
   ========================================================================== */
:not(.app.collapse-toggle) .app .header-left-side {
    background-color: var(--dxbl-color-primary);
    color: white;
}

.collapse-toggle .header-left-side {
    background-color: red;
    color: white;
}




.xaf-sidebar .about-info {
    background-color: var(--dxbl-color-primary);
    color: white;
    opacity: 1;
    margin: 0;
    padding: 15px;
    z-index: auto;
}

.xaf-sidebar .dxbl-scroll-viewer-content {
    background-color: var(--dxbl-color-primary);
}

.xaf-nav-item {
    color: #FFF;
    border: none;
    background-color: transparent;
    z-index: auto;
    letter-spacing: 0.5px;
    margin: 10px 5px 10px 5px;
}

.dxbl-group.dxbl-accordion-group.dxbl-accordion-filter {
    background-color: transparent;
    border: none;
    color: #FFF;
}

    .dxbl-group.dxbl-accordion-group.dxbl-accordion-filter input::placeholder {
        color: white;
    }

.xaf-nav-item.expanded .dxbl-group-header {
    background: rgba(255, 255, 255, 0.35); /* efecte glass */
    backdrop-filter: blur(10px); /* difumina el fons */
    border-radius: 15px;
    /*border: 1px solid rgba(255, 255, 255, 0.3);*/
    z-index: auto;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    margin: 0 5px;
    color: white; /* millora contrast */
}


/* ==========================================================================
   14) Accordion de menú — arrodoniments per blocs interns
   ========================================================================== */
.xaf-nav-item .dxbl-accordion .dxbl-accordion-group:not(:first-of-type):not(:last-child),
.dxbl-accordion .dxbl-accordion-group:not(:first-of-type):not(:last-child) > .dxbl-accordion-group-header,
.dxbl-accordion .dxbl-accordion-group:not(:first-of-type):last-child,
.dxbl-accordion .dxbl-accordion-group:not(:first-of-type):last-child > .dxbl-accordion-group-header {
    border-radius: 15px 15px 0 0;
}

.dxbl-accordion .dxbl-accordion-group {
    z-index: auto;
}

.xaf-sidebar .dxbl-group > .dxbl-group-header {
    z-index: auto;
    border-bottom: none;
}

.xaf-nav-item .dxbl-expandable-container {
    background: rgba(255, 255, 255, 0.15); /* efecte glass */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* compatibilitat Safari */
    border-radius: 0 0 15px 15px;
    /*border: 1px solid rgba(255, 255, 255, 0.3);*/
    border-top: 0px;
    /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);*/
    margin: 0 5px;
    color: white; /* millora contrast */
}


/* ==========================================================================
   15) Layout del header de cada element del menú (text+icona esquerra, fletxa dreta)
       1) Distribució visual
       2) Elimina sagnats de subnivells
       3) Columna d’icona amb ample fix
       4) Ajustos de padding
   ========================================================================== */
.xaf-nav-item .dxbl-accordion-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xaf-nav-item .dxbl-accordion-item-content {
    order: 1;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.xaf-nav-item .dxbl-group-expand-btn {
    order: 2;
    margin-left: auto; /* empeny la fletxa cap a la dreta */
}

/* 2) Elimina el sagnat dels subnivells: tots queden alineats */
.xaf-nav-item .dxbl-accordion-group,
.xaf-nav-item .dxbl-accordion-group-body .dxbl-group,
.xaf-nav-item .dxbl-accordion-item-content {
    --dxbl-accordion-item-indent: 0 !important;
    padding-left: 0 !important;
}

/* 3) Columna d'icona amb ample fix perquè tot quedi alineat */
:root {
    --nav-icon-w: 20px;
}

.xaf-nav-item .xaf-nav-menu-item-icon {
    width: var(--nav-icon-w);
    height: var(--nav-icon-w);
    flex: 0 0 var(--nav-icon-w);
    object-fit: contain;
}

.xaf-nav-item .dxbl-accordion-item-text-container {
    flex: 1;
}

/* 4) Ajustos visuals coherents */
.xaf-nav-item .dxbl-accordion-group-header {
    padding: 6px 8px;
}

.xaf-nav-item .dxbl-group-body {
    padding-left: 0 !important;
}

.xaf-nav-item .dxbl-accordion-group-expand-btn-container {
    display: none;
}


/* ==========================================================================
   16) Icones de menú en temes Bootstrap (forçat blanc)
   ========================================================================== */
.xaf-nav-item .dxbl-image {
    /*filter: invert(28%) sepia(78%) saturate(600%) hue-rotate(190deg) brightness(95%) contrast(90%);*/
    filter: brightness(0) invert(1);
    opacity: 0.9;
}


/* ==========================================================================
   17) LISTVIEWS (taules de llistes) — zebra, separadors horitzontals, alçada files
   ========================================================================== */
/* Aplica a les taules de llistes DevExpress (dxbl-grid) */
.dxbl-grid-table {
    border-collapse: collapse; /* treu els separadors dobles */
    border-left: none; /* opcional: treu marc esquerre */
    border-right: none; /* opcional: treu marc dret */
}

    /* Alterna colors a les files */
    .dxbl-grid-table tbody tr:nth-child(odd) {
        background-color: #ffffff; /* blanc */
    }

    .dxbl-grid-table tbody tr:nth-child(even) {
        background-color: #f8f9fa; /* gris clar Bootstrap */
    }

    /* Treure línies verticals de les columnes i alçar files */
    .dxbl-grid-table td,
    .dxbl-grid-table th {
        border-left: none !important;
        border-right: none !important;
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .dxbl-grid-table .dxbl-grid-header-row {
        background-color: #ffffff;
        height: 60px;
    }

        .dxbl-grid-table .dxbl-grid-header-row th {
            padding-top: 1.75rem;
            padding-bottom: 1.75rem;
        }

    /* Línia horitzontal subtil entre files */
    .dxbl-grid-table td {
        border-top: 1px solid #dee2e6; /* separador horitzontal */
    }


/* ==========================================================================
   18) BOTONS (toolbar i estats) — base, primari, per acció "Eliminar"
   ========================================================================== */
.dxbl-toolbar-item .dxbl-btn {
    border: none;
    border-radius: 6px;
    background-color: var(--base-color);
}

    .dxbl-toolbar-item.dxbl-btn .dxbl-image {
        filter: brightness(0) invert(0.2); /* converteix a gris fosc */
        opacity: 0.65;
    }

    .dxbl-toolbar-item.dxbl-btn.dxbl-btn-primary {
        background-color: var(--primary-color);
    }

        .dxbl-toolbar-item.dxbl-btn.dxbl-btn-primary .dxbl-image {
            filter: brightness(0) invert(1);
            opacity: 1;
        }

        .dxbl-toolbar-item.dxbl-btn.dxbl-btn-primary:hover {
            background-color: var(--secondary-color);
        }

/* Botó específic per acció Eliminar */
.dxbl-toolbar-item button[data-action-name="Eliminar"] {
    background-color: var(--danger-color) !important;
    color: #fff !important;
}

    .dxbl-toolbar-item button[data-action-name="Eliminar"] .dxbl-image {
        filter: brightness(0) invert(1);
        opacity: 1;
    }


/* ==========================================================================
   19) Checkbox (to de color per a marcat i hover)
   ========================================================================== */
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-checked .dxbl-checkbox-check-element, .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio):not(.dxbl-disabled):not(:disabled):not(.dxbl-readonly).dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: var(--secondary-color);
}

.dxbl-checkbox-check-element:hover {
    background-color: var(--secondary-color);
}


.nested-content > .grid-content.grid-virtual-scrolling-mode .dxbl-grid {
    max-height: none;
}


/* ==========================================================================
   19) Dashboards
   ========================================================================== */
/* aplica marge negatiu al contenidor del layout del dashboard */

    /* i padding (no margin) a cada ítem */


.dx-layout-item-wrapper .dx-layout-item-container {
    border-radius: 15px
}

.dx-dashboard-caption-toolbar .dx-toolbar-before .dx-dashboard-ellipsis {
    font-size: 22px;
    color: var(--primary-color);
    
}

.xaf-dashboard-container .border {
    border-color: red !important;
}
.xaf-dashboard-container .dx-dashboard-loading-container, .xaf-dashboard-container .dx-dashboard-widget-container {
    background-color: #f8fafb;
}




.dx-toolbar .dx-toolbar-before {
    left: 50% !important;
    transform: translateX(-50%) !important;
}