/*==============================================================================
 * PROSPECTOR - FEUILLE DE STYLE DES COMPOSANTS
 * Ce fichier contient des styles génériques pour les composants utilisés 
 * dans toute l'application
 *============================================================================*/

/*------------------------------------------------------------------------------
 * VARIABLES GLOBALES
 * Définition des variables CSS utilisées dans toute l'application
 *----------------------------------------------------------------------------*/
:root {
    /* Palette de couleurs principale - s'adapte au thème actif */
    --color-background: var(--mud-palette-background);
    --color-border-light: var(--mud-palette-background);
    --color-border-input-light: var(--mud-palette-lines-inputs);
    --color-white: var(--mud-palette-surface);
    --color-border-hover: rgba(var(--mud-palette-primary-rgb), 0.2);
    --color-primary: var(--mud-palette-primary);
}

/*------------------------------------------------------------------------------
 * CARTES ET CONTENEURS
 * Styles pour les cartes et conteneurs utilisés dans plusieurs composants
 *----------------------------------------------------------------------------*/
/* Styles pour les cartes */
.card-clean {
    background-color: var(--color-white) !important;
    border-radius: var(--mud-default-borderradius);
    border-radius: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.card-clean.clickable {
    cursor: pointer;
}

/* Styles pour les conteneurs */
.container-bg {
    background-color: var(--color-background) !important;
}

/*------------------------------------------------------------------------------
 * BOUTONS
 * Styles pour les boutons MudButton avec apparence épurée sans ombre
 *----------------------------------------------------------------------------*/
/* Styles pour les boutons sans ombre */
.button-clean {
    box-shadow: none !important;
    border-radius: var(--mud-default-borderradius);
}

.button-clean:hover {
    box-shadow: none !important;
}

/* Styles spécifiques pour les boutons outlined sans ombre */
.button-clean.mud-button-outlined {
    border: 1px solid;
}

/* Styles spécifiques pour les boutons filled sans ombre */
.button-clean.mud-button-filled {
    border: none;
}

/*------------------------------------------------------------------------------
 * ICONES DE CHAT
 * Styles pour les icônes des composants de chat
 *----------------------------------------------------------------------------*/
 .chat-icon-button {
    background-color: var(--mud-palette-background-grey) !important;
    border: 1px solid var(--mud-palette-lines-inputs) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease-in-out;
}

.chat-icon-button:hover {
    background-color: rgba(var(--mud-palette-lines-inputs), 0.1) !important;
    border-color: rgba(var(--mud-palette-primary-rgb), 0.3) !important;
}

/*------------------------------------------------------------------------------
 * CHAT INPUT BOX
 * Styles pour le champ de saisie de message dans le chat
 *----------------------------------------------------------------------------*/
/* Variables pour les couleurs des bordures */
:root {
    --chat-input-border-color: var(--mud-palette-lines-inputs);
    --chat-input-hover-color: rgba(var(--mud-palette-lines-inputs-rgb), 0.3);
    --chat-input-focus-color: rgba(var(--mud-palette-primary-rgb), 0.5);
}


/* Styles de base pour les champs de texte */
.chat-input-box .mud-input-outlined-border,
.chat-input-box.mud-input-outlined-border,
.chat-input-box .mud-input.mud-input-outlined {
    border-color: var(--chat-input-border-color) !important;
}

/* État de survol */
.chat-input-box:hover .mud-input-outlined-border,
.chat-input-box .mud-input:hover .mud-input-outlined-border,
.chat-input-box.mud-input:hover .mud-input-outlined-border,
.chat-input-box .mud-input-outlined:hover {
    border-color: var(--input-hover-color) !important;
}

/* État de focus */
.chat-input-box .mud-input.mud-input-focused .mud-input-outlined-border,
.chat-input-box.mud-input-focused .mud-input-outlined-border,
.chat-input-box .mud-input-outlined.mud-input-focused {
    border-color: var(--input-focus-color) !important;
}

/*------------------------------------------------------------------------------
 * CHAMPS DE TEXTE
 * Styles pour les champs de texte MudTextField avec apparence épurée
 *----------------------------------------------------------------------------*/
/* Styles pour les champs de texte */
:root {
    --input-border-color: var(--mud-palette-lines-inputs);
    --input-hover-color: var(--input-border-color);
    --input-focus-color: rgba(var(--mud-palette-primary-rgb), 0.7);
}

/* Styles de base pour les champs de texte */
.input-clean .mud-input-outlined-border,
.input-clean.mud-input-outlined-border,
.input-clean .mud-input.mud-input-outlined {
    border-color: var(--input-border-color) !important;
}

/* État de survol */
.input-clean:hover .mud-input-outlined-border,
.input-clean .mud-input:hover .mud-input-outlined-border,
.input-clean.mud-input:hover .mud-input-outlined-border,
.input-clean .mud-input-outlined:hover {
    border-color: var(--input-hover-color) !important;
}

/* État de focus */
.input-clean .mud-input.mud-input-focused .mud-input-outlined-border,
.input-clean.mud-input-focused .mud-input-outlined-border,
.input-clean .mud-input-outlined.mud-input-focused {
    border-color: var(--input-focus-color) !important;
}

/*------------------------------------------------------------------------------
 * MENU DE NAVIGATION (DRAWER)
 * Styles pour le menu de navigation principal dans MainLayout.razor
 *----------------------------------------------------------------------------*/
/* Suppression du trait vertical du drawer */
.drawer-no-border {
    border-right: none !important;
    box-shadow: none !important;
}

.drawer-no-border .mud-drawer-content {
    border-right: none !important;
    box-shadow: none !important;
}

/*------------------------------------------------------------------------------
 * COMPOSANTS DE CHAT
 * Styles pour les composants de chat et d'assistant IA
 * Utilisés dans: Components/Chat/ChatRoom.razor et AIAssistantRoom.razor
 *----------------------------------------------------------------------------*/
/* Styles pour le composant AIAssistantRoom */
.generic-chat-room-container {
    margin-left: 0;
    padding-left: 20px;
    overflow: hidden;
}

/* Colonne gauche avec fond blanc */
.generic-chat-room-container .left-column {
    background-color: transparent;
    padding: 18px;
    border-right: none;
    width: 420px !important;
    min-width: 420px !important;
    flex: 0 0 420px !important;
    height: calc(100vh - 1px);
}

/* Style pour la version flottante de la colonne de gauche */
.left-column-floating {
    background-color: transparent !important;
    padding: 8px 16px 8px 8px !important;
}

.left-column-floating .white-background {
    border-radius: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    height: calc(100% - 16px) !important;
    margin: 8px 0;
}

/* Colonne droite avec fond background */
.generic-chat-room-container .right-column {
    background-color: var(--color-background);
    padding: 16px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(100% - 420px);
    width: calc(100% - 420px) !important;
    height: calc(100vh - 1px);
}

/* Styles pour les avatars et icônes */
.generic-chat-room-container .mud-avatar {
    border: none;
    box-shadow: none;
}

/* Styles pour les listes d'éléments */
.generic-chat-room-container .chat-entity-item,
.generic-chat-room-container .entity-list-item {
    border-radius: var(--mud-default-borderradius);
    transition: background-color 0.2s ease;
    margin-bottom: 8px;
    padding: 8px 12px;
}

.generic-chat-room-container .chat-entity-item:hover,
.generic-chat-room-container .entity-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
    cursor: pointer;
}

