/*
 * DualCor Stream Theme
 * Developer dark palette tokens and theme overrides.
 */

:root {
  --dc-bg-root: #0b0e14;
  --dc-bg-panel: #161b22;
  --dc-bg-elevated: #1f242c;
  --dc-border: #30363d;
  --dc-accent: #238636;
  --dc-accent-hover: #2ea043;
  --dc-text-primary: #e6edf3;
  --dc-text-muted: #8b949e;
  --dc-danger: #da3633;
}

/* Strict single-page non-scrolling stage */
html,
body {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
}

/* Base dark palette */
html:not([data-dc-transparent="true"]),
body:not([data-dc-role="CLEAN_OUTPUT"]) {
  background-color: var(--dc-bg-root, #0b0e14) !important;
  color: var(--dc-text-primary, #e6edf3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Standalone OBS clean and transparent player mode */
html[data-dc-transparent="true"],
body[data-dc-role="CLEAN_OUTPUT"] {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-dc-transparent="true"] #dcAuthGate,
html[data-dc-transparent="true"] #dcTopBar,
html[data-dc-transparent="true"] #dcAdminDrawer,
html[data-dc-transparent="true"] #dcViewerStandby,
body[data-dc-role="CLEAN_OUTPUT"] #dcAuthGate,
body[data-dc-role="CLEAN_OUTPUT"] #dcTopBar,
body[data-dc-role="CLEAN_OUTPUT"] #dcAdminDrawer,
body[data-dc-role="CLEAN_OUTPUT"] #dcViewerStandby {
  display: none !important;
}

/* Hide upstream VDO.Ninja room picker and branding noise */
#header,
#footer,
.footer,
#legal,
#credits,
#reportbutton,
#helpbutton,
#translateButton,
#calendarButton,
#version,
#versionText {
  display: none !important;
}

/* Edge-to-edge full-bleed broadcast stage padding */
body[data-dc-role="VIEWER"],
body[data-dc-role="ADMIN"],
body[data-dc-role="ADMIN"].dc-drawer-open,
body[data-dc-role="CLEAN_OUTPUT"],
html[data-dc-transparent="true"] body {
  padding-top: 0 !important;
  box-sizing: border-box;
}

body[data-dc-role="ADMIN"].dc-drawer-open #dcViewerStandby {
  inset: 0 !important;
}

/* Edge-to-edge stage positioning and video fit */
#gridlayout {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #000000 !important;
  z-index: 1 !important;
}

html[data-dc-transparent="true"] #gridlayout,
body[data-dc-role="CLEAN_OUTPUT"] #gridlayout {
  background: transparent !important;
  background-color: transparent !important;
}

#gridlayout .vidcon {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

#gridlayout video {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: fill !important;
  display: block !important;
}

body[data-dc-fit="contain"] #gridlayout video {
  object-fit: contain !important;
}

/* Unauthenticated State */
body[data-dc-role="UNAUTHENTICATED"] #mainmenu,
body[data-dc-role="UNAUTHENTICATED"] #controlButtons,
body[data-dc-role="UNAUTHENTICATED"] #gridlayout,
body[data-dc-role="UNAUTHENTICATED"] #dcTopBar,
body[data-dc-role="UNAUTHENTICATED"] #dcAdminDrawer,
body[data-dc-role="UNAUTHENTICATED"] #dcViewerStandby {
  display: none !important;
}

body[data-dc-role="UNAUTHENTICATED"] #dcAuthGate {
  display: flex !important;
}

/* Viewer State */
body[data-dc-role="VIEWER"] #dcAuthGate,
body[data-dc-role="VIEWER"] #dcAdminDrawer,
body[data-dc-role="VIEWER"] .dc-admin-only,
body[data-dc-role="VIEWER"] #mainmenu {
  display: none !important;
}

body[data-dc-role="VIEWER"] #dcTopBar {
  display: flex !important;
}

