/*
  MSB branding for SFTPGo (client portal and admin)
  Based on MSB's website design tokens (vsc_msb).
  Font files go into: branding/fonts/
*/

/* ---------- Fonts (self-hosted, same files as the website) ---------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-medium.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/open-sans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/open-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/open-sans-bold.woff2") format("woff2");
}

/* ---------- MSB tokens mapped onto the SFTPGo (Bootstrap/Metronic) theme ---------- */

:root,
[data-bs-theme="light"] {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;

  --color-primary: #222222;
  --color-bg-page: #fafafa;
  --color-bg-surface: #ffffff;
  --color-bg-hover-muted: #ececec;
  --color-brand-primary: #d42c31;
  --color-brand-primary-rgb: 212, 44, 49;
  --color-brand-primary-light: #fbeaea;
  --color-brand-secondary: #202a44;
  --color-brand-secondary-rgb: 32, 42, 68;
  --color-brand-secondary-light: #f0f1f4;   /* very light tint of #202a44 */
  --color-border-default: #222222;
  --color-white: #ffffff;
  --cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);

  /* Bootstrap / Metronic variables */
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-primary);
  --bs-body-bg: var(--color-bg-page);
  --bs-primary: var(--color-brand-primary);
  --bs-primary-rgb: var(--color-brand-primary-rgb);
  --bs-primary-active: var(--color-brand-secondary);
  --bs-primary-light: var(--color-brand-primary-light);
  --bs-primary-inverse: var(--color-white);
  --bs-link-color: var(--color-brand-primary);
  --bs-link-color-rgb: var(--color-brand-primary-rgb);
  --bs-link-hover-color: var(--color-brand-secondary);
}

/* ---------- General text color: MSB #222 instead of the theme's blue-greys ---------- */

:root,
[data-bs-theme="light"] {
  --bs-gray-900: #222222;
  --bs-gray-800: #222222;
  --bs-text-gray-900: #222222;
  --bs-text-gray-800: #222222;
  --bs-text-dark: #222222;
  --bs-heading-color: #222222;
}

.text-gray-900,
.text-gray-800,
.text-dark,
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary) !important;
}

/* ---------- Typography ---------- */

body {
  font-family: var(--font-body) !important;
  color: var(--color-primary);
  background-color: var(--color-bg-page);
}

input,
select,
textarea,
button,
.form-control,
.form-select {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.card-title h2,
.card-title h3 {
  font-family: var(--font-display) !important;
  font-weight: 700;
}

/* ---------- Buttons (MSB pill style) ---------- */

.btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  transition:
    background-color 250ms var(--cubic-bezier),
    border-color 250ms var(--cubic-bezier),
    color 250ms var(--cubic-bezier) !important;
}

.btn:not(.btn-icon):not(.btn-sm) {
  padding: 12px 24px !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

/* Primary: brand red, hover dark blue */
.btn.btn-primary {
  color: var(--color-white) !important;
  background-color: var(--color-brand-primary) !important;
  border: 1px solid var(--color-brand-primary) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.show > .btn.btn-primary {
  background-color: var(--color-brand-secondary) !important;
  border-color: var(--color-brand-secondary) !important;
}

/* Secondary: white with dark border */
.btn.btn-secondary,
.btn.btn-light:not(.btn-icon) {
  color: var(--color-primary) !important;
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border-default) !important;
}

.btn.btn-secondary:hover,
.btn.btn-light:not(.btn-icon):hover {
  background-color: var(--color-bg-hover-muted) !important;
}

/* ---------- Form fields: white with a visible border ---------- */

.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid #cfcfcf !important;
  color: var(--color-primary) !important;
}

.form-control:hover,
.form-select:hover {
  border-color: #a8a8a8 !important;
}

.form-control:focus,
.form-select:focus,
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
  background-color: var(--color-bg-surface) !important;
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-primary-rgb), 0.2) !important;
}

/* ---------- btn-light-primary: MSB secondary button look ---------- */

.btn.btn-light-primary {
  color: var(--color-primary) !important;
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border-default) !important;
}

/* Secondary-style buttons: hover like MSB's vsc-btn--secondary */
.btn.btn-secondary:hover:not(.btn-active),
.btn.btn-secondary:focus:not(.btn-active),
.btn.btn-secondary:active:not(.btn-active),
.btn.btn-light:not(.btn-icon):hover:not(.btn-active),
.btn.btn-light:not(.btn-icon):focus:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.show > .btn.btn-light-primary,
.btn-check:checked + .btn.btn-light-primary,
.btn-check:active + .btn.btn-light-primary {
  color: var(--color-primary) !important;
  background-color: var(--color-bg-hover-muted) !important;
  border-color: var(--color-border-default) !important;
}

/* Icons keep the text color on hover (the theme switches them to white) */
.btn.btn-secondary:hover:not(.btn-active) i,
.btn.btn-light-primary:hover:not(.btn-active) i,
.btn.btn-light-primary:hover:not(.btn-active) .svg-icon,
.btn.btn-light:not(.btn-icon):hover:not(.btn-active) i {
  color: var(--color-primary) !important;
}

/* Icons inside these buttons follow the text color instead of the theme's red */
.btn.btn-light-primary i,
.btn.btn-light-primary .svg-icon {
  color: var(--color-primary) !important;
}

/* ---------- Links, active states, focus ---------- */

