/* ==============================
   NAVIGATION
============================== */
/* Top-level navigation hover */
.menu-bar .nav-link:hover,
.menu-bar .nav-link:focus {
    background-color: transparent !important;
}

/* Profile dropdown trigger hover */
.menu-bar .nav-item.dropdown > .nav-link.dropdown-toggle:hover,
.menu-bar .nav-item.dropdown > .nav-link.dropdown-toggle:focus {
    background-color: transparent !important;
}

/* Remove focus outline/border from the profile dropdown container */
.menu-bar .nav-item,
.menu-bar .nav-item:focus,
.menu-bar .nav-item:active,
.menu-bar .nav-item.dropdown:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove focus outline/border from the profile dropdown trigger */
.menu-bar .nav-item .nav-link,
.menu-bar .nav-item .nav-link:focus,
.menu-bar .nav-item .nav-link:active,
.menu-bar .nav-item .nav-link.dropdown-toggle,
.menu-bar .nav-item .nav-link.dropdown-toggle:focus,
.menu-bar .nav-item .nav-link.dropdown-toggle:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove border on focused LI wrappers */
.menu-bar .nav-item.dropdown li:focus,
.menu-bar .nav-item.dropdown li:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Force Sign out submenu background to white (default and hover) */
.navbar-nav .dropdown-menu.show .dropdown-item,
.navbar-nav .dropdown-menu.show li,
.navbar-nav .dropdown-menu.show {
    background-color: white !important;
}

.navbar-nav .dropdown-menu.show .dropdown-item:hover,
.navbar-nav .dropdown-menu.show .dropdown-item:focus,
.navbar-nav .dropdown-menu.show li:hover,
.navbar-nav .dropdown-menu.show li:focus {
    background-color: white !important;
}

/* ==============================
   FORMS
============================== */
.edit-icon {
    font-size: 1.25rem;
    color: #429c49;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    margin-right: 8px;  /* Spacing if next to text */
}

.edit-icon:hover {
    color: #43631c;
}

.form-label {
    font-weight: normal;
}

/* Override Bootstrap Blue Focus Ring */
.form-select:focus, .btn:focus, .form-control:focus {
    border-color: #C3D9A1;
    box-shadow: 0 0 0 0.25rem rgba(195, 217, 161, 0.25);
    outline: none;
}

a.btn-primary[disabled],
a.btn-primary.disabled {
    pointer-events: none;
    background-color: #6c757d !important; /* Gray disabled */
    border-color: #6c757d !important;
    color: #ffffff !important; /* White text for contrast */
    opacity: 0.65;
    cursor: not-allowed;
}

/* ==============================
   BOOTSTRAP POP OVER
============================== */
.popover-header{ padding-top:.4rem; padding-bottom:.4rem; line-height:1.1; margin:0; }
.popover {
    max-width: min(420px, calc(100vw - 24px));
}

.popover .popover-body{
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ==============================
   MODAL WINDOW
============================== */
.btn-close {
    color: green;
}

/* ==============================
   LOADING SPINNER OVERLAY
============================== */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

#loader-overlay.hidden {
    display: none !important;
}

.loader-box {
    padding: 0;
    background: none;
    box-shadow: none;
}

.css-spinner {
    width: min(150px, 20vw);
    height: min(150px, 20vw);
    border: min(10px, 1.5vw) solid rgba(0, 166, 81, 0.2);
    border-top-color: #8ab458;
    border-radius: 50%;
    animation: css-spin 0.8s linear infinite;
}

@keyframes css-spin {
    to { transform: rotate(360deg); }
}

/* ==============================
   MISC
============================== */
@media (max-width: 768px) {
  .sectionBlockLayout .columnBlockLayout {
    min-width: 100% !important;
    width: 100% !important;
  }
}
