/* =========================================
   hall.css
   HALL - STYLE GENERAL
   Compatible avec themes.css
   Couleurs locales au Hall
   ========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 15px;

    background: var(--background-color);
    color: var(--text-color);
}

/* =========================================
   COULEURS LOCALES DES SIX THEMES
   Ne modifie pas themes.css
   ========================================= */

/* BLEU CIEL - serverblue dans ton HTML */

body[data-theme="serverblue"] {
    --primary-color: #082b52;
    --secondary-color: #103456;
    --third-color: #020b16;
    --fourth-color: #e8f4ff;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #0b5fa5;
    --button-color: #ffffff;

    --userlist-background-color: var(--secondary-color);
    --userlist-color: #ffffff;

    --select-background: #06182d;
    --select-color: #ffffff;

    --border-color: #1b6ca8;
    --hover-color: #1684d8;
}

/* BLEU */

body[data-theme="blue"] {
    --primary-color: #c2dbf2;
    --secondary-color: #003d80;
    --third-color: #b0d4f1;
    --fourth-color: #00264d;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #003d80;
    --button-color: #ffffff;

    --userlist-background-color: var(--secondary-color);
    --userlist-color: #ffffff;

    --select-background: var(--third-color);
    --select-color: var(--fourth-color);

    --border-color: #8bb9df;
    --hover-color: #0056a8;
}

/* ROSE */

body[data-theme="pink"] {
    --primary-color: #fadadd;
    --secondary-color: #d883a6;
    --third-color: #ffe4e9;
    --fourth-color: #713854;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #a94d73;
    --button-color: #ffffff;

    --userlist-background-color: var(--secondary-color);
    --userlist-color: #ffffff;

    --select-background: var(--third-color);
    --select-color: var(--fourth-color);

    --border-color: #d99bb1;
    --hover-color: #873b5d;
}

/* MAUVE */

body[data-theme="mauve"] {
    --primary-color: #eadaf5;
    --secondary-color: #c8a2d6;
    --third-color: #f3eafd;
    --fourth-color: #59416f;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #76518c;
    --button-color: #ffffff;

    --userlist-background-color: #a982bd;
    --userlist-color: #ffffff;

    --select-background: var(--third-color);
    --select-color: var(--fourth-color);

    --border-color: #c8a2d6;
    --hover-color: #624176;
}

/* CLAIR */

body[data-theme="light"] {
    --primary-color: #d0d0d0;
    --secondary-color: #a6a6a6;
    --third-color: #ffffff;
    --fourth-color: #333333;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #666666;
    --button-color: #ffffff;

    --userlist-background-color: #777777;
    --userlist-color: #ffffff;

    --select-background: #ffffff;
    --select-color: #333333;

    --border-color: #a6a6a6;
    --hover-color: #444444;
}

/* NUIT */

body[data-theme="dark"] {
    --primary-color: #333333;
    --secondary-color: #444444;
    --third-color: #111111;
    --fourth-color: #dddddd;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #555555;
    --button-color: #ffffff;

    --userlist-background-color: #444444;
    --userlist-color: #ffffff;

    --select-background: #333333;
    --select-color: #ffffff;

    --border-color: #555555;
    --hover-color: #666666;
}

/* BLEU GLACIER */


body[data-theme="glacier"] {
--primary-color: #A9C0D4;
--secondary-color: #91AEC6;
--third-color: #DCE7EF;
--fourth-color: #26394D;

--background-color: var(--third-color);
--text-color: var(--fourth-color);

--button-background: #A9C0D4;
--button-color: #26394D;

--userlist-background-color: #DCE7EF;
--userlist-color: #26394D;

--select-background: #DCE7EF;
--select-color: #26394D;

--border-color: #B8CAD9;
--hover-color: #91AEC6;

}
/* CREME DOUX */

body[data-theme="creme"] {
    --primary-color: #d6c9b5;
    --secondary-color: #b5a58e;
    --third-color: #eee5d6;
    --fourth-color: #403b34;

    --background-color: var(--third-color);
    --text-color: var(--fourth-color);

    --button-background: #c2ae91;
    --button-color: #403b34;

    --userlist-background-color: #eee5d6;
    --userlist-color: #403b34;

    --select-background: #eee5d6;
    --select-color: #403b34;

    --border-color: #d5c8b5;
    --hover-color: #a99579;
}


/* =========================================
   ENTETE
   ========================================= */

