/* ------------------------------------------------------------------------
 * FEEC Teams — brand CSS overlay for MiroTalk SFU
 *
 * Mounted at: /src/public/css/Brand.css (ro)
 *
 * This file translates the FEEC design language (docs/THEMING.md) into
 * MiroTalk's CSS class structure. It is intentionally a thicker overlay
 * than a bare palette swap — it aims to make MiroTalk look like a sister
 * product to the FEEC Document Portal, not "default MiroTalk in blue".
 *
 * Coverage:
 *   1. Inter via Google Fonts (falls back to system-ui if CSP blocks)
 *   2. FEEC palette as CSS custom properties + MiroTalk's own vars
 *   3. Ambient accent gradient on body (subtle, fixed-attachment)
 *   4. Glass panels — translucent + backdrop-blur, .glass-effect parity
 *   5. Accent-glow primary buttons, soft focus halos on inputs
 *   6. Refined toolbar / SweetAlert / modal styling
 *   7. Gradient hero text on landing H1
 *
 * After first deploy, walk through the live UI in DevTools and add any
 * still-off-brand element under the "Targeted overrides" section at the
 * bottom — the selectors above are best-effort across MiroTalk versions.
 * ---------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* FEEC palette — must stay in sync with docs/THEMING.md */
  --feec-darker:        #070a1f;
  --feec-dark:          #0a0e27;
  --feec-border:        #1e293b;
  --feec-text:          #f1f5f9;
  --feec-muted:         #94a3b8;
  --feec-accent:        #3b82f6;
  --feec-accent-strong: #2563eb;

  /* MiroTalk reads some of its own custom properties — best-effort mapping. */
  --primary-color: var(--feec-accent);
  --accent-color:  var(--feec-accent);
  --bg-color:      var(--feec-darker);
  --panel-color:   var(--feec-dark);
  --text-color:    var(--feec-text);
  --muted-color:   var(--feec-muted);
  --border-color:  var(--feec-border);
}

/* ── Typography ───────────────────────────────────────────────────────── */
body, html,
button, input, select, textarea {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* ── Body / page — ambient accent glow ───────────────────────────────── */
body, html {
  background-color: var(--feec-darker) !important;
  color: var(--feec-text);
}
body {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(59, 130, 246, 0.06), transparent 60%) !important;
  background-attachment: fixed;
}

/* ── Glass panels — narrow to dialog/login surfaces only ─────────────── */
/* Earlier rev included .card, .panel, .modal-content, form, section.container
 * — way too broad. MiroTalk uses those class names inside the meeting room
 * (chat input form, side panels, participant cards), and the translucent
 * backdrop-blur let the video bleed through and made the whole interface
 * read as "blurry". Glass is now reserved for the login-style forms and
 * SweetAlert popups, where there's no video behind. */
.swal2-popup,
.join-container,
.user-name {
  background: rgba(10, 14, 39, 0.85) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(30, 41, 59, 0.6) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 60px -20px rgba(0, 0, 0, 0.6);
  color: var(--feec-text);
}

