/* ROCK Robotic theme for Gitea — dark UI with ROCK yellow accents.
 * Colors come from rockWebsite tailwind.config.ts: rock-yellow #FFC700,
 * rock-dark #111111, rock-gray #1c1c1c, rock-text #EAEAEA, rock-text-dark #888888.
 * Strategy: inherit the built-in dark theme, override its CSS variables only.
 * The import path is sibling-relative: both files are served from /assets/css/. */
@import url("theme-gitea-dark.css");

:root {
  /* Primary = ROCK yellow, hsl(47, 100%, 50%). Buttons and links get dark text
   * on yellow (primary-contrast) — white on yellow is unreadable.
   * hover/active/accent resolve to the light ramp via the base theme. */
  --color-primary: #ffc700;
  --color-primary-contrast: #111111;
  --color-primary-dark-1: hsl(47, 100%, 46%);
  --color-primary-dark-2: hsl(47, 100%, 42%);
  --color-primary-dark-3: hsl(47, 100%, 38%);
  --color-primary-dark-4: hsl(47, 100%, 34%);
  --color-primary-dark-5: hsl(47, 100%, 29%);
  --color-primary-dark-6: hsl(47, 100%, 24%);
  --color-primary-dark-7: hsl(47, 100%, 19%);
  --color-primary-light-1: hsl(47, 100%, 56%);
  --color-primary-light-2: hsl(47, 100%, 62%);
  --color-primary-light-3: hsl(47, 100%, 68%);
  --color-primary-light-4: hsl(47, 100%, 74%);
  --color-primary-light-5: hsl(47, 100%, 80%);
  --color-primary-light-6: hsl(47, 100%, 87%);
  --color-primary-light-7: hsl(47, 100%, 93%);
  --color-primary-alpha-10: rgba(255, 199, 0, 0.1);
  --color-primary-alpha-20: rgba(255, 199, 0, 0.2);
  --color-primary-alpha-30: rgba(255, 199, 0, 0.3);
  --color-primary-alpha-40: rgba(255, 199, 0, 0.4);
  --color-primary-alpha-50: rgba(255, 199, 0, 0.5);
  --color-primary-alpha-60: rgba(255, 199, 0, 0.6);
  --color-primary-alpha-70: rgba(255, 199, 0, 0.7);
  --color-primary-alpha-80: rgba(255, 199, 0, 0.8);
  --color-primary-alpha-90: rgba(255, 199, 0, 0.9);

  /* Surfaces */
  --color-body: #111111;
  --color-box-header: #181818;
  --color-box-body: #1c1c1c;
  --color-box-body-highlight: #232323;
  --color-nav-bg: #111111;
  --color-secondary-nav-bg: #161616;
  --color-menu: #1a1a1a;
  --color-card: #1a1a1a;
  --color-button: #1a1a1a;
  --color-secondary-bg: #262626;
  --color-footer: #111111;

  /* Text (text-dark is the BRIGHTEST tier in Gitea's dark themes) */
  --color-text-dark: #ffffff;
  --color-text: #eaeaea;
  --color-text-light: #cfcfcf;
  --color-text-light-1: #adadad;
  --color-text-light-2: #888888;
  --color-text-light-3: #6e6e6e;
}

/* No footer: hides "Powered by Gitea", version, and the links/language row.
 * CSS-only on purpose — a custom footer_content.tmpl would survive less
 * reliably across Gitea upgrades than hiding the element. Language can still
 * be changed in user Settings → Appearance. */
footer.page-footer {
  display: none;
}

/* No Help link — it points at Gitea's own docs, which don't apply to this
 * deployment. Matched by href so it survives label/i18n changes. */
#navbar a.item[href*="docs.gitea.com"] {
  display: none;
}

/* Login page: SSO first. Nearly everyone signs in with rockcloud; the
 * username/password form exists only for the local site-admin account.
 * The divider and #oauth2-login-navigator are children of the form in 1.22,
 * so flex `order` can lift them above the password fields without templates. */
