:root {
    --custom-cyan: 0, 188, 212;
    --bs-cyan: #00bcd4;
    /* base */
    --bs-cyan-hover: #00a6be;
    /* hover (≈ -10%) */
    --bs-cyan-active: #008f9f;
    /* active (darker) */
    --bs-cyan-contrast: #ffffff;
    /* text color on cyan */
    --bs-cyan-focus: 0 0 0.4rem rgba(0, 188, 212, 0.25);
    /* focus ring */
    /* New disabled colors */
    --bs-cyan-disabled: #b2ebf2;
    /* lighter cyan background */
    --bs-cyan-disabled-border: #81d4fa;
    /* softer border */
    --bs-cyan-disabled-text: #9ec0c4;
    /* faint text */

    --bs-success-light: #4caf50;          /* base */
  --bs-success-light-hover: #43a047;    /* hover */
  --bs-success-light-active: #388e3c;   /* active */
  --bs-success-light-contrast: #ffffff; /* text on green */
  --bs-success-light-disabled: #c8e6c9; /* bg when disabled */
  --bs-success-light-disabled-border: #a5d6a7;
  --bs-success-light-disabled-text: #e8f5e9;
}

.table-active-cyan {
    background-color: rgba(var(--custom-cyan), 0.1) !important;
}

.bd-navbar::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    content: "";
    background-image: linear-gradient(to bottom, rgba(var(--custom-cyan), 1), rgba(var(--custom-cyan), .9));
}

.bd-sidebar {
    border-radius: var(--bs-border-radius-xl) !important;
    margin: 10px;
}

.bd-links-link:hover {
    background-color: rgba(var(--custom-cyan), .1);
}

.bd-links-link.active {
    background-color: rgba(var(--custom-cyan), .85);
}

.bd-links-link:focus {
    background-color: rgba(var(--custom-cyan), .25);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color) !important;
    background-color: rgba(var(--custom-cyan), .1) !important;
}

.custom-breadcrumb a {
    color: rgb(var(--custom-cyan));
}

.bg-cyan {
    background-color: var(--bs-cyan) !important;
}

.bg-cyan-rgb {
    background-color: rgba(var(--custom-cyan), .05);
}

/* cyan-buttons.css
   Usage: <button class="btn btn-cyan">Cyan</button>
*/

/* Solid button */
.btn-success-light {
  --bs-btn-bg: var(--bs-success-light);
  --bs-btn-border-color: var(--bs-success-light);
  --bs-btn-color: var(--bs-success-light-contrast);

  --bs-btn-hover-bg: var(--bs-success-light-hover);
  --bs-btn-hover-border-color: var(--bs-success-light-hover);

  --bs-btn-active-bg: var(--bs-success-light-active);
  --bs-btn-active-border-color: var(--bs-success-light-active);

  --bs-btn-disabled-bg: var(--bs-success-light-disabled);
  --bs-btn-disabled-border-color: var(--bs-success-light-disabled-border);
  --bs-btn-disabled-color: var(--bs-success-light-disabled-text);

  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}

/* keep focus ring */
.btn-success-light:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(76, 175, 80, 0.3);
}

.btn-success-light:hover {
  background-color: var(--bs-success-light-hover);
  border-color: var(--bs-success-light-hover);
  color: var(--bs-success-light-contrast);
}

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

/* Disabled */
.btn-success-light:disabled,
.btn-success-light.disabled {
  background-color: var(--bs-success-light-disabled);
  border-color: var(--bs-success-light-disabled-border);
  color: var(--bs-success-light-disabled-text);
  opacity: 1 !important;
  pointer-events: none;
  box-shadow: none;
}

/* Outline variant */
.btn-outline-success-light {
  color: var(--bs-success-light);
  background-color: transparent;
  border-color: var(--bs-success-light);
}

.btn-outline-success-light:hover {
  color: var(--bs-success-light-contrast);
  background-color: var(--bs-success-light);
  border-color: var(--bs-success-light);
}

/* Background utility */
.bg-success-light {
  background-color: var(--bs-success-light) !important;
  color: var(--bs-success-light-contrast) !important;
}

.border-success-light {
  border-color: var(--bs-success-light) !important;
}

/* Primary solid cyan button */
.btn-cyan {
    --bs-btn-bg: var(--bs-cyan);
    --bs-btn-border-color: var(--bs-cyan);
    --bs-btn-color: var(--bs-cyan-contrast);
    --bs-btn-hover-bg: var(--bs-cyan-hover);
    --bs-btn-hover-border-color: var(--bs-cyan-hover);
    --bs-btn-active-bg: var(--bs-cyan-active);
    --bs-btn-active-border-color: var(--bs-cyan-active);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.text-cyan, .nav-panel .nav-link {
    color: var(--bs-cyan);
}

.border-cyan {
    border-color: var(--bs-cyan) !important;
}

/* Hover / focus / active states */
.btn-cyan:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-color);
    text-decoration: none;
}

.btn-cyan:active,
.btn-cyan.active {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: none;
}

/* Keyboard focus (accessible ring) */
.btn-cyan:focus-visible {
    outline: none;
    box-shadow: var(--bs-cyan-focus);
}

/* Disabled */
.btn-cyan:disabled,
.btn-cyan.disabled {
    opacity: 0.6;
    pointer-events: none;
    box-shadow: none;
}

/* Outline variant */
.btn-outline-cyan {
    color: var(--bs-cyan);
    background-color: transparent;
    border-color: var(--bs-cyan);
}

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

/* Link-style variant (no border) */
.btn-cyan-link {
    color: var(--bs-cyan);
    background: transparent;
    border: 0;
    padding: 0.25rem 0.5rem;
}

.nav-underline .nav-link.active, .nav-underline .show>.nav-link {
    border-bottom: 3px solid rgba(var(--custom-cyan), 1) !important;
}

.btn-cyan-link:hover,
.btn-cyan-link:focus {
    color: var(--bs-cyan-hover);
    text-decoration: underline;
}

/* Small visual polish for icon buttons */
.btn-cyan .bi,
/* bootstrap icons if used */
.btn-outline-cyan .bi {
    vertical-align: -0.125em;
    margin-right: 0.35rem;
}

/* Disabled for solid cyan button */
.btn-cyan:disabled,
.btn-cyan.disabled {
  background-color: var(--bs-cyan-disabled) !important;
  border-color: var(--bs-cyan-disabled-border) !important;
  color: var(--bs-cyan-disabled-text) !important;
  opacity: 1 !important; /* remove default Bootstrap fade */
  pointer-events: none;
  box-shadow: none;
}

/* Disabled for outline cyan */
.btn-outline-cyan:disabled,
.btn-outline-cyan.disabled {
  background-color: transparent !important;
  border-color: var(--bs-cyan-disabled-border) !important;
  color: var(--bs-cyan-disabled-border) !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* Disabled for cyan link style */
.btn-cyan-link:disabled,
.btn-cyan-link.disabled {
  color: var(--bs-cyan-disabled-border) !important;
  opacity: 1 !important;
  pointer-events: none;
}