/* shared.css - EasyScreenShare
   One stylesheet controlling the look of every page in the system:
   the main app, the invite page, and all the auth pages (login,
   create account, forgot/reset password, thank-you). Server.js wraps
   every page's body content with a shared header and footer that
   both reference this file, so a color or spacing change made here
   shows up everywhere at once instead of needing to be copy-pasted
   into each page individually. */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #131c29;
  color: #f0f0f0;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 {
  font-size: 22px;
  margin: 20px 0 10px;
}

a {
  color: #7fb3ff;
}

/* ===== Minimal header (logged-out pages: login, create account,
   forgot/reset password) - just the logo, centered, no bar. ===== */
#minimalHeader {
  padding-top: 20px;
}
#minimalHeader img {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  width: 60%;
  height: auto;
}

/* ===== Full control bar (logged-in pages: the main app, the invite
   page) - logo, account tier badge, and the button set. Each page's
   own script decides which buttons are enabled and what they do;
   this only controls how the bar looks. ===== */
#controlBar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #1c2733;
  border-bottom: 1px solid #2e3d4d;
  color: white;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  z-index: 1000;
  box-sizing: border-box;
}
body.has-control-bar {
  padding-top: 56px;
  box-sizing: border-box;
}
#controlBar button {
  white-space: nowrap;
}
#barLogo {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
#accountTierBadgeBar {
  display: none;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 6px;
  background: #2a2a2a;
  color: #ccc;
  margin-left: 12px;
}
#accountTierBadgeBar.paid {
  background: #1f4d2f;
  color: #6fdb8f;
}
#hamburgerBtn {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
#barMenu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
#barCenter, #barRight {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 700px) {
  #hamburgerBtn {
    display: block;
  }
  #barMenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1c2733;
    border-bottom: 1px solid #2e3d4d;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 16px;
    gap: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  }
  #barMenu.open {
    display: flex;
  }
  #barCenter, #barRight {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  #barRight {
    align-items: stretch;
  }
  #guestsDropdown {
    position: static;
    width: auto;
    margin-top: 8px;
  }
}

/* Control bar buttons - shared look across every page that uses the
   full bar. All buttons use the same blue when active; the label text
   itself (not color) conveys what each one does and what state it's
   in - e.g. "Share Your Screen" becomes "Change Screen" once live,
   rather than the button changing color to signal that. A page marks
   a button disabled (via the HTML attribute) when the function isn't
   available on that particular page, e.g. Share Your Screen has
   nothing to do on the Invite Guests page - disabled buttons grey out
   regardless of which one it is. */
#shareBtn {
  padding: 8px 16px;
  font-size: 14px;
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#shareBtn:disabled {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
}
/* A visible pulse while waiting to find out whether someone actually
   picked something in the browser's share picker - Daily.co has no way
   to tell us directly, so this covers the wait with a clear "still
   working" signal instead of the button just sitting there silent. */
@keyframes waitingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
#shareBtn.waiting-for-picker {
  animation: waitingPulse 1s ease-in-out infinite;
}
/* Change Screen (the .sharing class) intentionally stays the same
   blue as every other live action in the bar - no color override
   here, on purpose. See index.html's shareBtnLabel() comments for
   why: grey already means "done, no longer the priority" elsewhere
   (the invite button once it says "Sent!"), which is the wrong
   signal for an ongoing, active share. */
#muteBtn {
  padding: 8px 16px;
  font-size: 14px;
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#muteBtn.muted {
  background: #e05c4d;
}
#muteBtn:disabled {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
}
#systemAudioBtn {
  padding: 8px 16px;
  font-size: 14px;
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#systemAudioBtn.muted {
  background: #e05c4d;
}
#systemAudioBtn.off {
  background: #d9a441;
  color: #1a1a1a;
}
#requestBtn {
  padding: 8px 16px;
  font-size: 14px;
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#requestBtn:disabled {
  background: #555;
  cursor: not-allowed;
}
#takeBackBtn {
  padding: 8px 16px;
  font-size: 14px;
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#guestsMenu, #inviteGuestsMenu {
  position: relative;
}
#guestsToggleBtn {
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}
#guestsToggleBtn:disabled {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
}
#inviteGuestsToggleBtn {
  background: #3a5a8c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}
