.title-input-no-underline .mud-input-underline:before,
.title-input-no-underline .mud-input-underline:after {
    border-bottom: none;
    content: none;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.15); /* Fond semi-transparent */
    backdrop-filter: blur(10px);           /* Effet de flou d’arrière-plan */
    -webkit-backdrop-filter: blur(10px);   /* Compatibilité Webkit */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Bordure légère */
}

/* override editorjs basic styles */
/*=====================================================================*/

.ce-block__content, .ce-toolbar__content {
    max-width:calc(100% - 80px) !important;
}

.cdx-block {
    max-width: 100% !important;
}

.ce-block__content {
    color: var(--mud-palette-text-primary);
    line-height: 1.6;
}

/* Titres */
.ce-block__content h1,
.ce-block__content h2,
.ce-block__content h3,
.ce-block__content h4,
.ce-block__content h5,
.ce-block__content h6 {
    color: var(--mud-palette-text-primary);
    margin: 1.2rem 0 .6rem;
    font-weight: 600;
}

.ce-block__content h1 { font-size: 2rem; }
.ce-block__content h2 { font-size: 1.75rem; }
.ce-block__content h3 { font-size: 1.5rem; }
.ce-block__content h4 { font-size: 1.25rem; }
.ce-block__content h5 { font-size: 1.125rem; }
.ce-block__content h6 { font-size: 1rem; color: var(--mud-palette-text-secondary); }

/* Paragraphes et listes */
.ce-block__content p { margin: .75rem 0; }
.ce-block__content ul,
.ce-block__content ol { padding-left: 1.25rem; }
.ce-block__content li { margin: .25rem 0; }

/* Liens */
.ce-block__content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}
.ce-block__content a:hover { text-decoration: underline; }

/* Citations */
.ce-block__content blockquote {
    border-left: 4px solid var(--mud-palette-lines-default);
    margin: 1rem 0;
    padding: .5rem 1rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-surface) 85%, var(--mud-palette-primary) 15%);
}

/* Code inline et blocs */
.ce-block__content code {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    padding: .1rem .3rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .95em;
}

.ce-block__content pre {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: .75rem 1rem;
    overflow: auto;
}
.ce-block__content pre code {
    border: 0;
    background: transparent;
    padding: 0;
}

/* Tables */
.ce-block__content .tc-wrap {
    --color-border: var(--mud-palette-text-primary);
}

.ce-block__content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}
.ce-block__content th,
.ce-block__content td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: .5rem .75rem;
}
.ce-block__content thead th {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
}

/* Séparateur */
.ce-block__content hr {
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 1.25rem 0;
}

/* Images */
.ce-block__content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* override syncfusion AI assist view */
/*=====================================================================*/

/* Restore nested list indentation — Syncfusion resets padding-left to 0 */
#aiAssistView ul,
#aiAssistView ol {
    padding-left: 1.5em !important;
    margin: 0.25rem 0;
}

#aiAssistView ul ul,
#aiAssistView ul ol,
#aiAssistView ol ul,
#aiAssistView ol ol {
    padding-left: 1.5em !important;
    margin: 0;
}

#aiAssistView li {
    margin: 0.2rem 0;
}

/* override syncfusion variables */
/*=====================================================================*/

