/*
 * ===== STYLES POUR FileInformationPanelFileInformationPanelFileInformationPanelFileInformationPanel FINAL =====
 * Volet pliable/dépliable avec onglets "Principale" et "Complément"
 */



/* ===== CONTENEUR PRINCIPAL ===== */
.ls-info-panel-final {
    background: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    transition: width 0.35s ease-out, flex 0.35s ease-out;
    height: 100%;
    flex-shrink: 0;
}

.ls-info-panel-expanded {
    flex: 0 0 280px !important;
    width: 300px !important;
    z-index: 20;
}

.ls-info-panel-collapsed {
    flex: 0 0 50px !important;
    width: 50px !important;
	z-index: 20;
}

/* ===== HEADER (Bouton Collapse + Titre) ===== */

.ls-info-title {
    font-weight: 700;
    font-size: 13px;
    color: #333333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-info-panel-collapsed .ls-info-title {
    display: none !important;
}

/* ===== BOUTON COLLAPSE ===== */
.ls-collapse-button {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    background-color: #f5f5f5 !important;
    border: 1px solid #d8d8d8 !important;
    flex-shrink: 0;
}

.ls-collapse-button:hover {
    background-color: #ebebeb !important;
    border-color: #c0c0c0 !important;
}

.ls-collapse-button:active {
    background-color: #e0e0e0 !important;
}

.ls-collapse-arrow {
    font-size: 14px;
    color: #3f51b5;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ls-collapse-button .lib {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== CONTENU (Onglets + Champs) ===== */
.ls-info-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ls-info-panel-collapsed .ls-info-content {
    display: none !important;
}

/* ===== ONGLETS ===== */
.ls-info-tabs {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
}

.ls-info-tabs .x-tab-panel-header {
    background: white;
    border-bottom: 2px solid #e8e8e8;
    padding: 0 !important;
    height: auto !important;
    display: flex;
    flex-direction: row;
    border-radius: 0;
}

.ls-info-tabs .x-tab-panel-header .x-tab {
    flex: 1;
    text-align: center;
    padding: 12px 10px !important;
    font-size: 12px;
    font-weight: 600;
    color: #999999;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    background: white !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.ls-info-tabs .x-tab-panel-header .x-tab:hover {
    color: #666666;
    background: #fafafa !important;
}

/* ===== ONGLET "Principale" EN ORANGE ===== */
.ls-tab-principale {
    border-bottom-color: transparent !important;
}

.ls-info-tabs .x-tab-panel-header .x-tab.x-tab-close {
    padding-right: 10px !important;
}

/* Premier onglet = Principale */
.ls-info-tabs .x-tab-panel-header .x-tab:first-child {
    color: #fa6000 !important;
    border-bottom-color: transparent !important;
}

.ls-info-tabs .x-tab-panel-header .x-tab:first-child.x-tab-active {
    color: #fa6000 !important;
    border-bottom-color: #fa6000 !important;
    background: white !important;
}

/* ===== ONGLET "Complément" EN BLEU ===== */
.ls-tab-complement {
    border-bottom-color: transparent !important;
}

/* Deuxième onglet = Complément */
.ls-info-tabs .x-tab-panel-header .x-tab:last-child {
    color: #3f51b5 !important;
    border-bottom-color: transparent !important;
}

.ls-info-tabs .x-tab-panel-header .x-tab:last-child.x-tab-active {
    color: #3f51b5 !important;
    border-bottom-color: #3f51b5 !important;
    background: white !important;
}

.ls-info-tabs .x-tab-panel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: white;
    border: none !important;
}

/* ===== CONTENU DES ONGLETS ===== */
.ls-info-principales-tab,
.ls-info-complements-tab {
    width: 100%;
    padding: 12px;
    background: white;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== WRAPPER DES CHAMPS ===== */
.ls-info-field-wrapper {
    padding: 10px 8px;
    background: white;
    border-radius: 0;
    border-left: 3px solid #f0f0f0;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.ls-info-field-wrapper:hover {
    border-left-color: #fa6000;
    background: #fffbf8;
}

.ls-info-field-wrapper:last-child {
    margin-bottom: 0;
}

/* ===== LABELS ET VALEURS DES CHAMPS ===== */
.ls-info-field-label {
    font-size: 10px;
    font-weight: 700;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    line-height: 1.2;
    display: block;
}

.ls-info-field-value {
    font-size: 12px;
    color: #333333;
    word-break: break-word;
    line-height: 1.4;
    font-weight: 500;
    display: block;
}

.ls-info-field-value:empty::before {
    content: "-";
    color: #cccccc;
}

/* ===== MESSAGES VIDES ===== */
.ls-info-empty-message,
.ls-info-error-message {
    padding: 20px;
    text-align: center;
    color: #999999;
    font-size: 12px;
}

.ls-info-error-message {
    color: #d32f2f;
}

.ls-info-complements-placeholder {
    padding: 30px 15px;
    text-align: center;
    color: #999999;
    font-size: 12px;
}

.ls-info-complements-placeholder p {
    margin: 8px 0;
}

/* ===== SCROLLBARS PERSONNALISÉES ===== */
.ls-info-principales-tab::-webkit-scrollbar,
.ls-info-complements-tab::-webkit-scrollbar,
.ls-info-tabs .x-tab-panel-body::-webkit-scrollbar {
    width: 6px;
}

.ls-info-principales-tab::-webkit-scrollbar-track,
.ls-info-complements-tab::-webkit-scrollbar-track,
.ls-info-tabs .x-tab-panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.ls-info-principales-tab::-webkit-scrollbar-thumb,
.ls-info-complements-tab::-webkit-scrollbar-thumb,
.ls-info-tabs .x-tab-panel-body::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
}

