/* =========================================================
   0) Variables principals (Radzen + Bootstrap)
   ========================================================= */
:root {
    /* Blau corporatiu / botons */
    --rz-primary: #2A3D66 !important;
    --rz-primary-light: #3a4e7a !important;
    --rz-primary-dark: #213255 !important;
    --rz-on-primary: #FFFFFF !important;
    --rz-text-secondary-color: #f9fafb !important;
    --rz-text-tertiary-color: #f9fafb !important;
    --rz-text-muted-color: #f9fafb !important;
    /* Accent vermell del logo */
    --brand-accent: #ff4b4b;
    /* Text global Radzen */
    --rz-text-color: #f9fafb !important;
    /* Bootstrap */
    --bs-primary: #2A3D66 !important;
    --bs-primary-rgb: 42, 61, 102 !important;
    /* Colors de fons Radzen */
    --rz-body-background-color: transparent !important;
    --rz-base-background-color: rgba(16, 31, 75, 0.90) !important;
    /* Surfaces (cards, grids, etc.) en blau fosc semiopac */
    --app-bg: #0b1220;
    --app-surface: rgba(16, 31, 75, 0.90);
}

/* =========================================================
   1) Fons corporatiu i text global
   ========================================================= */
html,
body {
    height: 100%;
    margin: 0;
    zoom: 95%;
}

body {
    background-color: var(--app-bg);
    background-image: url('/Static/fons.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #f9fafb;
}
/* Bootstrap / Radzen utilitats que solen posar gris */
.text-muted,
.rz-text-muted,
.rz-text-secondary,
.rz-text-tertiary,
.rz-color-secondary,
.rz-color-base-500 {
    color: #f9fafb !important;
    opacity: 1 !important;
}
/* Contingut Radzen sobre el fons */
.rz-body,
.rz-content,
.rz-page {
    background-color: transparent !important;
    color: #f9fafb !important;
}

/* Treure línia blanca del lateral */
.rz-sidebar {
    border-right: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   2) AppBar / Topbar / Toolbars
   ========================================================= */
.rz-topbar,
.rz-appbar,
.rz-toolbar {
    background-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
    border-bottom: 0 !important;
}

    .rz-topbar .rz-link,
    .rz-appbar .rz-link,
    .rz-toolbar .rz-link,
    .rz-topbar .rz-icon,
    .rz-appbar .rz-icon,
    .rz-toolbar .rz-icon {
        color: var(--rz-on-primary) !important;
    }

    /* Links a la topbar en hover una mica més clars */
    .rz-topbar a:hover,
    .rz-appbar a:hover,
    .rz-toolbar a:hover {
        color: #e8edf7 !important;
    }

/* =========================================================
   3) Menú lateral (EDITAT)
   ========================================================= */

/* Base */
.rz-sidebar,
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-menuitem-link,
.rz-sidebar .rz-menuitem-link .rz-text,
.rz-sidebar .rz-menuitem-link .rz-icon,
.rz-sidebar .rz-navigation-item-link,
.rz-sidebar .rz-navigation-item-link .rz-text,
.rz-sidebar .rz-navigation-item-link .rz-icon {
    color: #f9fafb !important;
    opacity: 1 !important;
}

    /* HOVER (IMPORTANT: també quan el hover està al pare) */
    .rz-sidebar .rz-menuitem:hover > .rz-menuitem-link,
    .rz-sidebar .rz-navigation-item:hover > .rz-navigation-item-link,
    .rz-sidebar .rz-menuitem-link:hover,
    .rz-sidebar .rz-navigation-item-link:hover {
        background-color: rgba(42, 61, 102, 0.45) !important; /* blau corporatiu en hover */
        color: #ffffff !important;
    }

    /* ACTIU (seleccionat) -> vermell corporatiu */
    .rz-sidebar .rz-menuitem.rz-state-active > .rz-menuitem-link,
    .rz-sidebar .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
    .rz-sidebar .rz-menuitem-link.rz-state-active,
    .rz-sidebar .rz-navigation-item-link.rz-state-active {
        background-color: rgba(255, 75, 75, 0.22) !important; /* ✅ vermell suau */
        color: #ffffff !important;
        border-left: 4px solid var(--brand-accent) !important;
        padding-left: 10px;
    }


    /* (Opcional) pare desplegat */
    .rz-sidebar .rz-menuitem.rz-state-expanded > .rz-menuitem-link,
    .rz-sidebar .rz-navigation-item.rz-state-expanded > .rz-navigation-item-link {
        background-color: rgba(15, 23, 42, 0.35) !important;
    }


/* =========================================================
   4) Botons (Radzen + Bootstrap)
   ========================================================= */
.rz-button.rz-primary,
.rz-button.rz-state-primary,
.btn.btn-primary {
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary-dark) !important;
    color: var(--rz-on-primary) !important;
}

    .rz-button.rz-primary:hover,
    .rz-button.rz-state-primary:hover,
    .btn.btn-primary:hover {
        background-color: var(--brand-accent) !important;
        border-color: #d06565 !important;
    }

