/* =============================================================================
   SFTPGo - default values of the customizable theme variables
   =============================================================================
   Every value below is the one the interface ships with. Copy this file, change
   what the brand requires, delete the rest: a variable that is not listed keeps
   its default.

   To apply it, add the copy to the branding "extra_css" list of an HTTP binding.
   It is loaded after the theme, so these declarations win.

   The interface reads its colors from the variables below, not from the
   Bootstrap component variables: a button takes --bs-primary and
   --bs-primary-inverse, so a rule that sets --bs-btn-bg has no effect here.

   Two blocks per section: the interface follows the system preference and the
   in-app switch, so light and dark both need a value. The :root selector in the
   first block applies to both modes, so dropping the dark block carries the
   light values into dark mode; to change one mode alone, keep only its
   [data-bs-theme=...] selector.
   ============================================================================= */

/* --- Brand accent and links ---
   The smallest change that reads as a rebrand: buttons, active menu entries,
   checkboxes, badges and links all follow this family.
   --------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-primary: #122945;
  --bs-primary-active: #122945;
  --bs-primary-light: #EEEEEF;
  --bs-primary-clarity: rgba(12, 45, 130, 0.2);
  --bs-primary-inverse: #FFFFFF;
  --bs-primary-rgb: 12, 45, 130;
  --bs-primary-text-emphasis: #122945;
  --bs-primary-bg-subtle: #FFFFFF;
  --bs-primary-border-subtle: #8C8C8C;
  --bs-link-color: #000;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;
}

[data-bs-theme=dark] {
  --bs-primary: #122945;
  --bs-primary-active: #122945;
  --bs-primary-light: #ffffff1A;
  --bs-primary-clarity: rgba(18, 41, 69, 0.2);
  --bs-primary-inverse: #FFFFFF;
  --bs-primary-rgb: 18, 41, 69;
  --bs-primary-text-emphasis: #FFFFFF;
  --bs-primary-bg-subtle: #122945;
  --bs-primary-border-subtle: #122945;
  --bs-link-color: #FFFFFF;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #8C8C8C;
  --bs-link-hover-color-rgb: 142, 142, 142;
}

/* --- Sidebar ---
   The sidebar keeps its own colors: it is dark in both modes by default.
   A light sidebar needs the text and scrollbar colors as well as the
   background, otherwise the menu stays tuned for a dark surface, and a
   border to stand out from the page it sits next to.
   --------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-app-sidebar-base-bg-color: #122945;
  --bs-app-sidebar-base-border-end: none;
  --bs-app-sidebar-base-logo-color: #FFFFFF;
  --bs-app-sidebar-base-scrollbar-color: #8C8C8C;
  --bs-app-sidebar-base-menu-link-color: #FFFFFF;
  --bs-app-sidebar-base-menu-link-icon-color: #8C8C8C;
  --bs-app-sidebar-base-menu-link-hover-color: #FFFFFF;
}

[data-bs-theme=dark] {
  --bs-app-sidebar-base-bg-color: #000000;
  --bs-app-sidebar-base-border-end: 1px solid #000000;
  --bs-app-sidebar-base-logo-color: #FFFFFF;
  --bs-app-sidebar-base-scrollbar-color: #8C8C8C;
  --bs-app-sidebar-base-menu-link-color: #FFFFFF;
  --bs-app-sidebar-base-menu-link-icon-color: #8C8C8C;
  --bs-app-sidebar-base-menu-link-hover-color: #FFFFFF;
  --bs-text-gray-900: #FFFFFF;
  --bs-text-gray-800: #FFFFFF;
  --bs-text-gray-700: #FFFFFF;
  --bs-text-gray-600: #FFFFFF;
  --bs-text-gray-500: #FFFFFF;
  --bs-text-gray-400: #FFFFFF;
  --bs-text-gray-300: #FFFFFF;
  --bs-text-gray-200: #FFFFFF;
  --bs-text-gray-100: #FFFFFF;
}

:root {
  --bs-app-sidebar-base-menu-link-active-color: #FFFFFF;
  --bs-app-sidebar-base-menu-link-active-bg-color: transparent;
  --bs-card-color: #EEEEEF;
  --bs-root-card-border-color: transparent;
  --bs-upload-queue-row-color: #000000;
}

/* --- Surfaces and text ---
   Page background, default text, borders. The levers for a warmer or
   darker chrome without touching the brand accent.
   --------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-body-bg: #FFFFFF;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #000000;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-emphasis-color: #000000;
  --bs-secondary-color: rgba(0, 0, 0, 0.75);
  --bs-secondary-bg: #FFFFFF;
  --bs-tertiary-color: rgba(0, 0, 0, 0.5);
  --bs-tertiary-bg: #FFFFFF;
  --bs-heading-color: #000000;
  --bs-text-muted: #8C8C8C;
  --bs-border-color: #8C8C8C;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-width: 0;
  --bs-app-bg-color: #FFFFFF;
  --bs-app-blank-bg-color: #FFFFFF;
  --bs-app-header-base-bg-color: #FFFFFF;
  --bs-app-header-minimize-bg-color: rgba(255, 255, 255, 0.5);
  --bs-component-hover-color: #122945;
  --bs-component-active-bg: #122945;
}

[data-bs-theme=dark] {
  --bs-body-bg: #717279;
  --bs-body-bg-rgb: 113, 114, 121;
  --bs-body-color: #FFFFFF;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: rgba(255, 255, 255, 0.75);
  --bs-secondary-bg: #122945;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-bg: #122945;
  --bs-heading-color: #FFFFFF;
  --bs-text-muted: #FFFFFF;
  --bs-border-color: #8C8C8C;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-app-bg-color: #292c32;
  --bs-app-blank-bg-color: #292c32;
  --bs-app-header-base-bg-color: #292c32;
  --bs-app-header-minimize-bg-color: rgba(41, 44, 50, 0.5);
  --bs-component-hover-color: #FFFFFF;
}

/* --- Status colors ---
   Success, information, warning and danger. Changing them moves the meaning
   of every alert, badge and toast in the interface.
   --------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-success: #17C653;
  --bs-success-active: #04B440;
  --bs-success-light: #DFFFEA;
  --bs-success-clarity: rgba(23, 198, 83, 0.2);
  --bs-success-inverse: #ffffff;
  --bs-success-rgb: 23, 198, 83;
  --bs-success-text-emphasis: #094f21;
  --bs-success-bg-subtle: #d1f4dd;
  --bs-success-border-subtle: #a2e8ba;
  --bs-info: #7239EA;
  --bs-info-active: #5014D0;
  --bs-info-light: #F8F5FF;
  --bs-info-clarity: rgba(114, 57, 234, 0.2);
  --bs-info-inverse: #ffffff;
  --bs-info-rgb: 114, 57, 234;
  --bs-info-text-emphasis: #2e175e;
  --bs-info-bg-subtle: #e3d7fb;
  --bs-info-border-subtle: #c7b0f7;
  --bs-warning: #F6C000;
  --bs-warning-active: #DEAD00;
  --bs-warning-light: #FFF8DD;
  --bs-warning-clarity: rgba(246, 192, 0, 0.2);
  --bs-warning-inverse: #ffffff;
  --bs-warning-rgb: 246, 192, 0;
  --bs-warning-text-emphasis: #624d00;
  --bs-warning-bg-subtle: #fdf2cc;
  --bs-warning-border-subtle: #fbe699;
  --bs-danger: #DB0237;
  --bs-danger-active: #DB0237;
  --bs-text-danger: #DB0237;
  --bs-danger-light: #FFEEF3;
  --bs-danger-clarity: rgba(219, 2, 55, 0.2);
  --bs-danger-inverse: #ffffff;
  --bs-danger-rgb: 219, 2, 55;
  --bs-danger-text-emphasis: #5e0117;
  --bs-danger-bg-subtle: #f6c9d3;
  --bs-danger-border-subtle: #ee94a5;
}

[data-bs-theme=dark] {
  --bs-success: #00A261;
  --bs-success-active: #01BF73;
  --bs-success-light: #1F212A;
  --bs-success-clarity: rgba(0, 162, 97, 0.2);
  --bs-success-inverse: #ffffff;
  --bs-success-rgb: 0, 162, 97;
  --bs-success-text-emphasis: #74dd98;
  --bs-success-bg-subtle: #052811;
  --bs-success-border-subtle: #0e7732;
  --bs-info: #883FFF;
  --bs-info-active: #9E63FF;
  --bs-info-light: #272134;
  --bs-info-clarity: rgba(136, 63, 255, 0.2);
  --bs-info-inverse: #ffffff;
  --bs-info-rgb: 136, 63, 255;
  --bs-info-text-emphasis: #aa88f2;
  --bs-info-bg-subtle: #170b2f;
  --bs-info-border-subtle: #44228c;
  --bs-warning: #C59A00;
  --bs-warning-active: #D9AA00;
  --bs-warning-light: transparent;
  --bs-warning-clarity: rgba(197, 154, 0, 0.2);
  --bs-warning-inverse: #ffffff;
  --bs-warning-rgb: 197, 154, 0;
  --bs-warning-text-emphasis: #fad966;
  --bs-warning-bg-subtle: #312600;
  --bs-warning-border-subtle: #947300;
  --bs-danger: #DB0237;
  --bs-danger-active: #DB0237;
  --bs-text-danger: #DB0237;
  --bs-danger-light: #302024;
  --bs-danger-clarity: rgba(219, 2, 55, 0.2);
  --bs-danger-inverse: #ffffff;
  --bs-danger-rgb: 219, 2, 55;
  --bs-danger-text-emphasis: #fb7e9c;
  --bs-danger-bg-subtle: #320812;
  --bs-danger-border-subtle: #951836;
}

/* --- Neutral families ---
   Secondary buttons, soft surfaces and inverted areas.
   --------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-secondary: #8C8C8C;
  --bs-secondary-active: #122945;
  --bs-secondary-light: #FFFFFF;
  --bs-secondary-clarity: rgba(142, 142, 142, 0.2);
  --bs-secondary-inverse: #000000;
  --bs-secondary-rgb: 142, 142, 142;
  --bs-secondary-text-emphasis: #000000;
  --bs-secondary-bg-subtle: #FFFFFF;
  --bs-secondary-border-subtle: #8C8C8C;
  --bs-light: #FFFFFF;
  --bs-light-active: #8C8C8C;
  --bs-light-light: #FFFFFF;
  --bs-light-clarity: rgba(255, 255, 255, 0.2);
  --bs-light-inverse: #000000;
  --bs-light-rgb: 255, 255, 255;
  --bs-light-text-emphasis: #000000;
  --bs-light-bg-subtle: #FFFFFF;
  --bs-light-border-subtle: #8C8C8C;
  --bs-dark: #000000;
  --bs-dark-active: #122945;
  --bs-dark-light: #FFFFFF;
  --bs-dark-clarity: rgba(0, 0, 0, 0.2);
  --bs-dark-inverse: #FFFFFF;
  --bs-dark-rgb: 0, 0, 0;
  --bs-dark-text-emphasis: #000000;
  --bs-dark-bg-subtle: #8C8C8C;
  --bs-dark-border-subtle: #8C8C8C;
}

[data-bs-theme=dark] {
  --bs-secondary: #8C8C8C;
  --bs-secondary-active: #122945;
  --bs-secondary-light: #8C8C8C;
  --bs-secondary-clarity: rgba(142, 142, 142, 0.2);
  --bs-secondary-inverse: #FFFFFF;
  --bs-secondary-rgb: 142, 142, 142;
  --bs-secondary-text-emphasis: #FFFFFF;
  --bs-secondary-bg-subtle: #000000;
  --bs-secondary-border-subtle: #8C8C8C;
  --bs-light: transparent;
  --bs-light-active: #122945;
  --bs-light-light: #000000;
  --bs-light-clarity: rgba(0, 0, 0, 0.2);
  --bs-light-inverse: #FFFFFF;
  --bs-light-rgb: 0, 0, 0;
  --bs-light-text-emphasis: #FFFFFF;
  --bs-light-bg-subtle: #122945;
  --bs-light-border-subtle: #8C8C8C;
  --bs-dark: #FFFFFF;
  --bs-dark-active: #8C8C8C;
  --bs-dark-light: #000000;
  --bs-dark-clarity: rgba(0, 0, 0, 0.2);
  --bs-dark-inverse: #000000;
  --bs-dark-rgb: 255, 255, 255;
  --bs-dark-text-emphasis: #FFFFFF;
  --bs-dark-bg-subtle: #000000;
  --bs-dark-border-subtle: #122945;
}

/* --- Gray ramp ---
   Consumed by the text-gray-* and bg-gray-* utility classes used across the
   pages, so a tinted ramp shifts the whole interface.
   --------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --bs-gray-100: #FFFFFF;
  --bs-gray-200: #EEEEEF;
  --bs-gray-300: #8C8C8C;
  --bs-gray-400: #8C8C8C;
  --bs-gray-500: #8C8C8C;
  --bs-gray-600: #8C8C8C;
  --bs-gray-700: #000000;
  --bs-gray-800: #8C8C8C;
  --bs-gray-900: #000000;
}

[data-bs-theme=dark] {
  --bs-gray-100: #8C8C8C;
  --bs-gray-200: #8C8C8C;
  --bs-gray-300: #FFFFFF;
  --bs-gray-400: #8C8C8C;
  --bs-gray-500: #8C8C8C;
  --bs-gray-600: #8C8C8C;
  --bs-gray-700: #FFFFFF;
  --bs-gray-800: #FFFFFF;
  --bs-gray-900: #FFFFFF;
}

/* --- Typography and shape ---
   Same value in both modes. A self-hosted @font-face declaration can be
   added to this file and referenced here.
   --------------------------------------------------------------------- */
