/*
 * F1SYH OpenWebRX+ Theme
 * Injection externe via Nginx
 * Aucun fichier du conteneur OpenWebRX+ n'est modifié.
 */

:root {
    --f1-bg: #07111f;
    --f1-bg2: #0b1728;
    --f1-panel: rgba(13, 27, 46, 0.94);
    --f1-panel2: rgba(17, 35, 58, 0.96);
    --f1-border: rgba(96, 165, 250, 0.22);
    --f1-blue: #3b82f6;
    --f1-cyan: #38bdf8;
    --f1-text: #f8fafc;
    --f1-muted: #94a3b8;
}

/* --- Base ---------------------------------------------------- */

html,
body {
    background: var(--f1-bg) !important;
    color: var(--f1-text);
}

/* --- En-tête ------------------------------------------------- */

.webrx-top-container {
    background-image:
        radial-gradient(circle at 25% 0%,
            rgba(56, 189, 248, 0.13),
            transparent 38%),
        linear-gradient(
            135deg,
            #07111f 0%,
            #0b1728 55%,
            #101f34 100%
        ) !important;

    border-bottom: 1px solid rgba(56,189,248,.25);
    box-shadow: 0 8px 28px rgba(0,0,0,.32);
}

.webrx-top-bar {
    background: rgba(4, 12, 24, 0.72) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Marque F1SYH à gauche */
.webrx-top-bar::before {
    content: "F1SYH  ·  SDR EN DIRECT  ·  JN25LT";
    display: flex;
    align-items: center;

    margin-right: auto;
    padding-left: 18px;

    color: var(--f1-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .7px;

    text-shadow: 0 0 18px rgba(56,189,248,.30);
}

.webrx-rx-avatar {
    background: rgba(15, 32, 53, .85) !important;
    border: 1px solid rgba(56,189,248,.30);
    box-shadow: 0 4px 15px rgba(0,0,0,.28);
}

.webrx-rx-texts div,
.webrx-rx-texts h1 {
    color: var(--f1-muted) !important;
}

.webrx-rx-title {
    color: var(--f1-text) !important;
    font-weight: 700 !important;
}

.webrx-rx-desc {
    color: var(--f1-muted) !important;
}

.webrx-top-logo {
    opacity: .70;
}

/* --- Boutons principaux ------------------------------------- */

.openwebrx-main-buttons .button {
    border-radius: 9px;
    transition:
        background-color .18s ease,
        transform .18s ease;
}

.openwebrx-main-buttons .button:hover {
    background: rgba(59,130,246,.24) !important;
    transform: translateY(-1px);
}

/* --- Fréquence ---------------------------------------------- */

#openwebrx-frequency-container {
    background:
        linear-gradient(
            180deg,
            #0c1b2e 0%,
            #07111f 100%
        ) !important;

    border-bottom: 1px solid rgba(56,189,248,.20);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.025);
}

/* --- Panneaux / fenêtres ------------------------------------ */

.openwebrx-panel,
.openwebrx-dialog {
    background: var(--f1-panel) !important;
    border: 1px solid var(--f1-border) !important;

    box-shadow:
        0 14px 36px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Champs -------------------------------------------------- */

.openwebrx-panel select,
.openwebrx-panel input,
.openwebrx-dialog select,
.openwebrx-dialog input {
    color: var(--f1-text) !important;

    background:
        linear-gradient(
            180deg,
            #132a45 0%,
            #0b1829 100%
        ) !important;

    border-color: rgba(148,163,184,.22) !important;
}

/* --- Boutons OpenWebRX -------------------------------------- */

.openwebrx-button {
    background:
        linear-gradient(
            180deg,
            #173452 0%,
            #0c2038 100%
        ) !important;

    border-color: rgba(96,165,250,.20) !important;

    transition:
        filter .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.openwebrx-button:hover {
    filter: brightness(1.16);
    box-shadow: 0 0 14px rgba(56,189,248,.15);
}

.openwebrx-button.highlighted,
.openwebrx-demodulator-button.highlighted {
    background:
        linear-gradient(
            180deg,
            #2563eb 0%,
            #1d4ed8 100%
        ) !important;

    box-shadow:
        0 0 0 1px rgba(96,165,250,.38),
        0 0 18px rgba(37,99,235,.20);
}

/* --- Métadonnées -------------------------------------------- */

.openwebrx-meta-slot:not(.active) {
    background: #10243c !important;
    color: var(--f1-text) !important;
}

/* --- Digital ------------------------------------------------- */

#openwebrx-digimode-canvas-container {
    background: #06101d !important;
}

/* --- Scrollbars modernes ------------------------------------ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #07111f;
}

::-webkit-scrollbar-thumb {
    background: #263d58;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #345576;
}

/* --- Mobile -------------------------------------------------- */

@media (max-width: 900px) {
    .webrx-top-bar::before {
        content: "F1SYH · SDR";
        font-size: 13px;
        padding-left: 10px;
        letter-spacing: .3px;
    }
}

@media (max-width: 600px) {
    .webrx-top-bar::before {
        content: "F1SYH";
    }
}


/* ==========================================================
   F1SYH THEME - V2
   Harmonisation avec www.f1syh.ampr.org
   ========================================================== */


/* ----------------------------------------------------------
   1. Supprime la mention ajoutée à gauche
   Le récepteur affiche déjà F1SYH.
   ---------------------------------------------------------- */

.webrx-top-bar::before {
    content: none !important;
    display: none !important;
}


/* ----------------------------------------------------------
   2. Fond principal : suppression du bleu OpenWebRX d'origine
   ---------------------------------------------------------- */

#webrx-canvas-background {
    background-image:
        radial-gradient(
            circle at 50% 120%,
            rgba(56, 189, 248, 0.10) 0%,
            rgba(56, 189, 248, 0.03) 32%,
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #091522 0%,
            #07111c 45%,
            #040a11 100%
        ) !important;

    background-color: #07111f !important;
}