.text-primary,
.link-primary {
  color: var(--color-brand-primary) !important;
}

.menu-link.active,
.nav-link.active {
  color: var(--color-brand-primary) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-primary-rgb), 0.2) !important;
}

/* ---------- Upload dropzone and notice boxes: MSB secondary color ---------- */

.dropzone {
  background-color: var(--color-brand-secondary-light) !important;
  border: 1px dashed var(--color-brand-secondary) !important;
}

.dropzone:hover {
  background-color: rgba(var(--color-brand-secondary-rgb), 0.1) !important;
}

.dropzone i,
.dropzone .text-primary {
  color: var(--color-brand-secondary) !important;
}

.notice.bg-light-primary {
  background-color: var(--color-brand-secondary-light) !important;
}

.notice.border-primary {
  border-color: var(--color-brand-secondary) !important;
}

.notice i,
.notice .text-primary {
  color: var(--color-brand-secondary) !important;
}

/* ---------- Sidebar: MSB secondary background, white content ---------- */

:root {
  --sidebar-bg: var(--color-brand-secondary);
  --sidebar-text: #ffffff;
  --sidebar-icon-secondary: #aab1c4;   /* lighter grey for the second tone of duotone icons */
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: rgba(255, 255, 255, 0.14);
}

.app-sidebar,
#kt_app_sidebar,
.app-sidebar .app-sidebar-logo {
  background-color: var(--sidebar-bg) !important;
  border-color: transparent !important;
}

/* Texts: menu entries, section headings, name next to the logo */
.app-sidebar,
.app-sidebar .menu-title,
.app-sidebar .menu-link,
.app-sidebar .menu-heading,
.app-sidebar .menu-section,
.app-sidebar .text-sidebar,
.app-sidebar a {
  color: var(--sidebar-text) !important;
}

/* Section headings slightly toned down */
.app-sidebar .menu-heading,
.app-sidebar .menu-section {
  opacity: 0.7;
}

/* Icons: white main tone, lighter grey second tone */
.app-sidebar i,
.app-sidebar .menu-icon i {
  color: var(--sidebar-text) !important;
}

.app-sidebar .ki-duotone .path1::before {
  color: var(--sidebar-icon-secondary) !important;
  opacity: 1 !important;
}

.app-sidebar .ki-duotone .path2::before,
.app-sidebar .ki-duotone .path3::before,
.app-sidebar .ki-duotone .path4::before,
.app-sidebar .ki-duotone .path5::before {
  color: var(--sidebar-text) !important;
}

/* Hover and active menu entries */
.app-sidebar .menu-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
}

.app-sidebar .menu-link.active,
.app-sidebar .menu-item.here > .menu-link {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-text) !important;
}

.app-sidebar .menu-link:hover .menu-title,
.app-sidebar .menu-link.active .menu-title,
.app-sidebar .menu-link:hover i,
.app-sidebar .menu-link.active i {
  color: var(--sidebar-text) !important;
}

/* ---------- Badges: MSB secondary style ---------- */

.badge.badge-light-primary {
  background-color: var(--color-brand-secondary-light) !important;
  color: var(--color-brand-secondary) !important;
}

.badge.badge-light-primary i,
.badge.badge-light-primary .text-primary,
.badge.badge-light-primary a {
  color: var(--color-brand-secondary) !important;
}

.badge.badge-light-primary a:hover {
  color: var(--color-brand-primary) !important;
}

.badge.badge-primary {
  background-color: var(--color-brand-secondary) !important;
  color: var(--color-white) !important;
}

/* ---------- Pagination: MSB secondary style ---------- */

.pagination {
  --bs-pagination-color: var(--color-brand-secondary);
  --bs-pagination-hover-color: var(--color-brand-secondary);
  --bs-pagination-hover-bg: var(--color-brand-secondary-light);
  --bs-pagination-focus-color: var(--color-brand-secondary);
  --bs-pagination-focus-bg: var(--color-brand-secondary-light);
  --bs-pagination-active-color: var(--color-white);
  --bs-pagination-active-bg: var(--color-brand-secondary);
  --bs-pagination-disabled-color: #b5b5b5;
}

.page-item .page-link {
  color: var(--color-brand-secondary) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
}

.page-item:not(.active):not(.disabled) .page-link:hover {
  background-color: var(--color-brand-secondary-light) !important;
}

.page-item.active .page-link {
  background-color: var(--color-brand-secondary) !important;
  color: var(--color-white) !important;
}


/* ---------- Logo ---------- */

img[src*="/branding/logo"] {
  height: 64px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* ---------- Light logo in the sidebar ---------- */

.app-sidebar img[src*="/branding/logo"] {
  content: url("logo-light.png");
}

/* Login pages: logo centered, name centered below it */
#sign_in_form .row:has(img[src*="/branding/logo"]) {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

#sign_in_form .row:has(img[src*="/branding/logo"]) > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}

#sign_in_form .row:has(img[src*="/branding/logo"]) h1 {
  margin: 1rem 0 0 0 !important;
  text-align: center !important;
}

#sign_in_form img[src*="/branding/logo"] {
  height: 90px !important;
}

/* ---------- Hide theme switcher (light mode only) ---------- */

div:has(> [data-kt-element="theme-mode-menu"]),
[data-kt-element="theme-mode-menu"] {
  display: none !important;
}