/* ============================================================
   Vilambo — Forgejo Theme  (v6: scoped, less invasive)
   Matches the Vilambo Portfolio (Figma): warm cream, orange CTA,
   1.5px black-bordered cards. Bricolage Grotesque for headings,
   Poppins for body.

   v6 changes vs v5:
   - Login-page-only rules now scoped to .page-content.user.signin
     (NOT .page-content.user) — so profile/settings/account/appearance
     pages render normally.
   - Stopped overriding --color-text* tokens globally — those are used
     by Forgejo on dark contexts (admin tables, code blocks, nav
     highlights). Globally overriding them caused black-on-black.
   - Removed aggressive ::selection override.
   - Auth-card styling only applies to .signin / .forgot_password /
     .reset_password — not all .page-content.user pages.

   Host: /opt/vilambo/forgejo/custom/public/assets/css/vilambo.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,600;12..96,700;12..96,800&family=Poppins:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --v-cream:        #f4eddf;
  --v-cream-card:   #fbf6ec;
  --v-cream-soft:   #f7f1e6;
  --v-dark:         #1a1410;
  --v-dark-soft:    #292525;
  --v-mute:         #5f5f5f;
  --v-orange:       #f5841f;
  --v-orange-deep:  #e0670f;
  --v-border:       #1a1410;

  --v-font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --v-font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --v-font-mono:    'Space Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ── SAFE token overrides only ──
   Just primary + page background. Do NOT touch --color-text*, --color-box*,
   --color-card etc. — Forgejo uses those across both light and dark contexts
   (admin nav, code blocks, table rows, modals), and global overrides cause
   black-on-black text on dark UI chrome. */

:root,
html[data-theme="gitea-auto"],
html[data-theme="gitea-light"] {
  --color-primary:           var(--v-orange);
  --color-primary-dark-1:    var(--v-orange-deep);
  --color-primary-dark-2:    var(--v-orange-deep);
  --color-primary-light-1:   var(--v-orange);
  --color-primary-light-2:   var(--v-orange);
  --color-primary-hover:     var(--v-orange-deep);
  --color-primary-active:    var(--v-orange-deep);
  --color-accent:            var(--v-orange);
  --color-small-accent:      var(--v-orange);
  --color-link:              var(--v-dark);
  --color-link-hover:        var(--v-orange-deep);
  --color-link-active:       var(--v-orange-deep);
}

/* ── Global page background — light contexts only ── */
html[data-theme="gitea-light"] body,
html[data-theme="gitea-auto"] body,
body {
  background: var(--v-cream);
  font-family: var(--v-font-body);
}

/* ── Top navbar (every page) ── */
.full.height > .ui.secondary.menu,
nav.navbar,
.ui.menu.navbar {
  background: var(--v-cream-card) !important;
  border-bottom: 1.5px solid var(--v-border) !important;
  box-shadow: none !important;
}

/* Logo swap — Forgejo serves /assets/img/logo.svg in nav. Replace via CSS content. */
.navbar img[src*="logo"],
img[src="/assets/img/logo.svg"],
img[alt="Logo"][aria-hidden="true"] {
  content: url('/assets/img/logo.png') !important;
  max-height: 32px !important;
  width: auto !important;
  height: 32px !important;
  object-fit: contain !important;
}

/* ── Headings → Bricolage Grotesque (global, but only font family) ── */
h1, h2, h3, h4, h5, h6,
.ui.header {
  font-family: var(--v-font-display);
  letter-spacing: -0.2px;
}

/* ────────────────────────────────────────────────────────────
   AUTH PAGES ONLY (signin + recovery + reset)
   Everything below is scoped to these three page classes.
   Settings, profile, account, appearance, repos: untouched.
   ──────────────────────────────────────────────────────────── */

.page-content.user.signin,
.page-content.user.forgot_password,
.page-content.user.reset_password {
  background: var(--v-cream) !important;
  min-height: calc(100vh - 80px);
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 64px 24px !important;
}