/* Hide publisher controls for viewer */
body[data-dc-role="VIEWER"] #mutebutton,
body[data-dc-role="VIEWER"] #mutevideobutton,
body[data-dc-role="VIEWER"] #screensharebutton,
body[data-dc-role="VIEWER"] #screenshare2button,
body[data-dc-role="VIEWER"] #screenshare3button,
body[data-dc-role="VIEWER"] #websitesharebutton,
body[data-dc-role="VIEWER"] #roomsettingsbutton,
body[data-dc-role="VIEWER"] #obscontrolbutton,
body[data-dc-role="VIEWER"] #recordLocalbutton,
body[data-dc-role="VIEWER"] #hangupbutton {
  display: none !important;
}

/* Keep speaker, fullscreen, and PiP accessible */
body[data-dc-role="VIEWER"] #mutespeakerbutton,
body[data-dc-role="VIEWER"] #fullscreenPage,
body[data-dc-role="VIEWER"] #PictureInPicturePage {
  display: inline-flex !important;
}

/* Admin State */
body[data-dc-role="ADMIN"] #dcAuthGate {
  display: none !important;
}

body[data-dc-role="ADMIN"] #dcTopBar {
  display: flex !important;
}

body[data-dc-role="VIEWER"] #mainmenu,
body[data-dc-role="ADMIN"] #mainmenu {
  display: none !important;
}

body:not([data-dc-role="ADMIN"]) .dc-admin-only,
body:not([data-dc-role="ADMIN"]) #dcAdminDrawer {
  display: none !important;
}

