/* ==========================================================================
   TAK Fusion — GitLab sign-in skin
   Target: git.takfusion.com   ·   fusion-brand v1.0.0
   --------------------------------------------------------------------------
   HOW TO INSTALL (self-managed, Omnibus)

   1. Put the assets somewhere GitLab serves, e.g. /etc/gitlab/fusion/ mounted
      at /-/fusion/ by NGINX, or simply host them on the same origin:
         /brand/fusion-backdrop.png   (assets/backdrops/fusion-conus-mesh-1920x1080.png)
         /brand/fusion-wordmark.png   (uploads/TAK-FUSION-BANNER-e67342fe.png)
                                      the wordmark already contains the shield,
                                      so there is no separate shield asset
         /brand/fusion.css            (this file)

   2. Inject the stylesheet. GitLab's Appearance page has no custom-CSS field,
      so use one of:

      a) gitlab.rb — the supported hook:
         gitlab_rails['custom_html_header_tags'] = '<link rel="stylesheet" href="/brand/fusion.css">'
         then: gitlab-ctl reconfigure

      b) at the reverse proxy, if GitLab sits behind one:
         sub_filter '</head>' '<link rel="stylesheet" href="/brand/fusion.css"></head>';
         sub_filter_once on;

   3. Admin → Settings → Appearance:
         Favicon                → uploads/FUSION-FAVICON.png
         Header logo            → uploads/TAK-FUSION-BANNER-e67342fe.png
                                  (this is the in-app header, a different slot
                                   from the sign-in lockup this file draws)
         Sign-in page title     → TAK Fusion
         Sign-in page description → paste the markdown block at the bottom of
                                    this file
      Leave "Sign-in page logo" empty — this stylesheet draws the lockup, and
      two lockups is one too many.
   --------------------------------------------------------------------------
   VERIFY BEFORE SHIPPING — GitLab's sign-in markup changes between majors and
   leans on .gl-* utility classes. Everything here is scoped to .login-page (on
   <body>) so nothing leaks into the app. Selectors marked ⚠ are the ones to
   re-check after a GitLab upgrade.
   ========================================================================== */

/* ---------- 1. type ------------------------------------------------------- */