.ls-info-principales-tab::-webkit-scrollbar-thumb:hover,
.ls-info-complements-tab::-webkit-scrollbar-thumb:hover,
.ls-info-tabs .x-tab-panel-body::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* ===== ANIMATION COLLAPSE ===== */
@keyframes slideInPanel {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ls-info-panel-expanded {
    animation: slideInPanel 0.35s ease-out;
}

/* ===== ADAPTATION DU LAYOUT PARENT ===== */
.ls-file-content-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
    gap: 0;
}

.ls-file-content-wrapper > .ls-info-panel-final {
    flex-shrink: 0;
    transition: flex 0.35s ease-out, width 0.35s ease-out;
}

.ls-file-content-wrapper > .file-sections-and-widgets {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex 0.35s ease-out;
}

/* ===== CHAMPS ÉDITABLES ===== */
.ls-info-field-editable {
    position: relative;
}

.ls-info-field-editable .ls-info-field-value {
    padding: 4px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fafafa;
}

.ls-info-field-editable:hover .ls-info-field-value {
    background: #f5f5f5;
    border-color: #c0c0c0;
    cursor: text;
}

/* ===== DARK THEME (Optionnel) ===== */
.x-theme-dark .ls-info-panel-final {
    background: #2a2a2a;
    border-right-color: #444444;
}

.x-theme-dark .ls-info-header {
    background: #333333;
    border-bottom-color: #444444;
}

.x-theme-dark .ls-info-title {
    color: #e0e0e0;
}

.x-theme-dark .ls-collapse-button {
    background-color: #3a3a3a !important;
    border-color: #555555 !important;
}

.x-theme-dark .ls-collapse-button:hover {
    background-color: #4a4a4a !important;
    border-color: #666666 !important;
}

.x-theme-dark .ls-info-tabs .x-tab-panel-header {
    background: #333333;
    border-bottom-color: #555555;
}

.x-theme-dark .ls-info-tabs .x-tab {
    color: #aaaaaa;
}

.x-theme-dark .ls-info-tabs .x-tab:hover {
    color: #d0d0d0;
    background: #3a3a3a !important;
}

.x-theme-dark .ls-info-principales-tab,
.x-theme-dark .ls-info-complements-tab {
    background: #333333;
}

.x-theme-dark .ls-info-field-wrapper {
    background: #2a2a2a;
    border-left-color: #555555;
}

.x-theme-dark .ls-info-field-wrapper:hover {
    background: #3a3a3a;
    border-left-color: #fa6000;
}

.x-theme-dark .ls-info-field-label {
    color: #aaaaaa;
}

.x-theme-dark .ls-info-field-value {
    color: #e0e0e0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
    .ls-info-panel-expanded {
        flex: 0 0 250px !important;
        width: 250px !important;
    }
}

@media (max-width: 1200px) {
    .ls-info-panel-expanded {
        flex: 0 0 220px !important;
        width: 220px !important;
    }
}

@media (max-width: 900px) {
    .ls-info-panel-final {
        display: none !important;
    }
}

/* ===== CORRECTION POUR GXT TABPANEL ===== */
.ls-info-tabs .x-tab-panel-header {
    display: flex !important;
}

.ls-info-tabs .x-tab-panel-header .x-tab {
    flex: 1 !important;
}

.ls-info-tabs .x-tab-panel-body {
    display: flex !important;
    flex-direction: column !important;
}

/* Volet info : forcer les champs du header en vertical */
.ls-info-panel-final .ls-info-headerline-vertical .x-form-item{
  float: none !important;
  width: 100% !important;
  clear: both !important;
  margin: 0 0 10px 0;
}

/* Pour éviter que GXT garde des largeurs fixes du header */
.ls-info-panel-final .ls-info-headerline-vertical .x-form-element,
.ls-info-panel-final .ls-info-headerline-vertical .x-form-field-wrap{
  width: 100% !important;
}

/* Inputs / textarea / combo -> prennent toute la largeur dispo */
.ls-info-panel-final .ls-info-headerline-vertical input,
.ls-info-panel-final .ls-info-headerline-vertical textarea,
.ls-info-panel-final .ls-info-headerline-vertical select{
  width: 100% !important;
  box-sizing: border-box;
}

/* Optionnel : label au-dessus (comme sur ta maquette) */
.ls-info-panel-final .ls-info-headerline-vertical .x-form-item-label{
  float: none !important;
  width: 100% !important;
  margin-bottom: 4px;
}

