/* ============================================================================
   educated-detailview.css — AcurBusiness DetailView v6 (COSMÉTIQUE PUR)
   ----------------------------------------------------------------------------
   PRINCIPE v6 :
   Le layout XAF (FormLayout DevExpress) gère la GÉOMÉTRIE dynamiquement :
   largeurs de colonnes (md-4/md-6/md-12), positions, hauteurs, flex, gutters.
   Toute intervention CSS sur ces propriétés casse la disposition.

   => Ce fichier ne touche QUE l'apparence :
      couleurs, bordures, border-radius, fonts, ombres, hover/focus,
      carte décorative sur les tabs, style des checkboxes.

   INTERDIT dans ce fichier (réservé à XAF) :
      width / height / min-width / max-width / min-height / max-height
      flex / flex-direction / display (sur conteneurs) / box-sizing
      padding & margin STRUCTURELS sur row / group / gt / item / ctrl
      gutters bootstrap (--bs-gutter-x)

   AUTORISÉ :
      background, color, border, border-radius, box-shadow
      font-*, letter-spacing, text-transform
      transition, opacity
   ============================================================================ */


/* ============================================================
   1) RACINE & TYPOGRAPHIE
   ============================================================ */

.detail-view-content {
    background: var(--surface-0);
}

    /* ------------------------------------------------------------
   CARTE BLANCHE SUR LE FORM-LAYOUT (et non sur chaque groupe)
   ------------------------------------------------------------
   Le form-layout porte lui-même la carte blanche : les champs
   reposent sur du blanc qu'ils soient dans un groupe ou
   directement à la racine — sans devoir créer de groupes.
   Décoratif : background + bordure + rayon + ombre + padding
   interne (le padding de la carte n'altère pas la grille des
   colonnes, qui reste pilotée par XAF à l'intérieur).

   EXCLUSION DASHBOARD : le Dashboard est AUSSI un .dxbl-fl, mais il
   contient un .xaf-dashboard-container. On l'exclut via :not(:has())
   pour que la carte ne s'applique qu'aux vrais DetailView.
   ------------------------------------------------------------ */

    .detail-view-content > layout-editor > .dxbl-fl:not(:has(.xaf-dashboard-container)),
    .detail-view-content > .dxbl-fl:not(:has(.xaf-dashboard-container)),
    .detail-view-content .dxbl-fl.dxbl-fl:not(:has(.xaf-dashboard-container)) {
        background: var(--surface-1) !important;
        /*border: 1px solid var(--line) !important;*/
        /*border-radius: 12px !important;*/
        box-shadow: var(--sh-1) !important;
        /*padding: 20px 24px !important;*/
    }

.dxbl-fl {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
}

    .dxbl-fl *,
    .dxbl-fl-item *,
    .dxbl-fl-ctrl * {
        font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
    }

    /* Exception mono : champs numériques (spinedit / decimal) */
    .dxbl-fl dxbl-spinedit .dxbl-text-edit-input,
    .dxbl-fl .dxbl-fl-ctrl input[inputmode="decimal"] {
        font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
        letter-spacing: -0.01em;
    }


/* ============================================================
   2) GROUPES — TRANSPARENCE UNIQUEMENT (pas de géométrie)
   ============================================================ */

.dxbl-fl-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ============================================================
   3) DXBL-TABS — PLUS DE CARTE PROPRE
   ----------------------------------------------------------------
   La carte blanche est désormais portée par le form-layout (voir
   plus haut), qui englobe déjà les tabs. On neutralise donc le
   décor du dxbl-tabs pour éviter une carte-dans-une-carte. Le
   tablist conserve uniquement son séparateur (section 4).
   ============================================================ */

.dxbl-fl dxbl-tabs.dxbl-tabs-top {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    /* Exception : tabs avec nested-frame (Lignes livraison) → idem, neutre */
    .dxbl-fl dxbl-tabs.dxbl-tabs-top:has(.nested-frame) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }


    /* ============================================================
   4) TABLIST (header décoratif)
   ============================================================ */

    .dxbl-fl dxbl-tabs.dxbl-tabs-top .dxbl-tabs-tablist {
        background: var(--surface-1) !important;
        border: none !important;
        border-bottom: 1px solid var(--line) !important;
    }

