/* Atori brand colors — override Mofi theme defaults
   Primary: #272156 (dark navy/purple)
   Secondary: #c6a16d (gold) */

:root {
  /* Mofi theme variables */
  --theme-default: #272156;
  --theme-secondary: #c6a16d;
  --light-shade-primary: rgba(39, 33, 86, 0.08);
  --view-border-marker: rgba(39, 33, 86, 0.2);

  /* Bootstrap variables */
  --bs-primary: #272156;
  --bs-primary-rgb: 39, 33, 86;
  --bs-secondary: #c6a16d;
  --bs-secondary-rgb: 198, 161, 109;
  --bs-link-color: #272156;
  --bs-link-color-rgb: 39, 33, 86;
  --bs-link-hover-color: #1a1640;
  --bs-link-hover-color-rgb: 26, 22, 64;

  /* Bootstrap semantic */
  --bs-primary-bg-subtle: rgba(39, 33, 86, 0.1);
  --bs-primary-border-subtle: rgba(39, 33, 86, 0.25);
  --bs-primary-text-emphasis: #1a1640;
  --bs-secondary-bg-subtle: rgba(198, 161, 109, 0.1);
  --bs-secondary-border-subtle: rgba(198, 161, 109, 0.25);
  --bs-secondary-text-emphasis: #8c6f45;
}

/* Bootstrap button primary overrides (in case --bs-* vars aren't enough) */
.btn-primary {
  --bs-btn-bg: #272156;
  --bs-btn-border-color: #272156;
  --bs-btn-hover-bg: #1a1640;
  --bs-btn-hover-border-color: #1a1640;
  --bs-btn-active-bg: #14102e;
  --bs-btn-active-border-color: #14102e;
  --bs-btn-disabled-bg: #272156;
  --bs-btn-disabled-border-color: #272156;
  color: #fff;
}

.btn-secondary {
  --bs-btn-bg: #c6a16d;
  --bs-btn-border-color: #c6a16d;
  --bs-btn-hover-bg: #b08e5a;
  --bs-btn-hover-border-color: #b08e5a;
  --bs-btn-active-bg: #9a7d4f;
  --bs-btn-active-border-color: #9a7d4f;
  --bs-btn-disabled-bg: #c6a16d;
  --bs-btn-disabled-border-color: #c6a16d;
  color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: #272156;
  --bs-btn-border-color: #272156;
  --bs-btn-hover-bg: #272156;
  --bs-btn-hover-border-color: #272156;
  --bs-btn-active-bg: #272156;
  --bs-btn-active-border-color: #272156;
}

.btn-outline-secondary {
  --bs-btn-color: #c6a16d;
  --bs-btn-border-color: #c6a16d;
  --bs-btn-hover-bg: #c6a16d;
  --bs-btn-hover-border-color: #c6a16d;
  --bs-btn-active-bg: #c6a16d;
  --bs-btn-active-border-color: #c6a16d;
}

