/*
 * Galene im Wellpass-Look. Overlay, ändert nur die Optik, kein Layout.
 *
 * Das Dockerfile hängt den <link> auf diese Datei vor </head> jeder Seite, sie
 * lädt also nach galene.css, common.css, fontawesome, toastify und contextual
 * und überschreibt sie bei gleicher Spezifität. Selektoren bewusst genauso
 * geschrieben wie in static/galene.css.
 *
 * Tokens: wellpass/frontend/src/index.css (iOS-Palette, hell/dunkel nach System).
 * Galenes CSP (default-src 'self') erlaubt keine Inline-Styles/-Skripte und keine
 * externen Fonts: darum eine externe Datei, Systemschrift und Dark Mode per
 * prefers-color-scheme statt Umschalter-Skript.
 */

/* ---------- Tokens ---------- */

:root {
    color-scheme: light dark;

    --background: #f2f2f7;
    --surface: #ffffff;
    --foreground: #1c1c1e;
    --secondary: #6c6c70;
    --tint: #007aff;
    --tint-foreground: #ffffff;
    --muted: #e9e9ee;
    --border: rgba(60, 60, 67, 0.16);
    --success: #34c759;
    --danger: #ff3b30;
    --warning: #ff9500;

    /* Galene-spezifisch */
    --stage: #111113;
    --radius-control: 12px;
    --radius-card: 16px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Kontextmenü (third-party/contextual liest diese Variablen) */
    --contextualMenuBg: var(--surface);
    --contextualSubMenuBg: var(--surface);
    --contextualMenuText: var(--foreground);
    --contextualMenuRadius: var(--radius-control);
    --contextualMenuShadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    --contextualHover: var(--muted);
    --contextualOverflowIcon: var(--secondary);
    --contextualSeperator: var(--border);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #000000;
        --surface: #1c1c1e;
        --foreground: #f2f2f7;
        --secondary: #98989f;
        --tint: #0a84ff;
        --muted: #2c2c2e;
        --border: rgba(120, 120, 128, 0.32);
        --success: #30d158;
        --danger: #ff453a;
        --warning: #ff9f0a;
        --stage: #000000;
    }
}

/* ---------- Basis ---------- */

body {
    font-family: var(--font-sans);
    color: var(--foreground);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

textarea,
input,
select,
button {
    font-family: inherit;
}

a,
a:hover {
    color: var(--tint);
}

#title,
h1,
h2 {
    letter-spacing: -0.01em;
}

.signature {
    border-top: 1px solid var(--border);
    color: var(--secondary);
}

.signature a:hover,
#public-groups-table a:hover {
    text-decoration: underline;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress,
.file-progress {
    accent-color: var(--tint);
}

::placeholder {
    color: var(--secondary);
    opacity: 0.7;
}

#box,
#users,
.sidenav-content {
    scrollbar-width: thin;
}

.app {
    background-color: var(--background);
    box-shadow: none;
}

/* ---------- Formulare und Buttons ---------- */

.form-control,
.select {
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    color: var(--foreground);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: none;
}

/* Dropdowns sind kompakter als die Textfelder: Einstellungen und Kameratest stapeln
   mehrere davon, und Gerätenamen („Kamera von …“) sind lang. */
.select {
    min-height: 2.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.875rem;
}

.form-reply {
    color: var(--foreground);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: none;
}

.form-control:focus,
.select:focus,
#invite-dialog input:focus {
    outline: none;
    border-color: var(--tint);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 25%, transparent);
}