.page-content.user.signin .ui.middle.very.relaxed.page.grid,
.page-content.user.signin .ui.container.column.fluid,
.page-content.user.forgot_password .ui.middle.very.relaxed.page.grid,
.page-content.user.reset_password .ui.middle.very.relaxed.page.grid {
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* The auth card */
.page-content.user.signin .ui.attached.segment,
.page-content.user.forgot_password .ui.attached.segment,
.page-content.user.reset_password .ui.attached.segment {
  background: var(--v-cream-card) !important;
  border: 1.5px solid var(--v-border) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  padding: 28px 28px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Auth page heading */
.page-content.user.signin .ui.top.attached.header,
.page-content.user.forgot_password .ui.top.attached.header,
.page-content.user.reset_password .ui.top.attached.header {
  background: transparent !important;
  border: none !important;
  font-family: var(--v-font-display) !important;
  font-weight: 700 !important;
  font-size: 1.65rem !important;
  color: var(--v-dark) !important;
  letter-spacing: -0.4px !important;
  padding: 0 0 18px 0 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Hide the Sign In / Sign Up tab strip above the auth card */
.page-content.user.signin .ui.secondary.pointing.tabular,
.page-content.user.signin .overflow-menu-items {
  display: none !important;
}

/* Override Forgejo's Tailwind tw-max-w-2xl on the form (too wide for card) */
.page-content.user.signin .ui.form,
.page-content.user.forgot_password .ui.form,
.page-content.user.reset_password .ui.form {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  font-family: var(--v-font-body) !important;
}

/* Form inputs — auth pages only */
.page-content.user.signin .ui.form input,
.page-content.user.forgot_password .ui.form input,
.page-content.user.reset_password .ui.form input {
  background: #ffffff !important;
  color: var(--v-dark) !important;
  border: 1.5px solid var(--v-border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-family: var(--v-font-body) !important;
  font-size: 0.95rem !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.page-content.user.signin .ui.form input:focus,
.page-content.user.forgot_password .ui.form input:focus,
.page-content.user.reset_password .ui.form input:focus {
  border-color: var(--v-orange) !important;
  box-shadow: 0 0 0 3px rgba(245, 132, 31, 0.18) !important;
  outline: none !important;
}

.page-content.user.signin .ui.form label,
.page-content.user.forgot_password .ui.form label,
.page-content.user.reset_password .ui.form label {
  color: var(--v-dark-soft) !important;
  font-family: var(--v-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
}

/* "Sign In" submit button styling on auth pages */
.page-content.user.signin .ui.form button,
.page-content.user.forgot_password .ui.form button,
.page-content.user.reset_password .ui.form button {
  background: transparent !important;
  color: var(--v-dark) !important;
  border: 1.5px solid var(--v-border) !important;
  border-radius: 100px !important;
  font-family: var(--v-font-body) !important;
  font-weight: 500 !important;
  padding: 12px 22px !important;
  min-height: 46px !important;
  box-shadow: none !important;
  font-size: 0.95rem !important;
}

.page-content.user.signin .ui.form button:hover {
  background: rgba(26, 20, 16, 0.05) !important;
}

/* ────────────────────────────────────────────────────────────
   SIGN-IN PAGE ONLY — SSO-first layout + collapse u/p
   ──────────────────────────────────────────────────────────── */

.page-content.user.signin .ui.form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* SSO container — direct child of form, ID is unique. Move to TOP. */
.page-content.user.signin .ui.form > #oauth2-login-navigator {
  order: 1 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.page-content.user.signin .ui.form > #oauth2-login-navigator > div,
.page-content.user.signin .ui.form > #oauth2-login-navigator #oauth2-login-navigator-inner {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Big orange SSO button */
.page-content.user.signin .ui.form a[href*="/user/oauth2/"] {
  background: var(--v-orange) !important;
  border: 1.5px solid var(--v-border) !important;
  border-radius: 100px !important;
  color: #ffffff !important;
  font-family: var(--v-font-body) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 16px 22px !important;
  min-height: 54px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 0 var(--v-border) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

.page-content.user.signin .ui.form a[href*="/user/oauth2/"]:hover {
  background: var(--v-orange-deep) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 var(--v-border) !important;
  transform: translateY(-1px) !important;
}

.page-content.user.signin .ui.form a[href*="/user/oauth2/"] img,
.page-content.user.signin .ui.form a[href*="/user/oauth2/"] svg {
  width: 20px !important;
  height: 20px !important;
  filter: brightness(0) invert(1) !important;
  flex-shrink: 0 !important;
}

/* Hide the "or" divider */
.page-content.user.signin .ui.form > .divider {
  display: none !important;
}

/* Form children order: SSO=1, toggle=2, username=3, password=4, remember=5, submit-row=6.
   The JS in custom/header.tmpl handles show/hide of u/p fields (persistent toggle).
   CSS here just orders + styles. */
.page-content.user.signin .ui.form > .vilambo-up-toggle { order: 2 !important; }
.page-content.user.signin .ui.form > .required.field:nth-of-type(1) { order: 3 !important; }
.page-content.user.signin .ui.form > .required.field:nth-of-type(2) { order: 4 !important; }
.page-content.user.signin .ui.form > .inline.field { order: 5 !important; }
.page-content.user.signin .ui.form > .field:not(.required):not(.inline) { order: 6 !important; }

/* The "Sign in with username & password" toggle button (injected by JS) */
.page-content.user.signin .ui.form > .vilambo-up-toggle {
  border: 1px dashed rgba(26, 20, 16, 0.22) !important;
  background: transparent !important;
  color: var(--v-mute) !important;
  font-family: var(--v-font-body) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  height: 40px !important;
  padding: 10px 22px !important;
  border-radius: 100px !important;
  cursor: pointer !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  text-align: center !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}

.page-content.user.signin .ui.form > .vilambo-up-toggle:hover {
  border-color: var(--v-border) !important;
  color: var(--v-dark) !important;
  background: rgba(26, 20, 16, 0.04) !important;
}

/* When expanded (JS removes display:none), give the u/p fields spacing */
.page-content.user.signin .ui.form > .required.field:nth-of-type(2) {
  margin-top: 14px !important;
}

.page-content.user.signin .ui.form > .inline.field {
  margin-top: 10px !important;
}

.page-content.user.signin .ui.form > .field:not(.required):not(.inline) {
  margin-top: 14px !important;
}

/* ── Global primary button colour (safe, just colour swap) ── */
.ui.primary.button,
.ui.basic.primary.button {
  background: var(--v-orange) !important;
  color: #ffffff !important;
  border-color: var(--v-orange-deep) !important;
}

.ui.primary.button:hover {
  background: var(--v-orange-deep) !important;
  color: #ffffff !important;
}

/* ── Scrollbar polish (global, low-impact) ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(26, 20, 16, 0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26, 20, 16, 0.4); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}