/* Tab item — couleurs uniquement.
   IMPORTANT : DevExpress dessine DÉJÀ son propre soulignement sous
   l'onglet actif. On NE rajoute donc PAS de box-shadow (sinon double
   trait). On se contente de recolorer le texte ; le soulignement
   natif suit la couleur courante. */
.dxbl-fl dxbl-tab-item.dxbl-tabs-item {
    background: transparent !important;
    border: none !important;
    color: var(--ink-2) !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 120ms ease, box-shadow 120ms ease;
}

    .dxbl-fl dxbl-tab-item.dxbl-tabs-item:hover {
        color: var(--ink-0) !important;
        background: transparent !important;
    }

    .dxbl-fl dxbl-tab-item.dxbl-tabs-item.dxbl-active {
        color: var(--brand) !important;
        background: transparent !important;
        /* box-shadow: inset 0 -2px 0 var(--brand) !important;  <- doublon avec le trait natif DevExpress */
        font-weight: 600;
    }

.dxbl-fl dxbl-tab-item .dxbl-tabs-text-container {
    background: transparent !important;
}

.dxbl-fl dxbl-tab-item .dxbl-tabs-text-overflow {
    font-family: "Geist", sans-serif !important;
    font-size: 14px !important;
    font-weight: inherit !important;
}

/* Masquer le picto orange BO_Unknown (cosmétique, pas de géométrie) */
.dxbl-fl dxbl-tab-item .xaf-layout-tab-icon {
    display: none !important;
}


/* ============================================================
   5) PANNEAUX DE CONTENU — TRANSPARENCE
   ============================================================ */

.dxbl-fl .dxbl-tabs-content-panel,
.dxbl-fl .dxbl-tabs-content,
.dxbl-fl .dxbl-tabs-content.dxbl-active > dxbl-form-layout-tab.dxbl-fl-tab-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ============================================================
   6) LABELS — STYLE EYEBROW (couleur/police, AUCUNE géométrie)
   ----------------------------------------------------------------
   Largeur du caption, retour à la ligne et alignement vertical sont
   gérés dans le module XAF (Model Editor), pas ici. On ne fait que
   restyler couleur, taille et casse du texte.

   SCOPE : .detail-view-content obligatoire — évite d'écraser les
   labels du formulaire login qui utilisent aussi .dxbl-fl-cpt.
   ============================================================ */

