/* Kypson brand palette */
:root {
  --kypson-hero-teal: #148a97;
  --kypson-deep-teal: #0f6f79;
  --kypson-aqua: #2bbfc8;
  --kypson-charcoal: #2c3137;
  --kypson-soft-grey: #e7ebed;
  --kypson-white: #ffffff;

  --bs-primary: var(--kypson-hero-teal);
  --bs-primary-rgb: 20, 138, 151;
  --bs-primary-text-emphasis: #0a5760;
  --bs-primary-bg-subtle: #d4eef1;
  --bs-primary-border-subtle: #a9dde3;
  --bs-link-color: var(--kypson-hero-teal);
  --bs-link-color-rgb: 20, 138, 151;
  --bs-link-hover-color: var(--kypson-deep-teal);
  --bs-link-hover-color-rgb: 15, 111, 121;
  --bs-focus-ring-color: rgba(20, 138, 151, 0.25);
  --bs-heading-color: var(--kypson-charcoal);
  --bs-border-color: var(--kypson-soft-grey);
  --bs-light: var(--kypson-soft-grey);
  --bs-warning: var(--kypson-deep-teal);
  --bs-warning-rgb: 15, 111, 121;
  --bs-warning-text-emphasis: #0a5760;
  --bs-warning-bg-subtle: #d4eef1;
  --bs-warning-border-subtle: #a9dde3;
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #7dd4dc;
  --bs-primary-bg-subtle: #0a3a40;
  --bs-primary-border-subtle: #148a97;
  --bs-link-color: #7dd4dc;
}

.brand-logo .brand-title {
  max-width: none !important;
}

/* Loaded after Acara theme — sidebar active state (expanded sidebar only) */
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li.mm-active > a .nav-text {
  color: var(--kypson-deep-teal) !important;
}

.deznav .metismenu > li.mm-active > a i {
  color: var(--kypson-hero-teal) !important;
}

/* Primary buttons — ensure brand teal even when Acara hardcodes coral */
.btn-primary {
  --bs-btn-bg: var(--kypson-hero-teal);
  --bs-btn-border-color: var(--kypson-hero-teal);
  --bs-btn-hover-bg: var(--kypson-aqua);
  --bs-btn-hover-border-color: var(--kypson-aqua);
  --bs-btn-active-bg: var(--kypson-deep-teal);
  --bs-btn-active-border-color: var(--kypson-deep-teal);
  --bs-btn-disabled-bg: var(--kypson-hero-teal);
  --bs-btn-disabled-border-color: var(--kypson-hero-teal);
}

.btn-outline-primary {
  --bs-btn-color: var(--kypson-hero-teal);
  --bs-btn-border-color: var(--kypson-hero-teal);
  --bs-btn-hover-bg: var(--kypson-hero-teal);
  --bs-btn-hover-border-color: var(--kypson-hero-teal);
  --bs-btn-active-bg: var(--kypson-deep-teal);
  --bs-btn-active-border-color: var(--kypson-deep-teal);
  --bs-btn-disabled-color: var(--kypson-hero-teal);
  --bs-btn-disabled-border-color: var(--kypson-hero-teal);
}

/* Icon action buttons — center Font Awesome glyphs inside Bootstrap buttons */
.btn.btn-icon-only {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.btn.btn-icon-only > i.fa,
.btn.btn-icon-only .action-icon-button__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  line-height: 1 !important;
  margin: 0;
}

.btn.btn-icon-only > i.fa::before,
.btn.btn-icon-only .action-icon-button__icon > i::before {
  display: block;
  line-height: 1;
}

/* Clear click / hover feedback for all portal buttons */
.content-body .btn:not(:disabled):not(.disabled) {
  cursor: pointer;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease,
    border-color 0.14s ease,
    filter 0.14s ease;
}

.content-body .btn:not(:disabled):not(.disabled):not(.btn-icon-only):active {
  transform: scale(0.97);
}

.content-body .btn.btn-primary:not(:disabled):not(.disabled):active {
  filter: brightness(0.9);
}

.content-body .btn.btn-outline-primary:not(:disabled):not(.disabled):hover,
.content-body .btn.btn-outline-secondary:not(:disabled):not(.disabled):hover,
.content-body .btn.btn-outline-info:not(:disabled):not(.disabled):hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Status badges — replace Acara coral warning/primary tints with Kypson teal */
.badge-warning {
  background-color: var(--kypson-deep-teal) !important;
}

.light.badge-warning {
  background-color: var(--bs-warning-bg-subtle) !important;
  color: var(--kypson-deep-teal) !important;
}

.light.badge-primary {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--kypson-hero-teal) !important;
}

.text-warning {
  color: var(--kypson-deep-teal) !important;
}

.alert-warning {
  background-color: var(--bs-warning-bg-subtle) !important;
  border-color: var(--bs-warning-border-subtle) !important;
  color: var(--kypson-deep-teal) !important;
}

.bg-warning {
  background-color: var(--kypson-hero-teal) !important;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--kypson-deep-teal);
  --bs-btn-border-color: var(--kypson-deep-teal);
  --bs-btn-hover-bg: var(--kypson-aqua);
  --bs-btn-hover-border-color: var(--kypson-aqua);
  --bs-btn-active-bg: var(--kypson-hero-teal);
  --bs-btn-active-border-color: var(--kypson-hero-teal);
  --bs-btn-disabled-bg: var(--kypson-deep-teal);
  --bs-btn-disabled-border-color: var(--kypson-deep-teal);
}

.btn-outline-warning {
  --bs-btn-color: var(--kypson-deep-teal);
  --bs-btn-border-color: var(--kypson-deep-teal);
  --bs-btn-hover-bg: var(--kypson-deep-teal);
  --bs-btn-hover-border-color: var(--kypson-deep-teal);
  --bs-btn-active-bg: var(--kypson-hero-teal);
  --bs-btn-active-border-color: var(--kypson-hero-teal);
  --bs-btn-disabled-color: var(--kypson-deep-teal);
  --bs-btn-disabled-border-color: var(--kypson-deep-teal);
}

/* Form controls — replace leftover Acara coral focus rings and radio fills */
.form-control:focus,
.form-select:focus {
  border-color: var(--kypson-aqua) !important;
  box-shadow: 0 0 0 0.25rem rgba(20, 138, 151, 0.25) !important;
}

.form-check-input {
  border-color: #bebebe;
}

.form-check-input:focus {
  border-color: var(--kypson-aqua) !important;
  box-shadow: 0 0 0 0.25rem rgba(20, 138, 151, 0.25) !important;
}

.form-check-input:checked {
  background-color: var(--kypson-hero-teal) !important;
  border-color: var(--kypson-hero-teal) !important;
}

.form-check-input:checked[type="radio"] {
  background-color: var(--kypson-hero-teal) !important;
  border-color: var(--kypson-hero-teal) !important;
}

.form-check-input:checked[type="checkbox"]:indeterminate,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--kypson-hero-teal) !important;
  border-color: var(--kypson-hero-teal) !important;
}

.toggle-switch .form-check-input:checked {
  background: var(--bs-primary-bg-subtle) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--kypson-hero-teal) !important;
  border-color: var(--kypson-hero-teal) !important;
}