:root {
    --color-sf-primary: var(--mud-palette-primary-rgb);
    --color-sf-surface: var(--mud-palette-surface);
    /*--color-sf-background: var(rgb(--mud-palette-background));*/
    
    .e-blockeditor-mention-menu.e-popup, .e-blockeditor-blockaction-popup, .e-blockeditor-contextmenu ul {
        background-color: var(--mud-palette-surface);
    }
    
    .e-dropdownbase {
        background-color: var(--mud-palette-surface);
    }
    
    .e-dialog {
        background-color: var(--mud-palette-surface);
    }
    
    .e-gantt .e-gantt-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar{
        background: rgba(var(--mud-palette-primary-rgb));
    }
    
    .e-richtexteditor .e-rte-content .e-content li, .e-richtexteditor .e-source-content .e-content li, .e-richtexteditor .e-rte-iframe-content .e-content li {
        margin-left: 30px;
    }
    
    .e-dropdown-popup {
        background: var(--mud-palette-surface);
    }

    .e-calendar, .e-datepicker.e-popup, .e-daterangepicker.e-popup {
        background: var(--mud-palette-surface);
    }

    .e-blockeditor .e-block.e-callout-block .e-callout-wrapper {
        background: var(--mud-palette-primary-hover);
    }
    
    .e-rte-table-popup.e-popup.e-popup-open {
        background-color: var(--mud-palette-surface);
    }

    .e-richtexteditor .e-toolbar-wrapper,
    .e-rte-quick-popup.e-rte-elements .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
        background: var(--mud-palette-surface);
    }

    .e-aiassistview .e-scroll-down-btn,
    .e-aiassistview .e-scroll-down-btn .e-btn {
        background: var(--mud-palette-surface);
    }

    .e-skeleton.e-skeleton-text, .e-skeleton.e-skeleton-square, .e-skeleton.e-skeleton-rectangle, .e-skeleton.e-skeleton-circle {
        background: var(--mud-palette-action-default-hover);      
    }
    
    .e-blockeditor-inline-toolbar-popup {
        background-color: var(--mud-palette-surface);
    }
    
    .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-updatedtd), .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-rowdragdropcell.e-active:not(.e-updatedtd), .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover, .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-rowcell:not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover, .e-grid.e-gridhover:not(.e-rowdrag) tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-updatedtd), .e-grid.e-gridhover:not(.e-rowdrag) tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-rowdragdropcell.e-active:not(.e-updatedtd), .e-grid.e-gridhover:not(.e-rowdrag) tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover, .e-grid.e-gridhover:not(.e-rowdrag) tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-rowcell:not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover{
        background: var(--mud-palette-primary-hover);
    }

    .e-grid td.e-active {
        background: var(--mud-palette-primary-hover);
    }

    /* Grids with row drag & drop (today only the WorkTask grid): in edit / add rows Syncfusion replaces the drag
       handle by an empty td.e-dragindentcell whose right / bottom borders draw a stray bar next to the inline form.
       The top border is kept (row separator). !important: the theme rules on that cell are more specific. */
    .e-grid td.e-dragindentcell {
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    /* WorkTask grid: every body row has the same height, in edit or not: the 40px outlined dense editors + 6px above
       and below. Leaf rows only (:not(:has(tr))) in case Syncfusion nests the edit form in its own table. */
    .work-task-grid .e-gridcontent tr:not(:has(tr)) {
        height: 52px;
    }

    .work-task-grid .e-gridcontent tr:not(:has(tr)) > td {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        vertical-align: middle;
    }

    /* WorkTask grid inline form: no extra margin around the dense editors (the cell padding above gives the spacing). */
    .work-task-grid .mud-input-control.mud-input-control-margin-dense {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* WorkTask grid: the row in edit (the only row holding Mud editors; the theme's edit classes are not in the
       Blazor DOM) is tinted with a primary bar on the left, its outlined editors stay on the surface color.
       The surface background follows the theme radius: only the outlined fieldset is rounded by MudBlazor, so
       without it square surface corners stick out of the rounded border on themes with a large radius. */
    .work-task-grid .e-grid tr:has(.mud-input-control) > td {
        background: var(--mud-palette-primary-hover) !important;
    }

    .work-task-grid .e-grid tr:has(.mud-input-control) > td:first-child {
        box-shadow: inset 3px 0 0 var(--mud-palette-primary);
    }

    .work-task-grid tr:has(.mud-input-control) .mud-input.mud-input-outlined {
        background: var(--mud-palette-surface);
        border-radius: var(--mud-default-borderradius);
    }

    .e-grid .e-cellselectionbackground {
        background: var(--mud-palette-primary-hover);
    }

    .e-grid.e-gridhover td:hover.e-cellselectionbackground {
        background: var(--mud-palette-primary-hover);
    }

    .e-pager .e-currentitem, .e-pager .e-currentitem {
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }

    .e-pager .e-currentitem, .e-pager .e-currentitem:hover {
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }

    .e-pager .e-currentitem.e-numericitem.e-focused{
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }

    .e-gantt .e-gantt-chart .e-active {
        background: var(--mud-palette-primary-hover);
    }

    .e-gantt .e-gantt-tree-grid-pane .e-grid td.e-active {
        background: var(--mud-palette-primary-hover);
    }

    .e-blockeditor .e-block-content::selection {
        background: var(--mud-palette-primary);
        color: var(--mud-palette-primary-text);
    }

    .e-contextmenu-wrapper ul .e-menu-item.e-selected,
    .e-contextmenu-container ul .e-menu-item.e-selected {
        background-color: var(--mud-palette-primary-hover);
        outline: 0 solid var(--mud-palette-primary-hover);
    }

    .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn,
    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-active:not(.e-overlay) .e-tbar-btn,
    .e-richtexteditor .e-rte-toolbar .e-toolbar-item.e-active .e-split-btn-wrapper,
    .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item.e-active .e-split-btn-wrapper {
        background: var(--mud-palette-primary-hover);
    }

    .e-slash-menu .e-list-item.e-active,
    .e-blockeditor-blockaction-popup .e-list-item.e-active,
    .e-blockeditor-mention-menu.e-popup .e-list-item.e-active {
        background: var(--mud-palette-primary-hover);
    }

    .priority-matrix-chart ellipse,
    .priority-matrix-chart circle {
        fill: rgba(var(--mud-palette-primary-rgb));
        stroke: rgba(var(--mud-palette-primary-rgb));
    }
}

/* Action plan kanban */
/*=====================================================================*/

.e-kanban {
    background: var(--mud-palette-surface);
}

.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
    background: var(--mud-palette-background-gray);
}