:root {
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-font-sans-serif: Inter, Helvetica, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-border-radius: 0.475rem;
  --bs-border-radius-sm: 0.425rem;
  --bs-border-radius-lg: 0.625rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-pill: 50rem;
}

/* --- Icons ---
   Menu/list icons (Home, folder, ...) render with the ".text-primary"
   utility class, which otherwise follows --bs-primary; force them to the
   CI silver instead, with black on hover for feedback.
   --------------------------------------------------------------------- */
.text-primary {
  color: #8C8C8C !important;
}

[data-bs-theme=dark] .text-primary {
  color: #FFFFFF !important;
}

a:hover .text-primary,
.btn:hover .text-primary {
  color: #000000 !important;
}

/* Top-right toolbar icons and hovered folder/file names: white instead of
   blue on hover in dark mode. Assumes Metronic's ".text-hover-primary"
   utility class; adjust the selector if the real markup differs. */
[data-bs-theme=dark] .text-hover-primary *,
[data-bs-theme=dark] .text-hover-primary:hover,
[data-bs-theme=dark] .text-hover-primary:hover * {
  color: #FFFFFF !important;
}

/* "New Folder" button: plain white, detached from the "Upload" button next
   to it. Assumes Metronic's ".btn-light-primary" variant; adjust the
   selector if the real class differs. */

