/* Custom Theme - Orange Primary Color */
:root {
  /* Primary Color Variables */
  --bs-primary: #f08125;
  --bs-primary-rgb: 240, 129, 37;

  /* Primary Color Shades */
  --bs-primary-100: #fef4ed;
  --bs-primary-200: #fde4d0;
  --bs-primary-300: #fbc9a0;
  --bs-primary-400: #f9a870;
  --bs-primary-500: #f08125;
  --bs-primary-600: #d96f1e;
  --bs-primary-700: #b85c18;
  --bs-primary-800: #974a13;
  --bs-primary-900: #7a3d11;

  /* Primary with opacity variants */
  --bs-primary-bg-subtle: #fef4ed;
  --bs-primary-border-subtle: #fde4d0;
  --bs-primary-text-emphasis: #7a3d11;

  /* Button variants */
  --bs-btn-color: #fff;
  --bs-btn-bg: #f08125;
  --bs-btn-border-color: #f08125;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d96f1e;
  --bs-btn-hover-border-color: #d96f1e;
  --bs-btn-focus-shadow-rgb: 240, 129, 37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b85c18;
  --bs-btn-active-border-color: #b85c18;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #f08125;
  --bs-btn-disabled-border-color: #f08125;
}

/* Override Vuexy specific variables */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f08125;
  --bs-btn-border-color: #f08125;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d96f1e;
  --bs-btn-hover-border-color: #d96f1e;
  --bs-btn-focus-shadow-rgb: 240, 129, 37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b85c18;
  --bs-btn-active-border-color: #b85c18;
}

/* Badge Primary */
.badge.bg-primary {
  background-color: #f08125 !important;
}

.badge.bg-label-primary {
  background-color: rgba(240, 129, 37, 0.12) !important;
  color: #f08125 !important;
}

/* Alert Primary */
.alert-primary {
  --bs-alert-color: #7a3d11;
  --bs-alert-bg: #fef4ed;
  --bs-alert-border-color: #fde4d0;
}

/* Links */
.link-primary {
  color: #f08125 !important;
  text-decoration-color: #f08125 !important;
}

.link-primary:hover,
.link-primary:focus {
  color: #d96f1e !important;
  text-decoration-color: #d96f1e !important;
}

/* Text Colors */
.text-primary {
  color: #f08125 !important;
}

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

.bg-label-primary {
  background-color: rgba(240, 129, 37, 0.12) !important;
  color: #f08125 !important;
}

/* Border Colors */
.border-primary {
  border-color: #f08125 !important;
}

/* Form Controls */
.form-control:focus {
  border-color: rgba(240, 129, 37, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(240, 129, 37, 0.25);
}

.form-select:focus {
  border-color: rgba(240, 129, 37, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(240, 129, 37, 0.25);
}

.form-check-input:checked {
  background-color: #f08125;
  border-color: #f08125;
}

.form-check-input:focus {
  border-color: rgba(240, 129, 37, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(240, 129, 37, 0.25);
}

/* Navbar & Sidebar (if needed) */
.navbar-brand {
  color: #f08125 !important;
}

/* Menu active items */
.menu-item.active > .menu-link {
  background: linear-gradient(72deg, rgba(240, 129, 37, 0.48), rgba(240, 129, 37, 0.12)) !important;
  color: #f08125 !important;
}

.menu-item.active > .menu-link:before {
  background: #f08125 !important;
}

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

/* Pagination */
.page-link {
  color: #f08125;
}

.page-item.active .page-link {
  background-color: #f08125;
  border-color: #f08125;
}

.page-link:hover {
  color: #d96f1e;
  background-color: rgba(240, 129, 37, 0.12);
  border-color: #f08125;
}

/* DataTables (if used) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #f08125 !important;
  border-color: #f08125 !important;
  color: white !important;
}

/* Progress bars */
.progress-bar {
  background-color: #f08125;
}

/* Switches/Toggles */
.form-switch .form-check-input:checked {
  background-color: #f08125;
  border-color: #f08125;
}

/* Spinners */
.spinner-border-primary {
  color: #f08125;
}

/* Table hover */
.table-hover > tbody > tr:hover > td {
  background-color: rgba(240, 129, 37, 0.075);
}

/* Custom additions for specific components */
.btn-outline-primary {
  color: #f08125;
  border-color: #f08125;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #f08125;
  border-color: #f08125;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 129, 37, 0.5);
}

.btn-outline-primary.active {
  color: #fff;
  background-color: #f08125;
  border-color: #f08125;
}

/* SweetAlert2 customization */
.swal2-confirm {
  background-color: #f08125 !important;
}

.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(240, 129, 37, 0.5) !important;
}