/* UNA HQ entry-shell styling.
 *
 * This file is mounted beside UNA's static assets and loaded by base.html.
 * Every rule is scoped to Zulip's portico shell so the authenticated app shell
 * remains upstream. Keep selectors structural and re-test them on Zulip upgrades.
 */

.portico-container,
.portico-page {
  --una-hq-accent: #1d8080;
  --una-hq-accent-strong: #145959;
  --una-hq-surface: #ffffff;
  --una-hq-surface-muted: #f4f8f7;
  --una-hq-border: #c9d9d6;
  --una-hq-text: #17302f;
  --una-hq-text-muted: #526b68;
  --una-hq-focus: #e7b85c;
  color: var(--una-hq-text);
  background: var(--una-hq-surface-muted);
  min-height: 100vh;
}

.portico-container,
.portico-container .portico-wrap,
.portico-container .portico-header {
  color: var(--una-hq-text);
  background: var(--una-hq-surface-muted);
}

.portico-container .header-main,
.portico-container .portico-header .top-links a {
  color: var(--una-hq-text) !important;
}

.portico-page,
.portico-page *,
.portico-page *::before,
.portico-page *::after {
  box-sizing: border-box;
}

.portico-page .full-page,
.portico-page .app,
.portico-page .inline-block,
.portico-page .app-main,
.portico-page .white-box,
.portico-page .left-side,
.portico-page .right-side,
.portico-page form,
.portico-page fieldset,
.portico-page .input-box,
.portico-page .actions,
.portico-page .forgot-password-container {
  min-width: 0;
  max-width: 100%;
}

.portico-page .app-main.login-page-container,
.portico-page .app-main.register-page-container {
  width: min(920px, calc(100vw - 32px));
  border-color: var(--una-hq-border);
  background: var(--una-hq-surface);
}

.portico-page .portico-header,
.portico-page .lead,
.portico-page .pitch,
.portico-page .contact-admin,
.portico-page .powered-by-zulip {
  color: var(--una-hq-text);
}

.portico-page .new-style .get-started,
.portico-page .new-style .input-box label:not(.altcha-label) {
  color: var(--una-hq-text) !important;
}

.portico-page .white-box,
.portico-page .right-side {
  border-color: var(--una-hq-border);
  background: var(--una-hq-surface);
  color: var(--una-hq-text);
}

.portico-page .left-side {
  background: var(--una-hq-surface-muted);
  color: var(--una-hq-text);
}

.portico-page .description,
.portico-page .organization-name,
.portico-page .organization-path,
.portico-page .contact-admin,
.portico-page .registration-form-hint,
.portico-page .una-hq-descriptor {
  overflow-wrap: anywhere;
}

.portico-page .description,
.portico-page .organization-path,
.portico-page .registration-form-hint,
.portico-page .una-hq-descriptor,
.portico-page .powered-by-zulip {
  color: var(--una-hq-text-muted);
}

.portico-page .una-hq-descriptor {
  max-width: 42rem;
  margin: 0.5rem auto 1rem;
  color: var(--una-hq-text-muted);
  line-height: 1.5;
  text-align: center;
}

.portico-page #login_form button[type="submit"],
.portico-page .register-button,
.portico-page button.full-width[type="submit"],
.portico-page input.full-width[type="submit"] {
  min-height: 44px;
  border-color: var(--una-hq-accent) !important;
  background-color: var(--una-hq-accent) !important;
  color: #ffffff !important;
}

.portico-page .anonymous-access-button,
.portico-page .full-width.anonymous-access-button {
  min-height: 44px;
  border: 1px solid var(--una-hq-accent) !important;
  background-color: var(--una-hq-surface) !important;
  color: var(--una-hq-accent-strong) !important;
}

.portico-page .anonymous-access-button svg,
.portico-page .anonymous-access-button path {
  fill: var(--una-hq-accent-strong) !important;
}

.portico-page a,
.portico-page .brand-color {
  color: var(--una-hq-accent-strong);
}

.portico-page a:focus-visible,
.portico-page button:focus-visible,
.portico-page input:focus-visible,
.portico-page select:focus-visible,
.portico-page [role="button"]:focus-visible {
  outline: 3px solid var(--una-hq-focus) !important;
  outline-offset: 2px;
}

.portico-page input,
.portico-page select,
.portico-page button {
  max-width: 100%;
}

.portico-page input,
.portico-page select {
  border-color: var(--una-hq-border);
  background: var(--una-hq-surface);
  color: var(--una-hq-text);
}

.portico-page .new-style .input-box input[type="email"],
.portico-page .new-style .input-box input[type="number"],
.portico-page .new-style .input-box input[type="password"],
.portico-page .new-style .input-box input[type="text"],
.portico-page .new-style .input-box input[type="url"],
.portico-page .new-style .input-box select,
.portico-page .new-style .input-box textarea {
  border-color: var(--una-hq-border) !important;
  background: var(--una-hq-surface) !important;
  color: var(--una-hq-text) !important;
}

.portico-page .password_visibility_toggle {
  color: var(--una-hq-text-muted) !important;
}

.portico-page .or {
  color: var(--una-hq-text-muted) !important;
}

.portico-page .or::before {
  border-color: var(--una-hq-border) !important;
}

.portico-page .or span {
  background: var(--una-hq-surface) !important;
  color: var(--una-hq-text-muted) !important;
}

.dark-theme .portico-container,
.dark-theme .portico-page {
  --una-hq-accent: #4fb6b0;
  --una-hq-accent-strong: #8bd6d0;
  --una-hq-surface: #172221;
  --una-hq-surface-muted: #1d2c2a;
  --una-hq-border: #3f5754;
  --una-hq-text: #edf7f5;
  --una-hq-text-muted: #b9ccca;
}

@media (prefers-color-scheme: dark) {
  .color-scheme-automatic .portico-container,
  .color-scheme-automatic .portico-page {
    --una-hq-accent: #4fb6b0;
    --una-hq-accent-strong: #8bd6d0;
    --una-hq-surface: #172221;
    --una-hq-surface-muted: #1d2c2a;
    --una-hq-border: #3f5754;
    --una-hq-text: #edf7f5;
    --una-hq-text-muted: #b9ccca;
  }
}

@media (max-width: 767px) {
  .portico-page .header-main,
  .portico-page .app > .inline-block,
  .portico-page .register-account .center-block,
  .portico-page #create-account {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .portico-page .header-main,
  .portico-page .lead,
  .portico-page .pitch,
  .portico-page .contact-admin {
    padding-inline: 16px;
  }

  .portico-page .app-main.login-page-container,
  .portico-page .app-main.register-page-container,
  .portico-page #registration.white-box {
    display: block !important;
    width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
  }

  .portico-page .split-view .left-side,
  .portico-page .split-view .right-side,
  .portico-page .login-page-container .left-side,
  .portico-page .login-page-container .right-side,
  .portico-page .register-page-container .left-side,
  .portico-page .register-page-container .right-side,
  .portico-page .register-form .left-side,
  .portico-page .register-form .right-side {
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 20px !important;
  }

  .portico-page .actions,
  .portico-page .forgot-password-container {
    width: 100% !important;
  }

  .portico-page .org-header {
    display: flex;
    min-width: 0;
    align-items: center;
  }

  .portico-page .org-header .info-box {
    min-width: 0;
  }

  .portico-page .top-links {
    display: flex;
    max-width: 60%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
  }

  .portico-page h1,
  .portico-page .get-started {
    overflow-wrap: anywhere;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.15;
  }
}