.btn {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: var(--radius-control);
    transition: background-color 0.15s ease, border-color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn-blue,
.btn-blue:hover {
    color: var(--tint-foreground);
    background-color: var(--tint);
    border-color: var(--tint);
}

.btn-success,
.btn-success:hover {
    color: #fff;
    background-color: var(--success);
    border-color: var(--success);
}

.btn-cancel,
.btn-cancel:hover {
    color: #fff;
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-default,
.btn-default:hover {
    color: var(--foreground);
    background-color: var(--muted);
    border-color: transparent;
}

.btn-warn {
    color: var(--warning);
    background-color: transparent;
    border-color: var(--warning);
}

.btn-warn:hover {
    color: #1c1c1e;
    background-color: var(--warning);
    border-color: var(--warning);
}

.btn-blue:hover,
.btn-success:hover,
.btn-cancel:hover,
.btn-default:hover {
    filter: brightness(0.92);
}

.error,
#errormessage,
.disconnected {
    color: var(--danger);
}

.connected {
    color: var(--success);
}

/* ---------- Kopfleiste, Seitenleiste ---------- */

.navbar,
.navbar .container,
.navbar .container-fluid,
.navbar .container-lg,
.navbar .container-md,
.navbar .container-sm,
.navbar .container-xl {
    background: var(--surface);
}

.topnav {
    border-bottom: 1px solid var(--border);
}

.users-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.galene-header,
.header-title {
    color: var(--foreground);
    font-weight: 700;
}

header .collapse {
    color: var(--secondary);
}

header .collapse:hover {
    color: var(--tint);
}

.nav-link,
.nav-link label {
    color: var(--secondary);
}

.nav-link:hover,
.nav-link label:hover {
    color: var(--tint);
}

.nav-cancel,
.muted,
.nav-cancel label,
.muted label,
.nav-cancel:hover,
.muted:hover,
.nav-cancel label:hover,
.muted label:hover {
    color: var(--danger);
}

#left-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
}

#users {
    background-color: var(--surface);
    border: none;
}

#users .user-p {
    border-bottom: 1px solid var(--border);
}

#users > div:hover {
    background-color: var(--muted);
}

#users > div::before {
    color: var(--success);
}

#users > div::after {
    color: var(--secondary);
}

#users > div.user-status-active::after {
    color: var(--tint);
}

/* ---------- Chat ---------- */

#chat {
    background-color: var(--background);
    border-right: 1px solid var(--border);
}

.close-chat {
    color: var(--secondary);
}

.close-chat:hover,
.close-chat:active {
    border-color: var(--border);
    border-radius: 8px;
}

.reply {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
}

#input {
    color: var(--foreground);
    background-color: var(--muted);
    border-radius: 18px;
}

/* Das Zeichen ➤ im value wird ausgeblendet, das Lucide-Icon kommt als Hintergrund (Abschnitt Icons). */
#inputbutton,
#inputbutton:hover {
    color: transparent;
    background-color: var(--tint);
    background-image: url("/icons/send-horizontal-white.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.125rem;
    border-color: var(--tint);
    border-radius: 999px;
    flex: none;
    width: 2.125rem;
    height: 2.125rem;
    min-height: 0;
    padding: 0;
}

.message {
    color: var(--foreground);
    background: var(--muted);
    border-radius: 14px;
    box-shadow: none;
}

.message-sender {
    background: color-mix(in srgb, var(--tint) 16%, var(--surface));
}

.message-private {
    background: var(--surface);
    border: 1px solid var(--border);
}

.message-system {
    color: var(--secondary);
    background: transparent;
}

.message-content {
    color: var(--foreground);
}

/* ---------- Call-Ansicht ---------- */

.video-container {
    background: var(--stage);
}

.chat-btn .icon-chat {
    color: rgba(255, 255, 255, 0.75);
    text-shadow: none;
}

.peer {
    border-radius: var(--radius-card);
    overflow: hidden;
}

.peer-active {
    border-color: var(--tint);
}

.label {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}

.video-controls .video-stop {
    color: var(--danger);
}