.generic-chat-room-container .chat-entity-item.selected,
.generic-chat-room-container .entity-list-item.selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* Styles pour les messages */
.generic-chat-room-container .message-bubble {
    border-radius: var(--mud-default-borderradius);
    box-shadow: none;
    border: none;
}

/* Styles pour la barre d'en-tête */
.generic-chat-room-container .chat-header-bar {
    background-color: transparent;
    padding: 12px 0;
}

/* Fond blanc pour la colonne gauche */
.white-background {
    background-color: var(--color-white);
}


/*------------------------------------------------------------------------------
 * MENU FLOTTANT
 * Styles pour le menu flottant avec bords arrondis dans MainLayout.razor
 * Effet visuel d'espace autour du menu sans affecter la mise en page
 *----------------------------------------------------------------------------*/
/* Style pour le menu flottant avec marges */
.drawer-floating {
    margin: 12px 12px 12px 12px !important;
    border-radius: 12px !important;
    background-color: var(--color-white) !important;
    overflow: hidden !important;
    transition: margin 0.2s ease, width 0.2s ease;
    height: calc(100% - 24px) !important;
}

/* Suppression de toutes les ombres du drawer */
.mud-drawer,
.mud-drawer-content,
.mud-drawer-overlay {
    box-shadow: none !important;
}


/* Fond de couleur background pour la colonne droite */
.background-color {
    background-color: var(--color-background);
}

/*------------------------------------------------------------------------------
 * LISTES D'ENTITÉS
 * Styles pour les composants de liste d'entités (conversations, agents IA)
 * Utilisés dans: Components/Chat/Shared/ChatEntityList.razor et ConversationList.razor
 *----------------------------------------------------------------------------*/
/* Styles pour le composant ChatEntityList */
.entity-list-container {
    background-color: var(--color-white);
}

/* Styles pour le champ de recherche dépliant */
.search-field-container {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.search-field-container.expanded {
    max-height: 80px;
    opacity: 1;
}

.search-field-container.collapsed {
    max-height: 0;
    opacity: 0;
}

.entity-list-header {
    padding-bottom: 8px;
    margin-bottom: 8px;
}

/* Style pour les éléments de la liste */
.entity-list-item {
    border-radius: var(--mud-default-borderradius);
    transition: background-color 0.2s ease;
    padding: 8px 16px;
    margin-bottom: 4px;
    cursor: pointer;
}

.entity-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

.entity-list-item.selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}