@charset "UTF-8";

/* Put this AFTER Bootstrap's CSS so it overrides */
:root {
  /* core brand */
  --bs-primary: #006747;
  --bs-primary-rgb: 0, 103, 71;
  --bs-secondary: #f7d117;
  --bs-secondary-rgb: 247, 209, 23;
  /* links on-brand */
  --bs-link-color: var(--bs-primary);
  /* fallback first, then try dynamic mix (ignored if unsupported) */
  --bs-link-hover-color: #00523a;
  --bs-link-hover-color: color-mix(in oklab, var(--bs-primary), black 12%);
  /* button hover/active brand shades */
  --brand-primary-hover: #00523a;
  --brand-primary-active: #004633;
  --brand-primary-hover: color-mix(in oklab, var(--bs-primary), black 12%);
  --brand-primary-active: color-mix(in oklab, var(--bs-primary), black 18%);
  --brand-secondary-hover: #e0bc0e;
  --brand-secondary-active: #ccab0a;
  --brand-secondary-hover: color-mix(in oklab, var(--bs-secondary), black 10%);
  --brand-secondary-active: color-mix(in oklab, var(--bs-secondary), black 16%);
}

/* Dark theme tweaks */
[data-bs-theme=dark] {
    --bs-primary: #0a8d64;
    --bs-primary-rgb: 10, 141, 100;
    --brand-primary-hover: color-mix(in oklab, var(--bs-primary), white 10%);
    --brand-primary-active: color-mix(in oklab, var(--bs-primary), white 16%);
    --brand-secondary-hover: color-mix(in oklab, var(--bs-secondary), white 10%);
    --brand-secondary-active: color-mix(in oklab, var(--bs-secondary), white 16%);
    --bs-link-hover-color: color-mix(in oklab, var(--bs-primary), white 12%);
    --bs-border-color: rgba(255, 255, 255, 0.15);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
}

/* Ensure native date/time picker icons match the active Bootstrap theme */
[data-bs-theme=light] {
    /* ReSharper disable once CssNotResolved */
  color-scheme: light;
}
[data-bs-theme=dark] {
    /* ReSharper disable once CssNotResolved */
    color-scheme: dark;
}

/* ── Form control focus ring ─────────────────────────────── */

.form-control:focus,
.form-select:focus {
    border-color: #006747;
    box-shadow: 0 0 0 0.25rem rgba(0, 103, 71, 0.25);
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    border-color: #0a8d64;
    box-shadow: 0 0 0 0.25rem rgba(10, 141, 100, 0.25);
}

/* ── Autocomplete active item ────────────────────────────── */

.capstone-autocomplete-active {
    background-color: #006747 !important;
}

[data-bs-theme=dark] .capstone-autocomplete-active {
    background-color: #0a8d64 !important;
}

/* ── Button brand overrides ──────────────────────────────── */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-opacity: .65;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--brand-secondary-hover);
  --bs-btn-hover-border-color: var(--brand-secondary-hover);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: var(--brand-secondary-active);
  --bs-btn-active-border-color: var(--brand-secondary-active);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

/* ── Nav tabs & pills brand overrides ────────────────────── */

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
}

.nav-tabs .nav-link:not(.active):hover {
  color: var(--bs-primary);
  border-color: transparent;
  /* ReSharper disable once CssNotResolved */
  /* ReSharper disable once InvalidValue */
  background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: var(--bs-primary);
  color: #fff;
}

.nav-pills .nav-link:not(.active):hover {
  color: var(--bs-primary);
  /* ReSharper disable once CssNotResolved */
  /* ReSharper disable once InvalidValue */
  background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}

.nav-pills .nav-link:not(.active) {
    /* ReSharper disable once CssNotResolved */
  color: var(--bs-body-color);
}

/* ── Nav tabs/pills disabled state during loading ────────── */

