/*
 * adr.css — Habillage ADR pour LibreQR
 * Chargé APRÈS style.css et theme.css (priorité garantie).
 * Avenue des Réseaux · Saint-Orens · qr.komu-adr.org
 */

/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS ADR
   ═══════════════════════════════════════════════════ */

:root {
    /* Couleurs ADR */
    --adr-orange:        #E8620A;
    --adr-orange-dark:   #C4510A;   /* hover / pressed */
    --adr-orange-soft:   #FFF3E8;   /* fond doux, badges */
    --adr-orange-focus:  rgba(232, 98, 10, 0.30);

    /* Thème clair forcé (ADR = toujours clair, pro et accessible) */
    --text:                 #2D2D2D;
    --bg:                   #F8F8F8;
    --bg-field:             #FFFFFF;
    --bg-help:              #FFF3E8;
    --bg-textarea:          #FFFFFF;
    --textarea-text:        #2D2D2D;
    --textarea-placeholder: #9A9A9A;
    --border:               #D0D0D0;
    --border-hover:         var(--adr-orange);
    --border-focus:         var(--adr-orange);
    --border-help:          var(--adr-orange);
    --border-qr:            #888888;

    /* Rayon de bordure unifié */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;

    /* Ombres douces */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-btn:  0 2px 8px  rgba(232, 98, 10, 0.30);
}

/* Surcharge explicite des media queries du theme.css upstream
   (on force le thème clair quel que soit le réglage navigateur) */
@media (prefers-color-scheme: dark) {
    :root {
        --text:                 #2D2D2D;
        --bg:                   #F8F8F8;
        --bg-field:             #FFFFFF;
        --bg-help:              #FFF3E8;
        --bg-textarea:          #FFFFFF;
        --textarea-text:        #2D2D2D;
        --textarea-placeholder: #9A9A9A;
        --border:               #D0D0D0;
        --border-hover:         var(--adr-orange);
        --border-focus:         var(--adr-orange);
        --border-help:          var(--adr-orange);
        --border-qr:            #888888;
        color-scheme: light;
    }
}


/* ═══════════════════════════════════════════════════
   2. BANDEAU KOMU-ADR (ajouté via injection HTML)
   ═══════════════════════════════════════════════════ */

.adr-topbar {
    /* full-bleed : déborde le body 680px pour occuper toute la largeur */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    background-color: var(--adr-orange);
    /* texte aligné sur la colonne de contenu (680px) sur grand écran */
    padding: 12px max(20px, calc((100vw - 680px) / 2));
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.adr-topbar .adr-topbar__brand {
    color: white;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    font-size: 1.02rem;
}

.adr-topbar .adr-topbar__link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 5px 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
}

.adr-topbar .adr-topbar__link:hover {
    background: white;
    color: var(--adr-orange);
    border-color: white;
}


/* ═══════════════════════════════════════════════════
   3. MISE EN PAGE GÉNÉRALE
   ═══════════════════════════════════════════════════ */

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 17px;
    max-width: 680px;
}

/* Carte centrale qui englobe le formulaire */
#form {
    background-color: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 28px 24px 20px;
    margin: 14px 12px 24px;
}


/* ═══════════════════════════════════════════════════
   4. HEADER & LOGO
   ═══════════════════════════════════════════════════ */

header {
    padding-top: 52px;
    padding-bottom: 20px;
    height: auto;
}

#linkTitles {
    justify-content: center;
    gap: 18px;
}

/* Logo LibreQR — agrandi pour l'équilibre avec les onglets */
#linkTitles::before {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

hgroup#titles {
    margin-left: 0;
    text-align: left;
}

h1 {
    font-size: 25px;
    font-weight: 700;
    color: var(--text);
}

