/* ============================================
   PROJECT STYLES
   ============================================ */

/* --------------------------------------------
   1. CSS CUSTOM PROPERTIES (Variables)
   -------------------------------------------- */
:root {
  /* Typography */
  --font-ibm: 'IBM Plex Sans', sans-serif;

  /* Custom Colors */
  --bs-olive: #9F2241;
  --bs-olive-rgb: 159, 34, 65;
  --bs-lime: #B8976A;
  --bs-lime-rgb: 184, 151, 106;
  --bs-mint: #E0DBCA;
  --bs-mint-rgb: 224, 219, 202;
  --bs-silver: #BFBFBE;
  --bs-silver-rgb: 191, 191, 190;
  --bs-grey: #55585A;
  --bs-grey-rgb: 85, 88, 90;
  --bs-white: #FFFFFF;
  --bs-white-rgb: 255, 255, 255;
  --bs-velvet: #663399;
  --bs-velve-rgb: 126, 60, 143;
  --bs-pine: #104C42;
  --bs-pine--rgb: 16, 76, 66;
  --bs-granite: #98989A;
  --bs-granite--rgb: 152, 152, 154;
  --bs-porcelain: #FFFEF7;
  --bs-orange: #FFA500;
}

/* --------------------------------------------
   2. BASE STYLES
   -------------------------------------------- */
body {
  font-family: var(--font-ibm);
  font-weight: 400;
  /* Normal */
}

/* --------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------- */
.font-bold {
  font-family: var(--font-ibm);
  font-weight: 700 !important;
  /* Bold */
}

.text-heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  /* Approx 40px */
  line-height: 1.2;
  /* Tight for headings */
  margin-bottom: 1rem;
}

.text-normal {
  font-family: var(--font-ibm);
  font-weight: 400;
  font-size: clamp(1rem, 1vw + 0.5rem, 1.1rem);
  line-height: 1.6;
}

.text-small {
  font-family: var(--font-ibm);
  font-weight: 400;
  font-size: 0.875rem;
  /* Approx 14px */
  line-height: 1.4;
  color: #6c757d;
}

/* ============================================
   4. CUSTOM BOOTSTRAP 5 COLOR UTILITIES
   Colors:
   - Olive:  #9F2241  (burgundy)
   - Lime:   #B8976A  (tan/gold)
   - Mint:   #E0DBCA  (cream)
   - Silver: #BFBFBE  (cool gray)
   ============================================ */

/* --------------------------------------------
   TEXT COLORS (.text-*)
   -------------------------------------------- */
.text-olive {
  color: #9F2241 !important;
}

.text-lime {
  color: #B8976A !important;
}

.text-mint {
  color: #E0DBCA !important;
}

.text-silver {
  color: #BFBFBE !important;
}

.text-grey {
  color: #55585A !important;
}

/* Text emphasis (for darker/lighter variants) */
.text-olive-emphasis {
  color: #6b1228 !important;
}

.text-lime-emphasis {
  color: #8a7048 !important;
}

.text-mint-emphasis {
  color: #c8c2ae !important;
}

.text-silver-emphasis {
  color: #8a8a89 !important;
}

/* --------------------------------------------
   BACKGROUND COLORS (.bg-*)
   -------------------------------------------- */
.bg-olive {
  background-color: #9F2241 !important;
}

.bg-lime {
  background-color: #B8976A !important;
}

.bg-mint {
  background-color: #E0DBCA !important;
}

.bg-silver {
  background-color: #BFBFBE !important;
}

/* Background subtle (lighter versions) */
.bg-olive-subtle {
  background-color: rgba(159, 34, 65, 0.15) !important;
}

.bg-lime-subtle {
  background-color: rgba(184, 151, 106, 0.15) !important;
}

.bg-mint-subtle {
  background-color: rgba(224, 219, 202, 0.15) !important;
}

.bg-silver-subtle {
  background-color: rgba(191, 191, 190, 0.5) !important;
}

/* Background darker (darker versions) */
.bg-olive-darker {
  background-color: #6b1228 !important;
}

.bg-lime-darker {
  background-color: #8a7048 !important;
}

.bg-mint-darker {
  background-color: #c8c2ae !important;
}

.bg-silver-darker {
  background-color: #8a8a89 !important;
}

/* Background gradient */
.bg-gradient-olive {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #9F2241 !important;
}

.bg-gradient-lime {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #B8976A !important;
}

.bg-gradient-mint {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #E0DBCA !important;
}

.bg-gradient-silver {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #BFBFBE !important;
}

/* --------------------------------------------
   BUTTONS (.btn-*)
   -------------------------------------------- */

