/*
 * TougeTech Meet - Oberflaechen-Overrides fuer das OpenTalk-Web-Frontend.
 * Grundfarben kommen aus der gepatchten Theme-Palette (50-tougetech-branding.sh);
 * hier nur, was die Palette nicht abdeckt: Logo, Schrift, Formen, Kontraste.
 * Selektoren bewusst ueber stabile Merkmale (MUI-Klassen, ids, aria-label,
 * data-testid), keine gehashten css-xxxx-Klassen.
 */
:root {
  --tt-graphit: #15161A; --tt-surface: #1F2126; --tt-float: #26282F; --tt-line: #2A2C33;
  --tt-copper: #C6703D; --tt-patina: #E3A06A; --tt-copper-dark: #9A5024;
  --tt-text: #ECEBE7; --tt-muted: #9A9790; --tt-paper: #F3F1EC; --tt-ink: #1B1C20;
  --tt-on-copper: #1A120C;
  --tt-radius: 6px;
}

/* ---------- Logo: OpenTalk-Schriftzug -> TougeTech-Wortmarke ---------- */
svg[viewBox="0 0 206.392 45.061"] {
  background: url('/tougetech/wordmark-light.svg') left center / contain no-repeat;
}
svg[viewBox="0 0 206.392 45.061"] > * { display: none; }
/* Dashboard ist hell -> dunkle Wortmarke */
svg[viewBox="0 0 206.392 45.061"][aria-labelledby^="dashboard-logo"] {
  background-image: url('/tougetech/wordmark-dark.svg');
}
/* Gemessener Untergrund (tt-theme.js) hat Vorrang: helles Theme -> dunkle Wortmarke */
svg[viewBox="0 0 206.392 45.061"][data-tt-bg="light"] { background-image: url('/tougetech/wordmark-dark.svg?v=2') !important; }
svg[viewBox="0 0 206.392 45.061"][data-tt-bg="dark"] { background-image: url('/tougetech/wordmark-light.svg') !important; }
/* Lobby: Logo-Pille ruhiger */
button[aria-label="Link zum Dashboard"]:has(> svg[viewBox="0 0 206.392 45.061"]),
button[aria-label="Go to dashboard"]:has(> svg[viewBox="0 0 206.392 45.061"]) {
  border-radius: var(--tt-radius) !important;
  background-color: transparent !important;
}

/* ---------- Schrift ---------- */
h1, h2, h3, .MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3 {
  font-family: 'Space Grotesk', 'Hanken Grotesk', Arial, sans-serif !important;
  letter-spacing: -0.02em;
}

/* ---------- Buttons: rechteckig, kleine Rundung, Kupfer ---------- */
.MuiButton-root { border-radius: var(--tt-radius) !important; text-transform: none; }
.MuiButton-containedSecondary:not(.Mui-disabled) { color: var(--tt-on-copper) !important; }
.MuiButton-containedSecondary:not(.Mui-disabled) svg { color: inherit; fill: currentColor; }
.MuiButton-containedSecondary:not(.Mui-disabled):hover { background-color: var(--tt-patina) !important; }


/* Werkzeug-Buttons (Mikro, Kamera, Teilen, Hand, Reaktion, Mehr, Auflegen) + Lobby */
[id^="toolbar-"].MuiIconButton-root,
[data-testid^="toolbar"].MuiIconButton-root,
button.MuiIconButton-root[aria-label="Speedtest starten"], button.MuiIconButton-root[aria-label="Start Speed-Test"],
#my-meeting-menu-button,
button.MuiIconButton-root[aria-label="Zurück"], button.MuiIconButton-root[aria-label="Back"] {
  border-radius: var(--tt-radius) !important;
}

/* ---------- Tastatur-Fokus gut sichtbar ---------- */
.MuiButtonBase-root.Mui-focusVisible, .MuiButtonBase-root:focus-visible,
a:focus-visible, input:focus-visible {
  outline: 2px solid var(--tt-patina) !important;
  outline-offset: 2px !important;
}
#main-content-dashboard .MuiButtonBase-root.Mui-focusVisible,
#main-content-dashboard .MuiButtonBase-root:focus-visible,
#main-content-dashboard a:focus-visible { outline-color: var(--tt-copper-dark) !important; }

/* ---------- Eingabefelder im dunklen Bereich (Lobby, Raum) ---------- */
body:not(:has(#main-content-dashboard)) .MuiInputBase-root:not(.Mui-disabled) {
  background-color: var(--tt-float) !important;
  color: var(--tt-text) !important;
  border-radius: var(--tt-radius) !important;
}
body:not(:has(#main-content-dashboard)) .MuiInputBase-root input::placeholder,
body:not(:has(#main-content-dashboard)) .MuiInputBase-root textarea::placeholder { color: var(--tt-muted); opacity: 1; }
body:not(:has(#main-content-dashboard)) .MuiInputBase-root svg { color: var(--tt-muted); }
body:not(:has(#main-content-dashboard)) .MuiOutlinedInput-notchedOutline { border-color: #3A3C44 !important; }
body:not(:has(#main-content-dashboard)) .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--tt-muted) !important; }
body:not(:has(#main-content-dashboard)) .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--tt-copper) !important; border-width: 1px !important; }
body:not(:has(#main-content-dashboard)) .MuiInputLabel-root.MuiInputLabel-shrink { background-color: var(--tt-surface) !important; color: var(--tt-text) !important; border-radius: 3px; }
body:not(:has(#main-content-dashboard)) .MuiInputLabel-root:not(.MuiInputLabel-shrink) { color: var(--tt-muted) !important; }

/* Primaeraktion deaktiviert: neutral statt blasses Kupfer */
.MuiButton-containedSecondary.Mui-disabled {
  opacity: 1; background-color: transparent !important; color: var(--tt-muted) !important;
  box-shadow: inset 0 0 0 1px #4A4C54 !important;
}
#main-content-dashboard .MuiButton-containedSecondary.Mui-disabled { color: #6B6862 !important; box-shadow: inset 0 0 0 1px #C9C5BC !important; }

/* Dashboard-Navigation: gleiche kleine Rundung */
nav .MuiListItem-root, nav .MuiListItem-root > a, nav .MuiListItemButton-root { border-radius: var(--tt-radius) !important; }