@font-face{font-family:"Fusion Sans";src:url("/brand/fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fusion Sans";src:url("/brand/fonts/IBMPlexSans-Medium.woff2")  format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fusion Sans";src:url("/brand/fonts/IBMPlexSans-SemiBold.woff2")format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fusion Mono";src:url("/brand/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}

/* ---------- 2. the ground ------------------------------------------------- */

body.login-page {
  font-family: "Fusion Sans", system-ui, sans-serif !important;
  color: #e6e8ea !important;
  background:
    linear-gradient(100deg,
      #07080a 0%,
      rgba(7,8,10,.94) 26%,
      rgba(7,8,10,.55) 52%,
      rgba(7,8,10,.15) 74%,
      rgba(7,8,10,0) 100%),
    url("/brand/fusion-backdrop.png") center / cover no-repeat fixed,
    #07080a !important;
}

/* GitLab paints a white page and a white container behind the form */
body.login-page .navless-container,
body.login-page .container,
body.login-page .content-wrapper,
body.login-page .layout-page {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* GitLab's own top nav on the sign-in page adds nothing here */
body.login-page .navbar-gitlab,
body.login-page .header-content,
body.login-page .js-navbar {
  display: none !important;
}

/* ---------- 3. layout — left identity panel, render breathing right ------
   ⚠ .login-page .row is the centring row in 16.x/17.x.                    */

body.login-page .navless-container > .row,
body.login-page #signin-container,
body.login-page .row.gl-justify-content-center {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 82vh;
  margin: 0 !important;
  padding-left: clamp(24px, 7vw, 150px) !important;
  padding-right: 24px !important;
  max-width: none !important;
}

/* the sign-in column */
body.login-page .col-sm-12,
body.login-page .col-md-6,
body.login-page .col-lg-4,
body.login-page .new-session-forms-container {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 496px !important;
  padding: 0 !important;
}

/* ---------- 4. the panel ------------------------------------------------- */

body.login-page .login-box,
body.login-page .omniauth-container,
body.login-page .borderless .login-box {
  background: linear-gradient(160deg, rgba(20,22,26,.93), rgba(9,10,12,.90)) !important;
  border: 1px solid #262c33 !important;
  border-top: 2px solid #ED1C24 !important;
  border-radius: 4px !important;
  box-shadow: 0 40px 120px -40px #000, 0 0 90px -30px rgba(237,28,36,.35) !important;
  padding: 34px 38px 30px !important;
  backdrop-filter: blur(3px);
}

/* the lockup, drawn above the panel — no markup change required.
   The wordmark art already contains the shield, so this is ONE image: stacking a
   separate shield above it puts two shields on the panel. 926×279 → 330px = 99px. */
body.login-page .new-session-forms-container::before,
body.login-page #signin-container::before {
  content: "";
  display: block;
  width: 330px;
  height: 99px;
  margin: 0 0 22px -4px;
  background: url("/brand/fusion-wordmark.png") left center / contain no-repeat;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(237,28,36,.30));
}

/* the Appearance "sign-in page title / description" block */
body.login-page .login-page-broadcast,
body.login-page .navless-container h1,
body.login-page .js-broadcast-notification-message {
  font-family: "Fusion Sans", sans-serif !important;
  color: #e6e8ea !important;
  background: transparent !important;
  border: 0 !important;
}
body.login-page .navless-container p {
  color: #9aa2a9 !important;
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- 5. tabs ------------------------------------------------------
   Active tab is a 2px accent underline. Never an accent background.       */

body.login-page .nav-links,
body.login-page .gl-tabs-nav,
body.login-page ul.new-session-tabs {
  border-bottom: 1px solid #1c2026 !important;
  background: transparent !important;
}
body.login-page .nav-links li a,
body.login-page .gl-tab-nav-item {
  color: #5c646c !important;
  background: transparent !important;
  border: 0 !important;
  font-weight: 400 !important;
}
body.login-page .nav-links li.active a,
body.login-page .gl-tab-nav-item-active {
  color: #e6e8ea !important;
  font-weight: 500 !important;
  box-shadow: inset 0 -2px 0 #ED1C24 !important;
  border: 0 !important;
}

/* ---------- 6. fields ---------------------------------------------------- */

body.login-page label,
body.login-page .label-bold {
  color: #9aa2a9 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.login-page input.form-control,
body.login-page .gl-form-input,
body.login-page input[type="text"],
body.login-page input[type="email"],
body.login-page input[type="password"] {
  background: #111418 !important;
  border: 1px solid #262c33 !important;
  border-radius: 3px !important;
  color: #c3c9cf !important;
  font-family: "Fusion Mono", ui-monospace, monospace !important;
  font-size: 14px !important;
  box-shadow: none !important;
  padding: 11px 12px !important;
}
body.login-page input.form-control:hover { border-color: #3a424a !important; }
body.login-page input.form-control::placeholder { color: #5c646c !important; }

body.login-page .form-check-input,
body.login-page input[type="checkbox"] {
  background: #111418 !important;
  border: 1px solid #3a424a !important;
  border-radius: 2px !important;
}
body.login-page input[type="checkbox"]:checked {
  background: #ED1C24 !important;
  border-color: #ED1C24 !important;
}

/* ---------- 7. actions --------------------------------------------------- */

body.login-page .btn-confirm,
body.login-page .btn-success,
body.login-page input[type="submit"],
body.login-page button[type="submit"] {
  background: linear-gradient(180deg, rgba(237,28,36,.92), rgba(160,14,20,.92)) !important;
  border: 1px solid #ED1C24 !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  padding: 13px 0 !important;
  box-shadow: 0 0 26px -6px rgba(237,28,36,.7) !important;
}
body.login-page .btn-confirm:hover,
body.login-page button[type="submit"]:hover {
  background: linear-gradient(180deg, #ED1C24, rgba(180,16,22,.95)) !important;
}

/* SSO / LDAP / SAML providers stay outlined */
body.login-page .omniauth-container .btn,
body.login-page .oauth-login,
body.login-page .btn-default,
body.login-page .btn-secondary {
  background: transparent !important;
  border: 1px solid #262c33 !important;
  color: #c3c9cf !important;
  border-radius: 3px !important;
  font-weight: 500 !important;
}
body.login-page .omniauth-container .btn:hover,
body.login-page .btn-default:hover {
  border-color: #3a424a !important;
  color: #e6e8ea !important;
}

/* provider brand marks would fight the red — drop them, keep the label */
body.login-page .omniauth-container .btn img,
body.login-page .omniauth-container .btn svg {
  display: none !important;
}

body.login-page .divider,
body.login-page hr {
  border-color: #1c2026 !important;
  background: #1c2026 !important;
}

body.login-page a { color: #f0645c !important; }
body.login-page a:hover { color: #ff8a85 !important; }
body.login-page :focus-visible {
  outline: 2px solid #ED1C24 !important;
  outline-offset: 2px !important;
}
body.login-page ::selection { background: rgba(237,28,36,.28); }

/* ---------- 8. footer ---------------------------------------------------- */

body.login-page .footer-container,
body.login-page .navless-container footer {
  background: transparent !important;
  border-top: 1px solid #1c2026 !important;
  color: #5c646c !important;
  font-family: "Fusion Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
}

/* ---------- 9. motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.login-page * { transition: none !important; animation: none !important; }
}

/* ---------- 10. phone ---------------------------------------------------- */
@media (max-width: 640px) {
  body.login-page .navless-container > .row,
  body.login-page #signin-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    align-items: flex-start !important;
    padding-top: 8vh !important;
  }
  body.login-page .new-session-forms-container::before { width: 260px; height: 78px; }
  body.login-page input.form-control,
  body.login-page button[type="submit"] { min-height: 44px !important; }
}

/* ==========================================================================
   Appearance → Sign-in page description (Markdown). Paste as-is.

   **Source of record for the Fusion suite.**

   Accounts are provisioned by the deployment. Plugin repositories, feeder
   images and deployment manifests live here.

   Need access? Ask an administrator.
   ========================================================================== */

/* ==========================================================================
   GitLab 19.3 COMPATIBILITY LAYER                        added 2026-08-25
   --------------------------------------------------------------------------
   Everything above was written against an older sign-in DOM. Verified against
   the page GitLab 19.3 actually renders, these selectors NO LONGER EXIST and
   every rule using them is inert:

     .new-session-forms-container   .login-box        .navless-container
     #signin-container              .omniauth-container   .login-page-broadcast

   That is why the backdrop and type looked right while the panel and the
   lockup did not. The rules below re-target the same intent at 19.3's real
   structure. Re-check after every major upgrade:

     curl -sk -H 'Host: git.takfusion.com' https://127.0.0.1/users/sign_in \
       | grep -c new-session-forms-container

   19.3 structure:
     body#login-page.login-page
       .container > main.content > .row
         .col-md.!gl-order-12  > .col-sm-12          <- title + description
         .col-md.order-md-12   > .col-sm-12.bar      <- the form panel
   ========================================================================== */

/* ---------- the panel ----------------------------------------------------- */
body.login-page .col-sm-12.bar,
body.login-page .col-md.order-md-12 > .col-sm-12 {
  background: linear-gradient(160deg, rgba(20,22,26,.93), rgba(9,10,12,.90)) !important;
  border: 1px solid #262c33 !important;
  border-top: 2px solid #ED1C24 !important;
  border-radius: 4px !important;
  box-shadow: 0 40px 120px -40px #000, 0 0 90px -30px rgba(237,28,36,.35) !important;
  padding: 34px 38px 30px !important;
  backdrop-filter: blur(3px);
}

/* ---------- the lockup ---------------------------------------------------- *
   Supplied by Admin > Appearance > sign-in logo and rendered into GitLab's own
   <img> slot, NOT drawn with ::before. One lockup, from one source — the kit's
   ::before rules are dead here and are deliberately left dead so a future
   GitLab that reintroduces those classes cannot produce two.
   GitLab sizes the slot gl-h-10 (40px), which puts the lockup at ~142px wide —
   barely over the 140px brand minimum. Sized up for headroom.              */
body.login-page img.js-portrait-logo-detection {
  height: 60px !important;
  width: auto !important;
  max-width: 320px !important;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(237,28,36,.30));
}
body.login-page .gl-text-center.gl-mb-5 { margin-bottom: 26px !important; }

/* ---------- title + description column ------------------------------------ */
body.login-page h1 {
  font-family: "Fusion Sans", system-ui, sans-serif !important;
  color: #e6e8ea !important;
  letter-spacing: .01em;
}
body.login-page #js-custom-sign-in-description,
body.login-page #js-custom-sign-in-description p {
  color: #9aa2a9 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
body.login-page #js-custom-sign-in-description strong { color: #e6e8ea !important; }

/* ---------- footer -------------------------------------------------------- *
   Appearance renders footer_message with INLINE background/colour from
   message_background_color / message_font_color, which paints a hard black
   band across the page. Inline styles need !important to override.         */
body.login-page .footer-message {
  background: transparent !important;
  color: #5c646c !important;
  font-family: "Fusion Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  padding: 0 0 14px !important;
  text-align: center !important;
}
body.login-page .footer-message p { margin: 0 !important; }
body.login-page .footer-container a { color: #7a838c !important; }
body.login-page .footer-container a:hover { color: #e6e8ea !important; }

/* ==========================================================================
   Centred single-column sign-in                          added 2026-08-25
   --------------------------------------------------------------------------
   The stock layout is two columns: Appearance title+description on the left,
   the form on the right. The left column is dropped and the form centred.

   The Appearance description is ALSO cleared in the database, so this rule is
   hiding an empty container rather than concealing live copy - nothing is left
   in the markup for a screen reader to announce.

   19.3 classes:  .row.gl-mt-5 > .col-md.!gl-order-12  (left, dropped)
                  .row.gl-mt-5 > .col-md.order-md-12   (right, centred)
   The '!' in the Tailwind important-modifier class must be escaped in CSS.
   ========================================================================== */

body.login-page .col-md.\!gl-order-12 { display: none !important; }

body.login-page .row.gl-mt-5 {
  justify-content: center !important;
}
body.login-page .col-md.order-md-12 {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 496px !important;
}

/* ---------- service tag under the lockup ----------------------------------
   Brand tier 4 is "parent lockup + mono tag": the lockup carries the identity,
   the tag only says which piece of infrastructure this is. Mono, wide tracking,
   muted - it identifies, it does not brand. Drawn with ::after so no markup
   change is needed and nothing can desync from the DOM on an upgrade.
   text-indent compensates for the trailing letter-space, which would otherwise
   sit the word slightly left of true centre.                              */
body.login-page .gl-text-center.gl-mb-5::after {
  content: "GITLAB";
  display: block;
  margin-top: 12px;
  font-family: "Fusion Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: #6e777f;
}

/* ==========================================================================
   SINGLE-COLUMN SIGN-IN DOM                              added 2026-08-26
   --------------------------------------------------------------------------
   IMPORTANT: GitLab renders a STRUCTURALLY DIFFERENT sign-in page depending on
   whether the Appearance description is set. With it cleared, the two-column
   layout disappears and so do all of its classes:

     .col-md.!gl-order-12   .col-md.order-md-12   .col-sm-12.bar
     .gl-text-center.gl-mb-5

   Every rule in the block above that targets those is therefore inert on this
   instance. They are left in place for the case where the description is
   restored; this block handles the layout actually being served.

   Single-column DOM:
     main.content
       div.gl-my-5                                  <- whole login block
         div.col-sm-12.gl-text-center               <- logo + title
         div.gl-w-full.gl-ml-auto.gl-mr-auto.bar.sm:gl-w-1/2   <- form
         div#divider
         div.gl-mt-5...js-oauth-login               <- SSO button
     div.footer-container.gl-self-end               <- footer links
     div.footer-message                             <- sibling, NOT self-end
   ========================================================================== */

/* The kit's legacy rule caps .col-sm-12 at 496px with NO auto margins, which is
   what was pinning the logo to the left. Release it; the wrapper below does the
   sizing and the centring for everything. */
body.login-page .col-sm-12 {
  max-width: none !important;
  padding: 0 !important;
}

/* One centred column for the whole login block. */
body.login-page main.content > .gl-my-5 {
  width: 100% !important;
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* .bar carries sm:gl-w-1/2 (50%). Inside a 460px column that would halve it
   again, so it has to be released to full width. */
body.login-page .bar {
  width: 100% !important;
  max-width: none !important;
}

/* ---------- lockup + service tag ------------------------------------------
   The title h1 is replaced rather than restyled: Appearance.title stays
   "TAK Fusion" because it is also the browser title and the logo's alt text.
   Only the on-page heading becomes the tag.                                */
body.login-page .col-sm-12.gl-text-center h1 { display: none !important; }

body.login-page .col-sm-12.gl-text-center::after {
  content: "GITLAB";
  display: block;
  margin: 12px 0 26px;
  font-family: "Fusion Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .42em;
  text-indent: .42em;          /* offset the trailing letter-space so it centres */
  text-transform: uppercase;
  color: #6e777f;
}

body.login-page img.js-portrait-logo-detection {
  height: 58px !important;
  width: auto !important;
  max-width: 320px !important;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(237,28,36,.30));
}

/* ---------- footer --------------------------------------------------------
   .footer-message is a flex SIBLING of .footer-container but lacks the
   gl-self-end that pins the links to the bottom, so it floated in the middle
   of the flex-wrap flow with dead space beneath it.                        */
body.login-page .footer-message {
  align-self: flex-end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  background: transparent !important;
  color: #5c646c !important;
  font-family: "Fusion Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  text-align: center !important;
}
body.login-page .footer-message p { margin: 0 !important; }
body.login-page .footer-container { padding-bottom: 0 !important; }

/* ==========================================================================
   PANEL + FOOTER PINNING                                 added 2026-08-26
   ========================================================================== */

/* ---------- footer pinning ------------------------------------------------
   The page wrapper is `display:flex; flex-wrap:wrap`, and its three children
   (.container, .footer-container, .footer-message) each carry gl-w-full or
   otherwise force their own flex LINE. With the default align-content:stretch
   those three lines share the vertical space equally, which is why the footer
   links and the footer message ended up floating with gaps between them
   instead of sitting together at the bottom.

   Switching the wrapper to a non-wrapping COLUMN makes the children stack, and
   giving the content block auto vertical margins lets it absorb the free space
   so the footer group lands flush at the bottom.

   Note: in column direction `align-self` controls the HORIZONTAL axis, so the
   stock gl-self-center / gl-self-end would centre or right-align whole blocks.
   They are overridden to stretch.                                          */
body.login-page .gl-h-full.gl-flex.gl-flex-wrap {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  min-height: 100vh !important;
}
body.login-page .gl-h-full.gl-flex.gl-flex-wrap > * {
  align-self: stretch !important;
}
body.login-page .container.gl-self-center {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
body.login-page .footer-container {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}
body.login-page .footer-message {
  align-self: stretch !important;
  margin: 0 !important;
  padding: 10px 0 16px !important;
}

/* ---------- the panel -----------------------------------------------------
   The kit's panel treatment, re-targeted at the single-column block. Widened
   to absorb its own padding so the form keeps the same measure as before.   */
body.login-page main.content > .gl-my-5 {
  max-width: 524px !important;
  padding: 34px 32px 28px !important;
  background: linear-gradient(160deg, rgba(20,22,26,.93), rgba(9,10,12,.90)) !important;
  border: 1px solid #262c33 !important;
  border-top: 2px solid #ED1C24 !important;
  border-radius: 4px !important;
  box-shadow: 0 40px 120px -40px #000, 0 0 90px -30px rgba(237,28,36,.35) !important;
  backdrop-filter: blur(3px);
}

/* The lockup now sits ON the panel rather than on the backdrop, so its glow is
   dialled back - the kit's heavier glow is specified for placement over the
   rendered backdrop, where it needs to separate from the artwork. */
body.login-page img.js-portrait-logo-detection {
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(237,28,36,.22)) !important;
}