.e-kanban .e-header-cells {
    padding: 10px 12px;
    background: var(--mud-palette-background-gray);
}

/* Syncfusion's own rule here is a 6-class compound selector
   (…e-content-row .e-content-cells .e-card-container .e-target-dropped-clone),
   which our 2-class override can't outrank on specificity alone. */
.e-kanban .e-target-dropped-clone {
    background: var(--mud-palette-surface) !important;
}

/* Syncfusion Kanban has no column width option. Fixed-layout tables take max(width, sum of col
   widths): columns keep >= 280px and stretch to fill wide screens; on narrow screens
   .e-kanban-content scrolls horizontally (header scroll is synced by Syncfusion).
   Collapsed columns keep Syncfusion's 50px. */
.e-kanban.kanban-scrollable .e-kanban-table col:not(.e-collapsed) {
    width: 280px;
}

.e-kanban .e-header-cells .e-item-count {
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover);
}

.e-kanban .e-content-row .e-card-wrapper {
    padding: 10px;
    gap: 8px;
}

.e-kanban .e-card-wrapper .e-card {
    border-radius: 4px;
    border-color: var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.e-kanban .e-card-wrapper .e-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    border-color: var(--mud-palette-primary-lighten);
}

/* Syncfusion's theme hard-codes cards (and their hover) to #fff; follow the MudBlazor surface instead
   so cards stand out on the gray columns and respect dark mode. */
.e-card,
.e-card:hover {
    background: var(--mud-palette-surface);
}

.kanban-card {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kanban-card-desc {
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kanban-card-footer {
    gap: 6px;
}

.kanban-card-tag.mud-chip {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.kanban-card-due {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    gap: 4px;
}

.global-search-backdrop {
    backdrop-filter: blur(10px);
}

.mud-highlight-match mark {
    background: none;
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* MudButton's own .mud-button-filled:disabled / .mud-button-root:disabled rules (specificity
   0,2,0, both !important) outrank the single-class .mud-theme-primary utility (0,1,0, also
   !important) that MudToggleGroup's SelectedClass applies, so a disabled selected toggle item
   (read-only FibonacciPicker) renders grey instead of primary. This rule matches the selected
   item's own two marker classes plus :disabled (specificity 0,3,0) to win the tie-break. */
.mud-toggle-item-selected.mud-button-filled:disabled {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

/* metadata sidebar rows: stack label above value once panel gets too narrow to fit both */
.metadata-panel {
    container-type: inline-size;
    container-name: metadata-panel;
}

@container metadata-panel (max-width: 280px) {
    .metadata-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .metadata-row .mud-spacer {
        display: none;
    }
}

/* Unified roadmap (/roadmap): taskbar colors set per chart row (QueryChartRowInfo) */
/*=====================================================================*/

.unified-roadmap .roadmap-date-gap .e-gantt-child-taskbar-inner-div,
.unified-roadmap .roadmap-date-gap .e-gantt-parent-taskbar-inner-div {
    background: var(--mud-palette-warning);
    border-color: var(--mud-palette-warning-darken);
}

.unified-roadmap .roadmap-date-gap .e-gantt-child-progressbar-inner-div,
.unified-roadmap .roadmap-date-gap .e-gantt-parent-progressbar-inner-div {
    background: var(--mud-palette-warning-darken);
}

.unified-roadmap .roadmap-unlinked .e-gantt-child-taskbar-inner-div,
.unified-roadmap .roadmap-unlinked .e-gantt-parent-taskbar-inner-div {
    background: var(--mud-palette-action-disabled);
    border-color: var(--mud-palette-action-default);
}

.unified-roadmap .roadmap-unlinked .e-gantt-child-progressbar-inner-div,
.unified-roadmap .roadmap-unlinked .e-gantt-parent-progressbar-inner-div {
    background: var(--mud-palette-action-default);
}