/* Botons de capçalera de card (Afegir centre, etc.) */
.rz-card .rz-card-header .rz-button {
    background-color: rgba(15, 23, 42, 0.85) !important;
    color: #f9fafb !important;
    border-color: rgba(148, 163, 184, 0.75) !important;
}

    .rz-card .rz-card-header .rz-button:hover {
        background-color: var(--brand-accent) !important;
        border-color: #d06565 !important;
        color: #ffffff !important;
    }

/* =========================================================
   5) Components (cards, grids, panels, forms, charts...)
   ========================================================= */
.rz-card,
.rz-datatable,
.rz-panel,
.rz-dialog,
.rz-form,
.rz-grid,
.rz-accordion,
.rz-tile,
.rz-timeline {
    background-color: var(--app-surface) !important;
    color: #f9fafb !important;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

    /* TOT el que hi ha dintre de components → text blanc */
    .rz-card *,
    .rz-datatable *,
    .rz-panel *,
    .rz-dialog *,
    .rz-form *,
    .rz-grid *,
    .rz-accordion *,
    .rz-tile *,
    .rz-timeline *,
    .rz-chart,
    .rz-chart * {
        color: #f9fafb !important;
    }

/* Grids sense fons blanc */
.rz-datatable-header,
.rz-datatable-data,
.rz-datatable-table,
.rz-datatable-thead,
.rz-datatable-tbody,
.rz-datatable-tfoot {
    background-color: transparent !important;
}

    /* Files de grid */
    .rz-datatable-data tr {
        background-color: transparent !important;
    }

        .rz-datatable-data tr:hover {
            background-color: rgba(148, 163, 184, 0.18) !important;
        }

    /* Capçaleres de grid una mica més marcades */
    .rz-datatable-thead th {
        font-weight: 600;
        border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    }

/* =========================================================
   6) Elements “liles” de Radzen → blau/vermell corporatiu
   ========================================================= */
.rz-badge.rz-primary,
.rz-chip.rz-primary,
.rz-switch.rz-primary .rz-switch-circle,
.rz-progressbar .rz-progressbar-value {
    background-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
}

.rz-calendar .rz-datepicker-calendar .rz-calendar-titlebar {
    background-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
}

.rz-tabview-nav li.rz-state-active .rz-link,
.rz-slider .rz-slider-range,
.rz-checkbox.rz-state-active .rz-checkbox-box {
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
}

/* =========================================================
   7) Calendari + Diàlegs
   ========================================================= */

/* Caixa principal del calendari (popup) i dels diàlegs */
.rz-calendar,
.rz-datepicker .rz-calendar,
.rz-dialog,
.rz-dialog .rz-dialog-content {
    background-color: rgba(9, 16, 35, 0.98) !important; /* fosc i separat del fons */
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

    /* Text en blanc tant al calendari com als diàlegs */
    .rz-calendar *,
    .rz-dialog * {
        color: #f9fafb !important;
    }

    /* --- Només calendari --- */
    .rz-calendar .rz-state-hover {
        background-color: rgba(148, 163, 184, 0.25) !important;
    }

    .rz-calendar .rz-state-active,
    .rz-calendar .rz-today.rz-state-active {
        background-color: var(--brand-accent) !important;
        color: #ffffff !important;
    }

/* =========================================================
   8) Fieldset (Dades del centre, etc.)
   ========================================================= */
.rz-fieldset {
    border: 0 !important; /* treu el marc rectangular gruixut */
    border-top: 1px solid rgba(148, 163, 184, 0.35) !important; /* línia fina a dalt */
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.rz-fieldset-legend {
    padding: 0 0.75rem;
    margin: 0;
    font-weight: 600;
    border: 0 !important; /* que el títol no afegeixi cap altra línia */
}

/* =========================================================
   9) Botó Cancel·lar als diàlegs (vermell corporatiu)
   ========================================================= */

/* ==== Botó Cancel·lar a TOTS els diàlegs ==== */
/* Bootstrap (btn-secondary / btn-light) i Radzen (rz-secondary / rz-light),
   incloent quan estan :disabled */
.rz-dialog .btn-secondary,
.rz-dialog .btn-secondary:disabled,
.rz-dialog .btn-light,
.rz-dialog .btn-light:disabled,
.rz-dialog .rz-button.rz-secondary,
.rz-dialog .rz-button.rz-secondary.rz-state-disabled,
.rz-dialog .rz-button.rz-light,
.rz-dialog .rz-button.rz-light.rz-state-disabled {
    background-color: var(--brand-accent) !important; /* vermell logo */
    border-color: #d06565 !important;
    color: #ffffff !important;
    opacity: 1 !important; /* que no quedi apagat visualment */
}
/* Estilos más específicos para las filas del grid */
.rz-datatable .rz-datatable-body .rz-datatable-row {
    background-color: var(--app-surface) !important; /* Fondo de filas */
    color: #f9fafb !important; /* Texto blanco */
    border-bottom: 1px solid rgba(148, 163, 184, 0.4) !important; /* Añadir borde debajo de cada fila */
}

    /* Hover de filas con efecto */
    .rz-datatable .rz-datatable-body .rz-datatable-row:hover {
        background-color: rgba(148, 163, 184, 0.18) !important; /* Efecto hover */
    }

/* Para las celdas de la tabla */
.rz-datatable .rz-datatable-body .rz-datatable-cell {
    color: #f9fafb !important; /* Asegurar texto blanco en celdas */
    background-color: transparent !important; /* Fondo transparente */
}

/* Asegurarse de que los encabezados de la tabla también sean coherentes */
.rz-datatable .rz-datatable-header {
    background-color: var(--app-surface) !important;
    color: #f9fafb !important;
}

    /* Personalización de celdas de encabezado */
    .rz-datatable .rz-datatable-header .rz-datatable-cell {
        font-weight: bold !important;
        color: #f9fafb !important;
        background-color: transparent !important;
    }

    /* Títulos de columnas del grid */
    .rz-datatable .rz-datatable-header .rz-datatable-cell {
        padding: 8px 16px !important; /* Relleno más grande para las celdas del encabezado */
    }
/* =========================================================
   5) Components (cards, grids, panels, forms, charts...)
   ========================================================= */
.rz-dropdown,
.rz-dropdown * {
    background-color: var(--app-surface) !important; /* Fons consistent per a tot el desplegable */
    color: #f9fafb !important; /* Text blanc dins del desplegable */
}

/* Assegurar-se que el fons del grid es mantingui constant */
.rz-grid {
    background-color: var(--app-surface) !important; /* Forçar fons consistent als grids */
}

/* Fons opac per les opcions dins del desplegable (elements li) */
.rz-dropdown-item {
    background-color: rgba(9, 16, 35, 0.98) !important; /* Fons opac fosc per a cada opció */
    color: #f9fafb !important; /* Text blanc per a les opcions */
    border: 1px solid rgba(148, 163, 184, 0.35) !important; /* Bordes suaus per a les opcions */
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75) !important; /* Ombratge suau per a profunditat */
}

    /* Hover per a les opcions dins del desplegable */
    .rz-dropdown-item:hover {
        background-color: rgba(42, 61, 102, 0.8) !important; /* Fons més clar quan passa el ratolí */
        color: #ffffff !important; /* Text blanc quan passa el ratolí */
    }

    /* Opció activa */
    .rz-dropdown-item:active {
        background-color: rgba(42, 61, 102, 0.8) !important; /* Fons actiu amb un color més clar */
    }
/* Caixa del popup dels dropdowns (single i múltiple) */
.rz-dropdown-panel {
    background-color: rgba(9, 16, 35, 0.98) !important; /* mateix to que usa a diàlegs */
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

/* Per si Radzen afegeix alguna classe extra en multiple */
.rz-multiselect-panel {
    background-color: rgba(9, 16, 35, 0.98) !important;
}
/* =========================================================
   FIX: Radzen ButtonStyle.Light (blanc) -> fosc corporatiu
   ========================================================= */

/* Light a fora de diàlegs: fosc com la resta */
.rz-button.rz-light,
.rz-button.rz-state-light,
.rz-button.rz-secondary,
.rz-button.rz-state-secondary {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.75) !important;
    color: #f9fafb !important;
}

    /* Hover */
    .rz-button.rz-light:hover,
    .rz-button.rz-state-light:hover,
    .rz-button.rz-secondary:hover,
    .rz-button.rz-state-secondary:hover {
        background-color: var(--brand-accent) !important;
        border-color: #d06565 !important;
        color: #ffffff !important;
    }

    /* Disabled (que no quedi blanc) */
    .rz-button.rz-light.rz-state-disabled,
    .rz-button.rz-secondary.rz-state-disabled,
    .rz-button.rz-light:disabled,
    .rz-button.rz-secondary:disabled {
        background-color: rgba(15, 23, 42, 0.55) !important;
        border-color: rgba(148, 163, 184, 0.35) !important;
        color: rgba(249, 250, 251, 0.6) !important;
        opacity: 1 !important;
    }
/* ================================
   SIDE EDITOR (OpenSide) – skin UI
   ================================ */

/* Wrapper del lateral */
.side-editor.rz-dialog-side {
    background: rgba(16, 31, 75, 0.90) !important; /* com app-surface */
    border-left: 1px solid rgba(148, 163, 184, 0.35) !important;
    box-shadow: -20px 0 45px rgba(0,0,0,0.55) !important;
}

/* Contingut interior: padding + scroll correcte */
.side-editor__content {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    padding: 12px 16px !important;
    overflow: hidden !important; /* el scroll el fem dins */
}

    /* Zona scrollejable (posa un div amb class="side-scroll" al Razor) */
    .side-editor__content .side-scroll {
        flex: 1 1 auto;
        min-height: 0; /* clau perquè flex + scroll funcioni */
        overflow: auto;
        padding-right: 6px;
    }

    /* Footer fix (botons Guardar/Cancel·lar) */
    .side-editor__content .side-footer {
        flex: 0 0 auto;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        background: transparent;
    }

/* Tabs com a la resta (més compactes) */
.side-editor .rz-tabview-nav {
    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
}

    .side-editor .rz-tabview-nav li .rz-link {
        color: #f9fafb !important;
        font-weight: 600;
        opacity: .85;
    }

    .side-editor .rz-tabview-nav li.rz-state-active .rz-link {
        opacity: 1;
    }

/* Inputs densos com a la capçalera del dashboard */
.side-editor .dense-input input,
.side-editor .dense-input .rz-inputtext,
.side-editor .dense-input .rz-datepicker,
.side-editor .dense-input .rz-dropdown {
    height: 32px !important;
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Dropdown panels: z-index alt (si quedaven per sota) */
.rz-dropdown-panel,
.rz-multiselect-panel {
    z-index: 9999 !important;
}

/* Evitar que el teu “.rz-card * { color: ... }” mati estils interns */
.side-editor .rz-card,
.side-editor .rz-panel,
.side-editor .rz-tabview,
.side-editor .rz-tabview-panel {
    background-color: rgba(16, 31, 75, 0.90) !important;
}
.side-editor.rz-dialog-side {
    background: rgba(16,31,75,.90) !important;
    border-left: 1px solid rgba(148,163,184,.35) !important;
    box-shadow: -20px 0 45px rgba(0,0,0,.55) !important;
}

.side-editor__content {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    padding: 12px 16px !important;
    overflow: hidden !important;
}

    .side-editor__content .side-scroll {
        flex: 1 1 auto;
        min-height: 0; /* IMPORTANT */
        overflow: auto;
        padding-right: 6px;
    }

    .side-editor__content .side-footer {
        flex: 0 0 auto;
        padding-top: 10px;
        border-top: 1px solid rgba(148,163,184,.25);
    }
/* Side dialog editor: scroll cos + footer fix */
.side-editor.rz-dialog-side {
    background: rgba(16, 31, 75, 0.90) !important;
    border-left: 1px solid rgba(148, 163, 184, 0.35) !important;
    box-shadow: -20px 0 45px rgba(0,0,0,.55) !important;
}

.side-editor__content {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    padding: 12px 16px !important;
    overflow: hidden !important;
}

    /* dins del teu EditTimeLineWidget hi posarem .side-scroll i .side-footer */
    .side-editor__content .side-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding-right: 6px;
    }

    .side-editor__content .side-footer {
        flex: 0 0 auto;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
    }
.side-editor {
    height: 100vh;
}

.side-editor__content {
    height: 100%;
    overflow: hidden; /* el scroll el fas dins del teu component */
}
/* Popup de RadzenAutoComplete dins dialogs (tema fosc) */
.provider-popup {
    background: #0b1220 !important; /* posa el color que vulguis */
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.45) !important;
    z-index: 20000 !important; /* important dins RadzenDialog */
    backdrop-filter: none !important; /* per si tens blur/transparència */
}

    /* items */
    .provider-popup .rz-autocomplete-items li {
        background: transparent !important;
        color: inherit !important;
    }

        .provider-popup .rz-autocomplete-items li:hover,
        .provider-popup .rz-autocomplete-items li.rz-state-highlight {
            background: rgba(255,255,255,.08) !important;
        }
/* Titols ApexCharts (SVG) */
.apexcharts-title-text,
.apexcharts-subtitle-text {
    fill: #fff !important;
    opacity: 1 !important;
}
/* ACTIU (seleccionat): fons blau + línia vermella a l'esquerra (robusta) */
.rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-menuitem.rz-state-active > .rz-menuitem-link {
    background-color: rgba(42, 61, 102, 0.65) !important; /* blau */
    color: #fff !important;
    position: relative; /* necessari pel ::before */
    padding-left: 18px !important; /* espai per la línia */
}

    /* línia vermella (NO depèn de border-left) */
    .rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link::before,
    .rz-sidebar .rz-panel-menu .rz-menuitem.rz-state-active > .rz-menuitem-link::before {
        content: "";
        position: absolute;
        left: 6px; /* separació del marge */
        top: 6px;
        bottom: 6px;
        width: 4px;
        background: var(--brand-accent);
        border-radius: 4px;
    }

    /* opcional: icona del seleccionat en vermell */
    .rz-sidebar .rz-panel-menu .rz-navigation-item.rz-state-active > .rz-navigation-item-link .rz-icon,
    .rz-sidebar .rz-panel-menu .rz-menuitem.rz-state-active > .rz-menuitem-link .rz-icon {
        color: var(--brand-accent) !important;
    }
/* ===== FIX desplegables dins dialogs (Radzen DropDown / MultiSelect) ===== */

/* El contenidor del popup */
.rz-popup,
.rz-dropdown-panel,
.rz-multiselect-panel {
    background-color: rgba(9, 16, 35, 0.98) !important;
    border: 1px solid rgba(148, 163, 184, 0.7) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75) !important;
    opacity: 1 !important;
}

    /* Items (single) */
    .rz-dropdown-panel .rz-dropdown-item {
        background-color: rgba(9, 16, 35, 0.98) !important;
        color: #f9fafb !important;
    }

        .rz-dropdown-panel .rz-dropdown-item:hover {
            background-color: rgba(42, 61, 102, 0.8) !important;
        }

    /* Items (multiple) */
    .rz-multiselect-panel .rz-multiselect-item {
        background-color: rgba(9, 16, 35, 0.98) !important;
        color: #f9fafb !important;
    }

        .rz-multiselect-panel .rz-multiselect-item:hover,
        .rz-multiselect-panel .rz-multiselect-item.rz-state-highlight {
            background-color: rgba(42, 61, 102, 0.8) !important;
        }

