/*
 * Era Raid Custom Theme
 * Orange/amber color scheme matching the game's visual identity
 */

:root {
  /* Primary color - Era Raid Orange */
  --bs-primary: #ff6b35;
  --bs-primary-rgb: 255, 107, 53;

  /* Button and component colors */
  --bs-btn-bg: #ff6b35;
  --bs-btn-border-color: #ff6b35;
  --bs-btn-hover-bg: #ff5722;
  --bs-btn-hover-border-color: #ff5722;
  --bs-btn-active-bg: #e64a19;
  --bs-btn-active-border-color: #e64a19;

  /* Link colors */
  --bs-link-color: #ff6b35;
  --bs-link-hover-color: #ff8b4b;
}

/* Override primary buttons */
.btn-primary {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #ff5722 !important;
  border-color: #ff5722 !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #e64a19 !important;
  border-color: #e64a19 !important;
}

/* Label/light button variant */
.btn-label-primary {
  background-color: rgba(255, 107, 53, 0.16) !important;
  color: #ff6b35 !important;
  border-color: transparent !important;
}

.btn-label-primary:hover,
.btn-label-primary:focus {
  background-color: #ff6b35 !important;
  color: #fff !important;
}

/* Outline button */
.btn-outline-primary {
  color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #ff6b35 !important;
  color: #fff !important;
}

/* Background colors */
.bg-primary {
  background-color: #ff6b35 !important;
}

.bg-label-primary {
  background-color: rgba(255, 107, 53, 0.16) !important;
  color: #ff6b35 !important;
}

/* Text colors */
.text-primary {
  color: #ff6b35 !important;
}

/* Border colors */
.border-primary {
  border-color: #ff6b35 !important;
}

/* Badges */
.badge.bg-primary {
  background-color: #ff6b35 !important;
}

.badge.bg-label-primary {
  background-color: rgba(255, 107, 53, 0.16) !important;
  color: #ff6b35 !important;
}

/* Alerts */
.alert-primary {
  background-color: rgba(255, 107, 53, 0.16) !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
  color: #ff6b35 !important;
}

/* Form elements */
.form-check-input:checked {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: #ff6b35 !important;
  box-shadow: 0 0 0.25rem 0.05rem rgba(255, 107, 53, 0.1) !important;
}

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

a:hover {
  color: #ff8b4b;
}

/* Menu active state */
.menu-item.active > .menu-link:not(.menu-toggle),
.menu-item.active > .menu-link:not(.menu-toggle)::before {
  color: #ff6b35 !important;
}

.menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: #ff6b35 !important;
}

/* Menu vertical active indicator */
.layout-menu .menu-inner > .menu-item.active::before {
  background: #ff6b35 !important;
}

.layout-menu .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  color: #ff6b35 !important;
}

/* Menu sub active background */
.menu-sub .menu-item.active > .menu-link {
  background-color: rgba(255, 107, 53, 0.1) !important;
  color: #ff6b35 !important;
}

.menu-item.active > .menu-link {
  background-color: rgba(255, 107, 53, 0.1) !important;
}

/* Menu toggle parent active */
.menu-item.open > .menu-link.menu-toggle {
  color: #ff6b35 !important;
}

.menu-item.open > .menu-link.menu-toggle .menu-icon {
  color: #ff6b35 !important;
}

/* Menu hover states */
.menu-link:hover {
  color: #ff6b35 !important;
}

.menu-link:hover .menu-icon {
  color: #ff6b35 !important;
}

/* Dark mode menu specific */
.dark-style .menu-item.active > .menu-link,
.dark-style .menu-sub .menu-item.active > .menu-link {
  background-color: rgba(255, 107, 53, 0.16) !important;
}

/* Override the gradient active menu from theme-default-dark.css */
.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(270deg, rgba(255, 107, 53, 0.7) 0%, #ff6b35 100%) !important;
  box-shadow: 0px 2px 6px 0px rgba(255, 107, 53, 0.3) !important;
  color: #fff !important;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background: #ff6b35 !important;
}

