/*
 * 4chems branding for the SFTPGo web client (loaded via BRANDING__WEB_CLIENT__EXTRA_CSS,
 * after SFTPGo's own style.bundle.css).
 *
 * Colours follow the IAM login theme (stacks/iam/themes/4chems/login/resources/css/4chems.css,
 * itself a copy of the --cs-* palette of www.4chems.com): primary = navy, accent = amber.
 * A rebrand means updating it there AND here.
 *
 * The UI is always light, like IAM (patched templates/common/base.html), so only the light
 * tokens are set. Like the IAM theme, this mostly redefines design tokens (Bootstrap 5.3 / Metronic --bs-*
 * variables, set per [data-bs-theme]) instead of restyling components by class name. The two
 * login-page rules below do hook Metronic classes (body.app-blank, the card's bg-body) and may
 * need a look after an SFTPGo upgrade; `verify-storage` checks that this file is served.
 */

/* --- Lato, the 4chems.com typeface (same self-hosted woff2 files as www.4chems.com, SIL OFL 1.1).
   The site ships 300/400/600/700; Metronic's fw-semibold is 500, mapped to the Semibold file so it
   does not fall back to Regular. --- */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/LatoLatin-Light.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/LatoLatin-Regular.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/LatoLatin-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/LatoLatin-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/LatoLatin-Bold.woff2") format("woff2"); }

:root {
  --bs-font-sans-serif: "Lato", "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --cs-navy: #1d3354;
  --cs-navy-deep: #16202e;
  --cs-amber: #e09a28;
  --cs-amber-ink: #9c6310;
  --cs-line: #d9dee6;
  --cs-muted: #69758a;
}

/* --- light theme (the IAM look): navy primary, amber-ink link hover --- */
:root,
[data-bs-theme="light"] {
  --bs-primary: #1d3354;
  --bs-primary-rgb: 29, 51, 84;
  --bs-primary-active: #16202e;
  --bs-primary-light: #e8ecf3;
  --bs-primary-inverse: #ffffff;
  --bs-primary-clarity: rgba(29, 51, 84, 0.2);
  --bs-primary-text-emphasis: #16202e;
  --bs-primary-bg-subtle: #d2d9e4;
  --bs-primary-border-subtle: #a5b2c6;
  --bs-link-color: #1d3354;
  --bs-link-color-rgb: 29, 51, 84;
  --bs-link-hover-color: #9c6310;
  --bs-link-hover-color-rgb: 156, 99, 16;
  --bs-focus-ring-color: rgba(29, 51, 84, 0.25);
  --bs-component-active-color: #ffffff;
  --bs-component-active-bg: #1d3354;
}

/* --- login page: IAM background field and card --- */
body.app-blank {
  background: linear-gradient(170deg, #ffffff 0%, #eef1f5 55%, var(--cs-line) 100%) fixed;
}

body.app-blank .bg-body.rounded.shadow-sm {
  border-top: 3px solid var(--cs-amber);
  box-shadow: 0 1px 2px rgba(29, 51, 84, 0.08), 0 8px 24px rgba(29, 51, 84, 0.10) !important;
}

/* SFTPGo's bundle hard-codes Inter on html/body in addition to the variable. */
html,
body {
  font-family: var(--bs-font-sans-serif);
}

/* Login page: SFTPGo puts the logo (col-5) and the short name (col-7) side by side, sized for a
   square logo. With the full 4chems wordmark, stack them: wordmark on top, "file transfers" below,
   both centred - like the IAM login page shows the wordmark above its card content. */
body.app-blank #sign_in_form > .container > .row > .col-5,
body.app-blank #sign_in_form > .container > .row > .col-7 {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}
body.app-blank #sign_in_form > .container > .row > .col-5 img {
  height: auto !important;
  width: 260px;
  max-width: 100%;
}
body.app-blank #sign_in_form > .container > .row > .col-7 h1 {
  margin: 1.25rem 0 0 !important;
  color: var(--cs-muted);
  font-weight: 400;
}


/* --- After login: sidebar in IAM navy with the white wordmark, "file transfers" below it.
   SFTPGo's sidebar is near-black (#0B0C10) with the logo (h-40px) and the short name side by side;
   the black wordmark would vanish there and the name would wrap. The <img> is hidden and the
   white wordmark drawn as a background (works in every browser, unlike content:url on <img>). --- */
:root {
  --bs-app-sidebar-base-bg-color: var(--cs-navy);
}
.app-sidebar .app-sidebar-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.app-sidebar .app-sidebar-logo::before {
  content: "";
  display: block;
  width: 170px;
  height: 47px; /* 840x232 wordmark */
  background: url("logo-white.png") no-repeat left center / contain;
}
.app-sidebar .app-sidebar-logo img {
  display: none;
}
.app-sidebar .app-sidebar-logo .text-sidebar {
  padding-left: 0 !important;
  margin-top: 0.6rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400 !important;
}
/* active menu entry: a light tint on navy with the amber accent (SFTPGo hard-codes #15171c) */
.app-sidebar-navs .menu .menu-item .menu-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--cs-amber);
}