/* Text & background utility overrides */
.text-primary { color: #272156 !important; }
.text-secondary { color: #c6a16d !important; }
.bg-primary { background-color: #272156 !important; }
.bg-secondary { background-color: #c6a16d !important; }
.border-primary { border-color: #272156 !important; }
.border-secondary { border-color: #c6a16d !important; }

/* Nav pills active state */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #272156;
  color: #fff;
}

/* Mofi pill variants */
.nav-pills.nav-primary .nav-link.active {
  background-color: #272156;
  color: #fff;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
  border-color: #272156;
  box-shadow: 0 0 0 0.25rem rgba(39, 33, 86, 0.25);
}

/* Checkbox & radio checked */
.form-check-input:checked {
  background-color: #272156;
  border-color: #272156;
}

/* Links */
a {
  color: #272156;
}

a:hover {
  color: #1a1640;
}

.link,
.theme-form .link {
  color: #272156;
}

.theme-form .link:hover {
  color: #c6a16d;
}

/* Mofi login show/hide toggle color */
.show-hide span {
  color: #272156;
}

/* Sidebar active menu item */
.sidebar-wrapper .sidebar-main .sidebar-links > li.active .sidebar-link,
.sidebar-wrapper .sidebar-main .sidebar-links > li .sidebar-link.active {
  color: #272156;
}

/* Page title / breadcrumb */
.breadcrumb-item.active {
  color: #c6a16d;
}

/* Badge primary/secondary */
.badge.bg-primary,
.badge-primary { background-color: #272156 !important; }
.badge.bg-secondary,
.badge-secondary { background-color: #c6a16d !important; }
.badge-light-primary { background-color: rgba(39, 33, 86, 0.12); color: #272156; }
.badge-light-secondary { background-color: rgba(198, 161, 109, 0.12); color: #c6a16d; }

/* Login card backgrounds */
.login-card.login-dark {
  background-color: rgba(39, 33, 86, 0.04);
}

/* Spinner */
.spinner-border.text-primary { color: #272156 !important; }

/* Hide Mofi theme customizer floating panel (Support / Document / Buy Now buttons) */
.customizer-links,
.customizer-contain,
.customizer-overlay {
  display: none !important;
}

/* Login background — override Mofi default */
.login-card {
  background: url("/mofi/images/login/login-background.webp") center/cover no-repeat !important;
}

/* Sidebar background — brand primary color */
.page-wrapper .page-body-wrapper .sidebar-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper,
div.sidebar-wrapper {
  background-color: #272156 !important;
}

/* === SIDEBAR: Text & links — white on dark brand bg === */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link span,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-submenu li a,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link span,
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* === SIDEBAR: Section titles (categories) === */
/* The <h6> inside .sidebar-main-title */
.page-wrapper .sidebar-main-title h6,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-main-title h6,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-main-title h6 span,
div.sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-main-title h6,
div.sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-main-title h6 span {
  color: #c6a16d !important;
  font-weight: 600 !important;
}

/* The <div> wrapper inside .sidebar-main-title has a dark bg by default — override to gold-tinted */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-main-title div,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li.sidebar-main-title div,
div.sidebar-wrapper .sidebar-main .sidebar-links li.sidebar-main-title div {
  background-color: rgba(198, 161, 109, 0.15) !important;
  border-radius: 6px !important;
}

/* === SIDEBAR: Icons === */
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link svg.stroke-icon,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link svg.fill-icon,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link svg.stroke-icon,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link svg.fill-icon {
  stroke: rgba(255, 255, 255, 0.85) !important;
  fill: rgba(255, 255, 255, 0.85) !important;
}

/* === SIDEBAR: Hover state (li:hover) === */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li:hover .sidebar-link,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link:hover,
div.sidebar-wrapper .sidebar-main .sidebar-links li:hover .sidebar-link,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link:hover {
  background-color: rgba(198, 161, 109, 0.12) !important;
  color: #e8c998 !important;
  transition: all 0.2s ease-in-out !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li:hover .sidebar-link span,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link:hover span,
div.sidebar-wrapper .sidebar-main .sidebar-links li:hover .sidebar-link span,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link:hover span {
  color: #e8c998 !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li:hover .sidebar-link svg,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link:hover svg,
div.sidebar-wrapper .sidebar-main .sidebar-links li:hover .sidebar-link svg,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link:hover svg {
  stroke: #e8c998 !important;
  fill: #e8c998 !important;
}

/* === SIDEBAR: Active state (.sidebar-link.active OR li.active) — override Mofi default #374462 === */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active,
div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link {
  background-color: rgba(198, 161, 109, 0.22) !important;
  color: #e8c998 !important;
  font-weight: 600 !important;
  position: relative !important;
}

/* Active state: text span */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active span,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link span,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active span,
div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link span {
  color: #e8c998 !important;
}

/* Active state: icons turn gold */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active svg,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link svg,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active svg,
div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link svg {
  stroke: #c6a16d !important;
  fill: #c6a16d !important;
  color: #c6a16d !important;
}

/* Active state: left border accent */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active::before,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link::before,
div.sidebar-wrapper .sidebar-main .sidebar-links li .sidebar-link.active::before,
div.sidebar-wrapper .sidebar-main .sidebar-links li.active .sidebar-link::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-start: 0 !important;
  width: 3px !important;
  background-color: #c6a16d !important;
}

/* === SIDEBAR: Submenu items === */
div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a:hover {
  color: #e8c998 !important;
  background-color: rgba(198, 161, 109, 0.08) !important;
}

div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-submenu li a.active {
  color: #c6a16d !important;
  font-weight: 600 !important;
}

/* Sidebar toggle arrows */
.sidebar-wrapper .left-arrow,
.sidebar-wrapper .right-arrow {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Sidebar borders/separators */
.sidebar-wrapper {
  border-inline-end-color: rgba(255, 255, 255, 0.08) !important;
}

/* Scrollbar inside sidebar */
.sidebar-wrapper .simplebar-scrollbar:before {
  background-color: rgba(255, 255, 255, 0.3);
}