/* Olive Button */
.btn-olive {
  --bs-btn-color: #fff;
  --bs-btn-bg: #9F2241;
  --bs-btn-border-color: #9F2241;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8a1d38;
  --bs-btn-hover-border-color: #7d1a33;
  --bs-btn-focus-shadow-rgb: 176, 65, 90;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7d1a33;
  --bs-btn-active-border-color: #701729;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #9F2241;
  --bs-btn-disabled-border-color: #9F2241;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-olive:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-olive:focus,
.btn-olive.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-olive:active,
.btn-olive.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-olive:disabled,
.btn-olive.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

/* Lime Button */
.btn-lime {
  --bs-btn-color: #000;
  --bs-btn-bg: #B8976A;
  --bs-btn-border-color: #B8976A;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #a08560;
  --bs-btn-hover-border-color: #947a57;
  --bs-btn-focus-shadow-rgb: 162, 130, 88;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #947a57;
  --bs-btn-active-border-color: #88704f;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #B8976A;
  --bs-btn-disabled-border-color: #B8976A;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-lime:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-lime:focus,
.btn-lime.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-lime:active,
.btn-lime.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-lime:disabled,
.btn-lime.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

/* Mint Button */
.btn-mint {
  --bs-btn-color: #000;
  --bs-btn-bg: #E0DBCA;
  --bs-btn-border-color: #E0DBCA;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ccc6b0;
  --bs-btn-hover-border-color: #c0b99f;
  --bs-btn-focus-shadow-rgb: 200, 194, 174;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #b8b09a;
  --bs-btn-active-border-color: #ada592;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #E0DBCA;
  --bs-btn-disabled-border-color: #E0DBCA;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-mint:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-mint:focus,
.btn-mint.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-mint:active,
.btn-mint.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-mint:disabled,
.btn-mint.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

/* Silver Button */
.btn-silver {
  --bs-btn-color: #000;
  --bs-btn-bg: #BFBFBE;
  --bs-btn-border-color: #BFBFBE;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ababaa;
  --bs-btn-hover-border-color: #9e9e9d;
  --bs-btn-focus-shadow-rgb: 170, 170, 169;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #909090;
  --bs-btn-active-border-color: #858585;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #BFBFBE;
  --bs-btn-disabled-border-color: #BFBFBE;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-silver:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-silver:focus,
.btn-silver.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-silver:active,
.btn-silver.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-silver:disabled,
.btn-silver.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

/* --------------------------------------------
   OUTLINE BUTTONS (.btn-outline-*)
   -------------------------------------------- */

/* Olive Outline Button */
.btn-outline-olive {
  --bs-btn-color: #9F2241;
  --bs-btn-border-color: #9F2241;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9F2241;
  --bs-btn-hover-border-color: #9F2241;
  --bs-btn-focus-shadow-rgb: 159, 34, 65;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9F2241;
  --bs-btn-active-border-color: #9F2241;
  --bs-btn-disabled-color: #9F2241;
  --bs-btn-disabled-border-color: #9F2241;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-olive:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-olive:focus,
.btn-outline-olive.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-olive:active,
.btn-outline-olive.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-olive:disabled,
.btn-outline-olive.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

/* Lime Outline Button */
.btn-outline-lime {
  --bs-btn-color: #B8976A;
  --bs-btn-border-color: #B8976A;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #B8976A;
  --bs-btn-hover-border-color: #B8976A;
  --bs-btn-focus-shadow-rgb: 184, 151, 106;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #B8976A;
  --bs-btn-active-border-color: #B8976A;
  --bs-btn-disabled-color: #B8976A;
  --bs-btn-disabled-border-color: #B8976A;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-lime:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-lime:focus,
.btn-outline-lime.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-lime:active,
.btn-outline-lime.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-lime:disabled,
.btn-outline-lime.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

/* Mint Outline Button */
.btn-outline-mint {
  --bs-btn-color: #c8c2ae;
  --bs-btn-border-color: #E0DBCA;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #E0DBCA;
  --bs-btn-hover-border-color: #E0DBCA;
  --bs-btn-focus-shadow-rgb: 224, 219, 202;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #E0DBCA;
  --bs-btn-active-border-color: #E0DBCA;
  --bs-btn-disabled-color: #c8c2ae;
  --bs-btn-disabled-border-color: #E0DBCA;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-mint:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-mint:focus,
.btn-outline-mint.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-mint:active,
.btn-outline-mint.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-mint:disabled,
.btn-outline-mint.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

/* Silver Outline Button */
.btn-outline-silver {
  --bs-btn-color: #6e7274;
  --bs-btn-border-color: #BFBFBE;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #BFBFBE;
  --bs-btn-hover-border-color: #BFBFBE;
  --bs-btn-focus-shadow-rgb: 191, 191, 190;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #BFBFBE;
  --bs-btn-active-border-color: #BFBFBE;
  --bs-btn-disabled-color: #6e7274;
  --bs-btn-disabled-border-color: #BFBFBE;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-silver:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-silver:focus,
.btn-outline-silver.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-silver:active,
.btn-outline-silver.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-silver:disabled,
.btn-outline-silver.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

/* --------------------------------------------
   BORDER COLORS (.border-*)
   -------------------------------------------- */
.border-olive {
  border-color: #9F2241 !important;
}

.border-lime {
  border-color: #B8976A !important;
}

.border-mint {
  border-color: #E0DBCA !important;
}

.border-silver {
  border-color: #BFBFBE !important;
}

/* Border subtle */
.border-olive-subtle {
  border-color: rgba(159, 34, 65, 0.4) !important;
}

.border-lime-subtle {
  border-color: rgba(184, 151, 106, 0.4) !important;
}

.border-mint-subtle {
  border-color: rgba(224, 219, 202, 0.6) !important;
}

.border-silver-subtle {
  border-color: rgba(191, 191, 190, 0.6) !important;
}

/* --------------------------------------------
   ALERTS (.alert-*)
   -------------------------------------------- */
.alert-olive {
  --bs-alert-color: #6b1228;
  --bs-alert-bg: #f5e0e6;
  --bs-alert-border-color: #e5b5c2;
  --bs-alert-link-color: #5a0f22;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-olive .alert-link {
  color: var(--bs-alert-link-color);
}

.alert-lime {
  --bs-alert-color: #7a5c35;
  --bs-alert-bg: #f7f0e6;
  --bs-alert-border-color: #e8d5b8;
  --bs-alert-link-color: #6a4c2a;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-lime .alert-link {
  color: var(--bs-alert-link-color);
}

.alert-mint {
  --bs-alert-color: #7a6e54;
  --bs-alert-bg: #f7f5ef;
  --bs-alert-border-color: #e0dbc9;
  --bs-alert-link-color: #6a5e48;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-mint .alert-link {
  color: var(--bs-alert-link-color);
}

.alert-silver {
  --bs-alert-color: #55585A;
  --bs-alert-bg: #f5f5f4;
  --bs-alert-border-color: #e8e8e7;
  --bs-alert-link-color: #45484a;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-silver .alert-link {
  color: var(--bs-alert-link-color);
}

/* --------------------------------------------
   BADGES (.badge.bg-* / .badge.text-bg-*)
   -------------------------------------------- */
.badge.text-bg-olive {
  color: #fff !important;
  background-color: #9F2241 !important;
}

.badge.text-bg-lime {
  color: #000 !important;
  background-color: #B8976A !important;
}

.badge.text-bg-mint {
  color: #000 !important;
  background-color: #E0DBCA !important;
}

.badge.text-bg-silver {
  color: #000 !important;
  background-color: #BFBFBE !important;
}

/* --------------------------------------------
   LINKS (.link-*)
   -------------------------------------------- */
.link-olive {
  color: #9F2241 !important;
  text-decoration-color: rgba(159, 34, 65, 0.4) !important;
}

.link-olive:hover,
.link-olive:focus {
  color: #7d1a33 !important;
  text-decoration-color: #7d1a33 !important;
}

.link-lime {
  color: #B8976A !important;
  text-decoration-color: rgba(184, 151, 106, 0.4) !important;
}

.link-lime:hover,
.link-lime:focus {
  color: #8a7048 !important;
  text-decoration-color: #8a7048 !important;
}

.link-mint {
  color: #c8c2ae !important;
  text-decoration-color: rgba(224, 219, 202, 0.6) !important;
}

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

.link-silver {
  color: #6e7274 !important;
  text-decoration-color: rgba(191, 191, 190, 0.6) !important;
}

.link-silver:hover,
.link-silver:focus {
  color: #55585A !important;
  text-decoration-color: #55585A !important;
}

/* Link underline variants */
.link-underline-olive {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(159, 34, 65, var(--bs-link-underline-opacity)) !important;
}

.link-underline-lime {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(184, 151, 106, var(--bs-link-underline-opacity)) !important;
}

.link-underline-mint {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(224, 219, 202, var(--bs-link-underline-opacity)) !important;
}

.link-underline-silver {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(191, 191, 190, var(--bs-link-underline-opacity)) !important;
}

/* --------------------------------------------
   LIST GROUP (.list-group-item-*)
   -------------------------------------------- */
.list-group-item-olive {
  --bs-list-group-color: #6b1228;
  --bs-list-group-bg: #f5e0e6;
  --bs-list-group-border-color: #e5b5c2;
  --bs-list-group-action-hover-color: #6b1228;
  --bs-list-group-action-hover-bg: #eecfda;
  --bs-list-group-action-active-color: #6b1228;
  --bs-list-group-action-active-bg: #e5b5c2;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

.list-group-item-lime {
  --bs-list-group-color: #7a5c35;
  --bs-list-group-bg: #f7f0e6;
  --bs-list-group-border-color: #e8d5b8;
  --bs-list-group-action-hover-color: #7a5c35;
  --bs-list-group-action-hover-bg: #eedec6;
  --bs-list-group-action-active-color: #7a5c35;
  --bs-list-group-action-active-bg: #e8d5b8;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

.list-group-item-mint {
  --bs-list-group-color: #7a6e54;
  --bs-list-group-bg: #f7f5ef;
  --bs-list-group-border-color: #e0dbc9;
  --bs-list-group-action-hover-color: #7a6e54;
  --bs-list-group-action-hover-bg: #e8e4da;
  --bs-list-group-action-active-color: #7a6e54;
  --bs-list-group-action-active-bg: #e0dbc9;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

.list-group-item-silver {
  --bs-list-group-color: #55585A;
  --bs-list-group-bg: #f5f5f4;
  --bs-list-group-border-color: #e8e8e7;
  --bs-list-group-action-hover-color: #55585A;
  --bs-list-group-action-hover-bg: #e6e6e5;
  --bs-list-group-action-active-color: #55585A;
  --bs-list-group-action-active-bg: #e8e8e7;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

/* --------------------------------------------
   TABLE VARIANTS (.table-*)
   -------------------------------------------- */
.table-olive {
  --bs-table-color: #000;
  --bs-table-bg: #f5e0e6;
  --bs-table-border-color: #e0b4c1;
  --bs-table-striped-bg: #eecfda;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e0b4c1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e8c8d4;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-lime {
  --bs-table-color: #000;
  --bs-table-bg: #f7f0e6;
  --bs-table-border-color: #e3cdb0;
  --bs-table-striped-bg: #eedec6;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e3cdb0;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e9d9be;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-mint {
  --bs-table-color: #000;
  --bs-table-bg: #f7f5ef;
  --bs-table-border-color: #d8d4c8;
  --bs-table-striped-bg: #ede9e1;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d8d4c8;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e4e0d8;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-silver {
  --bs-table-color: #000;
  --bs-table-bg: #f5f5f4;
  --bs-table-border-color: #d5d5d4;
  --bs-table-striped-bg: #e8e8e7;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d5d5d4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #dcdcdb;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* --------------------------------------------
   PROGRESS BARS (.progress-bar.bg-*)
   -------------------------------------------- */
.progress-bar.bg-olive {
  background-color: #9F2241 !important;
}

.progress-bar.bg-lime {
  background-color: #B8976A !important;
}

.progress-bar.bg-mint {
  background-color: #E0DBCA !important;
}

.progress-bar.bg-silver {
  background-color: #BFBFBE !important;
}

/* --------------------------------------------
   SPINNERS (.spinner-*.text-*)
   -------------------------------------------- */
.spinner-border.text-olive,
.spinner-grow.text-olive {
  color: #9F2241 !important;
}

.spinner-border.text-lime,
.spinner-grow.text-lime {
  color: #B8976A !important;
}

.spinner-border.text-mint,
.spinner-grow.text-mint {
  color: #E0DBCA !important;
}

.spinner-border.text-silver,
.spinner-grow.text-silver {
  color: #BFBFBE !important;
}

/* --------------------------------------------
   PLACEHOLDER/LOADING STATES
   -------------------------------------------- */
.placeholder.bg-olive {
  background-color: #9F2241 !important;
}

.placeholder.bg-lime {
  background-color: #B8976A !important;
}

.placeholder.bg-mint {
  background-color: #E0DBCA !important;
}

.placeholder.bg-silver {
  background-color: #BFBFBE !important;
}

/* ============================================
   4b. EXTENDED COLOR UTILITIES
   Colors:
   - Velvet:    #663399  (purple)
   - Pine:      #104C42  (dark green)
   - Granite:   #98989A  (medium gray)
   - Porcelain: #FFFEF7  (off-white cream)
   ============================================ */

/* --------------------------------------------
   TEXT COLORS
   -------------------------------------------- */
.text-velvet {
  color: #663399 !important;
}

.text-pine {
  color: #104C42 !important;
}

.text-granite {
  color: #98989A !important;
}

.text-porcelain {
  color: #FFFEF7 !important;
}

.text-velvet-emphasis {
  color: #4d2673 !important;
}

.text-pine-emphasis {
  color: #0c3932 !important;
}

.text-granite-emphasis {
  color: #787879 !important;
}

.text-porcelain-emphasis {
  color: #e8e6d4 !important;
}

/* --------------------------------------------
   BACKGROUND COLORS
   -------------------------------------------- */
.bg-velvet {
  background-color: #663399 !important;
}

.bg-pine {
  background-color: #104C42 !important;
}

.bg-granite {
  background-color: #98989A !important;
}

.bg-porcelain {
  background-color: #FFFEF7 !important;
}

.bg-velvet-subtle {
  background-color: rgba(102, 51, 153, 0.15) !important;
}

.bg-pine-subtle {
  background-color: rgba(16, 76, 66, 0.15) !important;
}

.bg-granite-subtle {
  background-color: rgba(152, 152, 154, 0.5) !important;
}

.bg-porcelain-subtle {
  background-color: rgba(255, 254, 247, 0.8) !important;
}

.bg-velvet-darker {
  background-color: #4d2673 !important;
}

.bg-pine-darker {
  background-color: #0c3932 !important;
}

.bg-granite-darker {
  background-color: #787879 !important;
}

.bg-porcelain-darker {
  background-color: #f0eedd !important;
}

.bg-gradient-velvet {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #663399 !important;
}

.bg-gradient-pine {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #104C42 !important;
}

.bg-gradient-granite {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #98989A !important;
}

.bg-gradient-porcelain {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) #FFFEF7 !important;
}

/* --------------------------------------------
   BUTTONS
   -------------------------------------------- */
.btn-velvet {
  --bs-btn-color: #fff;
  --bs-btn-bg: #663399;
  --bs-btn-border-color: #663399;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5a2d87;
  --bs-btn-hover-border-color: #52287d;
  --bs-btn-focus-shadow-rgb: 102, 51, 153;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d2673;
  --bs-btn-active-border-color: #452269;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #663399;
  --bs-btn-disabled-border-color: #663399;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-velvet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-velvet:focus,
.btn-velvet.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-velvet:active,
.btn-velvet.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-velvet:disabled,
.btn-velvet.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

.btn-pine {
  --bs-btn-color: #fff;
  --bs-btn-bg: #104C42;
  --bs-btn-border-color: #104C42;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0e4238;
  --bs-btn-hover-border-color: #0d3c33;
  --bs-btn-focus-shadow-rgb: 16, 76, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0c3932;
  --bs-btn-active-border-color: #0a322c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #104C42;
  --bs-btn-disabled-border-color: #104C42;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-pine:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-pine:focus,
.btn-pine.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-pine:active,
.btn-pine.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-pine:disabled,
.btn-pine.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

.btn-granite {
  --bs-btn-color: #000;
  --bs-btn-bg: #98989A;
  --bs-btn-border-color: #98989A;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #878788;
  --bs-btn-hover-border-color: #7b7b7c;
  --bs-btn-focus-shadow-rgb: 152, 152, 154;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #7a7a7b;
  --bs-btn-active-border-color: #707071;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #98989A;
  --bs-btn-disabled-border-color: #98989A;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-granite:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-granite:focus,
.btn-granite.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-granite:active,
.btn-granite.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-granite:disabled,
.btn-granite.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

.btn-porcelain {
  --bs-btn-color: #000;
  --bs-btn-bg: #FFFEF7;
  --bs-btn-border-color: #e8e6d4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e8e6d4;
  --bs-btn-hover-border-color: #dddbc9;
  --bs-btn-focus-shadow-rgb: 255, 254, 247;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #dddbc9;
  --bs-btn-active-border-color: #d2cfbe;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FFFEF7;
  --bs-btn-disabled-border-color: #e8e6d4;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

.btn-porcelain:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-porcelain:focus,
.btn-porcelain.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  box-shadow: 0 0 0 0.25rem rgba(200, 198, 186, 0.5);
}

.btn-porcelain:active,
.btn-porcelain.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-porcelain:disabled,
.btn-porcelain.disabled {
  color: var(--bs-btn-disabled-color);
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: 0.65;
}

/* --------------------------------------------
   OUTLINE BUTTONS
   -------------------------------------------- */
.btn-outline-velvet {
  --bs-btn-color: #663399;
  --bs-btn-border-color: #663399;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #663399;
  --bs-btn-hover-border-color: #663399;
  --bs-btn-focus-shadow-rgb: 102, 51, 153;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #663399;
  --bs-btn-active-border-color: #663399;
  --bs-btn-disabled-color: #663399;
  --bs-btn-disabled-border-color: #663399;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-velvet:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-velvet:focus,
.btn-outline-velvet.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-velvet:active,
.btn-outline-velvet.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-velvet:disabled,
.btn-outline-velvet.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

.btn-outline-pine {
  --bs-btn-color: #104C42;
  --bs-btn-border-color: #104C42;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #104C42;
  --bs-btn-hover-border-color: #104C42;
  --bs-btn-focus-shadow-rgb: 16, 76, 66;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #104C42;
  --bs-btn-active-border-color: #104C42;
  --bs-btn-disabled-color: #104C42;
  --bs-btn-disabled-border-color: #104C42;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-pine:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-pine:focus,
.btn-outline-pine.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-pine:active,
.btn-outline-pine.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-pine:disabled,
.btn-outline-pine.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

.btn-outline-granite {
  --bs-btn-color: #787879;
  --bs-btn-border-color: #98989A;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #98989A;
  --bs-btn-hover-border-color: #98989A;
  --bs-btn-focus-shadow-rgb: 152, 152, 154;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #98989A;
  --bs-btn-active-border-color: #98989A;
  --bs-btn-disabled-color: #787879;
  --bs-btn-disabled-border-color: #98989A;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-granite:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-granite:focus,
.btn-outline-granite.focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-outline-granite:active,
.btn-outline-granite.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-granite:disabled,
.btn-outline-granite.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

.btn-outline-porcelain {
  --bs-btn-color: #c8c6b4;
  --bs-btn-border-color: #FFFEF7;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #FFFEF7;
  --bs-btn-hover-border-color: #FFFEF7;
  --bs-btn-focus-shadow-rgb: 255, 254, 247;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFFEF7;
  --bs-btn-active-border-color: #FFFEF7;
  --bs-btn-disabled-color: #c8c6b4;
  --bs-btn-disabled-border-color: #FFFEF7;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
  background-color: transparent;
}

.btn-outline-porcelain:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-porcelain:focus,
.btn-outline-porcelain.focus {
  box-shadow: 0 0 0 0.25rem rgba(200, 198, 186, 0.5);
}

.btn-outline-porcelain:active,
.btn-outline-porcelain.active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-outline-porcelain:disabled,
.btn-outline-porcelain.disabled {
  color: var(--bs-btn-disabled-color);
  border-color: var(--bs-btn-disabled-border-color);
  background-color: transparent;
  opacity: 0.65;
}

/* --------------------------------------------
   BORDER COLORS
   -------------------------------------------- */
.border-velvet {
  border-color: #663399 !important;
}

.border-pine {
  border-color: #104C42 !important;
}

.border-granite {
  border-color: #98989A !important;
}

.border-porcelain {
  border-color: #FFFEF7 !important;
}

.border-velvet-subtle {
  border-color: rgba(102, 51, 153, 0.4) !important;
}

.border-pine-subtle {
  border-color: rgba(16, 76, 66, 0.4) !important;
}

.border-granite-subtle {
  border-color: rgba(152, 152, 154, 0.6) !important;
}

.border-porcelain-subtle {
  border-color: rgba(255, 254, 247, 0.6) !important;
}

/* --------------------------------------------
   ALERTS
   -------------------------------------------- */
.alert-velvet {
  --bs-alert-color: #4d2673;
  --bs-alert-bg: #ece0f5;
  --bs-alert-border-color: #d4b3e8;
  --bs-alert-link-color: #3d1f5c;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-velvet .alert-link {
  color: var(--bs-alert-link-color);
}

.alert-pine {
  --bs-alert-color: #0c3932;
  --bs-alert-bg: #d9ecea;
  --bs-alert-border-color: #a8cfc9;
  --bs-alert-link-color: #09302a;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-pine .alert-link {
  color: var(--bs-alert-link-color);
}

.alert-granite {
  --bs-alert-color: #55585A;
  --bs-alert-bg: #f3f3f3;
  --bs-alert-border-color: #e4e4e5;
  --bs-alert-link-color: #45484a;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-granite .alert-link {
  color: var(--bs-alert-link-color);
}

.alert-porcelain {
  --bs-alert-color: #7a7a70;
  --bs-alert-bg: #fffef9;
  --bs-alert-border-color: #f5f4ec;
  --bs-alert-link-color: #6a6a60;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}

.alert-porcelain .alert-link {
  color: var(--bs-alert-link-color);
}

/* --------------------------------------------
   BADGES
   -------------------------------------------- */
.badge.text-bg-velvet {
  color: #fff !important;
  background-color: #663399 !important;
}

.badge.text-bg-pine {
  color: #fff !important;
  background-color: #104C42 !important;
}

.badge.text-bg-granite {
  color: #000 !important;
  background-color: #98989A !important;
}

.badge.text-bg-porcelain {
  color: #000 !important;
  background-color: #FFFEF7 !important;
}

/* --------------------------------------------
   LINKS
   -------------------------------------------- */
.link-velvet {
  color: #663399 !important;
  text-decoration-color: rgba(102, 51, 153, 0.4) !important;
}

.link-velvet:hover,
.link-velvet:focus {
  color: #4d2673 !important;
  text-decoration-color: #4d2673 !important;
}

.link-pine {
  color: #104C42 !important;
  text-decoration-color: rgba(16, 76, 66, 0.4) !important;
}

.link-pine:hover,
.link-pine:focus {
  color: #0c3932 !important;
  text-decoration-color: #0c3932 !important;
}

.link-granite {
  color: #787879 !important;
  text-decoration-color: rgba(152, 152, 154, 0.6) !important;
}

.link-granite:hover,
.link-granite:focus {
  color: #55585A !important;
  text-decoration-color: #55585A !important;
}

.link-porcelain {
  color: #e8e6d4 !important;
  text-decoration-color: rgba(255, 254, 247, 0.6) !important;
}

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

.link-underline-velvet {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(102, 51, 153, var(--bs-link-underline-opacity)) !important;
}

.link-underline-pine {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(16, 76, 66, var(--bs-link-underline-opacity)) !important;
}

.link-underline-granite {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(152, 152, 154, var(--bs-link-underline-opacity)) !important;
}

.link-underline-porcelain {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(255, 254, 247, var(--bs-link-underline-opacity)) !important;
}

/* --------------------------------------------
   LIST GROUP
   -------------------------------------------- */
.list-group-item-velvet {
  --bs-list-group-color: #4d2673;
  --bs-list-group-bg: #ece0f5;
  --bs-list-group-border-color: #d4b3e8;
  --bs-list-group-action-hover-color: #4d2673;
  --bs-list-group-action-hover-bg: #dfcaf0;
  --bs-list-group-action-active-color: #4d2673;
  --bs-list-group-action-active-bg: #d4b3e8;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

.list-group-item-pine {
  --bs-list-group-color: #0c3932;
  --bs-list-group-bg: #d9ecea;
  --bs-list-group-border-color: #a8cfc9;
  --bs-list-group-action-hover-color: #0c3932;
  --bs-list-group-action-hover-bg: #c4e1de;
  --bs-list-group-action-active-color: #0c3932;
  --bs-list-group-action-active-bg: #a8cfc9;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

.list-group-item-granite {
  --bs-list-group-color: #55585A;
  --bs-list-group-bg: #f3f3f3;
  --bs-list-group-border-color: #e4e4e5;
  --bs-list-group-action-hover-color: #55585A;
  --bs-list-group-action-hover-bg: #e8e8e8;
  --bs-list-group-action-active-color: #55585A;
  --bs-list-group-action-active-bg: #e4e4e5;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

.list-group-item-porcelain {
  --bs-list-group-color: #7a7a70;
  --bs-list-group-bg: #fffef9;
  --bs-list-group-border-color: #f5f4ec;
  --bs-list-group-action-hover-color: #7a7a70;
  --bs-list-group-action-hover-bg: #f0efe7;
  --bs-list-group-action-active-color: #7a7a70;
  --bs-list-group-action-active-bg: #f5f4ec;
  color: var(--bs-list-group-color);
  background-color: var(--bs-list-group-bg);
}

/* --------------------------------------------
   TABLE VARIANTS
   -------------------------------------------- */
.table-velvet {
  --bs-table-color: #000;
  --bs-table-bg: #ece0f5;
  --bs-table-border-color: #cfabe0;
  --bs-table-striped-bg: #dfcaf0;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cfabe0;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d9c0ea;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-pine {
  --bs-table-color: #000;
  --bs-table-bg: #d9ecea;
  --bs-table-border-color: #9ec9c4;
  --bs-table-striped-bg: #c4e1de;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #9ec9c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #add4cf;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-granite {
  --bs-table-color: #000;
  --bs-table-bg: #f3f3f3;
  --bs-table-border-color: #d8d8d9;
  --bs-table-striped-bg: #e8e8e8;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #d8d8d9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e0e0e0;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-porcelain {
  --bs-table-color: #000;
  --bs-table-bg: #fffef9;
  --bs-table-border-color: #eae9e1;
  --bs-table-striped-bg: #f5f4ee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #eae9e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #efeeea;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

/* --------------------------------------------
   PROGRESS BARS
   -------------------------------------------- */
.progress-bar.bg-velvet {
  background-color: #663399 !important;
}

.progress-bar.bg-pine {
  background-color: #104C42 !important;
}

.progress-bar.bg-granite {
  background-color: #98989A !important;
}

.progress-bar.bg-porcelain {
  background-color: #FFFEF7 !important;
}

/* --------------------------------------------
   SPINNERS
   -------------------------------------------- */
.spinner-border.text-velvet,
.spinner-grow.text-velvet {
  color: #663399 !important;
}

.spinner-border.text-pine,
.spinner-grow.text-pine {
  color: #104C42 !important;
}

.spinner-border.text-granite,
.spinner-grow.text-granite {
  color: #98989A !important;
}

.spinner-border.text-porcelain,
.spinner-grow.text-porcelain {
  color: #FFFEF7 !important;
}

/* --------------------------------------------
   PLACEHOLDER/LOADING STATES
   -------------------------------------------- */
.placeholder.bg-velvet {
  background-color: #663399 !important;
}

.placeholder.bg-pine {
  background-color: #104C42 !important;
}

.placeholder.bg-granite {
  background-color: #98989A !important;
}

.placeholder.bg-porcelain {
  background-color: #FFFEF7 !important;
}

/* ============================================
   5. COMPONENTS
   ============================================ */

/* --------------------------------------------
   FORMS
   -------------------------------------------- */
/* Login form inputs: white background, grey text */
#auth-container .form-control {
  background-color: #ffffff;
  color: var(--bs-grey);
}

#auth-container .form-control::placeholder {
  color: var(--bs-grey);
  opacity: 0.6;
}

#auth-container .form-control:focus {
  background-color: #ffffff;
  color: var(--bs-grey);
  border-color: var(--bs-lime);
  box-shadow: 0 0 2px 0.1rem rgba(var(--bs-lime-rgb), 0.5);
}

/* The default state of the checkbox */
#auth-container .form-check-input {
  background-color: var(--bs-silver);
  border-color: var(--bs-lime);
}

/* The state when the checkbox is checked */
#auth-container .form-check-input:checked {
  background-color: var(--bs-lime);
  border-color: var(--bs-lime);
}

/* The focus ring (the glow when clicking) */
#auth-container .form-check-input:focus {
  border-color: var(--bs-lime);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-lime-rgb), 0.25);
}

/* Form select (dropdown) */
.form-select {
  background-color: var(--bs-silver);
  border-radius: 8px;
  color: var(--bs-olive);
}

.form-select:focus {
  border-color: var(--bs-olive);
  box-shadow: 0 0 0 0.25rem rgba(159, 34, 65, 0.25);
}

/* Nota: Los estilos de option:hover tienen soporte limitado en algunos navegadores
(Chrome/Edge en Windows usan el estilo nativo del SO para el dropdown).
Solución: usar Choices.js */
.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
  background-color: var(--bs-lime);
  color: #000;
}

.form-control {
  background-color: var(--bs-silver);
  /* Use your silver variable */
  color: var(--bs-olive);
}

.form-control::placeholder {
  color: var(--bs-olive);
  opacity: 0.8;
}

.form-control:focus {
  color: var(--bs-olive);
  border-color: #000000;
  box-shadow: 0 0 2px 0.1rem rgba(var(--bs-olive-rgb), 0.8);
  outline: 0;
}

/* Form controls with custom border colors */
.form-control:focus.border-olive,
.form-select:focus.border-olive {
  border-color: #9F2241;
  box-shadow: 0 0 0 0.25rem rgba(159, 34, 65, 0.25);
}

.form-control:focus.border-lime,
.form-select:focus.border-lime {
  border-color: #B8976A;
  box-shadow: 0 0 0 0.25rem rgba(184, 151, 106, 0.25);
}

.form-control:focus.border-mint,
.form-select:focus.border-mint {
  border-color: #E0DBCA;
  box-shadow: 0 0 0 0.25rem rgba(224, 219, 202, 0.25);
}

.form-control:focus.border-silver,
.form-select:focus.border-silver {
  border-color: #BFBFBE;
  box-shadow: 0 0 0 0.25rem rgba(191, 191, 190, 0.25);
}

/* --------------------------------------------
   NAVBAR
   -------------------------------------------- */
.navbar-nav .nav-item:not(:last-child) {
  border-right: 1.5px solid rgba(var(--bs-white-rgb), 0.9);
}

.navbar-olive .nav-link {
  color: rgba(var(--bs-white-rgb), 0.9) !important;
}

.navbar-olive .nav-link:hover {
  color: var(--bs-lime) !important;
}

/* Responsive adjustment: Hide separators on mobile so they don't look weird when stacked */
@media (max-width: 991px) {
  .navbar-nav .nav-item:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* --------------------------------------------
   OFFCANVAS
   -------------------------------------------- */
.offcanvas .list-group-item:not(.active):hover {
  border: 2px solid var(--bs-lime) !important;
}

.offcanvas .list-group-item.active {
  background-color: #6b1228 !important;
  border-color: #6b1228 !important;
}

/* --------------------------------------------
   SIDEBAR TAB (Offcanvas Trigger)
   -------------------------------------------- */
.sidebar-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040;
  background-color: var(--bs-olive);
  color: #fff;
  padding: 1rem 0.5rem;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.sidebar-tab:hover {
  background-color: var(--bs-lime);
  color: #000;
  padding-left: 0.75rem;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
}

.sidebar-tab-icon {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Hide sidebar tab when offcanvas is open */
.sidebar-tab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-100%);
}

/* --------------------------------------------
   ALERTS (Custom/Debug)
   -------------------------------------------- */
.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* --------------------------------------------
   VISUAL EFFECTS
   -------------------------------------------- */
.glass-panel {
  background-color: rgba(0, 0, 0, 0.49);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------
   FOOTER
   -------------------------------------------- */
.login-footer-fixed {
  position: fixed;
  bottom: 0.1rem;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* --------------------------------------------
   LAYOUT UTILITIES
   -------------------------------------------- */
.full-width {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

/* --------------------------------------------
   EXPAND TAB (Panel Toggle)
   -------------------------------------------- */
.expand-tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateX(-100%) translateY(-50%);
  padding: 0.75rem 0.5rem;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  writing-mode: sideways-lr;
  text-orientation: mixed;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.expand-tab:hover {
  background-color: var(--bs-lime) !important;
  color: #000 !important;
  padding-right: 0.75rem;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}

/* Línea vertical entre la pestaña y el panel */
#expandable-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.5rem;
  height: 100%;
  background-color: var(--bs-olive);
  transform: translateX(-100%);
  transition: background-color 0.3s ease;
  z-index: 1000;
}

/* Cambiar color de la línea cuando hover en la pestaña */
#expandable-section:has(.expand-tab:hover)::before {
  background-color: var(--bs-lime);
}

/* --------------------------------------------
   ACCORDION OLIVE
   -------------------------------------------- */
.accordion-olive .accordion-button {
  background-color: transparent;
  color: var(--bs-olive);
  font-weight: 700;
  border-bottom: 3px solid var(--bs-mint);
  box-shadow: none;
}

.accordion-olive .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--bs-olive);
  box-shadow: none;
}

.accordion-olive .accordion-button:focus {
  box-shadow: none;
  border-color: var(--bs-olive);
}

.accordion-olive .accordion-button::after {
  filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(600%) hue-rotate(315deg);
}

.accordion-olive .accordion-item {
  background-color: transparent;
  border: none;
}

/* --------------------------------------------
   INDICATOR CARD
   -------------------------------------------- */
.indicator-card {
  background-color: var(--bs-olive);
  border-radius: 8px;
  padding: 1rem;
  width: 200px;
  color: var(--bs-white);
}

.indicator-card-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.indicator-card-icon {
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.indicator-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.indicator-card-unit {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
  margin-left: 0.25rem;
}

.indicator-card-footer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Indicator cards container - columna por defecto */
.indicator-cards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.indicator-cards-container .indicator-card {
  width: 100%;
}

/* Cuando la sección está expandida (col-9), mostrar en filas de 3 */
#expandable-section.col-9 .indicator-cards-container {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#expandable-section.col-9 .indicator-cards-container .indicator-card {
  width: calc(33.333% - 3.5rem);
  flex-shrink: 0;
}

/* --------------------------------------------
   SIDEBAR COMPONENTS
   -------------------------------------------- */

#sidebar .nav-link {
  color: var(--bs-olive);
}

/* Selector Group */
.selector-group {
  display: flex;
  flex-direction: column;
}

.selector-group .form-label {
  font-weight: 600;
}

/* Progress Group */
.progress-group {
  display: flex;
  flex-direction: column;
}

.progress-group .form-label {
  font-weight: 600;
}

.progress-sm {
  background-color: rgba(159, 34, 65, 0.2);
}

.progress-sm .progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

/* --------------------------------------------
   CUSTOM SLIDERS
   -------------------------------------------- */
.slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.slider-group .form-label {
  font-weight: 600;
}

.slider-value {
  text-align: right;
}

input[type="range"].slider-custom {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #595959 50%, #e0e0e0 50%);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

input[type="range"].slider-custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #595959;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input[type="range"].slider-custom::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #595959;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input[type="range"].slider-custom::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: transparent;
}

input[type="range"].slider-custom::-ms-thumb {
  width: 18px;
  height: 18px;
  background: #595959;
  border-radius: 50%;
  cursor: pointer;
}