/* ----------------------------------------------------------
   3. Header plus propre
   ---------------------------------------------------------- */

.webrx-top-container {
    background:
        linear-gradient(
            110deg,
            #07111f 0%,
            #0a1728 55%,
            #0d1d30 100%
        ) !important;

    border-bottom: 1px solid rgba(56,189,248,.28) !important;
}

.webrx-top-logo {
    opacity: .62 !important;
}

.webrx-rx-title {
    color: #f8fafc !important;
}

.webrx-rx-desc,
.webrx-rx-texts div {
    color: #9eafc4 !important;
}


/* ----------------------------------------------------------
   4. Marqueurs de fréquences plus élégants
   ---------------------------------------------------------- */

#openwebrx-bookmarks-container .bookmark {
    background: #263b53 !important;
    color: #edf4fb !important;

    border: 1px solid rgba(148, 163, 184, .34) !important;
    border-radius: 6px !important;

    font-weight: 600;

    box-shadow:
        0 2px 7px rgba(0,0,0,.28);
}

#openwebrx-bookmarks-container .bookmark:after {
    border-top-color: #263b53 !important;
}


/* Marqueurs locaux F1SYH */

#openwebrx-bookmarks-container .bookmark[data-source="local"] {
    background: #087a96 !important;
    border-color: #38bdf8 !important;
    color: white !important;

    box-shadow:
        0 0 10px rgba(56,189,248,.25);
}

#openwebrx-bookmarks-container .bookmark[data-source="local"]:after {
    border-top-color: #087a96 !important;
}


/* Fréquences "dial" conservées distinctes */

#openwebrx-bookmarks-container .bookmark[data-source="dial_frequencies"] {
    background: #32613e !important;
    border-color: #64a978 !important;
}

#openwebrx-bookmarks-container .bookmark[data-source="dial_frequencies"]:after {
    border-top-color: #32613e !important;
}


/* ----------------------------------------------------------
   5. Panneau du récepteur
   ---------------------------------------------------------- */

#openwebrx-panel-receiver {
    background:
        linear-gradient(
            145deg,
            rgba(13, 29, 49, .97),
            rgba(7, 18, 31, .97)
        ) !important;

    border: 1px solid rgba(96,165,250,.25) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.035);
}


/* fréquence */

.webrx-actual-freq,
.webrx-actual-freq input {
    color: #f8fafc !important;
    letter-spacing: .25px;
}


/* ----------------------------------------------------------
   6. Sélecteurs
   ---------------------------------------------------------- */

.openwebrx-panel select,
.openwebrx-dialog select {
    background:
        linear-gradient(
            180deg,
            #18304b,
            #0b1b2c
        ) !important;

    border: 1px solid rgba(96,165,250,.18) !important;

    color: #eaf2fa !important;
}


/* ----------------------------------------------------------
   7. Boutons
   ---------------------------------------------------------- */

.openwebrx-button {
    background:
        linear-gradient(
            180deg,
            #183452 0%,
            #0b1e32 100%
        ) !important;

    border: 1px solid rgba(96,165,250,.17) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.openwebrx-button:hover {
    background:
        linear-gradient(
            180deg,
            #1e446a 0%,
            #102a46 100%
        ) !important;

    color: #ffffff !important;
}

.openwebrx-button.highlighted,
.openwebrx-demodulator-button.highlighted {
    background:
        linear-gradient(
            180deg,
            #238bd1 0%,
            #17649f 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 0 12px rgba(56,189,248,.25);
}


/* ----------------------------------------------------------
   8. Barre d'état du bas
   ---------------------------------------------------------- */

#openwebrx-panel-status div.openwebrx-progressbar {
    background: rgba(8, 25, 43, .92) !important;

    border: 1px solid rgba(96,165,250,.16);

    border-radius: 6px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.openwebrx-progressbar-bar {
    background-color: #087a96 !important;
}

.openwebrx-progressbar--over .openwebrx-progressbar-bar {
    background-color: #dc3545 !important;
}


/* ----------------------------------------------------------
   9. Canvas : séparation discrète
   ---------------------------------------------------------- */

#webrx-canvas-container {
    border-top: 1px solid rgba(255,255,255,.025);
}


/* ----------------------------------------------------------
   10. Mobile
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .webrx-top-logo {
        opacity: .48 !important;
    }

    #openwebrx-panel-receiver {
        border-radius: 12px !important;
    }
}