/* Feuille transverse — ce qui ne relève d'aucun domaine métier : la page hôte, des composants XAF ou
   DevExpress réglés pour toute l'application, les poignées des tableaux de bord. Les feuilles de domaine
   (même dossier) sont chargées après celle-ci, dans l'ordre que donne _Host.cshtml. */

html, body {
    height: 100%;
}

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

/* Logo de l'en-tête de la page de connexion : le gabarit de connexion de XAF rend un div.header-logo (le
   gabarit principal, CustomApplicationWindowTemplateComponent, rend le même dans un en-tête que
   sidebar.css masque). Le cube, + le mot « Merkial » en texte à côté.
   Le SVG du cube est en preserveAspectRatio="none" (il s'étire) : on lui
   impose donc une taille au ratio natif (26.76 × 31.11) pour ne PAS le déformer.
   À 32px de haut -> largeur = 32 × 26.76/31.11 ≈ 27.5px. */
div.header-logo {
    vertical-align: middle;
    background-image: url('../../images/brand-cube.svg');
    background-size: 27.5px 32px;
    background-repeat: no-repeat;
    background-position: left center;
    width: 200px;
    height: 36px;
    position:relative;
}

/* Le bandeau de la page de connexion sur le fond de la marque : XAF le peint par ces deux jetons publics
   (styles.css, .logon-template-header), redéclarés sur sa racine (design/CHARTE.md § 4, voie 1). */
.logon-template-header {
    --dxds-color-surface-neutral-default-rest: var(--ds-login-header-bg);
    --dxds-color-border-neutral-default-rest: var(--ds-login-header-bg);
}

div.header-logo::after {
    content: "Merkial";
    font-family: var(--ds-font-family-text); /* même police que toute l'app (Manrope) */
    font-weight: bold;
    color: var(--ds-login-header-content); /* blanc sur le teal, comme le mot de la sidebar */
    font-size: 20px;
    position:absolute;
    left:36px; /* juste après le cube (~27.5px) + petit espace */
    top:50%;
    transform: translateY(-50%);
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.detail-view-content .xaf-component-image {
    max-width: 300px;
    max-height: 200px;
}
.detail-view-content .xaf-component-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.xaf-tree-view{
    padding : 10px !important;
}

/* Style pour afficher les messages multilignes dans les notifications XAF */
.xaf-multiline-message {
    white-space: pre-line;
}

/* Force nested grids in the Notification Preferences tab to fill available height */
.notification-preferences-tab .dxbl-scroll-viewer-content {
    min-height: calc(60vh - 150px);
}

/* Hide only the checkbox content inside the cell, preserve the cell's border */
.hidden-checkbox * {
    visibility: hidden;
}

/* Force dashboard split view items to align to top, removing unwanted vertical spacing */
.dxbl-fl .dxbl-fl-item .dxbl-fl-ctrl-nc, .dxbl-fl .dxbl-fl-item .dxbl-fl-empty-caption + .dxbl-fl-ctrl {
    margin-top: 0;
}

/* Allow manual vertical resize on auto-resizing memo editors */
.dxbl-auto-resize {
    resize: vertical !important;
}

/* ===== Dashboard Splitter Handles ===== */

/* Resizable groups need overflow visible and proper flex behavior. No DevExpress rule sets a group's overflow
   (measured on 26.1.3): no !important. */
.dashboard-resizable-group {
    overflow: visible;
}

.dashboard-resizable-item {
    overflow: auto;
    min-height: 50px;
    min-width: 50px;
}

/* Horizontal groups: override dxbl-col-md-* columns so the splitter handle
   has room. Without this, col-md-6 + col-md-6 = 100%, leaving 0px for the handle.
   DevExpress's column and row rules are single classes (.dxbl-col-md-6, .dxbl-row, measured on 26.1.3):
   these selectors outrank them without !important. */
.dashboard-resizable-horizontal > .dxbl-row {
    flex-wrap: nowrap;
}

/* --dashboard-pane-grow: the grow ratio dashboard-splitter.js writes on a pane it has sized; 1 until then. */
.dashboard-resizable-horizontal > .dxbl-row > [class*="dxbl-col"] {
    flex: var(--dashboard-pane-grow, 1) 1 0%;
    max-width: none;
    min-width: 50px;
}

/* A stacked pane a drag has sized: dashboard-splitter.js marks it with its direction and writes its height as a
   custom property. After .dashboard-resizable-group, whose overflow it overrides at equal weight. */
[data-splitter-sized="vertical"] {
    height: var(--dashboard-pane-height);
    overflow: auto;
}

/* Vertical splitter handle (horizontal bar between top/bottom panels).
   In a flex-direction:row wrapping layout, flex:0 0 100% forces a new row. */
.dashboard-splitter-handle.dashboard-splitter-vertical {
    flex: 0 0 100%;
    height: 6px;
    cursor: row-resize;
    background-color: transparent;
    position: relative;
    z-index: 10;
    transition: background-color 0.15s ease;
}

.dashboard-splitter-handle.dashboard-splitter-vertical::after {
    content: '';
    position: absolute;
    left: 25%;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background-color: var(--ds-splitter-handle);
    border-radius: 1px;
    transition: background-color 0.15s ease;
}

.dashboard-splitter-handle.dashboard-splitter-vertical:hover,
.dashboard-splitter-handle.dashboard-splitter-vertical.dashboard-splitter-active {
    background-color: var(--ds-splitter-hover-bg);
}

.dashboard-splitter-handle.dashboard-splitter-vertical:hover::after,
.dashboard-splitter-handle.dashboard-splitter-vertical.dashboard-splitter-active::after {
    background-color: var(--ds-splitter-active);
    height: 3px;
}

/* Horizontal splitter handle (vertical bar between left/right panels) */
.dashboard-splitter-handle.dashboard-splitter-horizontal {
    flex: 0 0 6px;
    cursor: col-resize;
    background-color: transparent;
    position: relative;
    z-index: 10;
    align-self: stretch;
    transition: background-color 0.15s ease;
}

.dashboard-splitter-handle.dashboard-splitter-horizontal::after {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--ds-splitter-handle);
    border-radius: 1px;
    transition: background-color 0.15s ease;
}

.dashboard-splitter-handle.dashboard-splitter-horizontal:hover,
.dashboard-splitter-handle.dashboard-splitter-horizontal.dashboard-splitter-active {
    background-color: var(--ds-splitter-hover-bg);
}

.dashboard-splitter-handle.dashboard-splitter-horizontal:hover::after,
.dashboard-splitter-handle.dashboard-splitter-horizontal.dashboard-splitter-active::after {
    background-color: var(--ds-splitter-active);
    width: 3px;
}