/*
 * Custom theme overrides (loaded after style.bundle.css)
 * Primary button: bluish -> golden gradient
 */

/* Base state */
.btn.btn-primary {
  color: #3a2c00;
  border-color: transparent;
  background-color: oklch(78% 0.14 80);
  background-image: linear-gradient(135deg, oklch(88% 0.13 85), oklch(78% 0.14 80) 45%, oklch(55% 0.12 70));
}
.btn.btn-primary i,
.btn.btn-primary.dropdown-toggle:after {
  color: #3a2c00;
}
.btn.btn-primary .svg-icon svg [fill]:not(.permanent):not(g) {
  fill: #3a2c00;
}

/* Hover / active / focus states (slightly deeper gold for feedback) */
.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary {
  color: #3a2c00;
  border-color: transparent;
  background-color: oklch(72% 0.14 78) !important;
  background-image: linear-gradient(135deg, oklch(82% 0.13 85), oklch(72% 0.14 80) 45%, oklch(50% 0.12 70)) !important;
}
.btn-check:checked + .btn.btn-primary i,
.btn-check:active + .btn.btn-primary i,
.btn.btn-primary:focus:not(.btn-active) i,
.btn.btn-primary:hover:not(.btn-active) i,
.btn.btn-primary:active:not(.btn-active) i,
.btn.btn-primary.active i,
.btn.btn-primary.show i,
.show > .btn.btn-primary i {
  color: #3a2c00;
}

/* Solid checkbox / radio: checked state -> golden gradient
   (glyph SVG layered on top of the gradient, dark for contrast) */
.form-check.form-check-solid .form-check-input:checked {
  background-color: oklch(78% 0.14 80);
  background-image: linear-gradient(135deg, oklch(88% 0.13 85), oklch(78% 0.14 80) 45%, oklch(55% 0.12 70));
}
.form-check.form-check-solid .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%233a2c00'/%3e%3c/svg%3e"), linear-gradient(135deg, oklch(88% 0.13 85), oklch(78% 0.14 80) 45%, oklch(55% 0.12 70));
}
.form-check.form-check-solid .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%233a2c00'/%3e%3c/svg%3e"), linear-gradient(135deg, oklch(88% 0.13 85), oklch(78% 0.14 80) 45%, oklch(55% 0.12 70));
}

/* Background utility: bg-primary -> golden gradient */
.bg-primary {
  background-color: oklch(78% 0.14 80) !important;
  background-image: linear-gradient(135deg, oklch(88% 0.13 85), oklch(78% 0.14 80) 45%, oklch(55% 0.12 70)) !important;
}

/* =====================================================================
   Modern left sidebar (aside)
   ===================================================================== */
:root {
  --rb-aside-width: 265px;
  --rb-aside-bg: #15161e;
  --rb-aside-bg-2: #1b1d28;
  --rb-gold: oklch(78% 0.14 80);
  --rb-gold-soft: oklch(88% 0.13 85);
  --rb-gold-deep: oklch(55% 0.12 70);
}

/* Aside container */
.aside {
  display: flex;
  flex-direction: column;
  background: var(--rb-aside-bg);
  background-image: linear-gradient(180deg, var(--rb-aside-bg-2) 0%, var(--rb-aside-bg) 100%);
  width: 100%;
}

/* Brand / logo area */
.aside .aside-logo {
  height: 65px;
  min-height: 65px;
  justify-content: center;
  padding: 0 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.aside .aside-logo .aside-logo-img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

/* Footer */
.aside .aside-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Menu scroll wrapper */
.aside .aside-menu {
  overflow: hidden;
}

/* Menu links */
.aside .menu .menu-item .menu-link {
  color: #9a9aa8;
  border-radius: 9px;
  padding: 10px 14px;
  margin: 2px 0;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.aside .menu .menu-item .menu-link .menu-title {
  color: inherit;
  font-size: 1.025rem;
}
.aside .menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: #5c5c6e;
  transition: background-color 0.15s ease;
}
.aside .menu .menu-item .menu-link .menu-arrow:after {
  color: #6d6d80;
}

/* Hover (non-active) */
.aside .menu .menu-item .menu-link:hover:not(.active),
.aside .menu .menu-item.here > .menu-link:not(.active),
.aside .menu .menu-item.show > .menu-link:not(.active) {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}
.aside .menu .menu-item .menu-link:hover .menu-bullet .bullet {
  background-color: var(--rb-gold);
}

/* Active */
.aside .menu .menu-item .menu-link.active {
  color: #3a2c00;
  font-weight: 600;
  background-color: var(--rb-gold);
  background-image: linear-gradient(135deg, var(--rb-gold-soft), var(--rb-gold) 55%, var(--rb-gold-deep));
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.55);
}
.aside .menu .menu-item .menu-link.active .menu-title {
  color: #3a2c00;
}
.aside .menu .menu-item .menu-link.active .menu-bullet .bullet {
  background-color: #3a2c00;
}

