/* ============================== */
/*   Style of the research part   */
/* ============================== */

.search-header-bar {
    /*background-color: #ffffff !important;*/
    padding-top: 1px;
    /*min-height: 60px !important;*/
    /*max-height: 60px !important;*/
    /*height: 60px !important;*/
    box-sizing: border-box !important;
    overflow: hidden !important;
    
    /* Flexbox layout direct */
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Correction pour éviter l'expansion en hauteur */
.search-header-bar * {
    flex-shrink: 0 !important;
}

/* Label de résultats */
.search-header-bar .ls-search-total {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #495057 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    min-width: fit-content !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.search-header-bar .ls-search-tab-btn,
.search-header-bar .ls-search-tab-btn > button {
	width: fit-content;
    min-width: 100px !important;
    max-width: 220px !important;
}

/* ——————————————————————————————————————————————————— */
/* 1) Conteneur : flex + dimensions, sans border */
/* ——————————————————————————————————————————————————— */
.search-header-bar > .ls-search-tab-btn,
.search-header-bar > .header-widget-btn {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  width: fit-content !important;
  min-width: 100px !important;
  max-width: 220px !important;
  padding: 0 12px !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  border: none !important;   /* plus de border ici */
}

/* ——————————————————————————————————————————————————— */
/* 2) Contenu : texte/icone + border propre */
/* ——————————————————————————————————————————————————— */
.search-header-bar > .ls-search-tab-btn > button,
.search-header-bar > .header-widget-btn > div:first-child {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #6c757d !important;
  background: transparent !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  gap: 6px !important;

  /* La bordure est ici, sur l’élément interne */
  border: 1px solid #6c757d !important;
  box-sizing: border-box !important;
  margin: 0px;
  padding: 6px;
}

/* ——————————————————————————————————————————————————— */
/* 3) Hover identique pour tous */
/* ——————————————————————————————————————————————————— */
.search-header-bar > .ls-search-tab-btn > button:hover,
.search-header-bar > .header-widget-btn > div:first-child:hover {
  border-color: #495057 !important;
  color: #495057 !important;
  background-color: #f8f9fa !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;
}

/* Reset des styles GXT pour les boutons */
.search-header-bar .x-btn,
.search-header-bar .x-component {
    margin: 0 !important;
    padding: 0 !important;
    height: 32px !important;
    /*min-height: 36px !important;*/
    max-height: 32px !important;
    flex-shrink: 0 !important;
}

.search-header-bar .search-header-spacer {
    flex: 1 1 auto !important;
}

.search-header-bar .x-btn button {
	display: flex;
	align-items: center;
    height: 32px;
    /*min-height: 36px;*/
    max-height: 32px;
    padding: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 0px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
    color: #495057 !important;
    cursor: pointer !important;
    min-width: 100px !important;
    max-width: 220px !important;
}

.search-header-bar .ls-search-tab-btn .halflings {
  margin-right: 6px;
}

/* Boutons principaux (Dossiers/Documents) - État par défaut (GRIS) */
.search-header-bar .header-main-btn button {
    color: #6c757d !important;
    background-color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Boutons principaux - Hover (gris plus foncé) */
.search-header-bar .header-main-btn button:hover {
    border-color: #495057 !important;
    color: #495057 !important;
    /*
    background-color: #f8f9fa !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2) !important;*/
}

/* Boutons principaux - État ACTIF/SÉLECTIONNÉ (BLEU) */
.search-header-bar .header-main-btn.active button,
.search-header-bar .header-main-btn.x-btn-pressed button {
    /*background-color: #304287 !important;*/
    color: rgba(61, 100, 237, 1) !important;
    border: 2px solid;
    border-color: rgba(61, 100, 237, 1) !important;
    /*box-shadow: 0 3px 6px rgba(48, 66, 135, 0.3) !important;
    transform: translateY(-1px) !important;*/
}

/* Changer la couleur de l’icône dans le bouton actif */
.search-header-bar .header-main-btn.active .halflings-folder-open,
.search-header-bar .header-main-btn.x-btn-pressed .halflings-folder-open {
    color: rgba(61, 100, 237, 1) !important;
}

/* Pour appliquer le changement de couleur sur le texte dans le bouton actif */
.search-header-bar .header-main-btn.active span,
.search-header-bar .header-main-btn.x-btn-pressed span {
  color: rgba(61,100,237,1) !important;
}

/* Boutons principaux actifs - Hover (reste bleu) */
.search-header-bar .header-main-btn.active button:hover {
	/*
    background-color: #253569 !important;
    border-color: #253569 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(48, 66, 135, 0.4) !important;*/
}

/* Boutons d'action */
.search-header-bar .header-action-btn.save-btn button,
.search-header-bar .header-action-btn.reinit-btn button {
    background-position: left !important;
    padding-left: 30px !important;
    border: none !important;
    color: var(--semantique-neutral-neutral-50) !important;
}

.search-header-bar .header-action-btn.save-btn button {
	background: url(../gxt/themes/legalsuite/images/legalsuite/button/save.png) no-repeat;
}

.search-header-bar .header-action-btn.reinit-btn button {
	background: url(../gxt/themes/legalsuite/images/legalsuite/button/change.png) no-repeat;
}

.search-header-bar .header-action-btn + .header-action-btn {
    margin-left: 16px !important;
}

.search-header-bar .header-widget-btn button {
    background-color: rgba(61, 100, 237, 0.1) !important;
    border: 1px solid rgba(61, 100, 237, 0.3) !important;
    color: rgba(61, 100, 237, 1) !important;
    min-width: 120px !important;
    max-width: 160px !important;
}

.search-header-bar .header-widget-btn button:hover {
    background-color: rgba(61, 100, 237, 0.15) !important;
    border-color: rgba(61, 100, 237, 0.5) !important;
}

.ls-result-info-bar .ls-button span.lib {
	display: flex;
	gap: 4px;
	align-items: center;
}

.ls-result-info-bar .ls-button span.halflings {
	top: 0px;
}

.ls-search-result .ls-result-info-bar .ls-button {
	display: flex;
}

.ls-search-result .ls-result-info-bar .ls-button button {
	display: flex;
	align-items: center;
	border-radius: 8px;
}

/* Premier bouton (Gérer les colonnes) */
.ls-search-result .ls-result-info-bar .ls-button:nth-of-type(1) button {
  color: rgba(61, 100, 237, 1) !important;
}

/* Deuxième bouton (Action en masse) */
.ls-search-result .ls-result-info-bar .ls-button:nth-of-type(2) button {
  color: white !important;
  background-color: rgba(61, 100, 237, 1) !important;
}

/* Corrections GXT importantes */
.search-header-bar .x-panel-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.search-header-bar .x-box-inner {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.search-header-bar .x-box-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive - Tablette */
@media (max-width: 1024px) {
    .search-header-bar {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    
    .search-header-bar .x-btn button {
        font-size: 13px !important;
        padding: 5px 10px !important;
        min-width: 90px !important;
        max-width: 130px !important;
    }
    
    .search-header-bar .ls-search-total {
        font-size: 15px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .search-header-bar {
        flex-wrap: wrap !important;
        height: auto !important;
        max-height: none !important;
        min-height: 80px !important;
        padding: 8px !important;
        gap: 6px !important;
    }
    
    .search-header-bar .ls-search-total {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
    }
    
    .search-header-bar .x-btn {
        flex: 1 !important;
        min-width: calc(33.33% - 4px) !important;
        max-width: calc(33.33% - 4px) !important;
    }
    
    .search-header-bar .x-btn button {
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}



/* Forces pour éviter les conflits GXT */
.search-header-bar > .x-component {
    /* position: static !important;
    float: none !important;
    clear: none !important; */
}

/* Désactiver les layouts automatiques GXT */
.search-header-bar .x-layout-container {
    position: static !important;
    overflow: visible !important;
}

.search-header-bar table {
    display: none !important;
}

/* Animation états actifs */
.search-header-bar .x-btn:hover button {
    transform: translateY(-1px) !important;
}

.search-header-bar .x-btn:focus {
    outline: 2px solid #304287 !important;
    outline-offset: 2px !important;
}


.no-menu-arrow .x-menu-item-icon,
.no-menu-arrow .x-menu-item-arrow {
    display: none !important;
}

.no-menu-arrow {
    background-image: none !important;
}

.x-menu-item.no-menu-arrow:after {
    display: none !important;
}
/************************* CSS moderne pour les criteria tips **************/
/***************************************************************************/

.ls-modern-criteria-tip {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid #e1e8ed;
    background: #ffffff;
    overflow: hidden;
}

.ls-modern-criteria-tip .x-window-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 20px !important;
}

.criteria-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: white !important;
    font-weight: 600 !important;
}



/* Style pour le bouton moderne */
.modern-validate-btn {
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
}

/* Animation d'apparition */
.criteria-tip-enter {
    animation: slideInScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes slideInScale {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Feedback visuel après ajout */
.criteria-added-feedback {
    background-color: rgba(34, 197, 94, 0.1) !important;
    transition: background-color 0.6s ease !important;
}

/* Styles responsive pour mobile */
@media (max-width: 767px) {
    .ls-modern-criteria-tip {
        margin: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: 500px !important;
    }
    
    .ls-modern-criteria-tip .x-window-header {
        padding: 12px 16px !important;
    }
    
    .modern-combo,
    .modern-field {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .modern-validate-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}


.x-menu-item:hover {
    background-color: #f8fafc !important;
}

/* Suppression des flèches pour le menu "Tout sélectionner"  recherche module */
.no-menu-arrow .x-menu-item-icon,
.no-menu-arrow .x-menu-item-arrow {
    display: none !important;
}

.no-menu-arrow {
    background-image: none !important;
}

.x-menu-item.no-menu-arrow:after {
    display: none !important;
}

/* Style pour les tooltips avec backdrop mobile */
.mobile-criteria-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 999 !important;
    animation: backdropFadeIn 0.3s ease !important;
}

@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ls-modern-criteria-tip .x-tip-tl {
	padding-left: 0px;
}

.ls-modern-criteria-tip .x-tip-tr {
	padding-right: 0px;
}

.ls-modern-criteria-tip .x-tip-tc {
	padding-top: 0px;
}

.ls-transverse-criteria .x-small-editor.x-tip-header {
	padding: 16px;
}

.ls-transverse-criteria .ls-combo-styled.combo-field input.x-form-field,
.ls-transverse-criteria .ls-combo-styled.operator-field input.x-form-field {
  width: 160px !important;
}

.ls-transverse-criteria .dynamic-field.ls-combo-styled > .x-form-field-wrap > input.x-form-field.x-form-text {
	height: 32px !important;
	width: 100% !important;
}

.value-field-wrapper {
	height: 32px;
    display: flex;
    align-items: center;
    width: 160px !important;
}

/* div.x-ignore.x-tip.ls-tooltip.ls-modern-criteria-tip.ls-transverse-criteria.x-component
  > div.x-tip-bwrap
  > div.x-tip-ml
  > div.x-tip-mr
  > div.x-tip-mc
  > div.x-tip-body {
    display: flex;
    flex-direction: column;
    align-items: center
} */
/* Champs normaux */
.ls-transverse-criteria .ls-combo-styled.combo-field:not(.ls-date-with-compare) input.x-form-field,
.ls-transverse-criteria .ls-combo-styled.operator-field:not(.ls-date-with-compare) input.x-form-field,
.ls-transverse-criteria .ls-combo-styled.dynamic-field:not(.ls-date-with-compare) input.x-form-field {
  width: 160px !important;
  height: 32px !important;
    padding-right: 25px !important;
  
}

/* Fix spécifique pour le champ date (empêche les overrides) */
.ls-transverse-criteria .ls-date-with-compare input.x-form-field {
  width: auto !important;
  min-width: 30px !important;
  max-width: 100% !important;
  height: 28px !important; 
}

.x-form-field-wrap .ls-date-with-compare.x-form-text {
    padding-right: 12px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}




.ls-combo-personInCharge  input.x-form-field.x-form-text,
.ls-combo-nature  input.x-form-field.x-form-text,
.ls-combo-status input.x-form-field.x-form-text {
  height: 32px !important;
  width: 140px !important; 
  font-size: 13px !important; 
  box-shadow: none !important; 
}

/* *************TEST concernant la recherche  *************/
.searche-filter-bar {
	height: 150px;
}
.search-header-and-filter-bar {
	display: flex;
	flex-direction: column;
	padding: 16px;
	gap: 16px;
	background-color: white;
	/*border: 1px solid red;*/
}
.fb-main-container{
	background-color: white;
}

.all-toggle{
	padding-left : 10px !important;
}


.ls-transverse-criteria  .x-form-group .ls-combo-styled[style*="width: 45px"] {
    width: 65px !important; /* Forcer une largeur plus grande */ 
    box-shadow: none !important;
}

.ls-transverse-criteria .x-form-group .ls-combo-styled[style*="width: 45px"] input {
    width: 45px !important;
    text-align: center !important;
    font-weight: bold !important; /* Rendre le + et - plus visible */
    font-size: 14px !important;
}


/* Ajuster le padding des cellules */
.ls-transverse-criteria td .ls-combo-styled.small-left-gap {
    margin-left: 3px !important;
}


.ls-transverse-criteria .x-spinner-field.small-bottom-gap {
    margin-bottom: 0 !important;
}



/* Wrapper du spinner */
.ls-transverse-criteria .x-spinner-field {
  position: relative !important;
  width: 64px !important;        /* > 56 si tu veux plus large */
  min-width: 64px !important;
  height: 30px !important;
  overflow: hidden !important;
}

/* Input numérique à l'intérieur */
.ls-transverse-criteria .x-spinner-field > input.x-form-text {
  width: 100% !important;        /* écrase le width:13px inline */
  height: 30px !important;
  line-height: 30px !important;
  padding-right: 22px !important;
  box-sizing: border-box !important;
  text-align: right;             
}

.date-compare-btn {
	background: url(../gxt/themes/legalsuite/images/legalsuite/form/calcul.png) no-repeat center center !important;
    background-size: 24px 24px !important;
    height: 24px;
    width: 34px !important;
}

.menu-category {
  color: #666 !important;
  font-weight: bold;
  cursor: default !important;
  pointer-events: none; /* bloque les clics */
  opacity: 0.9;
  margin-left: 10px;            /* décale le texte vers la droite */
  margin-right: 6px;            /* espace respirant à droite */
}

.menu-item-selected {
  font-weight: bold;
  padding: 3px 21px 3px 27px;
  color: #004080; /* bleu foncé élégant */
}