/* ================================================================
   GATEWAY.CSS — Standalone styles for the Gateway Blade pages
   Cherry-picked from home.css, with home-* renamed to gateway-*
   ================================================================ */

/* ================================================================
   FONTS
   ================================================================ */

@font-face {
    font-family: "Fraunces";
    src: url('/css/fonts/Fraunces/fraunces-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Fraunces";
    src: url('/css/fonts/Fraunces/fraunces-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* ================================================================
   GATEWAY PAGE LAYOUT (from home-container / home-background etc.)
   ================================================================ */

.gateway-page {
  min-height: 100vh;
  display: flex;
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
}

.gateway-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--gateway-bg-url, url(/images/login_bg.jpg));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Logo — top-left, fills space left of the login column */
.gateway-logo {
  position: absolute;
  top: 260px;
  left: 0;
  right: 375px;
  padding: 0 60px;
  box-sizing: border-box;
  z-index: 10;
}

.gateway-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gateway-logo img {
  height: 70px;
  width: auto;
  display: block;
}

.gateway-logo img:last-of-type:not(:first-of-type) {
  height: 56px;
}

.gateway-logo__divider {
  width: 1px;
  height: 40px;
  background-color: rgba(44, 62, 80, 0.2);
}

/* Left column — headline text, fills space left of the login column */
.gateway-left {
  position: absolute;
  top: 360px;
  left: 0;
  right: 375px;
  padding: 0 60px;
  box-sizing: border-box;
  z-index: 5;
}

.gateway-headline {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: #2C3E50;
  margin: 0;
}

/* Right column — content area, fixed width */
.gateway-content {
  position: absolute;
  top: 360px;
  right: 0;
  width: 375px;
  height: calc(100vh - 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 5;
  overflow-y: auto;
  padding: 0 0 20px 0;
  outline: none;
  border: none;
}

.gateway-main-column {
  width: 100%;
  padding: 0 20px;
}

.gateway-main-content {
  width: 100%;
}

/* ================================================================
   AUTH CARD (Login / Sign-in)
   ================================================================ */

.auth-card {
  background: transparent;
  padding: 0;
  border-radius: 12px;
  box-shadow: none;
  max-width: 500px;
  width: 100%;
}

.auth-card__title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #2C3E50;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.auth-card__description {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 24px 0;
}

.auth-card__button {
  width: 100%;
  padding: 12px 32px;
  background-color: #7BB061;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 2px 8px rgba(123, 176, 97, 0.3);
}

.auth-card__button:hover {
  background-color: #6A9D54;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 176, 97, 0.4);
}

/* Auth card header variants (invitation pages) */
.auth-card-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #2C3E50;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.auth-card-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #2C3E50;
  margin: 0 0 20px 0;
}

/* ================================================================
   ROLE SELECTOR
   ================================================================ */

.role-selector {
  background-color: transparent;
  padding: 0;
  border-radius: 12px;
  width: 100%;
}

.role-selector__title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #2C3E50;
  margin: 0 0 24px 0;
  line-height: 1.3;
  text-align: left;
}

.role-selector__description {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 24px 0;
  text-align: left;
}

.role-selector__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.role-btn {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  color: white;
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.role-btn--startup,
.role-btn--venture {
  background-color: #6A9D54;
}

.role-btn--startup:hover,
.role-btn--venture:hover {
  background-color: #5C8C48;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(106, 157, 84, 0.4);
}

.role-btn--advisor {
  background-color: #007A45;
}

.role-btn--advisor:hover {
  background-color: #006838;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 122, 69, 0.4);
}

.role-btn--investor {
  background-color: #508CA4;
}

.role-btn--investor:hover {
  background-color: #447A90;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(80, 140, 164, 0.4);
}

/* ================================================================
   CONFLICT PANEL
   ================================================================ */

.conflict-panel {
  background-color: transparent;
  padding: 0;
  border-radius: 12px;
  overflow: visible;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 24px auto;
}

.conflict-panel__title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #2C3E50;
  margin: 0 0 24px 0;
  line-height: 1.3;
}

.conflict-panel__users {
  margin-bottom: 24px;
}

.conflict-panel__user {
  padding: 16px 0;
  border-bottom: 1px solid #d1d5db;
}