.dropzone {
  border: none !important;
  background-color: var(--bs-primary-light) !important;
}

[data-bs-theme=dark] .dropzone {
  border: none !important;
  background-color: var(--bs-primary-light) !important;
}


[data-bs-theme=light] .btn.btn-light-primary {
  color: #122945 !important;
  margin-inline-end: 0.5rem;
}

[data-bs-theme=light] .btn.btn-light-primary:hover {
  color: #FFFFFF !important;
}

[data-bs-theme=dark] .btn.btn-light-primary *,
[data-bs-theme=dark] .btn.btn-light-primary:hover {
  color: #FFFFFF !important;
}

.app-sidebar-navs .menu .menu-item .menu-link.active {
  background-color: var(--bs-app-sidebar-base-menu-link-active-bg-color) !important;
}

.app-sidebar-navs .menu .menu-item .menu-link.active .menu-title .app-sidebar-navs .menu .menu-item .menu-link.active {
  color: var(--bs-app-sidebar-base-menu-link-active-bg-color) !important;
}

.mb-7 .menu-item .menu-link.active .menu-icon i {
  color: var(--bs-app-sidebar-base-menu-link-active-color) !important;
}


.upload-queue-row {
  color: var(--bs-upload-queue-row-color) !important;
}

.form-check-input {
  background-color: var(--bs-gray-200) !important;
  border-color: var(--bs-gray-200) !important;
}

