/* ═══════════════════════════════════════════════════════════════════════════
   Matrix — règles qui vivaient dans un <style> à l'intérieur de sept composants
   (plan 925)

   Matrix_Button, Matrix_DropDownList, Matrix_Editor, Matrix_TextBox, Matrix_Label,
   Matrix_IconPicker et DeleteConfirmationModal finissaient par un bloc <style>.
   Blazor le rendait dans CHAQUE exemplaire : ×155 le même bloc de 2 Ko de
   Matrix_Button sur Impressions (/documents), ×42 sur Réservations › clients.
   Les règles sont ici, une seule fois, recopiées à l'identique.

   PLACE DANS LA CASCADE — ne pas déplacer.
   Un <style> rendu dans le <body> arrivait APRÈS toutes les feuilles du <head> :
   à spécificité égale, il gagnait. Cette feuille garde ce rang : elle est chargée
   en DERNIER dans le <head> du BackOffice (App.razor, après
   LinkoocBackOffice.styles.css). Plus tôt, elle risquerait de perdre contre
   linkooc-theme.css, mobile.css… Dans le Designer, elle est chargée par
   wwwroot/index.html, donc avant les feuilles de DesignerLayout : mesuré au
   navigateur sur le panneau article, aucune différence de style calculé.

   PORTÉE — les règles de Matrix_DropDownList qui ne nomment pas
   .Matrix_DropDownList (la liste ouverte, rendue par Telerik hors du composant)
   ne s'appliquaient que sur une page qui affichait une Matrix_DropDownList.
   :where(body:has(.Matrix_DropDownList)) garde cette condition sans changer la
   spécificité (:where compte pour zéro). Sans elle, toutes les listes Telerik du
   BackOffice perdraient le dessin « premier/dernier arrondi » de
   matrix-components.css.

   Pas de CSS isolée (.razor.css) : elle ajouterait un attribut b-xxx au
   sélecteur, donc changerait qui gagne, et d'autres feuilles visent ces classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Matrix_Button.razor ───────────────────────────────────────────────────────── */
/* Style arrondi pour Matrix_Button (identique aux boutons Telerik k-rounded-md) */
.Matrix_Button {
    border-radius: var(--kendo-border-radius-md, 0.375rem) !important;
}