.user.signin form.ui.form {
  display: flex;
  flex-direction: column;
}
.user.signin form.ui.form > #oauth2-login-navigator {
  order: -2;
}
.user.signin form.ui.form > .divider {
  order: -1;
}

/* The rockcloud button becomes the page's one big yellow action. */
.user.signin .oauth-login-link {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 1.15em;
  font-weight: 600;
  padding-top: 14px;
  padding-bottom: 14px;
}
.user.signin .oauth-login-link:hover {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}

/* Admin-only remainder: dimmed until pointed at, submit demoted from yellow,
 * and a caption making its purpose explicit. */
.user.signin form.ui.form > .field,
.user.signin form.ui.form > .required.field,
.user.signin form.ui.form > .inline.field {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.user.signin form.ui.form:hover > .field,
.user.signin form.ui.form:hover > .required.field,
.user.signin form.ui.form:hover > .inline.field,
.user.signin form.ui.form:focus-within > .field,
.user.signin form.ui.form:focus-within > .required.field,
.user.signin form.ui.form:focus-within > .inline.field {
  opacity: 1;
}
.user.signin form.ui.form > div.required.field:first-of-type::before {
  content: "Administrator sign-in";
  display: block;
  margin-bottom: 8px;
  font-size: 0.86em;
  color: var(--color-text-light-2);
}
.user.signin form.ui.form .field > button.ui.primary.button {
  background: var(--color-button);
  color: var(--color-text);
}
.user.signin form.ui.form .field > button.ui.primary.button:hover {
  background: var(--color-secondary-bg);
  color: var(--color-text-dark);
}

/* ── Split-screen login (pairs with branding/templates/user/auth/signin.tmpl,
 * which adds the .rock-split wrapper + left brand panel around the stock
 * signin_inner). Modeled on the Rock Cloud login. ── */

/* The auth-source icon (generic OpenID mark) adds nothing — drop it. Applies
 * to the link-account page's copy of the button too. */
.user.signin .oauth-login-link img,
.user.signin .oauth-login-link svg,
.user.link-account .oauth-login-link img,
.user.link-account .oauth-login-link svg {
  display: none;
}

/* Full-viewport split; no site chrome on the login page. */
body:has(.rock-split) #navbar {
  display: none;
}
body:has(.rock-split) .full.height {
  padding-bottom: 0;
}
.rock-split {
  display: flex;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
}

/* Left: dark brand panel. */
.rock-split-left {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
  padding: 44px 56px;
  margin: 0; /* gitea gives .page-content's first child a 16px top margin */
}
.rock-split-wordmark {
  width: 230px;
  align-self: flex-start;
}
.rock-split-hero {
  margin-top: 16vh;
  max-width: 430px;
}
.rock-split-hero h1 {
  margin: 0 0 22px;
  font-size: 2.6rem;
  line-height: 1.14;
  font-weight: 800;
  color: #ffffff;
}
.rock-split-hero h1 span {
  color: #ffc700;
}
.rock-split-hero p {
  margin: 0;
  max-width: 350px;
  color: #b5b5b5;
  font-size: 1.02rem;
  line-height: 1.55;
}
.rock-split-stat {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8a8a8a;
  white-space: nowrap;
}
.rock-split-stat > span {
  width: 26px;
  height: 2px;
  background: #ffc700;
}