hgroup p {
    font-size: 14px;
    color: #888;
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════
   5. NAVIGATION (onglets Texte / Wifi)
   ═══════════════════════════════════════════════════ */

nav {
    margin-top: 22px;
    margin-bottom: 0;
}

nav ul li {
    border-color: #D0D0D0;
}

nav ul li div {
    padding: 8px 28px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    transition: color 0.15s;
}

nav ul li a {
    text-decoration: none;
}

nav ul li a:hover div {
    color: var(--adr-orange);
}

/* Onglet actif */
nav ul li.tab-selected {
    border-color: var(--adr-orange);
    background-color: #FFFFFF;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

nav ul li.tab-selected div {
    color: var(--adr-orange);
    font-weight: 700;
}

/* Barre du bas pour les onglets inactifs */
nav ul li:not(.tab-selected) {
    border-bottom: 2px solid var(--adr-orange) !important;
}


/* ═══════════════════════════════════════════════════
   6. CHAMP PRINCIPAL (textarea)
   ═══════════════════════════════════════════════════ */

#txtParam label,
#txtParam summary {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    padding-left: 0;
}

/* On masque le <details> summary pour le champ texte principal :
   le label flotte directement au-dessus du textarea, c'est plus clair */
#txtParam details > summary {
    list-style: none;
    cursor: default;
    padding: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
}

#txtParam details > summary::-webkit-details-marker {
    display: none;
}

#txt {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    padding: 12px 14px;
    font-size: 16px;
    min-height: 80px;
    resize: vertical;
    transition: border-color 0.15s;
    margin: 0;
}

#txt:hover {
    border-color: var(--adr-orange);
    border-width: 2px;
    margin: 0;
}

#txt:focus {
    border-color: var(--adr-orange);
    outline: none;
    box-shadow: 0 0 0 3px var(--adr-orange-focus);
    border-width: 2px;
    margin: 0;
}


/* ═══════════════════════════════════════════════════
   7. BOUTON GÉNÉRER
   ═══════════════════════════════════════════════════ */

#main-submit {
    background-color: var(--adr-orange);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 700;
    padding: 14px 44px;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-btn);
    transition: background-color 0.15s, transform 0.10s, box-shadow 0.15s;
    margin-top: 16px;
    /* Surcharge des compensations de bordure upstream */
    margin-left: 0;
    margin-right: 0;
}

#main-submit:hover {
    background-color: var(--adr-orange-dark);
    border-width: 0;
    box-shadow: 0 4px 14px rgba(232, 98, 10, 0.40);
    transform: translateY(-1px);
    /* Annule la compensation de marge upstream */
    margin: 16px 0 0 0;
}

#main-submit:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--adr-orange-focus);
    border-width: 0;
    margin: 16px 0 0 0;
}

#main-submit:active {
    transform: translateY(0);
    background-color: var(--adr-orange-dark);
}


/* ═══════════════════════════════════════════════════
   8. OPTIONS AVANCÉES (toggle masquage/affichage)
   ═══════════════════════════════════════════════════ */

/* Par défaut : paramètres avancés masqués */
#sideParams,
#colors {
    display: none;
}

/* Quand le toggle est coché : on affiche */
#adr-advanced-toggle:checked ~ #sideParams,
#adr-advanced-toggle:checked ~ #colors {
    display: flex;
}

/* Le toggle checkbox est invisible (accessible via label) */
#adr-advanced-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Label-bouton "Options avancées" */
.adr-advanced-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #777;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #D8D8D8;
    background: #FAFAFA;
    margin: 14px 0 4px;
    user-select: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.adr-advanced-label:hover {
    color: var(--adr-orange);
    border-color: var(--adr-orange);
    background: var(--adr-orange-soft);
}

/* Icône engrenage — rotation quand ouvert */
.adr-advanced-label .adr-gear {
    display: inline-block;
    transition: transform 0.25s;
    font-style: normal;
}

#adr-advanced-toggle:checked ~ .adr-advanced-label .adr-gear {
    transform: rotate(60deg);
}

/* Texte du libellé : change quand ouvert */
.adr-advanced-label .adr-label-closed { display: inline; }
.adr-advanced-label .adr-label-open   { display: none; }

#adr-advanced-toggle:checked ~ .adr-advanced-label .adr-label-closed { display: none; }
#adr-advanced-toggle:checked ~ .adr-advanced-label .adr-label-open   { display: inline; }

