/* uPortal360 — single-tone charcoal primary. Color sampled from the dark
   band/text in the lockup logo (#242121). Hover lifts toward a lighter
   charcoal since the base is already near-black; further darkening would
   give no visual feedback.

   SFTPGo 2.7's CSS bundle bakes blue (#0069E0) into a few places that
   bypass --bs-primary entirely, so we need explicit overrides:
   - .form-check-input:checked has a hardcoded background-color
   - --bs-component-active-bg is its own hardcoded var (drives pagination
     active page, dropdown active item check, etc.)
   - --bs-text-primary is its own hardcoded var (drives .text-primary
     text color and .svg-icon-primary icons like the breadcrumb home)
   - .form-control:focus has a hardcoded rgba(0,105,224,.25) glow ring
   - a:hover is hardcoded to color: var(--bs-primary), so two-tone link
     palettes always collapse to primary on hover — going single-color
     avoids that. */
:root,
[data-bs-theme="light"] {
  --bs-primary:                  #242121;
  --bs-primary-rgb:              36, 33, 33;
  --bs-primary-active:           #3a3535;
  --bs-primary-active-rgb:       58, 53, 53;
  --bs-primary-inverse:          #ffffff;
  --bs-primary-light:            #f4f3f3;
  --bs-primary-light-rgb:        244, 243, 243;
  --bs-primary-text-emphasis:    #0d0c0c;
  --bs-primary-bg-subtle:        #f4f3f3;
  --bs-primary-border-subtle:    #c4c1c1;

  --bs-link-color:               #242121;
  --bs-link-color-rgb:           36, 33, 33;
  --bs-link-hover-color:         #3a3535;
  --bs-link-hover-color-rgb:     58, 53, 53;

  --bs-component-active-bg:      #242121;
  --bs-component-active-color:   #ffffff;

  --bs-text-primary:             #242121;
}

[data-bs-theme="dark"] {
  --bs-primary:                  #f4f3f3;
  --bs-primary-rgb:              244, 243, 243;
  --bs-primary-active:           #ffffff;
  --bs-primary-active-rgb:       255, 255, 255;
  --bs-primary-inverse:          #242121;
  --bs-primary-light:            #2c2929;
  --bs-primary-light-rgb:        44, 41, 41;

  --bs-link-color:               #f4f3f3;
  --bs-link-hover-color:         #ffffff;

  --bs-component-active-bg:      #f4f3f3;
  --bs-component-active-color:   #242121;

  --bs-text-primary:             #f4f3f3;
}

/* Form-check / form-switch checked state — bundle hardcodes #0069e0,
   bypassing --bs-primary. Use !important to win over the un-prefixed
   stock rule. */
.form-check-input:checked,
.form-switch .form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color:     var(--bs-primary) !important;
}

/* Form focus ring — bundle hardcodes a blue rgba glow. Replace with the
   primary's rgb so the focus halo matches the rest of the theme. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

/* In-portal layout (header bar + desktop sidebar) sits on a dark surface.
   SFTPGo only exposes one Branding.LogoPath, used in three places:
     .h-30px on the top header,
     .h-50px on share / message views,
     .h-40px.app-sidebar-logo-default on the desktop sidebar.
   Swap each to the white-on-transparent variant via `content:` (modern
   browsers replace the rendered image without touching the src attr).
   Login / forgot-password (.h-80px / .h-md-90px / .h-lg-100px on a white
   card) keeps the original color lockup. */
img[alt="Logo"].h-30px,
img[alt="Logo"].h-50px,
img[alt="Logo"].app-sidebar-logo-default {
  content: url("/static/branding/logo-white.png");
}

/* Hide the qualifier text on login / forgot-password / register / reset
   forms — the lockup logo is the brand mark on its own. The "name" field
   still drives the browser tab title via <title>. Expand the logo column
   to full width and center so the lockup sits balanced above the form.

   Markup varies between pages: on the login page the qualifier is an
   <h1>, on forgot-password it's an <a>; the logo <img> is a direct child
   on login but wrapped in <a> on forgot-password — hence the broader
   descendant selectors below. */
.row.align-items-center > .col-7:has(.text-gray-900) {
  display: none;
}
.row.align-items-center > .col-5:has(img[alt="Logo"]) {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}