.show-video {
    color: var(--tint-foreground);
    background: var(--tint);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@keyframes blink {
    0% { box-shadow: 0 0 15px rgba(10, 132, 255, 0.7); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
    100% { box-shadow: 0 0 15px rgba(10, 132, 255, 0.7); }
}

@-webkit-keyframes blink {
    0% { box-shadow: 0 0 15px rgba(10, 132, 255, 0.7); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
    100% { box-shadow: 0 0 15px rgba(10, 132, 255, 0.7); }
}

#captions {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}

/* ---------- Login ---------- */

.login-container {
    overflow: auto;
}

.login-box {
    width: min(24rem, calc(100% - 2rem));
    height: auto;
    padding: 1.5rem;
    margin: 2.5rem auto 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.loginform label {
    padding-top: 14px;
    color: var(--secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.loginform .switch-radio label {
    padding-top: 4px;
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 400;
}

.loginform input[type="text"],
.loginform input[type="password"] {
    min-height: 3.25rem;
    font-size: 1.0625rem;
}

#connectbutton {
    width: 100%;
    min-height: 3.5rem;
    margin-top: 1.25rem;
    padding: 0 1.5rem;
    font-size: 1.125rem;
}

#test-camera {
    width: min(24rem, calc(100% - 2rem));
    margin: 0 auto 2rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

#test-camera summary {
    cursor: pointer;
    font-weight: 500;
}

#test-video {
    border-radius: var(--radius-control);
}

#test-fft {
    background: var(--muted);
    border-radius: 8px;
}

/* ---------- Einstellungen (Sidenav) ---------- */

.sidenav {
    background-color: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
}

.sidenav-header {
    border-bottom: 1px solid var(--border);
}

.sidenav-header h2 {
    color: var(--foreground);
    font-size: 1.25rem;
    font-weight: 700;
}

.sidenav-content {
    background: var(--surface);
}

.sidenav a {
    color: var(--secondary);
}

.sidenav a:hover {
    color: var(--tint);
}

fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: 12px;
}

legend {
    color: var(--secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.profile-logo {
    color: var(--tint);
    background: color-mix(in srgb, var(--tint) 14%, transparent);
}

.profile-info {
    color: var(--secondary);
}

#permspan {
    color: var(--success);
}

#chpwspan a {
    color: var(--tint);
}

.sidenav .user-logout a,
.sidenav .user-logout a:hover {
    color: var(--danger);
}

/* ---------- Dialog, Toasts, Kontextmenü ---------- */

#invite-dialog {
    color: var(--foreground);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#invite-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

#invite-dialog input {
    color: var(--foreground);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.4em 0.6em;
}

/* Felder in Karten (Login, Einstellungen, Dialog) nehmen den Seitenhintergrund, sonst
   stünde Surface auf Surface und die Felder verschwänden im Dunkelmodus. */
.login-box .form-control,
#test-camera .select,
.sidenav .select,
#invite-dialog input {
    background-color: var(--background);
}

#invite-dialog button,
#invite-dialog button:hover {
    color: var(--tint-foreground);
    background-color: var(--tint);
    border: none;
    border-radius: var(--radius-control);
    font-weight: 600;
}

#invite-dialog button:hover {
    filter: brightness(0.92);
}

#invite-dialog #invite-cancel,
#invite-dialog #invite-cancel:hover {
    color: var(--foreground);
    background-color: var(--muted);
}

.toastify {
    color: var(--foreground);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.toastify.error {
    color: var(--foreground);
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.toastify.warning {
    color: var(--foreground);
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

.toastify.info {
    color: var(--foreground);
    background: color-mix(in srgb, var(--tint) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--tint) 45%, transparent);
}

.toastify .toast-close,
.toastify.error .toast-close,
.toastify.warning .toast-close,
.toastify.info .toast-close {
    color: var(--secondary);
}

.contextualMenu {
    font-size: 14px;
    border: 1px solid var(--border);
}

.contextualMenuItem {
    margin: 0 6px;
    padding: 6px 10px;
    border-radius: 8px;
}

/* ---------- Startseite, 404 ---------- */

.home {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
}

.home .navbar-brand {
    margin-bottom: 2rem;
    font-size: 1.75rem;
    font-weight: 700;
}

/* Icon-Kachel über dem Titel, wie die Kachel auf der Wellpass-Startseite */
.home .navbar-brand::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.75rem;
    background: url("/favicon.svg") center / contain no-repeat;
}

#groupform label {
    margin-bottom: 0.375rem;
    color: var(--secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

#groupform .form-control {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    font-size: 1.0625rem;
}

#submitbutton {
    width: 100%;
    min-height: 3.5rem;
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: var(--tint-foreground);
    background-color: var(--tint);
    border-color: var(--tint);
}

#public-groups h2 {
    margin: 2rem 0 0.5rem;
    color: var(--secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#public-groups-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

#public-groups-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

#public-groups-table tr:last-child td {
    border-bottom: none;
}

#public-groups-table tr a {
    margin-left: 0;
}

.landing-page {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: none;
}

.logo,
.logo .fa {
    color: var(--secondary);
}

.landing-page h1 {
    color: var(--foreground);
}

.home-link {
    color: var(--tint-foreground);
    background: var(--tint);
    border-radius: var(--radius-control);
    box-shadow: none;
}

/* ---------- Icons (Lucide) ---------- */

