/* colors.css — full Bootstrap root overrides, tuned for:
   Primary:   #11918c
   Secondary: #8dd4ce
   Purpose: replace the entire color root so utilities and components resolve correctly
   Load this AFTER bootstrap.min.css
*/

/* -------------------------
   Core root (light theme)
   ------------------------- */
:root, [data-bs-theme=light] {
  /* Basic palette (semantic names appear in original list) */
  --bs-blue: #11918c;             /* mapping blue -> primary (brand) */
  --bs-indigo: #117a72;
  --bs-purple: #6f42c1;           /* leave as-is for components not used */
  --bs-pink: #d63384;
  --bs-red: #e24a4a;              /* danger tuned to palette */
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #19a974;            /* success tuned */
  --bs-teal: #20c997;
  --bs-cyan: #3fdad1;             /* info tuned */
  --bs-black: #000000;
  --bs-white: #ffffff;

  /* gray scale */
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;

  /* Semantic tokens (map to our brand) */
  --bs-primary: #11918c;
  --bs-secondary: #8dd4ce;
  --bs-success: #19a974;
  --bs-info: #3fdad1;
  --bs-warning: #f7c948;
  --bs-danger: #e24a4a;
  --bs-light: #f3f8f7;
  --bs-dark: #0a3c3a;

  /* ---------- RGB helpers (used for shadows/tints) ---------- */
  --bs-primary-rgb: 17,145,140;
  --bs-secondary-rgb: 141,212,206;
  --bs-success-rgb: 25,169,116;
  --bs-info-rgb: 63,218,209;
  --bs-warning-rgb: 247,201,72;
  --bs-danger-rgb: 226,74,74;
  --bs-light-rgb: 243,248,247;
  --bs-dark-rgb: 10,60,58;
  --bs-white-rgb: 255,255,255;
  --bs-black-rgb: 0,0,0;

  /* ---------- Text emphasis / readable colors ---------- */
  --bs-body-color: #0a3c3a;               /* page text color */
  --bs-body-color-rgb: 10,60,58;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255,255,255;

  --bs-emphasis-color: #000000;
  --bs-emphasis-color-rgb: 0,0,0;

  --bs-secondary-color: rgba(10,60,58,0.75);
  --bs-secondary-color-rgb: 10,60,58;

  --bs-heading-color: inherit;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0e7873;
  --bs-link-hover-color-rgb: 14,120,115;

  /* ---------- subtle backgrounds / accents ---------- */
  --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.08);   /* faint primary */
  --bs-secondary-bg-subtle: rgba(var(--bs-secondary-rgb), 0.08);
  --bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.08);
  --bs-info-bg-subtle: rgba(var(--bs-info-rgb), 0.08);
  --bs-warning-bg-subtle: rgba(var(--bs-warning-rgb), 0.08);
  --bs-danger-bg-subtle: rgba(var(--bs-danger-rgb), 0.08);
  --bs-light-bg-subtle: rgba(var(--bs-light-rgb), 1);
  --bs-dark-bg-subtle: rgba(var(--bs-dark-rgb), 0.08);

  /* ---------- border subtles ---------- */
  --bs-border-color: #bfe7e3;                  /* gentle mint border */
  --bs-border-color-translucent: rgba(11,74,71,0.12);
  --bs-primary-border-subtle: rgba(var(--bs-primary-rgb),0.25);
  --bs-secondary-border-subtle: rgba(var(--bs-secondary-rgb),0.25);
  --bs-success-border-subtle: rgba(var(--bs-success-rgb),0.25);
  --bs-info-border-subtle: rgba(var(--bs-info-rgb),0.25);
  --bs-warning-border-subtle: rgba(var(--bs-warning-rgb),0.25);
  --bs-danger-border-subtle: rgba(var(--bs-danger-rgb),0.25);
  --bs-light-border-subtle: rgba(var(--bs-light-rgb),1);
  --bs-dark-border-subtle: rgba(var(--bs-dark-rgb),0.25);

  /* ---------- button & component tokens (explicit) ---------- */
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #0e7e79;        /* darker hover */
  --bs-btn-hover-border-color: #0e7e79;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #0b6762;       /* active/darker */
  --bs-btn-active-border-color: #0b6762;

  --bs-btn-outline-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  /* ---------- form control tokens ---------- */
  --bs-form-control-bg: #ffffff;
  --bs-form-control-color: var(--bs-body-color);
  --bs-form-control-border-color: #cfe9e6;
  --bs-form-control-focus-border-color: var(--bs-primary);
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .14);

  /* ---------- badges / alerts tokens ---------- */
  --bs-alert-border-radius: 0.375rem;
  --bs-alert-link-color: #083a37;

  /* ---------- tables ---------- */
  --bs-table-bg: transparent;
  --bs-table-accent-bg: rgba(var(--bs-primary-rgb), 0.03);
  --bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.04);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.06);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);

  /* ---------- cards / modal ---------- */
  --bs-card-bg: #ffffff;
  --bs-card-border-color: rgba(var(--bs-secondary-rgb), 0.12);
  --bs-card-color: var(--bs-body-color);
  --bs-card-cap-bg: rgba(var(--bs-secondary-rgb), 0.06);

  --bs-modal-bg: #ffffff;
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-footer-border-color: var(--bs-border-color);

  /* ---------- focus and accessibility ---------- */
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);

  /* ---------- misc helpers used earlier in custom rules ---------- */
  --bs-primary-hover: #0e7e79;
  --bs-primary-active: #0b6762;
  --bs-secondary-hover: #74cfc8;
  --bs-secondary-active: #61bfb5;
  --bs-btn-outline-primary-hover-bg: var(--bs-primary);
}

