/* Zerox Workspace — LiveKit Meet brand overlay.
 * Source: zerox-workspace/design/tokens.{ts,css} (HeroUI Pro v3).
 * Injected by Caddy via `/__zerox/meet-brand.css` into meet.zw responses.
 *
 * LiveKit Meet's upstream landing markets itself as "LiveKit Cloud demo"
 * and ships dark `.lk-button` tones. This overlay:
 *   - retints buttons to HeroUI primary #006FEE so they match the rest
 *     of the stack (webmail, docs, switcher, auth)
 *   - hides the upstream "Try LiveKit Meet for free with our live demo
 *     project" copy and the "Demo" tab — they advertise LiveKit Cloud,
 *     not our self-hosted SFU
 *   - replaces the LiveKit Meet wordmark with "Zerox Meet" via CSS
 *     pseudo-element trick (visibility: hidden; ::before)
 *
 * Keep selectors loose against upstream class hashes (Home_tabContainer__OWE3m)
 * — they're CSS-modules and the hash changes every build. We bind by
 * class prefix using attribute selectors. */

:root {
  --lk-control-bg: #006FEE;
  --lk-control-hover-bg: #005BC4;
  --lk-control-active-bg: #004493;
  --lk-fg: #FFFFFF;
}

/* Primary brand color for every LiveKit button. */
.lk-button,
button.lk-button {
  background: #006FEE !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  border: none !important;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  box-shadow: 0 4px 14px rgba(0, 111, 238, .25);
  transition: background .15s ease, box-shadow .15s ease;
}
.lk-button:hover  { background: #005BC4 !important; box-shadow: 0 6px 18px rgba(0,111,238,.32); }
.lk-button:active { background: #004493 !important; transform: translateY(1px); }

/* Hide the upstream "Demo" tab + the "live demo project" pitch — those
   point at LiveKit Cloud sandboxes, not our SFU. Only the "Custom" flow
   makes sense for a self-hosted instance. */
[class*="Home_tabContainer"] > button:first-child { display: none !important; }
[class*="Home_tabContent"] > p:first-child {
  visibility: hidden;
  position: relative;
}
[class*="Home_tabContent"] > p:first-child::after {
  content: "Start a meeting on the Zerox SFU.";
  visibility: visible;
  position: absolute;
  inset: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: rgba(255, 255, 255, .72);
}

/* Replace the "Open source video conferencing app built on LiveKit
   Components, LiveKit Cloud and Next.js" subhead — that's marketing
   copy for upstream, not for our workspace. */
main > h2,
section > h2 {
  visibility: hidden;
  position: relative;
}
main > h2::after,
section > h2::after {
  content: "Zerox Meet";
  visibility: visible;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
}

/* Wordmark wrapper logo (the "LiveKit Meet" SVG). We don't have a brand
   asset upload pipeline yet — hide the SVG entirely; the `::after` on
   the h2 carries the workspace name. */
[class*="Home_logo"],
svg[aria-label*="LiveKit"] { display: none !important; }

/* Match the rest of the stack: ui-sans-serif everywhere. */
html, body, .lk-prejoin, .lk-input, .lk-video-conference {
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* Pre-join input radius + focus ring (HeroUI input) */
.lk-input {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-input:focus,
.lk-input:focus-within {
  border-color: #006FEE !important;
  box-shadow: 0 0 0 2px rgba(0, 111, 238, .25) !important;
  outline: none !important;
}