.hall-header {
    flex: 0 0 auto;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--primary-color);
    color: var(--fourth-color);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.hall-header h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: bold;
}

.hall-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* =========================================
   BOUTONS ET SELECT
   ========================================= */

button,
select {
    font: inherit;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 7px 10px;
}

button {
    background: var(--button-background);
    color: var(--button-color);
    cursor: pointer;
    transition: background 0.15s ease;
}

button:hover {
    background: var(--hover-color);
    color: var(--fourth-color);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

select {
    background: var(--select-background);
    color: var(--select-color);
    cursor: pointer;
}

input,
textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--select-background);
    color: var(--select-color);
    font: inherit;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* =========================================
   STRUCTURE PRINCIPALE
   ========================================= */

.hall-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
}

/* =========================================
   PANNEAUX LATERAUX
   ========================================= */

.hall-sidebar {
    min-width: 0;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    background: var(--third-color);
    color: var(--fourth-color);
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.hall-sidebar h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    color: var(--fourth-color);
}

.hall-sidebar label {
    display: block;
    margin-bottom: 8px;
}

.hall-sidebar select {
    width: 100%;
    margin-bottom: 10px;
}

#user-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#user-list li {
    padding: 7px 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--border-color);
    overflow-wrap: anywhere;
    color: var(--userlist-color);
}

/* =========================================
   ZONE CENTRALE
   ========================================= */

.hall-main {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: hidden;
    background: var(--third-color);
    color: var(--fourth-color);
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

/* Elements conserves pour hall.js mais invisibles */

#current-room,
#connection-status {
    display: none;
}

/* =========================================
   MESSAGES
   ========================================= */

.messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    margin: 10px 0;
    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow-wrap: anywhere;
}

.message {
    padding: 5px 3px;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.45;
}

.message-pseudo {
    color: var(--fourth-color);
    font-weight: bold;
}

.message-time {
    opacity: 0.7;
    font-size: 0.82rem;
    margin-right: 5px;
}

.welcome-message {
    color: var(--text-color);
}

/* =========================================
   SAISIE DES MESSAGES
   ========================================= */

#message-form {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

#message-input {
    flex: 1;
    min-height: 40px;
}

#send-button {
    min-width: 75px;
}

/* =========================================
   INSCRIPTION
   ========================================= */

.registration-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.55);
}

.registration-box {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px;
    background: var(--third-color);
    color: var(--fourth-color);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.registration-box h2 {
    margin: 0 0 18px;
    color: var(--fourth-color);
    text-align: center;
}

.registration-box label {
    display: block;
    margin: 12px 0 5px;
    font-weight: bold;
}

.registration-box input,
.registration-box select {
    width: 100%;
}

#registration-submit {
    width: 100%;
    margin-top: 18px;
    padding: 10px;
    font-weight: bold;
}

#registration-error {
    min-height: 20px;
    margin-top: 10px;
    color: #c62828;
    font-weight: bold;
    text-align: center;
}

/* =========================================
   PANNEAUX MASQUABLES
   ========================================= */

.hall-sidebar.hidden {
    display: none;
}

.hall-layout.left-hidden {
    grid-template-columns: minmax(0, 1fr) 190px;
}

.hall-layout.right-hidden {
    grid-template-columns: 190px minmax(0, 1fr);
}

.hall-layout.left-hidden.right-hidden {
    grid-template-columns: minmax(0, 1fr);
}

/* =========================================
   PETITS ECRANS
   ========================================= */

@media (max-width: 850px) {
    .hall-layout {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .hall-layout #right-panel {
        grid-column: 1 / -1;
    }

    .hall-layout.left-hidden {
        grid-template-columns: minmax(0, 1fr);
    }

    .hall-layout.right-hidden {
        grid-template-columns: 150px minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .hall-header {
        align-items: flex-start;
    }

    .hall-header h1 {
        width: 100%;
    }

    .hall-controls {
        justify-content: flex-start;
    }

    .hall-layout {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .hall-sidebar {
        flex: 0 0 auto;
        max-height: 110px;
    }

    .hall-main {
        flex: 1 1 0;
        min-height: 0;
    }

    #messages,
    .messages {
        min-height: 0;
    }

    #message-form {
        flex: 0 0 auto;
        flex-direction: column;
    }

    #send-button {
        width: 100%;
    }
}

/* =========================================
   LISTE UTILISATEURS
   ========================================= */

#right-panel {
    background: var(--userlist-background-color);
    color: var(--userlist-color);
}

