/*-----------------------------------------------------------------------------
 * Color System CSS
 * This file contains all color-related styles organized by component type
 *---------------------------------------------------------------------------*/

/* Color Variables
 *---------------------------------------------------------------------------*/
:root {
  --amber: #FAAF1B;           /* Amber */
  --amber-hover: #FBB933;
  --amber-light: #FFCF4F;     
  --amber-light-hover: #FFDA77;

  --forest: #13604A;          /* Forest Green */
  --forest-hover: #1A7A5E;
  --forest-light: #2F6255;    
  --forest-light-hover: #387666;

  --pine: #1D3C34;            /* Deep Pine Green */
  --pine-hover: #264F44;
  --pine-light: #2A554A;
  --pine-light-hover: #336960;

  --emerald: #002F24;         /* Emerald Green */
  --emerald-hover: #004535;
  --emerald-light: #005B46;
  --emerald-light-hover: #007157;
  
  --maroon: #59121F;          /* Maroon */
  --maroon-hover: #6E1727;
  --maroon-light: #831C2F;
  --maroon-light-hover: #98213A;
}

/*-----------------------------------------------------------------------------
 * Buttons
 *---------------------------------------------------------------------------*/

/* Default Button Structure */
[class*="btn-"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}

/* Dark Background Buttons */
html .btn-amber,
html .btn-amber-light,
html .btn-forest,
html .btn-forest-light,
html .btn-pine,
html .btn-pine-light,
html .btn-emerald,
html .btn-emerald-light,
html .btn-maroon,
html .btn-maroon-light {
  color: #FFF;
}