/* DualCor Auth Gate Layout */
.dc-gate-container {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--dc-bg-root, #0b0e14);
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.dc-gate-card {
  background-color: var(--dc-bg-panel, #161b22);
  border: 1px solid var(--dc-border, #30363d);
  border-radius: 8px;
  padding: 36px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.dc-gate-logo {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  object-fit: contain;
}

.dc-gate-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--dc-text-primary, #e6edf3);
}

.dc-gate-subtitle {
  font-size: 13px;
  color: var(--dc-text-muted, #8b949e);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
}

.dc-gate-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dc-text-primary, #e6edf3);
  margin: 0 0 24px 0;
}

.dc-gate-footer {
  font-size: 12px;
  color: var(--dc-text-muted, #8b949e);
  margin-top: 20px;
  line-height: 1.4;
}

.dc-local-preview-auth {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--dc-border, #30363d);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dc-local-preview-label {
  font-size: 11px;
  color: var(--dc-text-muted, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* DualCor Top Bar Layout */
.dc-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 10000;
  background-color: rgba(22, 27, 34, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dc-border, #30363d);
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dc-top-bar.dc-hud-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

/* Strict Full Screen UI chrome suppression */
:fullscreen #dcTopBar,
:-webkit-full-screen #dcTopBar,
:fullscreen #dcAdminDrawer,
:-webkit-full-screen #dcAdminDrawer,
body.dc-is-fullscreen #dcTopBar,
body.dc-is-fullscreen #dcAdminDrawer,
body[data-dc-role="VIEWER"].dc-is-fullscreen #dcTopBar,
body[data-dc-role="ADMIN"].dc-is-fullscreen #dcTopBar,
body[data-dc-role="ADMIN"].dc-is-fullscreen #dcAdminDrawer,
:fullscreen #controlButtons,
:-webkit-full-screen #controlButtons,
:fullscreen #miniTaskBar,
:-webkit-full-screen #miniTaskBar,
body.dc-is-fullscreen #controlButtons,
body.dc-is-fullscreen #miniTaskBar {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dc-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dc-top-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
}

.dc-top-brand {
  font-weight: 600;
  font-size: 15px;
  color: var(--dc-text-primary, #e6edf3);
}

.dc-top-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dc-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dc-pill {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.dc-pill-view {
  background-color: rgba(139, 148, 158, 0.15);
  border: 1px solid var(--dc-border, #30363d);
  color: var(--dc-text-muted, #8b949e);
}

.dc-pill-admin {
  background-color: rgba(35, 134, 54, 0.2);
  border: 1px solid var(--dc-accent, #238636);
  color: #3fb950;
}

.dc-user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dc-user-email {
  font-size: 13px;
  color: var(--dc-text-primary, #e6edf3);
}

.dc-role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.dc-badge-admin {
  background-color: rgba(35, 134, 54, 0.2);
  color: #3fb950;
  border: 1px solid rgba(35, 134, 54, 0.4);
}

.dc-badge-viewer {
  background-color: rgba(139, 148, 158, 0.2);
  color: var(--dc-text-muted, #8b949e);
  border: 1px solid var(--dc-border, #30363d);
}

.dc-mode-btn,
.dc-drawer-toggle-btn {
  font-size: 12px;
  padding: 5px 12px;
  text-decoration: none;
  color: var(--dc-text-primary, #e6edf3);
  background-color: var(--dc-bg-elevated, #1f242c);
  border: 1px solid var(--dc-border, #30363d);
  border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dc-mode-btn:hover,
.dc-drawer-toggle-btn:hover {
  background-color: #262c36;
  border-color: #484f58;
}

/* DualCor Admin Control Drawer */
.dc-admin-drawer {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: var(--dc-bg-panel, #161b22);
  border-bottom: 1px solid var(--dc-border, #30363d);
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.dc-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dc-drawer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--dc-text-primary, #e6edf3);
}

.dc-drawer-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--dc-text-muted, #8b949e);
}

.dc-drawer-info code {
  color: var(--dc-text-primary, #e6edf3);
  background-color: var(--dc-bg-root, #0b0e14);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--dc-border, #30363d);
}

.dc-latency-pill {
  color: #3fb950;
  background-color: rgba(35, 134, 54, 0.15);
  border: 1px solid rgba(35, 134, 54, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.dc-whip-box {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-drawer-label-primary {
  font-weight: 600;
  color: var(--dc-text-primary, #e6edf3);
}

.dc-drawer-hint {
  font-size: 12px;
  color: var(--dc-text-muted, #8b949e);
  line-height: 1.4;
  margin-top: 2px;
}

.dc-drawer-push {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-drawer-label {
  font-size: 12px;
  color: var(--dc-text-muted, #8b949e);
}

.dc-input-group {
  display: flex;
  gap: 8px;
}

.dc-mono-input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 6px 10px;
  background-color: #0b0e14 !important;
  border: 1px solid #30363d !important;
  border-radius: 6px;
  color: #e6edf3 !important;
  box-sizing: border-box;
}

.dc-mono-input-large {
  font-size: 14px !important;
  font-weight: 600;
  padding: 10px 14px !important;
  border-color: #238636 !important;
}

/* DualCor Viewer Standby Overlay */
.dc-standby-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--dc-bg-root, #0b0e14);
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.dc-standby-card {
  background-color: var(--dc-bg-panel, #161b22);
  border: 1px solid var(--dc-border, #30363d);
  border-radius: 8px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.dc-standby-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  object-fit: contain;
}

.dc-standby-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--dc-text-primary, #e6edf3);
}

.dc-standby-status {
  font-size: 14px;
  color: var(--dc-text-muted, #8b949e);
  margin: 0 0 20px 0;
}

/* Button & input styles conforming to developer dark palette */
.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}

.dc-btn-primary,
button.gobutton,
.gowebcam,
#dcGoogleSignInBtn {
  background-color: var(--dc-accent, #238636) !important;
  color: #ffffff !important;
  border: 1px solid rgba(240, 246, 252, 0.1) !important;
}

.dc-btn-primary:hover,
button.gobutton:hover,
.gowebcam:hover,
#dcGoogleSignInBtn:hover {
  background-color: var(--dc-accent-hover, #2ea043) !important;
}

.dc-btn-secondary {
  background-color: var(--dc-bg-elevated, #1f242c);
  color: var(--dc-text-primary, #e6edf3);
  border: 1px solid var(--dc-border, #30363d);
}

.dc-btn-secondary:hover {
  background-color: #262c36;
  border-color: #484f58;
}

.dc-btn-subtle {
  background-color: transparent;
  color: var(--dc-text-muted, #8b949e);
  border: 1px solid var(--dc-border, #30363d);
}

.dc-btn-subtle:hover {
  color: var(--dc-text-primary, #e6edf3);
  background-color: var(--dc-bg-elevated, #1f242c);
}

/* Modals, dialogs, cards and control surface styling */
.modal,
.modal-content,
.ajs-dialog,
.swal-modal,
#mainmenu .card,
#container-2,
#container-3 {
  background-color: var(--dc-bg-panel, #161b22) !important;
  border: 1px solid var(--dc-border, #30363d) !important;
  color: var(--dc-text-primary, #e6edf3) !important;
}

#mainmenu .card h2,
#mainmenu .card h3,
#mainmenu .card span,
#mainmenu .card label,
#mainmenu .card p,
#mainmenu .card b {
  color: var(--dc-text-primary, #e6edf3) !important;
}
#mainmenu .card svg {
  filter: invert(0.92) hue-rotate(180deg) !important;
}
#mainmenu .card:hover {
  border-color: var(--dc-accent, #238636) !important;
  box-shadow: 0 0 0 1px var(--dc-accent, #238636), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

input, select, textarea {
  background-color: var(--dc-bg-root, #0b0e14);
  border: 1px solid var(--dc-border, #30363d);
  color: var(--dc-text-primary, #e6edf3);
}

@media (max-width: 768px) {
  .dc-top-bar {
    height: auto !important;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }
  .dc-pill {
    display: none !important;
  }
  .dc-user-email {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dc-top-center {
    width: 100%;
    order: 3;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--dc-border, #30363d);
  }
  .dc-admin-drawer {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 12px;
  }
  body[data-dc-role="ADMIN"],
  body[data-dc-role="ADMIN"].dc-drawer-open {
    padding-top: 0 !important;
  }
  body[data-dc-role="ADMIN"].dc-drawer-open #dcViewerStandby {
    position: relative !important;
    inset: 0 !important;
    margin-top: 16px;
    min-height: 320px;
  }
  .dc-drawer-header,
  .dc-drawer-actions,
  .dc-drawer-info {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Hide VDO.Ninja overlay chrome for cleaner broadcast viewing */
body[data-dc-role="VIEWER"] .signal-meter,
body[data-dc-role="VIEWER"] .rem-con-count,
body[data-dc-role="VIEWER"] .broadcast-status,
body[data-dc-role="VIEWER"] .battery,
body[data-dc-role="VIEWER"] .video-meter,
body[data-dc-role="VIEWER"] .video-meter2,
body[data-dc-role="VIEWER"] #controlButtons,
body[data-dc-role="VIEWER"] #miniTaskBar,
body[data-dc-role="VIEWER"] #connectUsers,
body[data-dc-role="ADMIN"] .signal-meter,
body[data-dc-role="ADMIN"] .rem-con-count,
body[data-dc-role="ADMIN"] .broadcast-status,
body[data-dc-role="ADMIN"] .battery,
body[data-dc-role="ADMIN"] .video-meter,
body[data-dc-role="ADMIN"] .video-meter2,
body[data-dc-role="ADMIN"] #controlButtons,
body[data-dc-role="ADMIN"] #miniTaskBar,
body[data-dc-role="ADMIN"] #connectUsers,
.vidcon .signal-meter,
.vidcon .rem-con-count,
.vidcon .broadcast-status,
.vidcon .battery,
.vidcon .video-meter,
.vidcon .video-meter2 {
  display: none !important;
}