/* Right: light panel with the centered card. */
.rock-split-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf9f2;
  padding: 48px 24px;
}
.rock-split-card {
  width: 100%;
  max-width: 460px;
}
.rock-split-welcome {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.rock-split-heading {
  margin: 0 0 24px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #111111;
}

/* Unwrap the stock signin_inner box so it sits flat on the light panel. */
.rock-split .ui.middle.very.relaxed.page.grid {
  margin: 0;
  padding: 0;
}
.rock-split .ui.container.column.fluid {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.rock-split h4.ui.top.attached.header {
  display: none;
}
.rock-split .ui.attached.segment {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.rock-split form.ui.form {
  max-width: none;
}

/* Light-panel form styling. */
.rock-split form.ui.form label {
  color: #333333;
}
.rock-split form.ui.form input[type="text"],
.rock-split form.ui.form input[type="password"] {
  background: #ffffff;
  border: 1px solid #d8d5c8;
  color: #111111;
}
.rock-split form.ui.form input[type="text"]:focus,
.rock-split form.ui.form input[type="password"]:focus {
  background: #ffffff;
  border-color: #ffc700;
  color: #111111;
}
.rock-split .ui.checkbox label,
.rock-split .ui.checkbox input:focus ~ label,
.rock-split .ui.checkbox input:checked ~ label {
  color: #555555;
}
.rock-split .ui.checkbox label::before {
  background: #ffffff;
  border-color: #d8d5c8;
}
.rock-split .divider.divider-text {
  color: #8a8a8a;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rock-split .divider::before,
.rock-split .divider::after {
  border-top-color: #e2dfd2 !important;
}
.rock-split form.ui.form > div.required.field:first-of-type::before {
  color: #8a8a8a;
}
.rock-split form.ui.form .field > button.ui.primary.button {
  background: #ecebe2;
  color: #333333;
}
.rock-split form.ui.form .field > button.ui.primary.button:hover {
  background: #e2e1d6;
  color: #111111;
}
.rock-split form.ui.form a {
  color: #997700;
}

@media (max-width: 900px) {
  .rock-split-left {
    display: none;
  }
}

/* Gitea's JS reparents its global-error/flash container to be the first child
 * of .page-content, where it becomes a rogue flex item (fomantic gives .ui.container
 * a fixed width) that shoves both panels sideways. Give it a full-width row of
 * its own, and neutralize fomantic's fixed container widths inside the split. */
.rock-split {
  flex-wrap: wrap;
}
.rock-split > .ui.container {
  flex-basis: 100%;
  width: auto !important;
  margin: 0 !important;
}
.rock-split > .ui.container:not(:has(*)) {
  display: none;
}
.rock-split .ui.container {
  min-width: 0;
}
.rock-split-right {
  min-width: 0;
}

/* ── SSO-only by default. The username/password form serves one local admin
 * account; it stays hidden until the "Administrator sign-in" link at the foot
 * of the right panel is clicked (pure CSS :target — the link points at the
 * #admin-signin marker that signin.tmpl places before the form grid). ── */
.rock-split form.ui.form > .field,
.rock-split form.ui.form > .required.field,
.rock-split form.ui.form > .inline.field,
.rock-split form.ui.form > .divider {
  display: none;
}
#admin-signin:target ~ .ui.middle.very.relaxed.page.grid form.ui.form > .field,
#admin-signin:target ~ .ui.middle.very.relaxed.page.grid form.ui.form > .required.field,
#admin-signin:target ~ .ui.middle.very.relaxed.page.grid form.ui.form > .inline.field {
  display: block;
  opacity: 1;
}
#admin-signin:target ~ .ui.middle.very.relaxed.page.grid form.ui.form > .divider {
  display: flex;
}

.rock-split-right {
  position: relative;
}
.rock-split-foot {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
}
.rock-split-foot a {
  color: #a8a494;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.rock-split-foot a:hover {
  color: #6b6754;
}

/* The button label comes from the Gitea auth-source name ("rockcloud"), and
 * renaming the source would change the /user/oauth2/<name>/callback URL that
 * the rockportal consumer has registered — so swap the label in CSS instead.
 * Sole-auth-source assumption: every oauth login link gets this label. */
.user.signin .oauth-login-link {
  font-size: 0;
}
.user.signin .oauth-login-link::after {
  content: "Login with Rock Cloud";
  font-size: 1.15rem;
  font-weight: 600;
}