#right-panel h2 {
    color: var(--userlist-color);
    font-weight: bold;
}

#user-list li {
    color: var(--userlist-color);
    font-weight: 600;
    background: transparent;
}

/* Espacement du choix de salon */

#salon-select {
    margin-top: 8px;
}

/* *********************************** */
/* liste user idem la div message */

/* Harmonisation de la liste des utilisateurs avec les messages */
body[data-theme="blue"] #right-panel,
body[data-theme="pink"] #right-panel,
body[data-theme="mauve"] #right-panel,
body[data-theme="light"] #right-panel {
    background-color: var(--background-color);
    color: var(--text-color);
}

body[data-theme="blue"] #right-panel h2,
body[data-theme="blue"] #user-list li,
body[data-theme="pink"] #right-panel h2,
body[data-theme="pink"] #user-list li,
body[data-theme="mauve"] #right-panel h2,
body[data-theme="mauve"] #user-list li,
body[data-theme="light"] #right-panel h2,
body[data-theme="light"] #user-list li {
    color: var(--text-color);
}

/* ****************************************** */
/*  menu click droit sur liste users          */

.menu-user-contextuel {
    position: fixed;
    z-index: 10000;
 /*   display: flex;
    flex-direction: column; */
    display: block;
    min-width: 150px;
    padding: 5px;
    border-radius: 6px;
    box-shadow: 0 3px 10px #0005;
    background: var(--third-color);
    color: var(--fourth-color);
    border: 1px solid var(--border-color);
}

.menu-user-contextuel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    border: 0;
    background:grey;
    color: var(--text-color);
    background: var(--background-color);
    

    cursor: pointer;
}

.menu-user-contextuel button:hover {
    background: var(--hover-color);
}

/* ******************************** */
/* whois */

/* Fiche WHOIS */


.whois-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    pointer-events: none;
}

.whois-overlay[hidden] {
    display: none;
}

.whois-box {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    max-width: calc(100vw - 30px);
    padding: 15px;
    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 5px 20px #0005;
    pointer-events: auto;
    resize: both;
    overflow: auto;
    min-width: 300px;
    min-height: 180px;
}

.whois-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
    user-select: none;
}

.whois-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.whois-header h2 {
    margin: 8px 0;
    font-size: 20px;
    white-space: nowrap;
}

.whois-header button {
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
    padding: 2px 6px;
}


.whois-content p {
    margin: 9px 0;
}


.whois-box.minimized {
    height: auto !important;
    min-height: 0;
    resize: none;
    overflow: hidden;
}

.whois-box.minimized .whois-content {
    display: none;
}

.whois-box.maximized {
    position: fixed;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    width: auto;
    max-width: none;
    transform: none;
    overflow: auto;
}



/* bouton password pour le code d accès */

.password-field {
    display: flex;
    gap: 5px;
    align-items: center;
}

.password-field input {
    flex: 1;
    min-width: 0;
}

.password-field button {
    cursor: pointer;
}


/* =========================================
   FENETRES DE MESSAGES PRIVES
   ========================================= */

.prive-box {
    position: absolute;
    top: 90px;
    left: 180px;
    z-index: 12001;

    width: 480px;
    height: 420px;
    min-width: 300px;
    min-height: 220px;

    display: flex;
    flex-direction: column;

    resize: both;
    overflow: auto;

    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 5px 20px #0005;
}

.prive-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    cursor: move;
    user-select: none;
    border-bottom: 1px solid var(--border-color);
}

.prive-header h2 {
    margin: 8px 0;
    font-size: 18px;
}

.prive-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.prive-controls button {
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 24px;
    padding: 2px 6px;
}

.prive-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.prive-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-wrap: anywhere;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    line-height: 0.75;
    
}

.prive-messages p {
    margin: 0;
    padding: 1px 3px;
    line-height: 1.15;
}

.prive-form {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.prive-form input {
    flex: 1;
    min-width: 0;
}

/* Réduction / mise en pause visuelle */

.prive-box.minimized {
    height: 42px !important;
    min-height: 42px !important;
    resize: none;
    overflow: hidden;
}

.prive-box.minimized .prive-content {
    display: none !important;
}

/* Plein écran */

.prive-box.maximized {
    position: fixed;
    top: 10px;
    left: 10px;
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    max-width: none;
    resize: none;
}



/* =====================================================
   FENÊTRE USERS
   Couleurs synchronisées avec themes.css
   ===================================================== */

/* Fond de fenêtre */
#users-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.25);
}

