/* ==========================================================
   STRAI sign-in page skin — pairs with signin.tmpl
   Place at: $GITEA_CUSTOM/public/assets/css/custom.css
   Loaded via: $GITEA_CUSTOM/templates/custom/header.tmpl
     <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/custom.css">
   Everything is scoped to .strai-signin so nothing else changes.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

.page-content.strai-signin {
  min-height: 100vh;
  padding-top: 60px !important;
  background: radial-gradient(circle at 50% 20%, #0d1016 0%, #05060a 70%);
}

/* Only constrain the specific brand+form column (already tagged
   tw-max-w-2xl by Gitea itself), not every .column in the grid. */
.page-content.strai-signin > .grid > .column {
  width: 100% !important;
  max-width: clamp(360px, 34vw, 480px) !important;
}

/* --- Brand block --- */
.strai-brand {
  text-align: center;
  margin-bottom: 8px;
}

.strai-logo-placeholder {
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
  border: 1.5px dashed rgba(255,255,255,0.28);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* remove this whole block once you have a real <img> logo */

.strai-wordmark {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: 6px;
  color: #f2f3f6;
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
  margin: 0;
}

.strai-tagline {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 4px;
  color: #8b909c;
  text-transform: uppercase;
  margin: 10px 0 28px;
}

/* --- Login form, restyled like the CONTACT button on the homepage --- */
.strai-signin form.ui.form {
  background: #232427 !important;
  border: 2px solid #9aa0ab !important;
  border-radius: 0 !important;
  padding: 28px 26px 24px !important;
  box-shadow: none !important;
}

.strai-signin form.ui.form .field:not(.ui.checkbox) > div.tw-flex label,
.strai-signin form.ui.form .field > label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: #8b909c !important;
  text-transform: uppercase;
}

.strai-signin form.ui.form .ui.checkbox label {
  color: #8b909c !important;
  font-size: 13px;
}

/* Label + "forgot password" link row.
   Gitea's own tw-flex/tw-flex-1 utility classes aren't taking effect
   in this install, so we lay this row out ourselves directly.
   Scoped to .tw-flex specifically — NOT every div in .field, since
   the checkbox field also wraps its input in a plain div and needs
   Fomantic's own (non-flex) layout to draw the checkbox correctly. */
.strai-signin form.ui.form .field > div.tw-flex {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: nowrap;
}

.strai-signin form.ui.form .field > div.tw-flex label {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.strai-signin form.ui.form .field > div.tw-flex a {
  flex: 0 0 auto;
  font-size: 11px;
  white-space: nowrap;
}

.strai-signin form.ui.form input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.3) !important;
  color: #e9ebf1 !important;
  border-radius: 0 !important;
}

.strai-signin form.ui.form input:focus {
  border-bottom-color: #ec1a78 !important;
}

.strai-signin form.ui.form .ui.button.primary,
.strai-signin form.ui.form .ui.button {
  background: transparent !important;
  border: 1.5px solid #e9ebf1 !important;
  border-radius: 0 !important;
  color: #e9ebf1 !important;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: none !important;
}

.strai-signin form.ui.form .ui.button:hover {
  background: #e9ebf1 !important;
  color: #111 !important;
}

/* Verify button + "use scratch code" link (2FA page) — stack instead
   of side-by-side, so the link gets a full line and doesn't wrap
   mid-word in the narrow panel. */
.strai-signin form.ui.form .inline.field {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.strai-signin form.ui.form .inline.field .ui.button {
  width: 100%;
}

.strai-signin form.ui.form .inline.field a {
  font-size: 12px;
}

.strai-signin a {
  color: #ec1a78 !important;
}

/* Remove the outer "Anmelden" header bar and its wrapping segment,
   which had their own default Fomantic border/background — leaving
   only the already-styled form below as a single seamless panel. */
.strai-signin h4.ui.top.attached.header {
  display: none !important;
}

.strai-signin .ui.attached.segment {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Any other "ui top attached header" (e.g. the 2FA page's h3) blends
   into the panel as a title row instead of showing its own separate
   box — unlike the login page's h4, which is fully hidden above. */
.strai-signin .ui.top.attached.header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #e9ebf1 !important;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  padding: 0 0 16px 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   Site-wide header (#navbar) — pure styling, no markup touched.
   Scoped to DIRECT CHILDREN of .navbar-left / .navbar-right only,
   so dropdown menus, avatar menu, notification icons, and the
   "+ create" menu keep their original Fomantic-UI look/behavior.
   ========================================================== */

#navbar {
  background: #16171b !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

#navbar .navbar-left > a.item,
#navbar .navbar-right > a.item {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8b909c !important;
}

#navbar .navbar-left > a.item:hover,
#navbar .navbar-left > a.item.active,
#navbar .navbar-right > a.item:hover,
#navbar .navbar-right > a.item.active {
  color: #e9ebf1 !important;
  box-shadow: inset 0 -2px 0 0 #ec1a78;
}

/* Sign in / Register — outlined buttons matching the login page's style */
#navbar .navbar-left > a.item[href$="/user/login"],
#navbar .navbar-right > a.item[href$="/user/sign_up"] {
  border: 1.5px solid #e9ebf1;
  padding: 7px 14px !important;
  margin-left: 6px;
  box-shadow: none !important;
}

/* Wordmark next to the logo icon — pure CSS, no markup touched.
   To swap the actual icon graphic, see the "Changing the logo"
   section of Gitea's docs: drop a replacement SVG at
   $GITEA_CUSTOM/public/assets/img/logo.svg — no CSS/template needed,
   Gitea serves it automatically wherever the logo appears. */
#navbar-logo {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

#navbar-logo::after {
  content: "GITEA";
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 3px;
  color: #e9ebf1;
}

#navbar .navbar-right > a.item[href$="/user/login"]:hover,
#navbar .navbar-right > a.item[href$="/user/sign_up"]:hover {
  background: #e9ebf1 !important;
  color: #111 !important;
}