/* Also override horizontal menu if used */
.bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(270deg, rgba(255, 107, 53, 0.7) 0%, #ff6b35 100%) !important;
  box-shadow: 0px 2px 6px 0px rgba(255, 107, 53, 0.3) !important;
  color: #fff !important;
}

/* Pagination */
.page-item.active .page-link {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

.page-link:hover {
  color: #ff6b35 !important;
}

/* Tabs */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #ff6b35 !important;
}

.nav-tabs .nav-link.active {
  color: #ff6b35 !important;
  border-bottom-color: #ff6b35 !important;
}

/* Progress bars */
.progress-bar {
  background-color: #ff6b35 !important;
}

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

/* Cards with primary accent */
.card.border-primary {
  border-color: #ff6b35 !important;
}

/* App brand/logo styling */
.app-brand-text {
  color: #ff6b35 !important;
  font-weight: 700;
}

/* Avatar primary */
.avatar-initial.bg-primary {
  background-color: #ff6b35 !important;
}

/* Dropdown active */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #ff6b35 !important;
}

/* List group active */
.list-group-item.active {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

/* Wave effect color for primary */
.waves-effect.waves-primary .waves-ripple {
  background: radial-gradient(rgba(255, 107, 53, 0.2) 0, rgba(255, 107, 53, 0.3) 40%, rgba(255, 107, 53, 0.4) 50%, rgba(255, 107, 53, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

/* Accordion active header */
.accordion-button:not(.collapsed) {
  color: #ff6b35 !important;
  background-color: rgba(255, 107, 53, 0.1) !important;
}

.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(52%) sepia(70%) saturate(1734%) hue-rotate(349deg) brightness(101%) contrast(101%);
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #ff6b35 !important;
}

/* Sweet Alert */
.swal2-confirm.btn-primary {
  background-color: #ff6b35 !important;
}

/* Tooltip arrow for primary */
.tooltip-primary .tooltip-arrow::before {
  border-top-color: #ff6b35 !important;
}

.tooltip-primary .tooltip-inner {
  background-color: #ff6b35 !important;
}

/* Gradient backgrounds with Era Raid colors */
.bg-gradient-primary {
  background: linear-gradient(135deg, #ff4b4b 0%, #ff8b4b 100%) !important;
}

/* ============================================
   COMPREHENSIVE PURPLE TO ORANGE OVERRIDES
   Replace all #7367f0 (Vuexy purple) with #ff6b35
   ============================================ */

/* CSS Variables override */
:root,
[data-theme="theme-default"],
[data-theme="theme-default-dark"],
.dark-style,
.light-style {
  --bs-primary: #ff6b35 !important;
  --bs-primary-rgb: 255, 107, 53 !important;
  --bs-link-color: #ff6b35 !important;
  --bs-link-hover-color: #ff8b4b !important;
}

/* Force override any inline primary colors */
[style*="7367f0"] {
  color: #ff6b35 !important;
}

/* Typography with primary color */
.text-primary,
a.text-primary,
.text-primary[href],
h1.text-primary, h2.text-primary, h3.text-primary, h4.text-primary, h5.text-primary, h6.text-primary {
  color: #ff6b35 !important;
}

/* All link variants */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link) {
  color: #ff6b35;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.menu-link):hover {
  color: #ff8b4b;
}

/* Form switch and checks */
.form-switch .form-check-input:checked {
  background-color: #ff6b35 !important;
}

.form-check-input:checked {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

.form-check-input:focus {
  border-color: #ff6b35 !important;
  box-shadow: 0 0 0.25rem 0.05rem rgba(255, 107, 53, 0.1) !important;
}

/* Range input */
.form-range::-webkit-slider-thumb {
  background-color: #ff6b35 !important;
}

.form-range::-moz-range-thumb {
  background-color: #ff6b35 !important;
}

/* Table row selection */
.table-primary {
  --bs-table-bg: rgba(255, 107, 53, 0.1) !important;
  --bs-table-border-color: rgba(255, 107, 53, 0.2) !important;
}

/* Breadcrumb active */
.breadcrumb-item.active {
  color: #ff6b35 !important;
}

/* Card header with primary */
.card-header.bg-primary {
  background-color: #ff6b35 !important;
}

/* Timeline primary */
.timeline-indicator-primary {
  background-color: #ff6b35 !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.16) !important;
}

/* Step wizard */
.bs-stepper .step.active .bs-stepper-circle {
  background-color: #ff6b35 !important;
  box-shadow: 0 0.125rem 0.25rem rgba(255, 107, 53, 0.4) !important;
}

.bs-stepper .step.crossed .bs-stepper-circle {
  background-color: #ff6b35 !important;
}

.bs-stepper .line::before {
  background-color: #ff6b35 !important;
}

/* Calendar events */
.fc .fc-button-primary {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

.fc .fc-button-primary:hover {
  background-color: #ff5722 !important;
  border-color: #ff5722 !important;
}

/* File upload */
.dropzone.dz-drag-hover {
  border-color: #ff6b35 !important;
}

/* Kanban */
.kanban-board .kanban-title-button {
  color: #ff6b35 !important;
}

/* Toast */
.toast-primary {
  background-color: #ff6b35 !important;
}

/* Offcanvas header */
.offcanvas-header.bg-primary {
  background-color: #ff6b35 !important;
}

/* Modal header */
.modal-header.bg-primary {
  background-color: #ff6b35 !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb:hover {
  background-color: #ff6b35 !important;
}

/* Perfect scrollbar */
.ps__thumb-y {
  background-color: rgba(255, 107, 53, 0.3) !important;
}

.ps__thumb-y:hover {
  background-color: rgba(255, 107, 53, 0.5) !important;
}

/* Apex charts */
.apexcharts-pie-series path[fill="#7367f0"],
.apexcharts-bar-series path[fill="#7367f0"],
.apexcharts-line-series path[stroke="#7367f0"] {
  fill: #ff6b35 !important;
  stroke: #ff6b35 !important;
}

/* Avatar online indicator with primary */
.avatar-online::before {
  border-color: #ff6b35 !important;
}

/* Navbar search focus */
.navbar-search-wrapper .search-input:focus {
  border-color: #ff6b35 !important;
}

/* Light backgrounds */
.bg-light-primary {
  background-color: rgba(255, 107, 53, 0.16) !important;
  color: #ff6b35 !important;
}

/* Icon colors */
.text-primary i,
i.text-primary {
  color: #ff6b35 !important;
}

/* Chip/tag primary */
.chip.chip-primary {
  background-color: #ff6b35 !important;
}

/* Toast progress bar */
.Toastify__progress-bar--default {
  background: #ff6b35 !important;
}

/* Custom radio/checkbox labels */
.form-check-primary .form-check-input:checked {
  background-color: #ff6b35 !important;
  border-color: #ff6b35 !important;
}

/* Selection highlight */
::selection {
  background-color: rgba(255, 107, 53, 0.3) !important;
}

::-moz-selection {
  background-color: rgba(255, 107, 53, 0.3) !important;
}

/* Focus ring */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 53, 0.25) !important;
}

/* List group item primary */
.list-group-item-primary {
  background-color: rgba(255, 107, 53, 0.16) !important;
  color: #ff6b35 !important;
}

/* Card overlay primary */
.card-img-overlay.bg-primary {
  background-color: rgba(255, 107, 53, 0.8) !important;
}

/* Divider with text */
.divider.divider-primary .divider-text::before,
.divider.divider-primary .divider-text::after {
  border-color: #ff6b35 !important;
}

/* Switch iOS style */
.switch-input:checked + .switch-toggle-slider {
  background-color: #ff6b35 !important;
}

/* Tag input */
.tagify__tag {
  --tag-bg: rgba(255, 107, 53, 0.16) !important;
  --tag-text-color: #ff6b35 !important;
}

/* Highlight.js */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
  color: #ff6b35 !important;
}

/* ============================================
   MENU ICON AND TEXT SPACING
   ============================================ */

/* Add spacing between menu icons and text */
.menu-icon {
  margin-right: 0.625rem !important;
}

/* Ensure consistent icon sizing */
.menu-icon.tf-icons {
  width: 1.375rem;
  font-size: 1.25rem;
}