/* =========================
   OVERRIDE layout headerLine (flexible-form)
   -> 1 champ = 1 ligne
   ========================= */
.ls-info-headerline-vertical .flexible-form,
.ls-info-headerline-vertical .flexible-body{
  display: block !important;
  width: 100% !important;
}

.ls-info-headerline-vertical .flexible-cell{
  width: 100% !important;     /* au lieu de 25% */
  float: none !important;
  display: block !important;
  clear: both !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

/* label au-dessus */
.ls-info-headerline-vertical .x-form-item-label{
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px 0 !important;
  font-size: 11px;
  font-weight: 700;
  color: #667085;
}



/* champ en pleine largeur */
.ls-info-headerline-vertical .x-form-element,
.ls-info-headerline-vertical .x-form-field-wrap{
  width: 100% !important;
}

.ls-info-headerline-vertical input,
.ls-info-headerline-vertical textarea,
.ls-info-headerline-vertical select{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* évite la hauteur minuscule que tu vois (54px) */
.ls-info-panel-final .x-tab-panel-body{
  height: auto !important;
}
.ls-info-panel-final .ls-info-principales-tab{
  height: auto !important;
}
/* ============================================
   PANNEAU D'INFORMATIONS - STYLES PRINCIPAUX
   ============================================ */

/* Wrapper horizontal pour le layout côte à côte */
.ls-file-content-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 0;
}

/* Panneau d'informations */
.ls-info-panel-final {
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ls-info-panel-expanded {
    flex: 0 0 280px;
    min-width: 280px;
}

.ls-info-panel-collapsed {
    flex: 0 0 50px;
    min-width: 50px;
}

/* Contenu principal (sections du fichier) */
.file-sections-and-widgets {
    flex: 1 1 auto;
    overflow: auto;
    min-width: 0;
}

/* ============================================
   HEADER DU PANNEAU
   ============================================ */



.ls-info-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-bottom: 8px;
}

.ls-info-title-collapsed {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 200px;
}

/* Bouton toggle centré */
.ls-collapse-button {
    position: absolute !important;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px !important;
    height: 20px !important;
    min-width: 30px !important;
    padding: 0 !important;
    background: #f0f0f0 !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-collapse-button:hover {
    background: #e8e8e8 !important;
}

.ls-collapse-arrow {
    font-size: 10px;
    color: #666;
}

/* ============================================
   CONTENU DU PANNEAU
   ============================================ */

.ls-info-content {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ============================================
   STYLES DES ONGLETS (GXT TabPanel)
   ============================================ */

/* Container des onglets */
.ls-info-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ls-info-tabs .x-tab-panel-header {
    background: white;
    border-bottom: 2px solid #e0e0e0;
    padding: 0 10px;
}

.ls-info-tabs .x-tab-strip-wrap {
    background: transparent;
}

/* ONGLET "PRINCIPALE" - Style rouge quand actif */
.ls-tab-principale .x-tab-strip-text {
    color: #5b7ab5; /* Bleu par défaut (inactif) */
    font-weight: normal;
    font-size: 13px;
}

.ls-tab-principale.x-tab-strip-active .x-tab-strip-text {
    color: #e74c3c; /* Rouge quand actif */
    font-weight: 600;
}

.ls-tab-principale.x-tab-strip-active {
    background: transparent !important;
    border-bottom: 2px solid #e74c3c !important;
}

.ls-tab-principale .x-tab-strip-inner {
    background: transparent !important;
}

/* ONGLET "COMPLÉMENT" - Style bleu */
.ls-tab-complement .x-tab-strip-text {
    color: #5b7ab5; /* Bleu */
    font-weight: normal;
    font-size: 13px;
}

.ls-tab-complement.x-tab-strip-active .x-tab-strip-text {
    color: #5b7ab5; /* Reste bleu quand actif */
    font-weight: 600;
}

.ls-tab-complement.x-tab-strip-active {
    background: transparent !important;
    border-bottom: 2px solid #5b7ab5 !important;
}

/* Retirer les styles de fond par défaut de GXT */
.ls-info-tabs .x-tab-strip-active {
    background: transparent !important;
}

.ls-info-tabs .x-tab-strip-over {
    background: transparent !important;
}

/* Body des onglets */
.ls-info-tabs .x-tab-panel-body {
    flex: 1 1 auto;
    overflow: auto;
    background: white;
    padding: 10px;
    min-height: 0;
}

/* ============================================
   CONTENU DES ONGLETS
   ============================================ */

/* Onglet Principale - affichage vertical des champs */
.ls-info-principales-tab {
    width: 100% !important;
    height: 100% !important;
    overflow: auto;
}

/* Force l'affichage vertical des champs dans headerLine */
.ls-info-headerline-vertical .x-form-item {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px;
}

.ls-info-headerline-vertical .x-form-element {
    width: 100% !important;
}

.ls-info-headerline-vertical .x-form-field-wrap {
    width: 100% !important;
}

.ls-info-headerline-vertical input,
.ls-info-headerline-vertical textarea,
.ls-info-headerline-vertical .x-form-field {
    width: 100% !important;
    box-sizing: border-box;
}

.ls-info-headerline-vertical .x-form-item-label {
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 4px;
    font-weight: 500;
    color: #666;
    font-size: 12px;
}

/* Onglet Complément - placeholder */
.ls-info-complements-tab {
    width: 100%;
    padding: 20px;
}

.ls-info-complements-placeholder {
    text-align: center;
    color: #999;
    padding: 40px 20px;
}

.ls-info-complements-placeholder p:first-child {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* ============================================
   BOUTONS D'ONGLETS CUSTOM
   ============================================ */

.ls-info-tab-buttons {
    display: flex;
    flex-direction: row;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 10px;
    gap: 15px;
    align-items: flex-end;
}

/* Style de base des boutons */
.ls-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: normal !important;
    transition: all 0.2s ease !important;
}

.ls-tab-btn .x-btn-text {
    color: #5b7ab5 !important; /* Bleu par défaut */
    font-size: 14px !important;
    font-weight: normal !important;
}

/* Bouton Principale - ROUGE quand actif */
.ls-tab-btn-principale.ls-tab-btn-active {
    border-bottom-color: #e74c3c !important;
}

.ls-tab-btn-principale.ls-tab-btn-active .x-btn-text {
    color: #e74c3c !important;
    font-weight: 600 !important;
}

/* Bouton Complément - BLEU quand actif */
.ls-tab-btn-complement.ls-tab-btn-active {
    border-bottom-color: #5b7ab5 !important;
}

.ls-tab-btn-complement.ls-tab-btn-active .x-btn-text {
    color: #5b7ab5 !important;
    font-weight: 600 !important;
}

/* Hover */
.ls-tab-btn:hover .x-btn-text {
    opacity: 0.8;
}

/* Retirer les styles GXT par défaut */
.ls-tab-btn .x-btn-center,
.ls-tab-btn .x-btn-left,
.ls-tab-btn .x-btn-right {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
}


/* ============================================
   BOUTONS D'ONGLETS - VERSION ULTRA SPÉCIFIQUE
   ============================================ */


/* Style de base des boutons */
.ls-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: -2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ls-tab-btn button {
    background: transparent !important;
    border: none !important;
    padding: 8px 5px !important;
    cursor: pointer !important;
}

/* ============================================
   BOUTON PRINCIPALE
   ============================================ */

/* État inactif - GRIS */
.ls-info-tab-buttons .ls-tab-btn-principale:not(.ls-tab-btn-active) span.lib {
    color: rgba(48, 66, 135, 1) !important;
    font-weight: 500 !important;
}

/* État actif - ROUGE */
.ls-info-tab-buttons .ls-tab-btn-principale.ls-tab-btn-active {
    border-bottom: 3px solid #FA420F !important;
}

.ls-info-tab-buttons .ls-tab-btn-principale.ls-tab-btn-active span.lib {
    color: #FA420F !important;
    font-weight: 600 !important;
}

/* ============================================
   BOUTON COMPLÉMENT
   ============================================ */

/* État inactif - GRIS */
.ls-info-tab-buttons .ls-tab-btn-complement:not(.ls-tab-btn-active) span.lib {
    color: rgba(48, 66, 135, 1) !important;
    font-weight: 500 !important;
}

/* État actif - BLEU */
.ls-info-tab-buttons .ls-tab-btn-complement.ls-tab-btn-active {
    border-bottom: 3px solid #FA420F !important;
}

.ls-info-tab-buttons .ls-tab-btn-complement.ls-tab-btn-active span.lib {
    color: #FA420F !important;
    font-weight: 600 !important;
}

/* ============================================
   HOVER EFFECTS
   ============================================ */

.ls-tab-btn-principale:hover span.lib {
    color: #FA420F !important;
}

.ls-tab-btn-complement:hover span.lib {
    color: #FA420F !important;
}

/* ============================================
   FORCER LA SUPPRESSION DES STYLES INLINE
   ============================================ */

.ls-tab-btn button.com-legalsuite-core-client-widgets-LsButton-ComponentResources-Style-btnModifier {
    background-color: transparent !important;
}

.ls-tab-btn button span {
    color: inherit !important;
}

.ls-tab-btn .x-btn-center,
.ls-tab-btn .x-btn-left,
.ls-tab-btn .x-btn-right {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
}


/* ============================================
   HEADER DU PANNEAU
   ============================================ */

.ls-info-header {
    display: flex;
    flex-direction: column;
    background: white;
    /* padding: 25px 15px;
    padding-bottom: 10px;
    min-height: 50px; */
}

.ls-info-header-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* ============================================
   BOUTON DE COLLAPSE - STYLE MAQUETTE
   ============================================ */

/* Bouton de base */
.ls-info-collapse-button {
    background: transparent !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ls-info-collapse-button button {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Icône du bouton */
.ls-collapse-icon {
    font-size: 32px !important;
    font-weight: bold !important;
    color: #FA420F !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* État expanded (double chevron gauche) */
.ls-info-collapse-button-expanded {
    border-color: #FA420F !important;
}

.ls-info-collapse-button-expanded .ls-collapse-icon {
    color: #FA420F !important;
}

/* État collapsed (chevron droit) */
.ls-info-collapse-button-collapsed {
    border-color: #666 !important;
}

.ls-info-collapse-button-collapsed .ls-collapse-icon {
    color: #666 !important;
}

/* Hover */
.ls-info-collapse-button:hover {
    background: #fff5f5 !important;
    border-color: #d32f2f !important;
}

.ls-info-collapse-button:hover .ls-collapse-icon {
    color: #d32f2f !important;
}

/* Focus */
.ls-info-collapse-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.2) !important;
}

/* Retirer les styles GXT par défaut */
.ls-info-collapse-button .x-btn-center,
.ls-info-collapse-button .x-btn-left,
.ls-info-collapse-button .x-btn-right {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ============================================
   TITRE "INFORMATIONS"
   ============================================ */

.ls-info-title-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 32px; /* Aligné avec le bouton */
}

.ls-info-title-text-collapsed {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

/* ============================================
   BOUTONS D'ONGLETS
   ============================================ */

.ls-info-tab-buttons {
    display: flex;
    flex-direction: row;
    background: white;
    border-bottom: 2px solid #e8e8e8;
    padding: 0 15px;
    gap: 25px;
    align-items: flex-end;
    height: auto !important;
}

.ls-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: -2px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ls-tab-btn button {
    background: transparent !important;
    border: none !important;
    padding: 8px 5px !important;
    cursor: pointer !important;
}

/* BOUTON PRINCIPALE */
.ls-info-tab-buttons .ls-tab-btn-principale:not(.ls-tab-btn-active) span.lib {
    color: #304287 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.ls-info-tab-buttons .ls-tab-btn-principale.ls-tab-btn-active {
    border-bottom: 3px solid #e53935 !important;
}

.ls-info-tab-buttons .ls-tab-btn-principale.ls-tab-btn-active span.lib {
    color: #e53935 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* BOUTON COMPLÉMENT */
.ls-info-tab-buttons .ls-tab-btn-complement:not(.ls-tab-btn-active) span.lib {
    color: #304287 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.ls-info-tab-buttons .ls-tab-btn-complement.ls-tab-btn-active {
    border-bottom: 3px solid #e53935 !important;
}

.ls-info-tab-buttons .ls-tab-btn-complement.ls-tab-btn-active span.lib {
    color: #e53935 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Hover sur les onglets */
.ls-tab-btn-principale:hover span.lib {
    color: #e53935 !important;
}

.ls-tab-btn-complement:hover span.lib {
    color: #5c6bc0 !important;
}

/* Retirer les styles GXT */
.ls-tab-btn button.com-legalsuite-core-client-widgets-LsButton-ComponentResources-Style-btnModifier {
    background-color: transparent !important;
}

.ls-tab-btn .x-btn-center,
.ls-tab-btn .x-btn-left,
.ls-tab-btn .x-btn-right {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    padding: 0 !important;
}



/* Header en mode collapsed - juste pour le bouton */
.ls-info-panel-collapsed .ls-info-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 5px;
    height: 100% !important; /* PAS 100% */
    min-height: auto !important;
    border-bottom: none;
    background: #ffffff;
}

.ls-info-panel-collapsed .ls-info-header:has(> .ls-info-header-with-banner) {
    padding-top: 10px !important;
}

.ls-info-panel-collapsed .ls-info-header-title-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Bouton de collapse en mode collapsed - en HAUT */
.ls-info-panel-collapsed .ls-info-collapse-button {
    width: 32px !important;
    height: 32px !important;
    margin: 5px 0 10px 0 !important;
}

/* Container du titre vertical - APRÈS le header */
.ls-info-panel-collapsed .ls-info-title-text-collapsed {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 16px;
    color: #304287 !important; /* Bleu violet comme dans la maquette */
    white-space: nowrap;
    line-height: 1.4;
    text-align: center;
    padding: 100px 0;
    display: block;
    width: 100%;
}
.ls-info-complements-card {
    width: 100% !important;
    height: auto !important; /* CHANGÉ de 100% à auto */
    min-height: 400px !important;
    padding: 0 !important;
    overflow: auto !important;
}

/* Panel contenant le FileCommonAreaBase */
.ls-info-common-area-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
    background: white !important;
}

.ls-info-common-area-panel .x-panel-body {
    background: white !important;
    overflow: visible !important;
    height: auto !important; /* IMPORTANT */
/*     min-height: 400px !important; */
}

/* Forcer le formulaire à prendre toute la hauteur */
.ls-info-common-area-panel .ls-file-common {
    height: auto !important;
    min-height: 400px !important;
}

.ls-info-common-area-panel .x-panel-bwrap {
    height: auto !important;
}
/* Permettre le scroll dans les cards */
.ls-info-principales-card,
.ls-info-complements-card {
    width: auto !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Panel dans Complément */
.ls-info-common-area-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
}

.ls-info-common-area-panel .x-panel-body {
    overflow: visible !important;
}

/* Colonne : header + tabs fixes, le reste scroll */
.ls-info-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* CRITIQUE en flex */
}

.ls-info-tab-buttons{
  flex: 0 0 auto;
}

.ls-info-card-container{
  flex: 1 1 auto;
  min-height: 0;         /* CRITIQUE */
  overflow-y: auto;      /* seul scroll ici */
  overflow-x: hidden;
  background-color: #ffffff;
}

/* Les cartes ne doivent PAS gérer le scroll ni forcer 100% */
.ls-info-principales-card,
.ls-info-complements-card{
  height: auto !important;
  overflow: visible !important;
}


/* =========================================================
   FIX VISUEL READONLY vs EDITABLE dans FileCommonAreaBase
   (uniquement dans le volet Informations)
   ========================================================= */

/* Base : tous les champs du volet (wrap trigger, input, textarea) */
.ls-info-panel-final .ls-file-common .x-form-field-wrap,
.ls-info-panel-final .ls-file-common .x-trigger-wrap{
  /* border: 1px solid #d0d5dd !important; */
  border-radius: 4px !important;
  background: #ffffff !important;
}

/* Inputs/textarea à l’intérieur */
.ls-info-panel-final .ls-file-common input.x-form-field,
.ls-info-panel-final .ls-file-common textarea.x-form-field{
  background: transparent !important;
  color: #101828 !important;
}

/* -------- READONLY / DISABLED = gris + “pas editable” -------- */
/* .ls-info-panel-final .ls-file-common .x-form-readonly, */
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-item-disabled,
/* .ls-info-panel-final .ls-file-common .x-form-readonly .x-form-field-wrap, */
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-item-disabled .x-form-field-wrap,
/* .ls-info-panel-final .ls-file-common .x-form-readonly .x-trigger-wrap, */
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-item-disabled .x-trigger-wrap{
  background: #f2f4f7 !important;
  border-color: #e4e7ec !important;
}

.ls-info-panel-final .ls-file-common .x-form-readonly input,
.ls-info-panel-final .ls-file-common .x-form-readonly textarea,
.ls-info-panel-final .ls-file-common .x-item-disabled input,
.ls-info-panel-final .ls-file-common .x-item-disabled textarea,
.ls-info-panel-final .ls-file-common input[readonly],
.ls-info-panel-final .ls-file-common textarea[readonly],
.ls-info-panel-final .ls-file-common input[disabled],
.ls-info-panel-final .ls-file-common textarea[disabled]{
  color: #667085 !important;
  cursor: not-allowed !important;
}

/* -------- EDITABLE = blanc + focus visible -------- */
.ls-info-panel-final .ls-file-common .x-form-field-wrap:not(.x-form-readonly):not(.x-item-disabled):hover,
.ls-info-panel-final .ls-file-common .x-trigger-wrap:not(.x-form-readonly):not(.x-item-disabled):hover{
  border-color: #98a2b3 !important;
}

.ls-info-panel-final .ls-file-common .x-trigger-wrap-focus,
.ls-info-panel-final .ls-file-common .x-form-focus{
  border-color: #3f51b5 !important;
  box-shadow: 0 0 0 2px rgba(63,81,181,.15) !important;
  background: #ffffff !important;
}

/* -------- IMPORTANT : ne pas casser les LISTES de combo -------- */
/* (on évite d’appliquer nos backgrounds/borders dans la dropdown) */
.ls-info-panel-final .x-combo-list,
.ls-info-panel-final .x-combo-list *{
  box-shadow: none;
}

.ls-info-panel-final .x-combo-list .x-combo-list-inner{
  background: #fff !important;
}
/* =========================================================
   FIX VISUEL READONLY vs EDITABLE dans FileCommonAreaBase
   (uniquement dans le volet Informations)
   ========================================================= */

/* Base : tous les champs du volet (wrap trigger, input, textarea) */
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-form-field-wrap,
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-trigger-wrap{
  border-radius: 4px !important;
  background: #ffffff !important;
}

/* Inputs/textarea à l’intérieur */
.ls-info-panel-final .ls-file-common input.x-form-field,
.ls-info-panel-final .ls-file-common textarea.x-form-field{
  background: transparent !important;
  color: #101828 !important;
}

/* -------- READONLY / DISABLED = gris + “pas editable” -------- */
/* .ls-info-panel-final .ls-file-common .x-form-readonly, */
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-item-disabled,
/* .ls-info-panel-final .ls-file-common .x-form-readonly .x-form-field-wrap, */
.ls-info-panel-final .ls-file-common .x-item-disabled .x-form-field-wrap,
/* .ls-info-panel-final .ls-file-common .x-form-readonly .x-trigger-wrap, */
.ls-info-panel-final .ls-file-common .x-item-disabled .x-trigger-wrap,
.ls-file-editmode .ls-info-panel-final .ls-file-common .x-form-field-wrap.x-form-readonly {
  background: var(--semantique-neutral-neutral-10) !important;
  border-color: #e4e7ec !important;
}

.ls-info-panel-final .ls-file-common .x-form-readonly input,
.ls-info-panel-final .ls-file-common .x-form-readonly textarea,
.ls-info-panel-final .ls-file-common .x-item-disabled input,
.ls-info-panel-final .ls-file-common .x-item-disabled textarea,
.ls-info-panel-final .ls-file-common input[readonly],
.ls-info-panel-final .ls-file-common textarea[readonly],
.ls-info-panel-final .ls-file-common input[disabled],
.ls-info-panel-final .ls-file-common textarea[disabled]{
  color: #667085 !important;
  cursor: not-allowed !important;
}

.ls-info-panel-final .ls-file-common .ls-file-common-field .ls-combo-personInCharge.x-form-readonly input,
.ls-info-panel-final .ls-file-common .ls-file-common-field .ls-combo-requester.x-form-readonly input,
.ls-info-panel-final .ls-file-common .ls-file-common-field .ls-combo-refOwningCo.x-form-readonly input,
.ls-info-panel-final .ls-file-common .ls-file-common-field .ls-combo-refOwningDpt.x-form-readonly input,
.ls-info-panel-final .ls-file-common .ls-file-common-field .ls-form-mrefOwningDpt .x-form-readonly input {
	color: rgb(31, 33, 41) !important;
}

/* -------- EDITABLE = blanc + focus visible -------- */
.ls-info-panel-final .ls-file-common .x-form-field-wrap:not(.x-form-readonly):not(.x-item-disabled):hover,
.ls-info-panel-final .ls-file-common .x-trigger-wrap:not(.x-form-readonly):not(.x-item-disabled):hover{
  border-color: #98a2b3 !important;
}

.ls-info-panel-final .ls-file-common .x-trigger-wrap-focus,
.ls-info-panel-final .ls-file-common .x-form-focus{
  border-color: #3f51b5 !important;
  box-shadow: 0 0 0 2px rgba(63,81,181,.15) !important;
  background: #ffffff !important;
}

/* -------- IMPORTANT : ne pas casser les LISTES de combo -------- */
/* (on évite d’appliquer nos backgrounds/borders dans la dropdown) */
.ls-info-panel-final .x-combo-list,
.ls-info-panel-final .x-combo-list *{
  box-shadow: none;
}

.ls-info-panel-final .x-combo-list .x-combo-list-inner{
  background: #fff !important;
}



/* =========================================================
   HEADER + BOUTON PLIER/DEPLIER (dans l'entête, couleur FA420F)
   ========================================================= */

/* Le header doit être en ligne : icône + titre */
.ls-info-header-title-container{
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
  width: 100% !important;
}

/* Bouton (wrapper GXT x-btn) */
.ls-info-collapse-button{
  flex: 0 0 auto !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  cursor: pointer !important;
}



.ls-info-collapse-button .ls-collapse-icon{
  color: #FA420F !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}


/* Hover */
.ls-info-collapse-button:hover{
  background: EEF4FF !important;
}


/* Effet hover sur le header collapsed */
.ls-info-header-collapsed:hover {
    background-color: #EEF4FF;
    transition: background-color 0.2s ease;
}

/* Effet hover sur le header expanded (si vous voulez la même couleur) */
.ls-info-header-title-container:hover {
    background-color: #EEF4FF;
    transition: background-color 0.2s ease;
}

/* Transition douce pour tous les états */
.ls-info-header-title-container,
.ls-info-header-collapsed {
    cursor: pointer !important;
    transition: background-color 0.2s ease;
    padding-top: 25px;
}

/* Optionnel : changer la couleur de l'icône au hover */
.ls-info-header-collapsed:hover .ls-collapse-icon,
.ls-info-header-title-container:hover .ls-collapse-icon {
    color: #3d64ed; /* Bleu plus foncé pour contraster */
}

/* Optionnel : changer la couleur du texte au hover */
.ls-info-header-collapsed:hover .ls-info-title-text-collapsed {
    color: #2d3748; /* Texte plus foncé pour meilleure lisibilité */
}





/* Padding uniforme pour les deux onglets */
.ls-info-principales-card .ls-info-headerline-vertical,
.ls-info-complements-card {
    padding: 12px !important;
}

/* Reset des paddings internes inutiles */
.ls-info-principales-card .x-panel-body,
.ls-info-complements-card .x-panel-body,
.ls-info-complements-card .ls-info-common-area-panel {
    padding-right: 15px !important;
}

.ls-info-complements-card .ls-file-common form {
    padding: 0 !important;
}

/* Labels : style uniforme */
.ls-info-principales-card .x-form-item-label,
.ls-info-complements-card .x-form-item-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

/* Espacement entre les champs */
.ls-info-principales-card .x-form-item,
.ls-info-complements-card .x-form-item {
    margin-bottom: 12px;
}

/* Cellules flexibles sans padding externe */
.ls-info-principales-card .flexible-cell {
    padding: 0;
}

/* Multi-référentiels avec tags */
.ls-info-principales-card .ls-multiple-ref-entry,
.ls-info-complements-card .ls-multiple-ref-entry {
    display: inline-block;
    background: #e0e7ff;
    /* color: #3730a3; */
    padding: 2px 6px;
    margin: 2px;
    border-radius: 3px;
    font-size: 12px;
}

.ls-info-principales-card .ls-multiple-ref-separator,
.ls-info-complements-card .ls-multiple-ref-separator {
    display: none;
}


/* Style de base pour tous - GARDER TEL QUEL */
.x-theme-legalsuite .ls-file-tab-menu {
    position: absolute;
    width: calc(100% - 34px);
    z-index: 100;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    gap: 4px;
    z-index: 40;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 3px rgba(63, 81, 181, 0.5);
}

/* UNIQUEMENT pour les fichiers business - EXCLURE les annuaires */
.ls-file-main-panel:not(.ls-directory-editor) .ls-file-tab-menu,
.ls-file-viewmode:not(.ls-directory-editor) .ls-file-tab-menu {
    /* Ne pas appliquer si c'est un directory-detail-container */
}

/* Appliquer SEULEMENT si le parent contient un ls-info-panel-final */
.ls-file-main-panel:has(.ls-info-panel-final) .ls-file-tab-menu {
    width: calc(100% - 328px);
}

/* Quand collapsed */
.ls-file-main-panel:has(.ls-info-panel-collapsed) .ls-file-tab-menu {
    width: calc(100% - 98px);
}

/* Alternative sans :has() - cibler directement le container parent */
.flex-layout-row:has(.ls-info-panel-final) .ls-file-tab-menu {
    width: calc(100% - 328px);
}

.flex-layout-row:has(.ls-info-panel-collapsed) .ls-file-tab-menu {
    width: calc(100% - 98px);
}

/* Exclure explicitement les annuaires */
.directory-detail-container .ls-file-tab-menu,
.ls-directory-editor .ls-file-tab-menu {
    width: calc(100% - 45px) !important;
}

/* ===== FIX ALIGNEMENT HEADER COLLAPSED ===== */

/* Réduire le padding-top du header collapsed */
.ls-info-header-with-banner.ls-info-header-collapsed {
    padding: 0 5px 10px 5px !important;
    padding-top: 15px !important;
}

.ls-info-header-collapsed > div:last-child {
	flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-info-header-collapsed {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
    padding: 0 5px 10px 5px !important;
}


.ls-info-title-text-collapsed .ls-info-title-label {
  font-weight: 600;
}


/* Aligner l'icône de collapse au même niveau */
.ls-info-header-collapsed .ls-info-collapse-icon {
	flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* Centrer l'icône horizontalement */
.ls-info-header-collapsed .ls-collapse-icon {
    display: block;
    text-align: center;
}

.ls-info-panel-expanded .ls-collapse-icon {
	padding-left: 16px;
}

/* ===== FIX ALIGNEMENT VERTICAL ONGLET PRINCIPALE ===== */

/* Forcer les champs en vertical (override les width: 25% inline) */
.ls-info-principales-card .flexible-cell {
    width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
}

/* Labels au-dessus des champs */
.ls-info-headerline-vertical .x-form-item-label {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* Champs en pleine largeur */
.ls-info-headerline-vertical .x-form-element,
.ls-info-headerline-vertical .x-form-field-wrap {
    width: 100% !important;
}

/* Inputs et selects en pleine largeur */
.ls-info-headerline-vertical input,
.ls-info-headerline-vertical textarea,
.ls-info-headerline-vertical select,
.ls-info-headerline-vertical .x-form-field-wrap,
.ls-info-headerline-vertical .x-trigger-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix la card principale pour prendre toute la hauteur disponible */
.ls-info-principales-card {
    width: 100% !important;
    height: 100% !important;
}

/* Fix le panel qui contient les champs */
.ls-info-principales-card .x-panel {
    height: auto !important;
}

.ls-info-principales-card .x-panel-body {
    height: auto !important;
}

/* Fix le headerline vertical container */
.ls-info-headerline-vertical {
    width: auto !important;
    height: auto !important;
    padding: 12px 16px !important;
}

/* Forcer flexible-body et flexible-form en block */
.ls-info-headerline-vertical .flexible-form,
.ls-info-headerline-vertical .flexible-body {
    display: block !important;
    width: 100% !important;
}

/* Espacement entre les items de formulaire */
.ls-info-headerline-vertical .x-form-item {
    margin-bottom: 12px !important;
}

/* ===== FIX PADDING HEADER ===== */
.ls-info-header {
    min-height: auto !important;
}

.ls-info-header-title-container {
    padding-top: 8px !important;
    padding-bottom: 5px !important;
}

.ls-info-header-title-container.ls-info-header-with-banner {
    padding-top: 38px !important;
    padding-bottom: 5px !important;
}
/* Hide flexible-cell when its child is hidden by displayCondition */
.ls-info-headerline-vertical .flexible-cell:has(.x-hide-display) {
  display: none !important;
}