/* Respect de l'attribut hidden */
#users-overlay[hidden] {
    display: none !important;
}

/* Fenêtre principale */
#users-box {
    position: fixed;
    top: 100px;
    left: 100px;

    width: 320px;
    height: 420px;

    min-width: 240px;
    min-height: 180px;

    display: flex;
    flex-direction: column;

    background: var(--background-color);
    color: var(--text-color);

    border: 1px solid var(--border-color);
    border-radius: 9px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    overflow: hidden;
    box-sizing: border-box;
}

/* En-tête : poignée de déplacement */
#users-header {
    height: 38px;
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 6px 0 12px;

    background: var(--primary-color);
    color: var(--fourth-color);

    cursor: move;
    touch-action: none;
    user-select: none;
}

/* Titre */
#users-title {
    font-weight: bold;
    font-size: 14px;
}

/* Groupe des boutons */
#users-controls {
    display: flex;
    gap: 4px;
}

/* Boutons de contrôle */
#users-controls button {
    width: 27px;
    height: 27px;

    padding: 0;
    border: none;
    border-radius: 4px;

    background: var(--button-background);
    color: var(--button-color);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

#users-controls button:hover {
    background: var(--hover-color);
}

/* Corps de fenêtre */
#users-content {
    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 10px;
    overflow: hidden;

    background: var(--background-color);
    color: var(--text-color);
}

/* Sélecteur de salon */
#users-salon-select {
    width: 100%;
    padding: 6px;

    background: var(--select-background, var(--third-color));
    color: var(--select-color, var(--fourth-color));

    border: 1px solid var(--border-color);
    border-radius: 5px;
}

/* Compteur */
#users-count {
    font-size: 12px;
    color: var(--fourth-color);
}

/* Liste */
#users-list {
    flex: 1;
    min-height: 0;

    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Ligne utilisateur */
.users-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 7px 9px;

    background: var(--third-color);
    color: var(--fourth-color);

    border: 1px solid var(--border-color);
    border-radius: 5px;

    font-size: 13px;
}

/* Pseudo */
.users-pseudo {
    font-weight: bold;
}

/* Salon */
.users-room {
    color: var(--fourth-color);
    font-size: 12px;
}

/* Fenêtre réduite */
#users-box.users-minimized {
    height: 38px !important;
    min-height: 38px !important;
}

#users-box.users-minimized #users-content,
#users-box.users-minimized #users-resize {
    display: none;
}

/* Fenêtre agrandie */
#users-box.users-maximized {
    top: 5px !important;
    left: 5px !important;

    width: calc(100vw - 10px) !important;
    height: calc(100dvh - 10px) !important;
}

/* Poignée de redimensionnement */
#users-resize {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 22px;
    height: 22px;

    cursor: nwse-resize;
    touch-action: none;
}

#users-resize::after {
    content: "⋰";
    position: absolute;
    right: 4px;
    bottom: 0;

    color: var(--secondary-color);
    font-size: 20px;
}

/* Adaptation smartphone */
@media (max-width: 600px) {
    #users-box {
        width: calc(100vw - 30px);
        height: 65vh;

        left: 15px;
        top: 80px;
    }

    #users-box.users-maximized {
        top: 5px !important;
        left: 5px !important;

        width: calc(100vw - 10px) !important;
        height: calc(100dvh - 10px) !important;
    }
}





/* pour smartphone */

/* WHOIS adapté aux écrans tactiles */
@media (max-width: 600px) {

    .whois-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        pointer-events: auto;
    }

    .whois-box {
        position: relative;
        top: auto;
        left: auto;
        transform: none;

        width: 100%;
        max-width: 420px;
        min-width: 0;

        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        resize: none;
    }

    .whois-controls button,
    #whois-private {
        min-height: 40px;
        touch-action: manipulation;
    }
    
    /* Fenêtre privée ouverte depuis WHOIS */
    .prive-box.prive-whois {
        position: fixed;
        top: 12px;
        left: 12px;
        width: calc(100vw - 24px);
        height: calc(50dvh - 24px);
        min-width: 0;
        min-height: 0;
        max-width: none;
        resize: none;
        z-index: 12001;
    }
}



.whois-header,
.prive-header {
    touch-action: none;
}



#test-overlay {
    z-index: 30000 !important;
    
}

#test-overlay.hidden {
    display: none !important;
}


#test-overlay {
    pointer-events: none;
}

#test-overlay .whois-box {
    pointer-events: auto;
}