/* Per si quedava per sota d’algun overlay del dialog */
.rz-popup,
.rz-dropdown-panel,
.rz-multiselect-panel {
    z-index: 20000 !important;
}
/* ==========================
   EXCEPCIÓ: Sidebar sense "surface"
   (només menú esquerra)
   ========================== */

.rz-sidebar,
.rz-sidebar .rz-panel,
.rz-sidebar .rz-panel-content,
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-panel-menu .rz-navigation,
.rz-sidebar .rz-panel-menu .rz-navigation-item,
.rz-sidebar .rz-panel-menu .rz-navigation-item-link,
.rz-sidebar .rz-panel-menu .rz-menuitem,
.rz-sidebar .rz-panel-menu .rz-menuitem-link {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Si vols que tingui *un fons propi* (no transparent), canvia transparent per això:
.rz-sidebar { background-color: rgba(11,18,32,.65) !important; }
*/
    /* ============================
   EXCEPCIÓ SIDEBAR (esquerra)
   - No heretar "app-surface"
   ============================ */

    /* Treu el fons/ombra/borde dels "panels/cards" que hi hagi dins del sidebar */
    .rz-sidebar .rz-panel,
    .rz-sidebar .rz-card,
    .rz-sidebar .rz-widget,
    .rz-sidebar .rz-stack,
    .rz-sidebar .rz-sidebar-body,
    .rz-sidebar .rz-panel-menu {
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    /* ============================
   FIX FOOTER (CERRAR SESIÓN)
   - Treure el rectangle del voltant
   ============================ */

    .rz-sidebar .rz-sidebar-footer,
    .rz-sidebar .rz-sidebar-footer > * {
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

        /* Si el footer està dins algun panel/card intern, també */
        .rz-sidebar .rz-sidebar-footer .rz-panel,
        .rz-sidebar .rz-sidebar-footer .rz-card,
        .rz-sidebar .rz-sidebar-footer .rz-widget {
            background-color: transparent !important;
            box-shadow: none !important;
            border: 0 !important;
        }
/* Files clicables */
.grid-clickable .rz-datatable-data tr,
.grid-clickable .rz-datatable-data td {
    cursor: pointer;
}

/* Evita que aparegui la selecció de text quan passes/drag */
.grid-clickable .rz-datatable-data td {
    user-select: none;
}
/* Fila seleccionada amb relleu */
.rz-datatable-data tr.row-selected > td {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.35);
    transform: translateY(-1px);
}

/* Opcional: hover suau perquè sigui més "clicable" */
.rz-datatable-data tr:hover > td {
    filter: brightness(1.08);
}

/* ===== FIX FINAL: mai fons blanc als DataGrid de Radzen ===== */
.rz-datatable,
.rz-datatable-wrapper,
.rz-datatable-tablewrapper,
.rz-datatable-table,
.rz-datatable-thead,
.rz-datatable-tbody,
.rz-datatable-data,
.rz-datatable-header,
.rz-datatable-footer,
.rz-datatable th,
/* Body cells transparents */
.rz-datatable td {
    background: transparent !important;
}

    /* Si algun tema posa blanc a les cel·les */
    .rz-datatable td,
    .rz-datatable th {
        background: transparent !important;
    }

.gb-row {
    align-items: flex-start;
}

.gb-col {
    min-width: 0; /* IMPORTANT: permet que la columna encongeixi */
}

.gb-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
}

    .gb-card .rz-datatable {
        flex: 1 1 auto; /* el grid ocupa l'espai restant */
        min-height: 0; /* IMPORTANT: permet scroll intern */
    }

        .gb-card .rz-datatable .rz-grid-table,
        .gb-card .rz-data-grid .rz-grid-table {
            width: 100%;
            table-layout: auto;
        }

        .gb-card .rz-datatable td,
        .gb-card .rz-datatable th,
        .gb-card .rz-data-grid td,
        .gb-card .rz-data-grid th {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            word-break: break-word;
        }

        /* Radzen posa ellipsis dins .rz-cell-data; el desactivem per mostrar text complet */
        .gb-card .rz-datatable .rz-cell-data,
        .gb-card .rz-datatable .rz-column-title,
        .gb-card .rz-data-grid .rz-cell-data,
        .gb-card .rz-data-grid .rz-column-title {
            white-space: normal !important;
            overflow: visible !important;
            text-overflow: clip !important;
            word-break: break-word;
            line-height: 1.25;
            display: block;
            max-width: none;
        }
.gb-card-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gb-card-body {
    flex: 1 1 auto;
    min-height: 0; /* CLAU perquè el scroll funcioni dins */
    max-height: none;
    overflow: visible;
}

/* que el grid ompli el body */
.gb-grid {
    height: 100%;
}

    /* evita solapaments raros: dona “aire” a capçalera i files */
    .gb-grid .rz-grid-table th,
    .gb-grid .rz-grid-table td {
        line-height: 1.2;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

.gb-cell-wrap {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    display: block;
}

.gb-row-main,
.gb-maquina-main {
    font-weight: 600;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

.gb-row-meta,
.gb-maquina-meta {
    margin-top: 10px;
    opacity: .9;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

.gb-row-actions,
.gb-maquina-actions {
    margin-top: 0;
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}

.gb-row-actions > span,
.gb-maquina-actions > span {
    display: inline-flex;
}

.gb-grid-wraptext .rz-cell-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 20px;
    row-gap: 12px;
    align-items: start;
}

.gb-grid-wraptext .rz-cell-data .gb-row-main,
.gb-grid-wraptext .rz-cell-data .gb-maquina-main {
    grid-column: 1;
}

.gb-grid-wraptext .rz-cell-data .gb-row-meta,
.gb-grid-wraptext .rz-cell-data .gb-maquina-meta {
    grid-column: 1;
}

.gb-grid-wraptext .rz-cell-data .gb-row-actions,
.gb-grid-wraptext .rz-cell-data .gb-maquina-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: start;
}

/* Layout robust dins template: contingut a l'esquerra, accions a la dreta */
.gb-entry {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.gb-entry-content {
    flex: 1 1 auto;
    min-width: 0;
}

.gb-entry-actions {
    flex: 0 0 auto;
    justify-content: flex-end !important;
}

@media (max-width: 1150px) {
    .gb-grid-wraptext .rz-cell-data {
        grid-template-columns: 1fr;
    }

    .gb-grid-wraptext .rz-cell-data .gb-row-actions,
    .gb-grid-wraptext .rz-cell-data .gb-maquina-actions {
        grid-column: 1;
        grid-row: auto;
        margin-top: 24px;
        justify-content: flex-start;
    }

    .gb-entry {
        display: block;
    }

    .gb-entry-actions {
        margin-top: 24px;
        justify-content: flex-start !important;
    }
}
/* Sticky header correcte */
/*.rz-datatable thead th {
    position: sticky;
    top: 0;
    z-index: 5;*/ /* per sobre del body */
    /*background: var(--rz-base-100, #0b1a3a) !important;
}*/
/* ===== Header del DataGrid (sticky) – fosc/glass i MAI blanc ===== */
.rz-datatable .rz-datatable-thead th,
.rz-datatable thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--app-surface) !important; /* el teu rgba(16, 31, 75, 0.90) */
    color: #f9fafb !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4) !important;
    backdrop-filter: blur(6px);
}

/* ==========================
   Layout utilities (responsive)
   ========================== */
.app-toolbar-row {
    margin-bottom: 15px;
    row-gap: 0.75rem;
}

.app-toolbar-row > [class*="rz-col"] {
    min-width: 0;
}

.app-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.app-toolbar-actions--end {
    justify-content: flex-end;
}

.app-toolbar-actions .rz-button {
    white-space: nowrap;
}

.app-form-row {
    row-gap: 0.75rem;
}

.app-form-row--spaced {
    margin-top: 10px;
}

.app-dialog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.app-dialog-actions__right {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.app-dialog-actions__spacer {
    min-width: 1px;
}

.app-inline-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.app-inline-label {
    margin-left: 6px;
}

.app-inline-icon {
    margin-left: 6px;
}

.app-title-tight {
    margin: 0;
}

.app-alert-list {
    margin: 0;
    padding-left: 18px;
}

.app-text-danger {
    color: #c62828;
}

.app-textarea-resize {
    resize: vertical;
    min-height: 100px;
}

.app-field-md {
    width: min(100%, 220px);
}

.app-field-sm {
    width: min(100%, 120px);
}

.app-list-panel {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 10px;
}

.app-list-row {
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.app-list-panel .app-list-row:last-child {
    border-bottom: 0;
}

.app-list-row__title {
    font-weight: 600;
}

.app-list-row__meta {
    opacity: .85;
    font-size: .9rem;
}

@media (max-width: 991.98px) {
    .app-toolbar-actions--end {
        justify-content: flex-start;
    }

    .app-toolbar-actions .rz-button {
        flex: 1 1 12rem;
    }

    .app-dialog-actions {
        justify-content: flex-start;
    }

    .app-dialog-actions__right,
    .app-inline-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==========================
   Autosize utilities
   ========================== */
.app-scheduler-auto {
    height: clamp(420px, 68vh, 760px);
}

.app-scheduler-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

.app-grid-wrap {
    max-width: 100%;
}

.app-grid-wrap--x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.app-grid-wrap--x > .rz-datatable,
.app-grid-wrap--x > .rz-data-grid {
    min-width: 42rem;
}

.app-grid-wrap--detail > .rz-datatable,
.app-grid-wrap--detail > .rz-data-grid {
    min-width: 36rem;
}

.app-grid-wrap--vh {
    max-height: clamp(260px, 58vh, 760px);
    overflow: auto;
}

.app-grid-wrap--detail {
    max-height: clamp(220px, 45vh, 560px);
    overflow: auto;
}