/* Couleurs personnalisées pour Matrix_Button Primary */
.Matrix_Button.btn-primary {
    background-color: var(--linkooc-button-primary, #08781B) !important;
    border-color: var(--linkooc-button-primary, #08781B) !important;
    color: var(--linkooc-on-solid, #ffffff) !important;
}

.Matrix_Button.btn-primary:hover:not(:disabled),
.Matrix_Button.btn-primary:focus:not(:disabled) {
    background-color: var(--linkooc-button-primary-hover, #11671E) !important;
    border-color: var(--linkooc-button-primary-hover, #11671E) !important;
    color: var(--linkooc-on-solid, #ffffff) !important;
}

.Matrix_Button.btn-primary:active:not(:disabled) {
    background-color: var(--linkooc-button-primary-hover, #11671E) !important;
    border-color: var(--linkooc-button-primary-hover, #11671E) !important;
    color: var(--linkooc-on-solid, #ffffff) !important;
}

/* Couleurs personnalisées pour Matrix_Button Secondary */
.Matrix_Button.btn-secondary {
    background-color: var(--linkooc-button-primary, #08781B) !important;
    border-color: var(--linkooc-button-primary, #08781B) !important;
    color: var(--linkooc-on-solid, #ffffff) !important;
}

.Matrix_Button.btn-secondary:hover:not(:disabled),
.Matrix_Button.btn-secondary:focus:not(:disabled) {
    background-color: var(--linkooc-button-primary-hover, #11671E) !important;
    border-color: var(--linkooc-button-primary-hover, #11671E) !important;
    color: var(--linkooc-on-solid, #ffffff) !important;
}

.Matrix_Button.btn-secondary:active:not(:disabled) {
    background-color: var(--linkooc-button-primary-hover, #11671E) !important;
    border-color: var(--linkooc-button-primary-hover, #11671E) !important;
    color: var(--linkooc-on-solid, #ffffff) !important;
}

/* ── Matrix_DropDownList.razor ─────────────────────────────────────────────────── */
/* Arrondi des coins pour Matrix_DropDownList (identique à Matrix_TextBox) */
.Matrix_DropDownList.k-dropdown .k-input,
.Matrix_DropDownList.k-dropdown .k-input-solid,
.Matrix_DropDownList.k-picker .k-input,
.Matrix_DropDownList.k-picker .k-input-solid {
    border-radius: 0.375rem !important;
}

/* Conteneur principal du dropdown */
.Matrix_DropDownList.k-dropdown,
.Matrix_DropDownList.k-picker {
    border-radius: 0.375rem !important;
}

/* Wrap du dropdown */
.Matrix_DropDownList .k-dropdown-wrap,
.Matrix_DropDownList .k-picker-wrap {
    border-radius: 0.375rem !important;
}

/* Zone de saisie interne */
.Matrix_DropDownList .k-input-inner,
.Matrix_DropDownList .k-input-value-text {
    border-radius: 0.375rem !important;
}

/* Bouton de sélection (flèche) - arrondi uniquement à droite */
.Matrix_DropDownList .k-select,
.Matrix_DropDownList .k-picker-toggle,
.Matrix_DropDownList .k-dropdown-wrap .k-select {
    border-radius: 0.375rem !important;
}

/* État ouvert - arrondi en haut seulement */
.Matrix_DropDownList.k-expanded .k-input,
.Matrix_DropDownList.k-expanded .k-input-solid,
.Matrix_DropDownList.k-expanded .k-dropdown-wrap {
    border-radius: 0.375rem !important;
}

/* Popup de la liste déroulante - arrondi complet sur tous les côtés */
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-popup.k-list-container,
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list-container,
:where(body:has(.Matrix_DropDownList)) .k-popup.k-list-container,
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-popup,
:where(body:has(.Matrix_DropDownList)) div.k-animation-container > div.k-popup {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
}

/* Liste des éléments - conteneur avec arrondi */
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list,
:where(body:has(.Matrix_DropDownList)) .k-popup .k-list,
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list-container .k-list,
:where(body:has(.Matrix_DropDownList)) .k-list-container .k-list,
:where(body:has(.Matrix_DropDownList)) div.k-popup > .k-list {
    border-radius: 0.375rem !important;
    overflow: hidden !important;
}

/* Tous les éléments de la liste - pas d'arrondi par défaut */
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list-item,
:where(body:has(.Matrix_DropDownList)) .k-popup .k-list-item,
:where(body:has(.Matrix_DropDownList)) .k-list-item,
:where(body:has(.Matrix_DropDownList)) .k-list-container .k-list-item {
    border-radius: 0.375rem !important;
}

/* Premier élément de la liste - arrondi en haut uniquement */
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list-item:first-child,
:where(body:has(.Matrix_DropDownList)) .k-popup .k-list-item:first-child,
:where(body:has(.Matrix_DropDownList)) .k-list-item:first-child,
:where(body:has(.Matrix_DropDownList)) .k-list-container .k-list-item:first-child {
    border-radius: 0.375rem !important;
}

/* Dernier élément de la liste - arrondi en bas uniquement */
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list-item:last-child,
:where(body:has(.Matrix_DropDownList)) .k-popup .k-list-item:last-child,
:where(body:has(.Matrix_DropDownList)) .k-list-item:last-child,
:where(body:has(.Matrix_DropDownList)) .k-list-container .k-list-item:last-child {
    border-radius: 0.375rem !important;
}

/* Cas où il n'y a qu'un seul élément - arrondi complet */
:where(body:has(.Matrix_DropDownList)) .k-animation-container .k-list-item:only-child,
:where(body:has(.Matrix_DropDownList)) .k-popup .k-list-item:only-child,
:where(body:has(.Matrix_DropDownList)) .k-list-item:only-child,
:where(body:has(.Matrix_DropDownList)) .k-list-container .k-list-item:only-child {
    border-radius: 0.375rem !important;
}

/* Assurer que tous les éléments enfants respectent les arrondis */
.Matrix_DropDownList * {
    border-radius: 0.375rem !important;
    box-sizing: border-box;
}

/* ── Matrix_Editor.razor ───────────────────────────────────────────────────────── */
/* Conteneur principal */
.Matrix_Editor.k-editor {
    border-radius: 0.375rem !important;
    overflow: hidden; /* IMPORTANT */
}

/* Toolbar (haut) */
.Matrix_Editor .k-editor-toolbar {
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Zone de contenu */
.Matrix_Editor .k-editor-content {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    border-top: none !important; /* supprime la double bordure */
}

/* Iframe interne (cas Telerik >= v4) */
.Matrix_Editor iframe {
    border-radius: 0 0 0.375rem 0.375rem !important;
}

/* Zone d'édition - Police Inter 16px */
.Matrix_Editor .k-editor-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 16px !important;
}

/* Contenu de l'iframe - Police Inter 16px */
.Matrix_Editor iframe {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Style pour le body dans l'iframe (via CSS global ou inline) */
.Matrix_Editor .k-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 16px !important;
}

/* ── Matrix_TextBox.razor ──────────────────────────────────────────────────────── */
/* Arrondi des coins pour Matrix_TextBox */
.Matrix_TextBox .k-input,
.Matrix_TextBox .k-input-solid {
    border-radius: 0.375rem;
}

.Matrix_TextBox-password {
    border-radius: 0.375rem;
}

.Matrix_TextBox-readonly {
    border-radius: 0.375rem;
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* ── Matrix_Label.razor ────────────────────────────────────────────────────────── */
/* Style pour Matrix_Label - Police Inter 14px */
.Matrix_Label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #212529; /* Couleur par défaut pour le texte */
}

.Matrix_Label > span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #212529; /* Couleur par défaut pour le texte */
    display: inline-block;
}

/* Assurer la visibilité du texte */
.Matrix_Label > span {
    visibility: visible !important;
}

/* Permettre la surcharge de couleur via CSSClass */
.Matrix_Label.text-muted > span {
    color: #6c757d;
}

.Matrix_Label.text-primary > span {
    color: #0d6efd;
}

/* ── Matrix_IconPicker.razor ───────────────────────────────────────────────────── */
.matrix-icon-picker-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.matrix-icon-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: var(--matrix-bg-secondary, #f5f5f5);
    border: 1px solid var(--matrix-border-color, #ddd);
    border-radius: var(--matrix-border-radius, 4px);
    min-width: 200px;
}

.matrix-icon-preview i {
    font-size: 24px;
    color: var(--matrix-primary-color, #667eea);
}

.matrix-icon-preview span {
    font-weight: 600;
    color: var(--matrix-text-color, #333);
}

.no-icon {
    color: var(--matrix-text-muted, #999);
    font-style: italic;
}

.matrix-icon-picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.matrix-icon-picker-content {
    background-color: var(--matrix-bg-primary, white);
    border-radius: var(--matrix-border-radius-lg, 8px);
    padding: 25px;
    max-width: 800px;
    width: 90%;
    /* Colonne flex bornée : seule la grille défile (plan 509).
       Repli vh juste au-dessus de dvh — jamais de hauteur pleine en vh
       (piège du plan 452). */
    max-height: 80vh;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.matrix-icon-picker-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--matrix-primary-color, #667eea);
    padding-bottom: 15px;
}

.matrix-icon-picker-header h2 {
    margin: 0;
    color: var(--matrix-text-color, #333);
    font-size: 1.5rem;
    font-weight: 600;
}

.matrix-icon-picker-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--matrix-text-muted, #666);
    transition: color 0.3s;
    /* Cible tactile pleine : il mesurait 40 de large (plan 509). */
    padding: 0;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Survol réservé aux pointeurs : au doigt il restait collé (plan 509). */
@media (hover: hover) {
    .matrix-icon-picker-close:hover {
        color: var(--matrix-text-color, #333);
    }
}

.matrix-icon-search {
    flex: 0 0 auto;
    margin-bottom: 20px;
}

.matrix-icon-grid {
    /* Le seul défileur de la fenêtre. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    align-content: start;
    margin-bottom: 20px;
    /* Mou de fin de course sous la dernière rangée (règle 452), et la barre
       d'outils iOS ne doit pas la recouvrir. */
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.matrix-icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 1px solid var(--matrix-border-color, #ddd);
    border-radius: var(--matrix-border-radius, 4px);
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--matrix-bg-primary, white);
}

/* Idem : au doigt, le scale(1.1) restait figé sur la dernière vignette touchée. */
@media (hover: hover) {
    .matrix-icon-item:hover {
        background-color: var(--matrix-bg-secondary, #f0f0f0);
        border-color: var(--matrix-primary-color, #667eea);
        transform: scale(1.1);
    }
}

.matrix-icon-item i {
    font-size: 28px;
    color: var(--matrix-primary-color, #667eea);
}

.matrix-icon-item.selected {
    background-color: var(--matrix-primary-color, #667eea);
    border-color: var(--matrix-primary-color, #667eea);
}

.matrix-icon-item.selected i {
    color: white;
}

.matrix-icon-picker-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    margin-top: 0;
    justify-content: flex-end;
    border-top: 1px solid var(--matrix-border-color, #ddd);
    padding-top: 15px;
}

/* ── DeleteConfirmationModal.razor ─────────────────────────────────────────────── */
.linkooc-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 6, 1, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}
.linkooc-delete-dialog {
    background: var(--linkooc-bg, #ffffff);
    border-radius: var(--linkooc-radius-lg, 0.75rem);
    width: 90%;
    max-width: 440px;
    box-shadow: 0 12px 40px rgba(0, 6, 1, 0.18);
    overflow: hidden;
    animation: linkooc-delete-enter 0.2s ease;
}
@keyframes linkooc-delete-enter {
    from { transform: scale(0.92) translateY(8px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.linkooc-delete-icon-area {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.5rem 0.75rem;
}
.linkooc-delete-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--linkooc-danger-light, rgba(186, 25, 25, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
}
.linkooc-delete-icon-circle i {
    font-size: 1.5rem;
    color: var(--linkooc-danger, #BA1919);
}
.linkooc-delete-body {
    padding: 0 1.5rem 1rem;
    text-align: center;
}
.linkooc-delete-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--linkooc-text-display, #000601);
}
.linkooc-delete-message {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    line-height: 1.5;
}
.linkooc-delete-count {
    display: inline-flex;
    align-items: center;
    background: var(--linkooc-surface-hover, #F7F7F8);
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--linkooc-text-primary, #333);
}
.linkooc-delete-warning {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--linkooc-danger, #BA1919);
}
.linkooc-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 1.25rem;
    border-top: 1px solid var(--linkooc-border-color, #dee2e6);
    background: var(--linkooc-surface-hover, #F7F7F8);
}
@media (max-width: 480px) {
    .linkooc-delete-dialog { width: 95%; margin: 1rem; }
    .linkooc-delete-actions { flex-direction: column; }
}