/*
 * Ersetzt die Font-Awesome-Glyphen durch Lucide-Icons: dieselbe Bibliothek und Version wie
 * lucide-react in Wellpass (lucide-static 1.68.0, ISC, Dateien und Lizenz in icons/). Die <i>-Elemente
 * bleiben, ihr ::before wird zu einer 1em großen Maske, gefüllt mit currentColor. Farbe, Hover,
 * Größe und die Klassenwechsel im JS (Mikrofon, Lautstärke) funktionieren so unverändert, und die
 * Font-Awesome-Schrift wird nicht mehr geladen. Dateien statt data:-URIs, weil Galenes CSP data:
 * für Bilder verbietet.
 */

/* Ohne eigene Schrift fordert der Browser die Font-Awesome-Dateien gar nicht erst an. */
i.fas,
i.far,
#users > div::before,
#users > div::after {
    font-family: inherit;
}

i.fas::before,
i.far::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    /* Ohne Zuordnung (neues fa-Icon nach einem Upstream-Merge) bleibt die Maske leer: unsichtbar statt Vollfläche. */
    -webkit-mask: var(--icon, linear-gradient(#0000, #0000)) center / contain no-repeat;
    mask: var(--icon, linear-gradient(#0000, #0000)) center / contain no-repeat;
}

.fa-play { --icon: url("/icons/play.svg"); }
.fa-stop { --icon: url("/icons/square.svg"); }
.fa-microphone { --icon: url("/icons/mic.svg"); }
.fa-microphone-slash { --icon: url("/icons/mic-off.svg"); }
.fa-share-square { --icon: url("/icons/screen-share.svg"); }
.fa-ellipsis-v { --icon: url("/icons/ellipsis-vertical.svg"); }
.fa-align-left { --icon: url("/icons/panel-left.svg"); }
.fa-times { --icon: url("/icons/x.svg"); }
.fa-user { --icon: url("/icons/user.svg"); }
.fa-sign-out-alt { --icon: url("/icons/log-out.svg"); }
.fa-comment-alt { --icon: url("/icons/message-square.svg"); }
.fa-exchange-alt { --icon: url("/icons/arrow-left-right.svg"); }
.fa-volume-up { --icon: url("/icons/volume-2.svg"); }
.fa-volume-mute { --icon: url("/icons/volume-x.svg"); }
.fa-expand { --icon: url("/icons/maximize.svg"); }
.fa-clone { --icon: url("/icons/picture-in-picture-2.svg"); }

/* 404-Seite: das Icon ist riesig (8em), dort wirkt der Standardstrich zu dick. */
.logo .fa-frown {
    --icon: url("/icons/frown-thin.svg");
}

/* Schließen-Kreuz im Chat und an den Videokacheln (Zeichen ✕ in galene.css). */
.close-icon::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("/icons/x.svg") center / contain no-repeat;
    mask: url("/icons/x.svg") center / contain no-repeat;
}

/* Teilnehmerliste: Statuspunkt, gehobene Hand, Mikrofon, Kamera (Pseudo-Elemente in galene.css). */
#users > div::before {
    content: "";
    display: inline-block;
    width: 0.625em;
    height: 0.625em;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    background-color: currentColor;
}

#users > div.user-status-raisehand::before {
    width: 1em;
    height: 1em;
    margin-right: 2px;
    vertical-align: -0.125em;
    border-radius: 0;
    -webkit-mask: url("/icons/hand.svg") center / contain no-repeat;
    mask: url("/icons/hand.svg") center / contain no-repeat;
}

#users > div.user-status-microphone::after,
#users > div.user-status-camera::after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    top: 50%;
    margin-top: -0.5em;
    background-color: currentColor;
    -webkit-mask: var(--status-icon) center / contain no-repeat;
    mask: var(--status-icon) center / contain no-repeat;
}

#users > div.user-status-microphone::after { --status-icon: url("/icons/mic.svg"); }
#users > div.user-status-camera::after { --status-icon: url("/icons/video.svg"); }

/* ---------- Schmale Fenster ---------- */

@media only screen and (max-width: 1024px) {
    /* galene.css setzt hier eigene Farben/Ränder, die unser Overlay sonst überstimmt */
    #chat {
        border-right: none;
    }

    .login-container {
        background: var(--background);
    }

    .login-box {
        background: var(--surface);
    }

    .nav-link {
        min-width: 44px;
        padding: 2px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blink {
        animation: none;
    }

    .btn,
    .sidenav {
        transition: none;
    }
}