#inviteGuestsToggleBtn:disabled {
  background: #555;
  color: #aaa;
  cursor: not-allowed;
}
/* Invite Your Guests / Guests Invited intentionally stays blue in both
   states, same reasoning as Change Screen above - no .completed color
   override here on purpose. */
#guestsBadge {
  display: none;
  background: #b03a2e;
  color: white;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 6px;
  margin-left: 4px;
}
#guestsDropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1c2733;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 12px;
  width: 280px;
  text-align: left;
  color: #f0f0f0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
#homeBtn, #howToLinkBar, #logoutBtnBar, #logoutBtn, #leaveBtn {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #3a5a8c;
  color: white;
}

/* ===== Shared footer - same on every page. margin-top: auto (paired
   with the flex column on body above) pushes this to the bottom of
   the viewport on short pages, while still flowing naturally after
   content on tall ones - relies on the footer being the last element
   in body, which server.js's header/body/footer stitching guarantees. ===== */
#pageFooter {
  margin-top: auto;
  padding: 20px 16px;
  font-size: 20px;
  color: #666;
}
#footerHowToLinkLine {
  margin-bottom: 14px;
}

/* ===== Forms - login, create account, forgot/reset password all
   share this same look. ===== */
#formBox {
  margin-bottom: 20px;
}
#formBox input {
  padding: 8px;
  font-size: 16px;
  width: 220px;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.password-wrap {
  position: relative;
  width: 220px;
  margin: 0 auto 10px;
}
.password-wrap input {
  width: 100%;
  margin-bottom: 0;
  padding-right: 34px;
  box-sizing: border-box;
}
#formBox button.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: #f0f0f0;
  color: #1a1a1a;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  line-height: 1;
}
#formBox button, .form-submit-btn {
  padding: 14px 28px;
  font-size: 18px;
  background: #2d7d46;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#formBox button:disabled, .form-submit-btn:disabled {
  background: #555;
  cursor: not-allowed;
}
/* Login, reset-password, and forgot-password use blue instead of the
   green create-account uses, to visually distinguish "signing in" from
   "signing up" at a glance. These need to be at least as specific as
   the "#formBox button" rule above (an ID plus an element type) or
   they lose to it regardless of source order - #loginBtn alone is not
   specific enough on its own to override that rule. */
#formBox button#loginBtn, #formBox button#resetBtn, #formBox button#sendBtn {
  background: #3a5a8c;
}
#status {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 15px;
  min-height: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
p.instructions {
  font-size: 14px;
  color: #ccc;
  max-width: 320px;
  margin: 0 auto 20px;
}
.error {
  color: #e08080;
}
.success {
  color: #7fd99a;
}

/* ===== Main app - status area, room setup, video, and everything
   else specific to the live session screen. ===== */
#pageStatus {
  margin: 24px auto 0;
  max-width: 700px;
  padding: 0 16px;
}
#roomBox .howto-critical-btn {
  display: block;
  margin: 14px auto 0;
  padding: 16px 40px;
  background: #e05c4d;
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#roomBox .howto-critical-btn:hover {
  background: #c94a3d;
}
#pageStatus #status {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #ff8c42;
  margin-bottom: 6px;
}
#pageStatus #roleLabel,
#pageStatus #controlIndicator {
  display: block;
  font-size: 15px;
  color: #ccc;
}
#pageStatus #modeLabel {
  display: inline-block;
  font-size: 14px;
  color: #f0f0f0;
  background: #2a2a2a;
  border-radius: 6px;
  padding: 4px 12px;
  margin-top: 8px;
}
#roleLabel {
  font-size: 13px;
  color: #e8f4f2;
  margin: 0;
}
#controlIndicator {
  font-size: 13px;
  color: #f0f0f0;
  margin: 0;
}
#modeLabel {
  font-size: 13px;
  color: #f0f0f0;
  display: none;
  margin: 0;
}
#topNotifications {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
}
#topNotifications > * {
  pointer-events: auto;
}
#roomBox {
  margin-top: 20px;
  margin-bottom: 20px;
}
#roomBox input {
  padding: 8px;
  font-size: 16px;
  width: 160px;
}
#roomBox button {
  padding: 8px 16px;
  font-size: 16px;
  margin-left: 6px;
}
#nameInput, #lastNameInput {
  padding: 8px;
  font-size: 16px;
  width: 160px;
  margin-bottom: 10px;
  display: inline-block;
}
#linkBox {
  margin-top: 24px;
  margin-bottom: 20px;
}
#copyLinkLabel {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 14px;
}
#linkBox input {
  padding: 8px;
  font-size: 14px;
  width: 320px;
}
#linkBox button {
  padding: 8px 16px;
  font-size: 16px;
  margin-left: 6px;
}
#controls {
  display: none;
  align-items: center;
  gap: 10px;
}
#approvalBox {
  display: none;
  background: #1c2733;
  border: 2px solid #1b9e91;
  border-radius: 8px;
  padding: 14px 18px;
  max-width: 460px;
  text-align: left;
  color: #f0f0f0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.approval-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}