/* Individual Button Colors */
html .btn-amber { background-color: var(--amber); border-color: var(--amber); color: #000; }
html .btn-amber-light { background-color: var(--amber-light); border-color: var(--amber-light); color: #000; }
html .btn-forest { background-color: var(--forest); border-color: var(--forest); }
html .btn-forest-light { background-color: var(--forest-light); border-color: var(--forest-light); }
html .btn-pine { background-color: var(--pine); border-color: var(--pine); }
html .btn-pine-light { background-color: var(--pine-light); border-color: var(--pine-light); }
html .btn-emerald { background-color: var(--emerald); border-color: var(--emerald); }
html .btn-emerald-light { background-color: var(--emerald-light); border-color: var(--emerald-light); }
html .btn-maroon { background-color: var(--maroon); border-color: var(--maroon); }
html .btn-maroon-light { background-color: var(--maroon-light); border-color: var(--maroon-light); }

/* Button Hover States */
html .btn-amber:hover, html .btn-amber.hover { background-color: var(--amber-hover); border-color: var(--amber-hover); }
html .btn-amber-light:hover, html .btn-amber-light.hover { background-color: var(--amber-light-hover); border-color: var(--amber-light-hover); }
html .btn-forest:hover, html .btn-forest.hover { background-color: var(--forest-hover); border-color: var(--forest-hover); }
html .btn-forest-light:hover, html .btn-forest-light.hover { background-color: var(--forest-light-hover); border-color: var(--forest-light-hover); }
html .btn-pine:hover, html .btn-pine.hover { background-color: var(--pine-hover); border-color: var(--pine-hover); }
html .btn-pine-light:hover, html .btn-pine-light.hover { background-color: var(--pine-light-hover); border-color: var(--pine-light-hover); }
html .btn-emerald:hover, html .btn-emerald.hover { background-color: var(--emerald-hover); border-color: var(--emerald-hover); }
html .btn-emerald-light:hover, html .btn-emerald-light.hover { background-color: var(--emerald-light-hover); border-color: var(--emerald-light-hover); }
html .btn-maroon:hover, html .btn-maroon.hover { background-color: var(--maroon-hover); border-color: var(--maroon-hover); }
html .btn-maroon-light:hover, html .btn-maroon-light.hover { background-color: var(--maroon-light-hover); border-color: var(--maroon-light-hover); }

/* Button Focus States */
html .btn-amber:focus, html .btn-amber.focus { box-shadow: 0 0 0 3px rgba(250, 175, 27, 0.5); background-color: var(--amber); border-color: var(--amber); }
html .btn-amber-light:focus, html .btn-amber-light.focus { box-shadow: 0 0 0 3px rgba(255, 207, 79, 0.5); background-color: var(--amber-light); border-color: var(--amber-light); }
html .btn-forest:focus, html .btn-forest.focus { box-shadow: 0 0 0 3px rgba(19, 96, 74, 0.5); background-color: var(--forest); border-color: var(--forest); }
html .btn-forest-light:focus, html .btn-forest-light.focus { box-shadow: 0 0 0 3px rgba(31, 143, 110, 0.5); background-color: var(--forest-light); border-color: var(--forest-light); }
html .btn-pine:focus, html .btn-pine.focus { box-shadow: 0 0 0 3px rgba(29, 60, 52, 0.5); background-color: var(--pine); border-color: var(--pine); }
html .btn-pine-light:focus, html .btn-pine-light.focus { box-shadow: 0 0 0 3px rgba(47, 98, 85, 0.5); background-color: var(--pine-light); border-color: var(--pine-light); }
html .btn-emerald:focus, html .btn-emerald.focus { box-shadow: 0 0 0 3px rgba(0, 47, 36, 0.5); background-color: var(--emerald); border-color: var(--emerald); }
html .btn-emerald-light:focus, html .btn-emerald-light.focus { box-shadow: 0 0 0 3px rgba(0, 91, 70, 0.5); background-color: var(--emerald-light); border-color: var(--emerald-light); }
html .btn-maroon:focus, html .btn-maroon.focus { box-shadow: 0 0 0 3px rgba(89, 18, 31, 0.5); background-color: var(--maroon); border-color: var(--maroon); }
html .btn-maroon-light:focus, html .btn-maroon-light.focus { box-shadow: 0 0 0 3px rgba(131, 28, 47, 0.5); background-color: var(--maroon-light); border-color: var(--maroon-light); }

/* Button Disabled States */
[class*="btn-"].disabled,
[class*="btn-"]:disabled {
  opacity: 0.65;
}

/* Outline Buttons */
html .btn-outline-amber,
html .btn-outline-amber-light,
html .btn-outline-forest,
html .btn-outline-forest-light,
html .btn-outline-pine,
html .btn-outline-pine-light,
html .btn-outline-emerald,
html .btn-outline-emerald-light,
html .btn-outline-maroon,
html .btn-outline-maroon-light {
  background-color: transparent;
  border-width: 2px;
  padding: 7.728px 14.928px;
  padding: 0.483rem 0.933rem;
}

html .btn-outline-amber { color: var(--amber); border-color: var(--amber); }
html .btn-outline-amber-light { color: var(--amber-light); border-color: var(--amber-light); }
html .btn-outline-forest { color: var(--forest); border-color: var(--forest); }
html .btn-outline-forest-light { color: var(--forest-light); border-color: var(--forest-light); }
html .btn-outline-pine { color: var(--pine); border-color: var(--pine); }
html .btn-outline-pine-light { color: var(--pine-light); border-color: var(--pine-light); }
html .btn-outline-emerald { color: var(--emerald); border-color: var(--emerald); }
html .btn-outline-emerald-light { color: var(--emerald-light); border-color: var(--emerald-light); }
html .btn-outline-maroon { color: var(--maroon); border-color: var(--maroon); }
html .btn-outline-maroon-light { color: var(--maroon-light); border-color: var(--maroon-light); }

/* Outline Button Hover States */
html .btn-outline-amber:hover, html .btn-outline-amber.hover { background-color: var(--amber); border-color: var(--amber); color: #000; }
html .btn-outline-amber-light:hover, html .btn-outline-amber-light.hover { background-color: var(--amber-light); border-color: var(--amber-light); color: #000; }
html .btn-outline-forest:hover, html .btn-outline-forest.hover { background-color: var(--forest); border-color: var(--forest); color: #FFF; }
html .btn-outline-forest-light:hover, html .btn-outline-forest-light.hover { background-color: var(--forest-light); border-color: var(--forest-light); color: #FFF; }
html .btn-outline-pine:hover, html .btn-outline-pine.hover { background-color: var(--pine); border-color: var(--pine); color: #FFF; }
html .btn-outline-pine-light:hover, html .btn-outline-pine-light.hover { background-color: var(--pine-light); border-color: var(--pine-light); color: #FFF; }
html .btn-outline-emerald:hover, html .btn-outline-emerald.hover { background-color: var(--emerald); border-color: var(--emerald); color: #FFF; }
html .btn-outline-emerald-light:hover, html .btn-outline-emerald-light.hover { background-color: var(--emerald-light); border-color: var(--emerald-light); color: #FFF; }
html .btn-outline-maroon:hover, html .btn-outline-maroon.hover { background-color: var(--maroon); border-color: var(--maroon); color: #FFF; }
html .btn-outline-maroon-light:hover, html .btn-outline-maroon-light.hover { background-color: var(--maroon-light); border-color: var(--maroon-light); color: #FFF; }

/* Outline Button Focus States */
html .btn-outline-amber:focus, html .btn-outline-amber.focus { box-shadow: 0 0 0 3px rgba(250, 175, 27, 0.5); }
html .btn-outline-amber-light:focus, html .btn-outline-amber-light.focus { box-shadow: 0 0 0 3px rgba(255, 207, 79, 0.5); }
html .btn-outline-forest:focus, html .btn-outline-forest.focus { box-shadow: 0 0 0 3px rgba(19, 96, 74, 0.5); }
html .btn-outline-forest-light:focus, html .btn-outline-forest-light.focus { box-shadow: 0 0 0 3px rgba(31, 143, 110, 0.5); }
html .btn-outline-pine:focus, html .btn-outline-pine.focus { box-shadow: 0 0 0 3px rgba(29, 60, 52, 0.5); }
html .btn-outline-pine-light:focus, html .btn-outline-pine-light.focus { box-shadow: 0 0 0 3px rgba(47, 98, 85, 0.5); }
html .btn-outline-emerald:focus, html .btn-outline-emerald.focus { box-shadow: 0 0 0 3px rgba(0, 47, 36, 0.5); }
html .btn-outline-emerald-light:focus, html .btn-outline-emerald-light.focus { box-shadow: 0 0 0 3px rgba(0, 91, 70, 0.5); }
html .btn-outline-maroon:focus, html .btn-outline-maroon.focus { box-shadow: 0 0 0 3px rgba(89, 18, 31, 0.5); }
html .btn-outline-maroon-light:focus, html .btn-outline-maroon-light.focus { box-shadow: 0 0 0 3px rgba(131, 28, 47, 0.5); }

/* Button Size Variations */
html [class*="btn-outline-"].btn-xs {
  padding: 2.4px 8px;
  padding: 0.15rem 0.5rem;
}

html [class*="btn-outline-"].btn-sm {
  padding: 4px 10.4px;
  padding: 0.25rem 0.65rem;
}

html [class*="btn-outline-"].btn-lg {
  padding: 7.2px 16px;
  padding: 0.45rem 1rem;
}

html [class*="btn-outline-"].btn-xl {
  padding: 12px 32px;
  padding: 0.75rem 2rem;
}

html [class*="btn-outline-"].btn-outline-thin {
  border-width: 1px;
}

/*-----------------------------------------------------------------------------
 * Text Styles
 *---------------------------------------------------------------------------*/
html .heading-amber,
html .lnk-amber,
html .text-color-amber,
html .text-amber { color: var(--amber) !important; }

html .heading-amber-light,
html .lnk-amber-light,
html .text-color-amber-light,
html .text-amber-light { color: var(--amber-light) !important; }

html .heading-forest,
html .lnk-forest,
html .text-color-forest,
html .text-forest { color: var(--forest) !important; }

html .heading-forest-light,
html .lnk-forest-light,
html .text-color-forest-light,
html .text-forest-light { color: var(--forest-light) !important; }

html .heading-pine,
html .lnk-pine,
html .text-color-pine,
html .text-pine { color: var(--pine) !important; }

html .heading-pine-light,
html .lnk-pine-light,
html .text-color-pine-light,
html .text-pine-light { color: var(--pine-light) !important; }

html .heading-emerald,
html .lnk-emerald,
html .text-color-emerald,
html .text-emerald { color: var(--emerald) !important; }

html .heading-emerald-light,
html .lnk-emerald-light,
html .text-color-emerald-light,
html .text-emerald-light { color: var(--emerald-light) !important; }

html .heading-maroon,
html .lnk-maroon,
html .text-color-maroon,
html .text-maroon { color: var(--maroon) !important; }

html .heading-maroon-light,
html .lnk-maroon-light,
html .text-color-maroon-light,
html .text-maroon-light { color: var(--maroon-light) !important; }

/* Text Hover Colors */
html .text-color-hover-amber:hover,
html .text-hover-amber:hover { color: var(--amber) !important; }

html .text-color-hover-amber-light:hover,
html .text-hover-amber-light:hover { color: var(--amber-light) !important; }

html .text-color-hover-forest:hover,
html .text-hover-forest:hover { color: var(--forest) !important; }

html .text-color-hover-forest-light:hover,
html .text-hover-forest-light:hover { color: var(--forest-light) !important; }

html .text-color-hover-pine:hover,
html .text-hover-pine:hover { color: var(--pine) !important; }

html .text-color-hover-pine-light:hover,
html .text-hover-pine-light:hover { color: var(--pine-light) !important; }

html .text-color-hover-emerald:hover,
html .text-hover-emerald:hover { color: var(--emerald) !important; }

html .text-color-hover-emerald-light:hover,
html .text-hover-emerald-light:hover { color: var(--emerald-light) !important; }

html .text-color-hover-maroon:hover,
html .text-hover-maroon:hover { color: var(--maroon) !important; }

html .text-color-hover-maroon-light:hover,
html .text-hover-maroon-light:hover { color: var(--maroon-light) !important; }

/*-----------------------------------------------------------------------------
 * Background Colors
 *---------------------------------------------------------------------------*/
html .bg-amber,
html .background-color-amber { background-color: var(--amber) !important; }

html .bg-amber-light,
html .background-color-amber-light { background-color: var(--amber-light) !important; }

html .bg-forest,
html .background-color-forest { background-color: var(--forest) !important; }

html .bg-forest-light,
html .background-color-forest-light { background-color: var(--forest-light) !important; }

html .bg-pine,
html .background-color-pine { background-color: var(--pine) !important; }

html .bg-pine-light,
html .background-color-pine-light { background-color: var(--pine-light) !important; }

html .bg-emerald,
html .background-color-emerald { background-color: var(--emerald) !important; }

html .bg-emerald-light,
html .background-color-emerald-light { background-color: var(--emerald-light) !important; }

html .bg-maroon,
html .background-color-maroon { background-color: var(--maroon) !important; }

html .bg-maroon-light,
html .background-color-maroon-light { background-color: var(--maroon-light) !important; }

/*-----------------------------------------------------------------------------
 * Badges
 *---------------------------------------------------------------------------*/
/* All Badges */
.badge-amber,
.badge-amber-light,
.badge-forest,
.badge-forest-light,
.badge-pine,
.badge-pine-light,
.badge-emerald,
.badge-emerald-light,
.badge-maroon,
.badge-maroon-light {
  padding: 0.25em 0.5em;
  border-radius: 0.25rem;
  font-size: 0.75em;
  font-weight: 700;
}

/* Badge Background Colors */
.badge-amber { background: var(--amber-hover); color: #000; }
.badge-amber-light { background: var(--amber-light-hover); color: #000; }
.badge-forest { background: var(--forest-hover); color: #FFF; }
.badge-forest-light { background: var(--forest-light-hover); color: #FFF; }
.badge-pine { background: var(--pine-hover); color: #FFF; }
.badge-pine-light { background: var(--pine-light-hover); color: #FFF; }
.badge-emerald { background: var(--emerald-hover); color: #FFF; }
.badge-emerald-light { background: var(--emerald-light-hover); color: #FFF; }
.badge-maroon { background: var(--maroon-hover); color: #FFF; }
.badge-maroon-light { background: var(--maroon-light-hover); color: #FFF; }

/*-----------------------------------------------------------------------------
 * Alerts
 *---------------------------------------------------------------------------*/
/* All Alerts */
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-amber,
.alert-amber-light,
.alert-forest,
.alert-forest-light,
.alert-pine,
.alert-pine-light,
.alert-emerald,
.alert-emerald-light,
.alert-maroon,
.alert-maroon-light {
  border-left-width: 4px;
}

/* Alert Colors */
.alert-amber { background-color: rgba(250, 175, 27, 0.15); border-color: var(--amber); color: #000; }
.alert-amber-light { background-color: rgba(255, 207, 79, 0.15); border-color: var(--amber-light); color: #000; }
.alert-forest { background-color: rgba(19, 96, 74, 0.15); border-color: var(--forest); color: var(--forest); }
.alert-forest-light { background-color: rgba(31, 143, 110, 0.15); border-color: var(--forest-light); color: var(--forest-light); }
.alert-pine { background-color: rgba(29, 60, 52, 0.15); border-color: var(--pine); color: var(--pine); }
.alert-pine-light { background-color: rgba(47, 98, 85, 0.15); border-color: var(--pine-light); color: var(--pine-light); }
.alert-emerald { background-color: rgba(0, 47, 36, 0.15); border-color: var(--emerald); color: var(--emerald); }
.alert-emerald-light { background-color: rgba(0, 91, 70, 0.15); border-color: var(--emerald-light); color: var(--emerald-light); }
.alert-maroon { background-color: rgba(89, 18, 31, 0.15); border-color: var(--maroon); color: var(--maroon); }
.alert-maroon-light { background-color: rgba(131, 28, 47, 0.15); border-color: var(--maroon-light); color: var(--maroon-light); }

/* Solid Alert Variants */
.alert-solid-amber { background-color: var(--amber); border-color: var(--amber); color: #000; }
.alert-solid-amber-light { background-color: var(--amber-light); border-color: var(--amber-light); color: #000; }
.alert-solid-forest { background-color: var(--forest); border-color: var(--forest); color: #FFF; }
.alert-solid-forest-light { background-color: var(--forest-light); border-color: var(--forest-light); color: #FFF; }
.alert-solid-pine { background-color: var(--pine); border-color: var(--pine); color: #FFF; }
.alert-solid-pine-light { background-color: var(--pine-light); border-color: var(--pine-light); color: #FFF; }
.alert-solid-emerald { background-color: var(--emerald); border-color: var(--emerald); color: #FFF; }
.alert-solid-emerald-light { background-color: var(--emerald-light); border-color: var(--emerald-light); color: #FFF; }
.alert-solid-maroon { background-color: var(--maroon); border-color: var(--maroon); color: #FFF; }
.alert-solid-maroon-light { background-color: var(--maroon-light); border-color: var(--maroon-light); color: #FFF; }

/* Alert Links */
[class*="alert-"] .alert-link {
  text-decoration: underline;
  font-weight: 700;
}

.alert-amber .alert-link { color: #000; }
.alert-amber-light .alert-link { color: #000; }
.alert-forest .alert-link { color: var(--forest); }
.alert-forest-light .alert-link { color: var(--forest-light); }
.alert-pine .alert-link { color: var(--pine); }
.alert-pine-light .alert-link { color: var(--pine-light); }
.alert-emerald .alert-link { color: var(--emerald); }
.alert-emerald-light .alert-link { color: var(--emerald-light); }
.alert-maroon .alert-link { color: var(--maroon); }
.alert-maroon-light .alert-link { color: var(--maroon-light); }

/* Solid Alert Links */
.alert-solid-amber .alert-link,
.alert-solid-amber-light .alert-link,
.alert-solid-forest .alert-link,
.alert-solid-forest-light .alert-link,
.alert-solid-pine .alert-link,
.alert-solid-pine-light .alert-link,
.alert-solid-emerald .alert-link,
.alert-solid-emerald-light .alert-link,
.alert-solid-maroon .alert-link,
.alert-solid-maroon-light .alert-link {
  color: inherit;
  text-decoration: underline;
}

/*-----------------------------------------------------------------------------
 * Gradient Backgrounds
 *---------------------------------------------------------------------------*/
.bg-gradient-amber {
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-light) 100%);
  color: #000;
}

.bg-gradient-forest {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  color: #FFF;
}

.bg-gradient-pine {
  background: linear-gradient(135deg, var(--pine) 0%, var(--pine-light) 100%);
  color: #FFF;
}

.bg-gradient-emerald {
  background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-light) 100%);
  color: #FFF;
}

.bg-gradient-maroon {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-light) 100%);
  color: #FFF;
}

.bg-gradient-amber-forest {
  background: linear-gradient(135deg, var(--amber) 0%, var(--forest) 100%);
  color: #FFF;
}

.bg-gradient-forest-pine {
  background: linear-gradient(135deg, var(--forest) 0%, var(--pine) 100%);
  color: #FFF;
}

.bg-gradient-pine-emerald {
  background: linear-gradient(135deg, var(--pine) 0%, var(--emerald) 100%);
  color: #FFF;
}

.bg-gradient-amber-emerald {
  background: linear-gradient(135deg, var(--amber) 0%, var(--emerald) 100%);
  color: #FFF;
}

.bg-gradient-maroon-forest {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--forest) 100%);
  color: #FFF;
}

.bg-gradient-maroon-amber {
  background: linear-gradient(135deg, var(--maroon) 0%, var(--amber) 100%);
  color: #FFF;
}

/*-----------------------------------------------------------------------------
 * Border Utilities
 *---------------------------------------------------------------------------*/
.border-amber { border-color: var(--amber) !important; }
.border-amber-light { border-color: var(--amber-light) !important; }
.border-forest { border-color: var(--forest) !important; }
.border-forest-light { border-color: var(--forest-light) !important; }
.border-pine { border-color: var(--pine) !important; }
.border-pine-light { border-color: var(--pine-light) !important; }
.border-emerald { border-color: var(--emerald) !important; }
.border-emerald-light { border-color: var(--emerald-light) !important; }
.border-maroon { border-color: var(--maroon) !important; }
.border-maroon-light { border-color: var(--maroon-light) !important; }

/* Border Thickness Utilities */
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }
.border-5 { border-width: 5px !important; }

/* Directional Borders */
.border-top-amber { border-top-color: var(--amber) !important; }
.border-right-amber { border-right-color: var(--amber) !important; }
.border-bottom-amber { border-bottom-color: var(--amber) !important; }
.border-left-amber { border-left-color: var(--amber) !important; }

.border-top-forest { border-top-color: var(--forest) !important; }
.border-right-forest { border-right-color: var(--forest) !important; }
.border-bottom-forest { border-bottom-color: var(--forest) !important; }
.border-left-forest { border-left-color: var(--forest) !important; }

.border-top-pine { border-top-color: var(--pine) !important; }
.border-right-pine { border-right-color: var(--pine) !important; }
.border-bottom-pine { border-bottom-color: var(--pine) !important; }
.border-left-pine { border-left-color: var(--pine) !important; }

.border-top-emerald { border-top-color: var(--emerald) !important; }
.border-right-emerald { border-right-color: var(--emerald) !important; }
.border-bottom-emerald { border-bottom-color: var(--emerald) !important; }
.border-left-emerald { border-left-color: var(--emerald) !important; }

.border-top-maroon { border-top-color: var(--maroon) !important; }
.border-right-maroon { border-right-color: var(--maroon) !important; }
.border-bottom-maroon { border-bottom-color: var(--maroon) !important; }
.border-left-maroon { border-left-color: var(--maroon) !important; }

/*-----------------------------------------------------------------------------
 * Bootstrap 5 Integration - Additional Helper Classes
 *---------------------------------------------------------------------------*/
/* Card Accent Colors */
.card-accent-amber { border-top: 4px solid var(--amber); }
.card-accent-forest { border-top: 4px solid var(--forest); }
.card-accent-pine { border-top: 4px solid var(--pine); }
.card-accent-emerald { border-top: 4px solid var(--emerald); }
.card-accent-maroon { border-top: 4px solid var(--maroon); }

/* Form Focus Colors */
.form-control:focus.focus-amber { border-color: var(--amber); box-shadow: 0 0 0 0.25rem rgba(250, 175, 27, 0.25); }
.form-control:focus.focus-forest { border-color: var(--forest); box-shadow: 0 0 0 0.25rem rgba(19, 96, 74, 0.25); }
.form-control:focus.focus-pine { border-color: var(--pine); box-shadow: 0 0 0 0.25rem rgba(29, 60, 52, 0.25); }
.form-control:focus.focus-emerald { border-color: var(--emerald); box-shadow: 0 0 0 0.25rem rgba(0, 47, 36, 0.25); }
.form-control:focus.focus-maroon { border-color: var(--maroon); box-shadow: 0 0 0 0.25rem rgba(89, 18, 31, 0.25); }

/* List Group Colors */
.list-group-item-amber { background-color: rgba(250, 175, 27, 0.1); color: var(--amber); }
.list-group-item-forest { background-color: rgba(19, 96, 74, 0.1); color: var(--forest); }
.list-group-item-pine { background-color: rgba(29, 60, 52, 0.1); color: var(--pine); }
.list-group-item-emerald { background-color: rgba(0, 47, 36, 0.1); color: var(--emerald); }
.list-group-item-maroon { background-color: rgba(89, 18, 31, 0.1); color: var(--maroon); }

/* List Group Hover States */
.list-group-item-amber.list-group-item-action:hover { background-color: rgba(250, 175, 27, 0.2); }
.list-group-item-forest.list-group-item-action:hover { background-color: rgba(19, 96, 74, 0.2); }
.list-group-item-pine.list-group-item-action:hover { background-color: rgba(29, 60, 52, 0.2); }
.list-group-item-emerald.list-group-item-action:hover { background-color: rgba(0, 47, 36, 0.2); }
.list-group-item-maroon.list-group-item-action:hover { background-color: rgba(89, 18, 31, 0.2); }

/*-----------------------------------------------------------------------------
 * Additional Components
 *---------------------------------------------------------------------------*/
/* Progress Bars */
.progress-bar-amber { background-color: var(--amber); }
.progress-bar-forest { background-color: var(--forest); }
.progress-bar-pine { background-color: var(--pine); }
.progress-bar-emerald { background-color: var(--emerald); }
.progress-bar-maroon { background-color: var(--maroon); }

/* Pill Badges */
.badge-pill {
  border-radius: 50rem;
  padding-right: 0.6em;
  padding-left: 0.6em;
}

/* Tooltips & Popovers */
.tooltip-amber .tooltip-inner,
.popover-amber .popover-body { background-color: var(--amber); color: #000; }
.tooltip-forest .tooltip-inner,
.popover-forest .popover-body { background-color: var(--forest); color: #FFF; }
.tooltip-pine .tooltip-inner,
.popover-pine .popover-body { background-color: var(--pine); color: #FFF; }
.tooltip-emerald .tooltip-inner,
.popover-emerald .popover-body { background-color: var(--emerald); color: #FFF; }
.tooltip-maroon .tooltip-inner,
.popover-maroon .popover-body { background-color: var(--maroon); color: #FFF; }

/*-----------------------------------------------------------------------------
 * Accessibility & Focus Styles
 *---------------------------------------------------------------------------*/
/* High Contrast Focus States */
.focus-visible-amber:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.focus-visible-forest:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.focus-visible-pine:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.focus-visible-emerald:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.focus-visible-maroon:focus-visible { outline: 3px solid var(--maroon); outline-offset: 2px; }

/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--forest);
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/*-----------------------------------------------------------------------------
 * Animation & Transition Utilities
 *---------------------------------------------------------------------------*/
.transition-colors {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.transition-transform {
  transition: transform 0.2s ease-in-out;
}

.hover-scale:hover {
  transform: scale(1.05);
}


.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/*-----------------------------------------------------------------------------
 * Print Styles
 *---------------------------------------------------------------------------*/
@media print {
  /* Ensure colors print properly with adequate contrast */
  .bg-amber, .background-color-amber,
  .bg-amber-light, .background-color-amber-light,
  .bg-forest, .background-color-forest,
  .bg-forest-light, .background-color-forest-light,
  .bg-pine, .background-color-pine,
  .bg-pine-light, .background-color-pine-light, 
  .bg-emerald, .background-color-emerald,
  .bg-emerald-light, .background-color-emerald-light,
  .bg-maroon, .background-color-maroon,
  .bg-maroon-light, .background-color-maroon-light {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background-color: #f0f0f0 !important;
    color: #000 !important;
  }
  
  /* Enhance border visibility for print */
  [class*="border-"] {
    border-width: 1px !important;
    border-color: #000 !important;
  }
}