.conflict-panel__user:first-child {
  padding-top: 0;
}

.conflict-panel__user:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.conflict-panel__user-field {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.conflict-panel__user-field:last-child {
  margin-bottom: 0;
}

.conflict-panel__user-label {
  font-weight: 500;
  color: #2C3E50;
}

.conflict-panel__user-value {
  font-weight: 700;
  color: #2C3E50;
}

.conflict-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.conflict-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.conflict-btn--primary {
  background-color: #7BB061;
  color: white;
}

.conflict-btn--primary:hover {
  background-color: #6A9D54;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 176, 97, 0.4);
}

.conflict-btn--secondary {
  background-color: transparent;
  color: #2C3E50;
  border: 1px solid #7BB061;
}

.conflict-btn--secondary:hover {
  background-color: #f9fafb;
  border-color: #7BB061;
}

/* ================================================================
   SUCCESS CARD (Dashboard / Welcome Back)
   ================================================================ */

.success-card {
  background: transparent;
  padding: 0;
  border-radius: 12px;
  box-shadow: none;
  max-width: 500px;
  width: 100%;
  text-align: left;
}

.success-card__title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #2C3E50;
  margin: 0 0 24px 0;
  line-height: 1.3;
  text-align: left;
}

.success-card__info {
  margin-bottom: 24px;
}

.success-card__info-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

.success-card__info-label {
  font-weight: 500;
  color: #2C3E50;
}

.success-card__info-value {
  font-weight: 700;
  color: #2C3E50;
}

.success-card__button {
  width: 100%;
  padding: 12px 24px;
  background-color: #7BB061;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.success-card__button:hover {
  background-color: #6A9D54;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 176, 97, 0.4);
}

/* ================================================================
   LOADING CARD
   ================================================================ */

.loading-card {
  background: transparent;
  padding: 40px;
  text-align: center;
}

.loading-card__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #7BB061;
  border-radius: 50%;
  animation: gateway-spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes gateway-spin {
  to { transform: rotate(360deg); }
}

.loading-card__title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: #2C3E50;
  margin: 0 0 12px 0;
}

.loading-card__description {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #64748b;
  margin: 0;
}

/* ================================================================
   ERROR CARD
   ================================================================ */

.error-card {
  background: transparent;
  padding: 40px;
  border-radius: 12px;
  box-shadow: none;
  max-width: 500px;
  width: 100%;
}

.error-card__title {
  font-size: 24px;
  font-weight: 600;
  color: #2C3E50;
  margin: 0 0 16px 0;
}

.error-card__text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5A6C7D;
  margin-bottom: 16px;
}

.error-id-box {
  background-color: #FFF9E6;
  border: 2px solid #F39C12;
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
}

.error-id-box__label {
  font-size: 12px;
  font-weight: 600;
  color: #856404;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.error-id-box__value {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.error-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.error-btn {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  font-family: 'Inter', sans-serif;
}

.error-btn--primary {
  background-color: #7BB061;
  color: white;
}

.error-btn--primary:hover {
  background-color: #6A9D54;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(123, 176, 97, 0.4);
}

.error-btn--secondary {
  background-color: transparent;
  color: #2C3E50;
  text-decoration: underline;
  font-family: 'Inter', sans-serif;
}

.error-btn--secondary:hover {
  color: #7BB061;
}

.error-technical-details {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #E8E8E1;
}

.error-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
}

.error-detail-row__label {
  font-weight: 600;
  color: #5A6C7D;
}

.error-detail-row__value {
  font-family: 'Courier New', monospace;
  color: #7A8C9D;
  text-align: right;
  word-break: break-all;
  max-width: 60%;
}

/* ================================================================
   INVITATION DETAILS
   ================================================================ */

.invitation-details {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 4px 20px;
  margin: 20px 0;
}

.invitation-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #e9ecef;
}

.invitation-detail-item:last-child {
  border-bottom: none;
}

.invitation-detail-label {
  font-weight: 600;
  color: #2C3E50;
  font-size: 14px;
}

.invitation-detail-value {
  font-weight: 500;
  color: #1e293b;
  font-size: 14px;
  text-align: right;
}

.invitation-instructions {
  padding: 0;
  background-color: transparent;
  border-left: none;
  border-radius: 0;
  margin: 20px 0;
}