.nav-loading {
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.nav-loading .nav-link {
  cursor: not-allowed;
}

/* ── Dropdown brand hover ────────────────────────────────── */

.dropdown-item:focus,
.dropdown-item:hover {
    /* ReSharper disable once CssNotResolved */
    color: var(--bs-body-color) !important;
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background-color: color-mix(in srgb, var(--bs-primary) 8%, transparent) !important;
}

[data-bs-theme=dark] .dropdown-item:focus,
[data-bs-theme=dark] .dropdown-item:hover {
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once InvalidValue */
    background-color: color-mix(in srgb, var(--bs-primary) 20%, transparent) !important;
}

/* ── Dark mode enhancements ──────────────────────────────── */

[data-bs-theme=dark] .card {
    /* ReSharper disable once RequiresFallbackColor */
    /* ReSharper disable once Redundant */
    --bs-card-bg: rgba(255, 255, 255, 0.05);
    /* ReSharper disable once RequiresFallbackColor */
    /* ReSharper disable once Redundant */
    --bs-card-border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .shadow,
[data-bs-theme=dark] .shadow-sm {
    /* ReSharper disable once RequiresFallbackColor */
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme=dark] .navbar-dark {
    /* ReSharper disable once RequiresFallbackColor */
    /* ReSharper disable once Redundant */
    --bs-navbar-color: rgba(255, 255, 255, 0.85);
    /* ReSharper disable once RequiresFallbackColor */
    /* ReSharper disable once Redundant */
    --bs-navbar-hover-color: rgba(255, 255, 255, 1);
    /* ReSharper disable once RequiresFallbackColor */
    /* ReSharper disable once Redundant */
    --bs-navbar-brand-color: rgba(255, 255, 255, 0.9);
}

/* Force navbar dropdowns to float above content on all screen sizes */
.navbar .dropdown-menu {
  position: absolute;
}

/* ── Portal card hover effect ────────────────────────────── */

.portalCards {
  border: 1px solid var(--bs-border-color);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
  will-change: transform;
}

.portal-card-header {
  background-color: var(--bs-primary);
  color: #fff;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  margin: -0.5rem -0.5rem 0.75rem -0.5rem;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.portalCards.p-3 > .portal-card-header:first-child {
  margin: -1rem -1rem 0.75rem -1rem;
  border-radius: 0.375rem 0.375rem 0 0;
}

.portal-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.portalCards:hover {
    transform: translateY(-5px);
    /* ReSharper disable once CssNotResolved */
    box-shadow: 0 0.5rem 1rem #212529 !important;
    box-shadow: 0 0.5rem 1rem rgba(33, 37, 41, 0.15) !important;
    border-color: var(--bs-primary);
}

.portalCards a {
  text-decoration: none;
}

.portalCards a:not(.btn):not(.no-underline):hover {
  text-decoration: underline !important;
}

/* ── Index card (menu / dashboard pages) ─────────────────── */

.capstone-index-card {
    border: 1px solid var(--bs-border-color);
    /* ReSharper disable once CssNotResolved */
    /* ReSharper disable once ValueShouldHaveUnits */
    /* ReSharper disable once RequiresFallbackColor */
    box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    will-change: transform;
    position: relative;
}

    .capstone-index-card:hover {
        transform: translateY(-5px);
        /* ReSharper disable once CssNotResolved */
        /* ReSharper disable once ValueShouldHaveUnits */
        /* ReSharper disable once RequiresFallbackColor */
        box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
        border-color: var(--bs-primary);
    }

.capstone-index-card .card-body {
  padding: 2rem;
}

.capstone-index-card .btn {
  min-width: 120px;
}

/* ── Non-production navbar accent ────────────────────────── */

.navbar-preprod {
  border-bottom: 3px solid #e8a317 !important;
}

/* ── Content fade-in ────────────────────────────────────── */

main {
  animation: capstone-fade-in 0.3s ease-in;
}

@keyframes capstone-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Test environment banner ─────────────────────────────── */

.test-environment-banner {
  background-color: #e8a317;
  color: #000;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0;
  position: sticky;
  top: 0;
  z-index: 1050;
}

/* ── Offcanvas menu heading sizes ───────────────────────── */
/* Real heading levels for screen-reader hierarchy; visual styling kept compact
   so the menu doesn't look like a content page. */

.offcanvas-section-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.25rem;
}

.offcanvas-group-title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.25rem;
}

/* ── Alternate navbar border ─────────────────────────────── */

.altNavBar {
  border-top: 4px solid var(--bs-primary);
  border-bottom: 4px solid var(--bs-primary);
}

/* ── Enterprise Services alert color ─────────────────────── */

.alert-enterpriseServices {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ── Utility classes ─────────────────────────────────────── */

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

.hidden {
  display: none;
}

.visible {
  display: block;
}