/* CSS for the playermask.html page
   Couleurs, police, boutons, champs et tableaux viennent de /theme.css :
   cette feuille ne garde que la mise en page propre a la page. */

/* Onglets OSC / Raw UDP / API Web */
.view-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
}
.ec-theme .view-btn {
    color: var(--ec-texte);
    background: var(--ec-surface2);
    border-color: var(--ec-bordure);
}
.ec-theme .view-btn:hover { border-color: var(--ec-accent); filter: none; }
.ec-theme .view-btn.active {
    color: var(--ec-accent);
    background: var(--ec-accent-doux);
    border-color: var(--ec-accent);
}

/* Contenu des differentes vues */
.view-content { display: none; }
.view-content.active { display: block; }

/* Trois colonnes : convertisseur | presets | reference */
.gridlayout {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.85fr) 2fr;
    gap: 1.2rem;
    align-items: start;
}
.sidebar, .left-pad-container, .right-pad-container {
    background: var(--ec-surface);
    border: 1px solid var(--ec-bordure);
    border-radius: var(--ec-rayon);
    padding: 1.1rem 1.2rem 1.3rem;
    min-width: 0;
}
.web-api-docs { grid-column: 2 / span 2; }

.ec-theme h2 {
    margin: -1.1rem -1.2rem 1rem;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    font-weight: 650;
    border-bottom: 1px solid var(--ec-bordure);
}
.ec-theme h3 {
    margin: 1.1rem 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ec-attenue);
}

/* Convertisseur */
.input-group { margin-bottom: 0.9rem; }
.input-group label { display: block; margin-bottom: 0.3rem; }
.input-group input, .input-group select { width: 100%; }
#actions-container .input-group input { margin-top: 0.4rem; }
.result-group { margin-top: 1.2rem; }
.result-group label { display: block; margin-bottom: 0.3rem; }
.result-group textarea { width: 100%; resize: vertical; }
.result-group .view-buttons { margin: 0.5rem 0 0; }
#convertBtn, #convertUDPBtn, #build-url-btn, #add-action-btn { margin-top: 0.2rem; }
#add-action-btn { margin-right: 0.4rem; }

#copyMaskBtn, #copyUDPBtn {
    margin-top: 0.5rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    color: var(--ec-texte);
    background: var(--ec-surface2);
    border-color: var(--ec-bordure);
}
#copyMaskBtn:hover, #copyUDPBtn:hover { border-color: var(--ec-accent); filter: none; }

/* Presets : pastilles */
.preset-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.preset-group h3 { width: 100%; }
.preset-group:first-of-type h3 { margin-top: 0; }
.ec-theme .preset-btn, .ec-theme .udp-preset-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ec-texte);
    background: var(--ec-surface2);
    border-color: var(--ec-bordure);
    border-radius: 99px;
}
.ec-theme .preset-btn:hover, .ec-theme .udp-preset-btn:hover {
    color: var(--ec-accent);
    border-color: var(--ec-accent);
    filter: none;
}

/* Tables de reference */
.reference-table {
    overflow-x: auto;
    margin: 0 -1.2rem -1.3rem;
}
td:nth-child(2) {
    font-family: var(--ec-mono);
    font-size: 0.82rem;
    color: var(--ec-accent);
    white-space: nowrap;
}

/* Documentation API Web */
.api-section { margin-bottom: 1rem; }
.api-list { list-style: none; padding-left: 0; margin: 0; }
.api-list li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ec-bordure);
    color: var(--ec-attenue);
}
.api-list strong {
    font-family: var(--ec-mono);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ec-accent);
    background: var(--ec-accent-doux);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* Fenetres moyennes : la reference passe sous les deux premieres colonnes */
@media (max-width: 1100px) {
    .gridlayout { grid-template-columns: 1fr 1fr; }
    .right-pad-container, .web-api-docs { grid-column: 1 / -1; }
}
/* Telephone : une seule colonne */
@media (max-width: 700px) {
    .gridlayout { grid-template-columns: 1fr; }
}