/* ── Primary buttons — accent gradient + glow ────────────────────────── */
button.btn,
.btn-primary,
button[type="submit"],
.join-btn,
.swal2-confirm {
  background: linear-gradient(135deg, var(--feec-accent), var(--feec-accent-strong)) !important;
  border: 1px solid rgba(59, 130, 246, 0.6) !important;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 10px !important;
  padding: 0.65rem 1.25rem;
  box-shadow:
    0 4px 14px rgba(59, 130, 246, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
button.btn:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.join-btn:hover,
.swal2-confirm:hover {
  filter: brightness(1.08);
  box-shadow:
    0 6px 22px rgba(59, 130, 246, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
button.btn:active,
.btn-primary:active,
button[type="submit"]:active,
.join-btn:active,
.swal2-confirm:active {
  transform: translateY(1px) scale(0.99);
}

/* ── Secondary / outline buttons ─────────────────────────────────────── */
.btn-secondary,
.btn-outline,
.swal2-cancel,
.swal2-deny {
  background: transparent !important;
  border: 1px solid var(--feec-border) !important;
  color: var(--feec-text) !important;
  border-radius: 10px !important;
  padding: 0.6rem 1.15rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover,
.btn-outline:hover,
.swal2-cancel:hover,
.swal2-deny:hover {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: var(--feec-accent) !important;
}

/* ── Input fields — soft accent halo on focus ────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select, textarea,
.swal2-input {
  background: rgba(7, 10, 31, 0.6) !important;
  border: 1px solid var(--feec-border) !important;
  color: var(--feec-text) !important;
  border-radius: 10px !important;
  padding: 0.55rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus,
.swal2-input:focus {
  border-color: var(--feec-accent) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
  outline: none !important;
}

/* ── Links ───────────────────────────────────────────────────────────── */
a, a:visited {
  color: var(--feec-accent);
  text-decoration: none;
}
a:hover {
  filter: brightness(1.15);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── In-meeting toolbar / control bar ────────────────────────────────── */
/* Solid black, no backdrop-filter — earlier rev used translucent + blur(14px)
 * which let the video behind it bleed through with a blur effect, making the
 * whole meeting interface read as "blurry". Solid black gives clear, decisive
 * meeting controls. */
.toolbar,
.control-bar,
#buttonsBar,
.bottomButtons {
  background: #000000 !important;
  border: 1px solid rgba(30, 41, 59, 0.7) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.7);
  padding: 0.5rem !important;
}
.toolbar button,
.control-bar button,
#buttonsBar button {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.toolbar button:hover,
.control-bar button:hover,
#buttonsBar button:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
.toolbar button.active,
.control-bar button.active,
#buttonsBar button.active {
  background: var(--feec-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.6),
              0 6px 16px rgba(59, 130, 246, 0.45);
}

/* Participant tile speaking outline */
.participant.speaking,
.video-tile.speaking,
[class*="speaking"] video {
  outline: 2px solid var(--feec-accent) !important;
  outline-offset: 0;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.35);
}

/* ── Modals / SweetAlert ─────────────────────────────────────────────── */
/* No backdrop-filter here — when a settings/host-login modal opens during
 * a meeting, a blurred video behind it looked unsettling. Solid dim instead. */
.modal-backdrop,
.swal2-backdrop,
.swal2-container {
  background: rgba(0, 0, 0, 0.78) !important;
}
.swal2-title { color: var(--feec-text) !important; font-weight: 600; }
.swal2-html-container { color: var(--feec-muted) !important; }
.swal2-popup { padding: 1.75rem !important; }

/* ── Home / landing — hero typography ────────────────────────────────── */
.hero h1,
header h1,
.landing h1,
main > h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--feec-text) 0%, var(--feec-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p,
header p,
.landing p {
  color: var(--feec-muted);
  font-size: 1.05rem;
}

/* ── Subtle entrance — cards only, not chrome ────────────────────────── */
@keyframes feec-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.card,
.panel,
.modal-content,
.swal2-popup {
  animation: feec-fade-in 280ms ease-out;
}

/* ── Header logo — swap MiroTalk's 32x32 logo for the wide FEEC mark ── */
/* The HTML hardcodes <img id="headerLogo" src="../images/logo.svg" width="32"
 * height="32">. We replace its rendered content with the wider FEEC og.png
 * (baked into the image as /images/feec-og.png) and force a usable size.
 * `content: url(...)` on an <img> is supported in all modern browsers. */
#headerLogo {
  content: url("/images/feec-og.png") !important;
  width: auto !important;
  height: 56px !important;
  max-width: 280px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Give the brand mark room to breathe in the navbar */
.brand.header-brand,
.header-brand,
.site-header-inner .brand {
  padding: 0.5rem 0 !important;
}

/* ── Site header — solid black to match the og.png logo card ─────────── */
/* The og.png has a pure-black background. Earlier we used --feec-darker
 * (#070a1f navy) for the navbar, but next to the true-black logo card it
 * read as a slightly-different tint. Matching the navbar to #000 gives a
 * seamless run from the logo card across the header. */
header.site-header,
.site-header {
  background: #000000 !important;
  border-top: none !important;
}

/* ── Force-hide MiroTalk's promotional sections ──────────────────────── */
/* Brand.js fetches /brand asynchronously and toggles these via inline
 * `style.display`. Until that fetch lands (50–200ms), the sections flash
 * with MiroTalk's defaults visible. !important here prevents that FOUC
 * AND survives if /brand ever fails. Footer is also hidden — the page
 * looks cleaner without MiroTalk's stock footer markup. */
#topSponsors,
#features,
#teams,
#tryEasier,
#poweredBy,
#sponsors,
#pastSponsors,
#advertisers,
#supportUs,
#footer,
footer {
  display: none !important;
}

/* ── Belt-and-braces — hide leftover "MiroTalk" attribution ──────────── */
[class*="brand-text-mirotalk"],
[class*="powered-by-mirotalk"],
[id*="poweredBy"] {
  display: none !important;
}

/* ── Hide all in-meeting toast notifications ─────────────────────────── */
/* MiroTalk fires SweetAlert toasts for events like "Wake Lock released",
 * "Reconnecting...", etc. They render poorly on mobile (overlay the
 * toolbar, don't auto-dismiss cleanly). The dialog popups (.swal2-popup
 * without the toast class — host login, confirms) are NOT hidden. */
.swal2-toast,
.swal2-container.swal2-toast-shown {
  display: none !important;
}

/* ── MiroTalk's bundled social + promo bar ───────────────────────────── */
/* MiroTalk's HTML hardcodes a navbar row of social icons (Discord, FB,
 * YouTube, Google/Gmail, LinkedIn) plus "Sponsor" and "GitHub Star"
 * pills. There are no env vars for most of these (LINKEDIN_URL='' only
 * covers one slot). We hide each element by its known href substring.
 * Matched against the live source on 2026-05-17 — if MiroTalk changes
 * these URLs in a future release, update the list here. */
a[href*="discord.gg"],
a[href*="discord.com/invite"],
a[href*="facebook.com/mirotalk"],
a[href*="youtube.com/watch"],
a[href^="mailto:miroslav.pejic"],
a[href*="linkedin.com/company/mirotalk"],
a[href*="github.com/sponsors/miroslavpejic85"],
a[href*="github.com/miroslavpejic85"],
a[href*="ghbtns.com"],
iframe[src*="ghbtns.com"],
iframe[src*="github.com"][src*="buttons"] {
  display: none !important;
}

/* ------------------------------------------------------------------------
 * Targeted overrides — add new rules below this line after inspecting the
 * deployed UI. Keep this section under ~50 lines; if it grows past that,
 * we've outgrown CSS-overlay branding and should consider forking the
 * MiroTalk image to bake the theme into the build.
 * ---------------------------------------------------------------------- */