.invitation-instructions p {
  margin: 0;
  color: #2C3E50;
  font-size: 14px;
  line-height: 1.6;
}

/* ================================================================
   GATEWAY STATUS BADGES (cohort open/closed)
   ================================================================ */

.gateway-status-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.gateway-status-open {
  background: #d4edda;
  color: #155724;
}

.gateway-status-closed {
  background: #f8d7da;
  color: #721c24;
}

/* ================================================================
   PRIVY MODAL — Position over right column (login button area)
   Privy uses HeadlessUI portal with styled-components class names.
   Only apply positioning to actual Privy dialog elements, not the
   portal root itself (which exists in the DOM even when idle).
   ================================================================ */

/* Portal root — invisible container, no layout of its own */
#headlessui-portal-root {
  z-index: 2000 !important;
  pointer-events: none;
}

/* Re-enable pointer events on actual dialog content */
#headlessui-portal-root > * {
  pointer-events: auto;
}

/* Backdrop (dark overlay) — over right column only */
div[class*="Backdrop-sc-"] {
  position: fixed !important;
  left: auto !important;
  right: max(0px, calc(50vw - 600px)) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 375px !important;
  outline: none !important;
  border: none !important;
}

/* Dialog wrapper */
div[class*="DialogWrapper-sc-"] {
  position: fixed !important;
  left: auto !important;
  right: max(0px, calc(50vw - 600px)) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 375px !important;
  outline: none !important;
  border: none !important;
}

/* Dialog container — center content within right column, nudged up 50px */
div[class*="DialogContainer-sc-"] {
  position: fixed !important;
  left: auto !important;
  right: max(0px, calc(50vw - 600px)) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 375px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none !important;
  border: none !important;
}

/* Panel (actual modal content) */
div[class*="Panel-sc-"] {
  max-width: 340px !important;
  width: 90% !important;
  margin: 0 auto !important;
  position: relative !important;
  transform: translateY(-50px) !important;
}

/* Hide Privy modal when class is set */
body.hide-privy-modal div[id*="headlessui-portal-root"]:has(div[class*="DialogContainer-sc-"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ================================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ================================================================ */

@media (max-width: 1199px) {
  .gateway-logo {
    left: 30px;
    right: calc(375px + 30px);
    padding: 0;
  }

  .gateway-left {
    left: 30px;
    right: calc(375px + 30px);
    padding: 0;
  }

  .gateway-content {
    right: 30px;
  }

  .gateway-main-column {
    padding: 0 15px;
  }
}

/* ================================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ================================================================ */

@media (max-width: 768px) {
  .gateway-page {
    flex-direction: column;
    align-items: center;
  }

  .gateway-logo {
    position: static;
    width: 375px;
    padding: 40px 0 0 0;
  }

  .gateway-logo img {
    height: 50px;
    margin: 0;
  }

  .gateway-logo img:last-of-type:not(:first-of-type) {
    height: 40px;
  }

  .gateway-left {
    position: static;
    width: 375px;
    padding: 20px 0;
    margin-bottom: 20px;
  }

  .gateway-headline {
    font-size: 40px;
    margin: 0;
  }

  .gateway-content {
    position: static;
    width: 375px;
    height: auto;
    padding: 0 0 20px 0;
  }

  .gateway-main-column {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .gateway-main-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .auth-card,
  .success-card,
  .loading-card {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .auth-card__title,
  .success-card__title {
    font-size: 28px;
  }

  .auth-card__description {
    font-size: 14px;
  }

  .auth-card__button,
  .success-card__button {
    display: block !important;
    width: 100% !important;
  }

  .role-selector {
    padding: 30px 16px;
  }

  .role-selector__title {
    font-size: 20px;
  }

  .role-selector__description {
    font-size: 14px;
  }

  .role-btn {
    padding: 16px 24px;
    font-size: 16px;
  }

  .error-buttons {
    flex-direction: column;
  }

  .error-btn {
    width: 100%;
    text-align: center;
  }

  /* Privy modal — full width on mobile (layout is stacked) */
  div[class*="Backdrop-sc-"],
  div[class*="DialogWrapper-sc-"],
  div[class*="DialogContainer-sc-"] {
    left: 0 !important;
    width: 100% !important;
  }
}