.approval-row + .approval-row {
  border-top: 1px solid #444;
}
.approval-row-name {
  text-align: left;
  flex: 1;
  font-size: 13px;
}
#approvalBox button {
  padding: 6px 12px;
  font-size: 13px;
  margin: 0 0 0 6px;
}
.allow-btn {
  background: #2d7d46;
  color: white;
  border: none;
  border-radius: 6px;
}
.deny-btn {
  background: #b03a2e;
  color: white;
  border: none;
  border-radius: 6px;
}
#sessionTimer {
  display: none;
  font-size: 14px;
  font-weight: bold;
  color: #f0f0f0;
  white-space: nowrap;
}
#sessionTimer.warning {
  color: #d9a441;
}
#sessionTimer.grace {
  color: #e05c4d;
}
#upgradeNotice {
  display: none;
  margin-top: 16px;
  font-size: 15px;
  color: #ccc;
}
#upgradeHeadline {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
}
#upgradeBtn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 28px;
  background: #ff8c42;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
#upgradeBtn:hover {
  background: #ffa35f;
}
.howto-modal-dialog {
  border: none;
  border-radius: 8px;
  padding: 0;
  width: 90vw;
  max-width: 800px;
  height: 50.625vw;
  max-height: 450px;
  background: black;
  overflow: hidden;
}
.howto-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}
video {
  display: block;
  width: 90%;
  height: auto;
  max-width: 1600px;
  max-height: 85vh;
  object-fit: contain;
  background: black;
  border-radius: 6px;
  margin: 10px auto 0;
}

/* ===== Thank-you (post-upgrade confirmation) page specific ===== */
#confirmBody {
  font-size: 16px;
  color: #ccc;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}
#goToAppBtn {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 28px;
  background: #ff8c42;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
#goToAppBtn:hover {
  background: #ffa35f;
}
#guaranteeNote {
  font-size: 13px;
  color: #888;
  margin-top: 36px;
}

/* ===== Invite page specific ===== */
#roomNote {
  font-size: 14px;
  color: #888;
  margin-bottom: 20px;
}
#inviteLabel {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 18px;
}
#inviteRows {
  max-width: 460px;
  margin: 0 auto;
}
.inviteRow {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.inviteNameInput {
  width: 160px;
  padding: 8px;
  font-size: 15px;
}
.inviteEmailInput {
  width: 240px;
  padding: 8px;
  font-size: 15px;
}
#sendInviteBtn {
  margin-top: 16px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#linkBox button#sendInviteBtn {
  padding: 14px 28px;
  font-size: 18px;
  background: #2d7d46;
}
#linkBox button#sendInviteBtn:disabled {
  background: #555;
  cursor: not-allowed;
}
/* Forced blue here rather than falling back to the green default above -
   matches the rest of the bar's "still a live, usable action" color,
   same reasoning as Change Screen and Invite Your Guests. */
#linkBox button#sendInviteBtn.completed {
  background: #3a5a8c;
  cursor: pointer;
}