.form-check-input:checked {
  background-color: var(--bs-gray-900) !important;
  border-color: var(--bs-gray-900) !important;
}

.me-2 {
  color: var(--bs-gray-300) !important;
}

.btn.btn-color-gray-800 .svg-icon,
.btn.btn-color-gray-800 i {
  color: var(--bs-gray-900) !important;
}

.text-gray-500 {
  color: var(--bs-gray-500) !important;
}

.badge-light-primary {
  background-color: transparent !important;
}

.fs.home {
  color: var(--bs-link-color) !important;
}

.fs-2 {
  color: var(--bs-link-color) !important;
}

[data-bs-theme=dark] .select2-selection__choice {
  background-color: #8c8c8c !important;
}

[data-bs-theme=dark] .form-select {
  background-color: var(--bs-form-select-bg) !important;
}

/* .btn.btn-light-secondary,
.btn.btn-light-primary {
  color: #FFFFFF !important;
  margin-inline-end: 0.5rem;
} */

.btn.btn-icon.btn-active-light-primary.w-35px.h-35px.w-md-40px.h-md-40px:hover,
.btn.btn-icon.btn-active-light-primary.w-35px.h-35px.w-md-40px.h-md-40px.show.menu-dropdown {
  background-color: transparent !important;
}

/* .ki-duotone.ki-add-folder * {
  color: #FFFFFF !important;
} */