.detail-view-content label.dxbl-fl-cpt {
    color: var(--ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* ============================================================
   7) ÉDITEURS — APPARENCE (fond, bordure, rayon, focus)
   ----------------------------------------------------------------
   On NE force PAS height/width : DevExpress applique ses dimensions
   inline, on les laisse. On ne stylise que le visuel.

   SCOPE : .detail-view-content obligatoire — les règles
   background/border sur .dxbl-fl-ctrl écrasaient les inputs du
   login (même composants dxbl-* utilisés par XAF sur les deux pages).
   ============================================================ */

.detail-view-content .dxbl-fl .dxbl-fl-ctrl .dxbl-text-edit,
.detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-combo-box.dxbl-text-edit,
.detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-date-edit.dxbl-text-edit,
.detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-spinedit.dxbl-text-edit,
.detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-input-editor.dxbl-text-edit {
    background: var(--surface-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .detail-view-content .dxbl-fl .dxbl-fl-ctrl .dxbl-text-edit:hover,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-combo-box.dxbl-text-edit:hover,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-date-edit.dxbl-text-edit:hover,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-spinedit.dxbl-text-edit:hover,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-input-editor.dxbl-text-edit:hover {
        border-color: var(--line-2) !important;
    }

    .detail-view-content .dxbl-fl .dxbl-fl-ctrl .dxbl-text-edit:focus-within,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-combo-box.dxbl-text-edit:focus-within,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-date-edit.dxbl-text-edit:focus-within,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-spinedit.dxbl-text-edit:focus-within,
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl dxbl-input-editor.dxbl-text-edit:focus-within {
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px var(--brand-soft) !important;
    }

    /* Input interne : couleur & police seulement */
    .detail-view-content .dxbl-fl .dxbl-fl-ctrl .dxbl-text-edit input.dxbl-text-edit-input {
        background: transparent !important;
        border: none !important;
        color: var(--ink-0) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .detail-view-content .dxbl-fl .dxbl-fl-ctrl .dxbl-text-edit input.dxbl-text-edit-input::placeholder {
            color: var(--ink-3) !important;
            font-weight: 400;
            opacity: 1;
        }

.detail-view-content .dxbl-fl .dxbl-text-edit-template {
    background: transparent !important;
    border: none !important;
}


/* ============================================================
   8) BOUTONS INTERNES (dropdown / clear / calendar)
   ----------------------------------------------------------------
   Couleur & opacité seulement. On laisse DevExpress gérer la taille.
   SCOPE : .detail-view-content — évite d'impacter le bouton ▾
   du combobox Société sur la page login.
   ============================================================ */

.detail-view-content .dxbl-fl .dxbl-text-edit .dxbl-btn-group-right {
    border: none !important;
    background: transparent !important;
}

.detail-view-content .dxbl-fl .dxbl-edit-btn-dropdown,
.detail-view-content .dxbl-fl .dxbl-edit-btn-clear {
    background: transparent !important;
    border: none !important;
    color: var(--ink-3) !important;
    border-radius: 0 !important;
    opacity: 0.55;
    transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

    .detail-view-content .dxbl-fl .dxbl-edit-btn-dropdown:hover,
    .detail-view-content .dxbl-fl .dxbl-edit-btn-clear:hover {
        opacity: 1;
        color: var(--brand) !important;
        background: var(--brand-soft) !important;
    }

/* Clear combo : caché au repos, visible au survol */
.detail-view-content .dxbl-fl dxbl-combo-box .dxbl-edit-btn-clear {
    opacity: 0;
    pointer-events: none;
}

.detail-view-content .dxbl-fl dxbl-combo-box:hover .dxbl-edit-btn-clear,
.detail-view-content .dxbl-fl dxbl-combo-box:focus-within .dxbl-edit-btn-clear {
    opacity: 0.55;
    pointer-events: auto;
}

    .detail-view-content .dxbl-fl dxbl-combo-box:hover .dxbl-edit-btn-clear:hover,
    .detail-view-content .dxbl-fl dxbl-combo-box:focus-within .dxbl-edit-btn-clear:hover {
        opacity: 1;
        color: var(--danger, #DC2626) !important;
        background: rgba(220, 38, 38, 0.08) !important;
    }


/* ============================================================
   9) SPIN BUTTONS — couleur/opacité seulement
   ============================================================ */

.detail-view-content .dxbl-fl dxbl-spinedit .dxbl-spin-btns {
    opacity: 0;
    transition: opacity 120ms ease;
}

.detail-view-content .dxbl-fl dxbl-spinedit:hover .dxbl-spin-btns,
.detail-view-content .dxbl-fl dxbl-spinedit:focus-within .dxbl-spin-btns {
    opacity: 1;
}

.detail-view-content .dxbl-fl dxbl-spinedit .dxbl-spin-btn-inc,
.detail-view-content .dxbl-fl dxbl-spinedit .dxbl-spin-btn-dec {
    background: transparent !important;
    border: none !important;
    color: var(--ink-3) !important;
    border-radius: 0 !important;
    opacity: 0.7;
}

    .detail-view-content .dxbl-fl dxbl-spinedit .dxbl-spin-btn-inc:hover,
    .detail-view-content .dxbl-fl dxbl-spinedit .dxbl-spin-btn-dec:hover {
        color: var(--brand) !important;
        background: var(--brand-soft) !important;
        opacity: 1;
    }


/* ============================================================
   10) CHECKBOXES — restyle visuel de la case uniquement
   ============================================================ */

.detail-view-content .dxbl-fl dxbl-check.dxbl-checkbox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .detail-view-content .dxbl-fl dxbl-check.dxbl-checkbox:hover,
    .detail-view-content .dxbl-fl dxbl-check.dxbl-checkbox:focus-within {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

.detail-view-content .dxbl-fl dxbl-check .dxbl-checkbox-check-element {
    border: 1.5px solid var(--line-2) !important;
    border-radius: 4px !important;
    background: var(--surface-1) !important;
    transition: all 120ms ease;
    cursor: pointer;
}

.detail-view-content .dxbl-fl dxbl-check.dxbl-checkbox:hover .dxbl-checkbox-check-element {
    border-color: var(--brand) !important;
}

.detail-view-content .dxbl-fl dxbl-check.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.detail-view-content .dxbl-fl dxbl-check[check-state="1"] .dxbl-checkbox-check-element {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}


/* ============================================================
   11) NESTED FRAME (Lignes livraison) — décor
   ============================================================ */

.dxbl-fl .nested-frame {
    background: var(--surface-1);
    /* border: 1px solid var(--line); */
    /* border-radius: 12px; */
    overflow: hidden;
    box-shadow: var(--sh-1);
}

.dxbl-fl .nested-toolbar {
    /* background: var(--surface-2); */
    border-bottom: 1px solid var(--line);
}

.dxbl-fl .nested-content {
    background: var(--surface-1);
}

.dxbl-fl .nested-frame .dxbl-grid {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   12) WARNING SIZE
   ============================================================ */

.xaf-layouteditor-sizewarning {
    display: none !important;
}


/* ============================================================
   13) FIX DIVERS COSMÉTIQUES
   ============================================================ */

/* Caret DevExpress neutralisé (évite le glyphe parasite devant les dates) */
.detail-view-content .dxbl-fl .dxbl-text-edit-caret-element {
    pointer-events: none;
}

.detail-view-content .dxbl-fl input.dxbl-text-edit-input.form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

║ MODAL FOOTER — Popup DetailView XAF ║
║ RÈGLE : cosmétique pur — aucune hauteur, padding vertical, ║
║ ou transform modifiés (risque de scroll). ║
╚══════════════════════════════════════════════════════════════╝ */
/* ── Conteneur footer ───────────────────────────────────────── */
.dxbl-modal-footer {
    background: var(--surface-1) !important;
    border-top: 1px solid var(--line) !important;
    font-family: "Geist", system-ui, sans-serif !important;
}

/* ── Tous les boutons — police uniquement ───────────────────── */
.dxbl-modal-footer .dxbl-btn {
    font-family: "Geist", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    border-radius: 8px !important;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease !important;
    box-shadow: none !important;
}

    /* ── Save — gradient brand ──────────────────────────────────── */
    .dxbl-modal-footer .dxbl-btn.dxbl-btn-primary,
    .dxbl-modal-footer .dxbl-btn[data-action-name="Save"] {
        background: var(--gradient-brand) !important;
        border: none !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        box-shadow: var(--sh-brand) !important;
    }

        .dxbl-modal-footer .dxbl-btn.dxbl-btn-primary:hover,
        .dxbl-modal-footer .dxbl-btn[data-action-name="Save"]:hover {
            background: var(--gradient-brand-h) !important;
            box-shadow: var(--sh-brand-h) !important;
        }

        .dxbl-modal-footer .dxbl-btn.dxbl-btn-primary:active,
        .dxbl-modal-footer .dxbl-btn[data-action-name="Save"]:active {
            filter: brightness(.94) !important;
        }

    /* ── Save and New — secondary bordure ───────────────────────── */
    .dxbl-modal-footer .dxbl-btn[data-action-name="Save and New"] {
        background: var(--surface-1) !important;
        border: 1px solid var(--line-2) !important;
        color: var(--ink-1) !important;
    }

        .dxbl-modal-footer .dxbl-btn[data-action-name="Save and New"]:hover {
            background: var(--surface-2) !important;
            border-color: var(--brand) !important;
            color: var(--brand) !important;
        }

        /* Icône Save and New */
        .dxbl-modal-footer .dxbl-btn[data-action-name="Save and New"] img.xaf-toolbar-item-icon {
            width: 14px !important;
            height: 14px !important;
            opacity: 0.55 !important;
        }

    /* ── Cancel — ghost ─────────────────────────────────────────── */
    .dxbl-modal-footer .dxbl-btn[data-action-name="Cancel"] {
        background: transparent !important;
        border: 1px solid transparent !important;
        color: var(--ink-3) !important;
        font-weight: 400 !important;
    }

        .dxbl-modal-footer .dxbl-btn[data-action-name="Cancel"]:hover {
            background: var(--surface-2) !important;
            border-color: var(--line) !important;
            color: var(--ink-1) !important;
        }

/* ── Virtual toolbar — masqué (clone DX pour mesure) ────────── */
.dxbl-modal-footer .dxbl-virtual-toolbar {
    display: none !important;
}



/* ============================================================
   FIN educated-detailview.css v6 (cosmétique pur)
   ============================================================ */