/* -------------------------
   Explicit overrides for utilities that were compiled into bootstrap CSS
   (Bootstrap's utilities may be more specific than simple variable usage).
   We use !important only for utility classes such as .bg-*, .text-* and .btn-*
   so they reliably reflect the palette without recompiling Bootstrap.
   ------------------------- */

/* Background utilities */
.bg-primary      { background-color: var(--bs-primary) !important; color: #fff !important; }
.bg-secondary    { background-color: var(--bs-secondary) !important; color: #0a3c3a !important; }
.bg-success      { background-color: var(--bs-success) !important; color: #fff !important; }
.bg-info         { background-color: var(--bs-info) !important; color: #0a3c3a !important; }
.bg-warning      { background-color: var(--bs-warning) !important; color: #0a3c3a !important; }
.bg-danger       { background-color: var(--bs-danger) !important; color: #fff !important; }
.bg-light        { background-color: var(--bs-light) !important; color: #0a3c3a !important; }
.bg-dark         { background-color: var(--bs-dark) !important; color: #fff !important; }

/* Text utilities */
.text-primary    { color: var(--bs-primary) !important; }
.text-secondary  { color: var(--bs-secondary) !important; }
.text-success    { color: var(--bs-success) !important; }
.text-info       { color: var(--bs-info) !important; }
.text-warning    { color: var(--bs-warning) !important; }
.text-danger     { color: var(--bs-danger) !important; }
.text-light      { color: var(--bs-light) !important; }
.text-dark       { color: var(--bs-dark) !important; }

/* ============================================================
   Custom Button Theme Overrides
   Compatible with Bootstrap 5.x
   Append after Bootstrap + your color vars
   ============================================================ */

/* ---------- Base Buttons ---------- */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  text-transform: none;
}

/* ---------- Primary ---------- */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-btn-color) !important;
}
.btn-primary:hover {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
  color: var(--bs-btn-color) !important;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--bs-primary-active) !important;
  border-color: var(--bs-primary-active) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--bs-btn-disabled-bg) !important;
  border-color: var(--bs-btn-disabled-border-color) !important;
  color: var(--bs-btn-disabled-color) !important;
}

/* ---------- Secondary ---------- */
.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #0a3c3a !important;
}
.btn-secondary:hover {
  background-color: var(--bs-secondary-hover) !important;
  border-color: var(--bs-secondary-hover) !important;
  color: #0a3c3a !important;
}
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--bs-secondary-active) !important;
  border-color: var(--bs-secondary-active) !important;
  color: #0a3c3a !important;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  background-color: var(--bs-btn-disabled-bg) !important;
  border-color: var(--bs-btn-disabled-border-color) !important;
  color: var(--bs-btn-disabled-color) !important;
}