/* Zone des options avancées : mise en forme quand affichée */
#adr-advanced-toggle:checked ~ #sideParams {
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed #E0E0E0;
    animation: adr-slide-in 0.2s ease-out;
}

#adr-advanced-toggle:checked ~ #colors {
    flex-flow: row wrap;
    justify-content: space-around;
    text-align: center;
    padding: 6px 0 4px;
    animation: adr-slide-in 0.2s ease-out;
}

@keyframes adr-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ═══════════════════════════════════════════════════
   9. CHAMPS AVANCÉS (redondance, marge, taille, couleurs)
   ═══════════════════════════════════════════════════ */

input[type="number"],
select {
    border-radius: var(--radius-sm);
    border-color: var(--border);
    background-color: var(--bg-field);
    color: var(--text);
    font-size: 15px;
}

input[type="number"]:hover,
select:hover {
    border-color: var(--adr-orange);
}

input[type="number"]:focus,
select:focus {
    border-color: var(--adr-orange);
    box-shadow: 0 0 0 3px var(--adr-orange-focus);
    outline: none;
}

/* Correctif upstream : annule la compensation de marge au :hover/:focus */
#redundancy:hover,
#size:hover,
#margin:hover {
    margin: 2px 6px;
    border-width: 2px;
}

#redundancy:focus,
#size:focus,
#margin:focus {
    margin: 2px 6px;
    border-width: 2px;
}

input[type="color"] {
    border-radius: var(--radius-sm);
    border-color: var(--border);
    cursor: pointer;
}

input[type="color"]:hover {
    border-color: var(--adr-orange);
}

/* Labels des champs avancés */
#sideParams label,
#colors label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

/* Textes d'aide (helpText) */
.helpText {
    font-size: 13px;
    background-color: var(--adr-orange-soft);
    border-color: var(--adr-orange);
    border-radius: var(--radius-sm);
    color: #555;
}


/* ═══════════════════════════════════════════════════
   10. SECTION RÉSULTAT (QR généré)
   ═══════════════════════════════════════════════════ */

#output {
    padding: 8px 12px;
    text-align: center;
}

#downloadQR {
    margin-top: 16px;
}

#showOnlyQR {
    margin-top: 20px;
}

/* Bouton "Enregistrer ce code QR" */
.button {
    background-color: var(--adr-orange);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    padding: 10px 26px 9px;
    text-decoration: none;
    box-shadow: var(--shadow-btn);
    transition: background-color 0.15s, transform 0.10s;
    display: inline-block;
}

.button:hover {
    background-color: var(--adr-orange-dark);
    text-decoration: none;
    border-width: 0;
    transform: translateY(-1px);
    margin: 0;
}

.button:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--adr-orange-focus);
    border-width: 0;
    margin: 0;
}

/* Image QR */
#qrCode {
    border-radius: var(--radius-sm);
    max-width: 88%;
}


/* ═══════════════════════════════════════════════════
   11. FOOTER ET TEXTES META
   ═══════════════════════════════════════════════════ */

footer {
    font-size: 13px;
    color: #888;
    padding-top: 6px;
}

.metaText {
    padding: 4px 12px;
    color: #888;
    font-size: 13px;
    line-height: 1.55;
}

.metaText a,
.metaText a:visited {
    color: var(--adr-orange);
    text-decoration: underline;
}

.metaText a:hover {
    text-decoration: none;
}

/* Le <footer> (qui contient #info) a "margin-top: auto" dans le style.css de base,
   ce qui le poussait tout en bas du viewport (gros vide sous la carte). On neutralise. */
footer {
    margin-top: 20px !important;
}

/* Section info (explication QR) : discrète */
#info {
    font-size: 13px;
}

#info h2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #555;
}


/* ═══════════════════════════════════════════════════
   12. RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 520px) {
    #form {
        margin: 0 6px 18px;
        padding: 20px 14px 16px;
    }

    #main-submit {
        width: 100%;
        padding: 14px 20px;
    }

    .adr-topbar {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    nav ul li div {
        padding: 8px 18px;
    }
}