/* Sub-menu (accordion) */
.aside .menu .menu-sub .menu-item .menu-link {
  padding-left: 22px;
  font-weight: 500;
}
.aside .menu .menu-sub .menu-item .menu-link .menu-title {
  font-size: 0.95rem;
}

/* Section title spacing */
.aside .menu .menu-item .menu-content {
  color: #5c5c6e;
}

/* Desktop: fixed full-height sidebar + offset the page */
@media (min-width: 992px) {
  .aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rb-aside-width);
    z-index: 101;
    box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.08);
  }
  .wrapper {
    padding-left: var(--rb-aside-width);
    transition: padding-left 0.3s ease;
  }
  /* The header is in normal flow on load (full width inside the padded wrapper).
     Only when it becomes sticky/fixed do we offset it so it clears the sidebar.
     Forcing position:fixed on load would float it over the toolbar (hiding it). */
  .header-fixed[data-kt-sticky-header=on] .header {
    left: var(--rb-aside-width) !important;
    right: 0 !important;
    transition: left 0.3s ease;
  }
  /* Neutralise the bundled aside-enabled offset (we handle spacing ourselves) */
  .aside-enabled .content {
    padding-left: 0;
  }
}

/* Mobile drawer look */
.aside.drawer {
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.35);
}

/* =====================================================================
   Select2 dropdown – dark theme
   (Metronic's dark bundle leaves the body-appended dropdown panel white,
    so options render white-on-white. Style it to match the dark UI.)
   ===================================================================== */
.dark-mode .select2-dropdown,
body.dark-mode .select2-container--default .select2-dropdown {
  background-color: #1b1d28 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #cdcdde !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}

/* Option rows */
.dark-mode .select2-results__option {
  color: #cdcdde !important;
  background-color: transparent !important;
}

/* Hovered / keyboard-highlighted option */
.dark-mode .select2-results__option--highlighted,
.dark-mode .select2-results__option--highlighted[aria-selected],
.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #2b2b40 !important;
  color: #ffffff !important;
}

/* Currently selected option(s) – golden accent */
.dark-mode .select2-results__option[aria-selected=true],
.dark-mode .select2-results__option--selected,
.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(228, 181, 61, 0.18) !important;
  color: #ffffff !important;
}

/* Disabled option */
.dark-mode .select2-results__option[aria-disabled=true] {
  color: #5c5c6e !important;
}

/* Search field inside the dropdown */
.dark-mode .select2-search--dropdown .select2-search__field {
  background-color: #12131b !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #cdcdde !important;
}

/* "No results" message */
.dark-mode .select2-results__message {
  color: #6d6d80 !important;
}

/* --- Closed selection box (single + multiple) – match solid dark inputs --- */
.dark-mode .select2-container--default .select2-selection--single,
.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: #1b1b29 !important;
  border-color: #1b1b29 !important;
}
.dark-mode .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #2b2b40 !important;
}
.dark-mode .select2-selection__rendered,
.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #92929f !important;
}
/* Placeholder */
.dark-mode .select2-selection__placeholder {
  color: #5c5c6e !important;
}

/* Selected tags (chips) in a multiple select */
.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #2b2b40 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e4 !important;
}
.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #92929f !important;
}
.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Inline typing area (so typed text is light, not invisible) */
.dark-mode .select2-search--inline .select2-search__field {
  color: #cdcdde !important;
  background-color: transparent !important;
}
.dark-mode .select2-search--inline .select2-search__field::placeholder {
  color: #5c5c6e !important;
}

/* =====================================================================
   Modern dark content area (right side)
   ===================================================================== */
/* Flat dark background – no patterned header image */
body,
body.app-bg-light {
  background-color: #12131b !important;
  background-image: none !important;
}

/* Header: dark bar that blends with the sidebar, subtle separator.
   Use the #ms_header id so these win over the bundle's `.header-fixed .header`. */
#ms_header {
  background-color: #1b1d28 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Toolbar: tighter, transparent (page title sits on the dark bg) */
.toolbar {
  background: transparent !important;
}
.toolbar .page-title h1 {
  color: #ffffff !important;
}

/* Cards: dark surface with soft modern elevation */
.content .card {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  background-color: #1b1d28;
  box-shadow: 0 8px 28px -16px rgba(0, 0, 0, 0.6);
}