/* ---------- Success ---------- */
.btn-success {
  background-color: #20c997 !important;
  border-color: #20c997 !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #17b384 !important;
  border-color: #17b384 !important;
}
.btn-success:active,
.btn-success.active {
  background-color: #139e75 !important;
  border-color: #139e75 !important;
}

/* ---------- Danger ---------- */
.btn-danger {
  background-color: #e74c3c !important;
  border-color: #e74c3c !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #d84332 !important;
  border-color: #d84332 !important;
}
.btn-danger:active {
  background-color: #c0392b !important;
  border-color: #c0392b !important;
}

/* ---------- Warning ---------- */
.btn-warning {
  background-color: #f1c40f !important;
  border-color: #f1c40f !important;
  color: #0a3c3a !important;
}
.btn-warning:hover {
  background-color: #d4ac0d !important;
  border-color: #d4ac0d !important;
}
.btn-warning:active {
  background-color: #b7950b !important;
  border-color: #b7950b !important;
}

/* ---------- Info ---------- */
.btn-info {
  background-color: #1abc9c !important;
  border-color: #1abc9c !important;
  color: #fff !important;
}
.btn-info:hover {
  background-color: #16a085 !important;
  border-color: #16a085 !important;
}
.btn-info:active {
  background-color: #138d75 !important;
  border-color: #138d75 !important;
}

/* ---------- Light ---------- */
.btn-light {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}
.btn-light:hover {
  background-color: #e9ecef !important;
  border-color: #dee2e6 !important;
}
.btn-light:active {
  background-color: #dee2e6 !important;
  border-color: #ced4da !important;
}

/* ---------- Dark ---------- */
.btn-dark {
  background-color: #212529 !important;
  border-color: #212529 !important;
  color: #fff !important;
}
.btn-dark:hover {
  background-color: #343a40 !important;
  border-color: #343a40 !important;
}
.btn-dark:active {
  background-color: #1a1e21 !important;
  border-color: #1a1e21 !important;
}

/* ---------- Outline Variants ---------- */
.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: var(--bs-btn-color) !important;
}

.btn-outline-secondary {
  color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  color: #0a3c3a !important;
}

.btn-outline-success {
  color: #20c997 !important;
  border-color: #20c997 !important;
}
.btn-outline-success:hover {
  background-color: #20c997 !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: #e74c3c !important;
  border-color: #e74c3c !important;
}
.btn-outline-danger:hover {
  background-color: #e74c3c !important;
  color: #fff !important;
}

.btn-outline-warning {
  color: #f1c40f !important;
  border-color: #f1c40f !important;
}
.btn-outline-warning:hover {
  background-color: #f1c40f !important;
  color: #0a3c3a !important;
}

.btn-outline-info {
  color: #1abc9c !important;
  border-color: #1abc9c !important;
}
.btn-outline-info:hover {
  background-color: #1abc9c !important;
  color: #fff !important;
}

.btn-outline-light {
  color: #f8f9fa !important;
  border-color: #f8f9fa !important;
}
.btn-outline-light:hover {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

.btn-outline-dark {
  color: #212529 !important;
  border-color: #212529 !important;
}
.btn-outline-dark:hover {
  background-color: #212529 !important;
  color: #fff !important;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color) !important;
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
}

/* ---------- Disabled States ---------- */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/* ---------- Icon alignment ---------- */
.btn i,
.btn svg {
  vertical-align: middle;
}

/* End of colors.css */