/* ------------------------------------------------------------------ */
/* Bootswatch theme colour tokens                                       */
/* Keep in sync with BOOTSWATCH_THEME (currently: united).             */
/* vendor/css/bootstrap.min.css redefines these on workspace pages;    */
/* this block makes them available on all other admin pages too.       */
/* ------------------------------------------------------------------ */
:root {
    --bs-primary:       #e95420;
    --bs-primary-rgb:   233, 84, 32;
    --bs-secondary:     #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-white:         #ffffff;

    /* Criteria-not-met badge — edit these to try different colour schemes.
       Values reference Bootstrap/Bootswatch theme vars with hardcoded fallbacks.
       Examples:
         Secondary grey: var(--bs-secondary) / var(--bs-white) / var(--bs-secondary)
         Danger red:     var(--bs-danger)    / var(--bs-white) / var(--bs-danger)    */
    --ppp-criteria-bg:     var(--bs-warning, #ffc107);
    --ppp-criteria-color:  var(--bs-dark, #212529);
    --ppp-criteria-border: var(--bs-warning, #ffc107);
}

.no-bullets {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* ------------------------------------------------------------------ */
/* Criteria-not-met badge / button                                     */
/* Used by criteria_issues_btn.html (button) and                       */
/* criteria_issues_icon.html (non-interactive span).                   */
/* ------------------------------------------------------------------ */

.ppp-criteria-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ppp-criteria-bg);
    color: var(--ppp-criteria-color);
    border: 1px solid var(--ppp-criteria-border);
    border-radius: 0.25rem;
    flex-shrink: 0;
}
span.ppp-criteria-badge {
    padding: 0.2rem;
    font-size: 0.8rem;
    line-height: 1;
}
button.ppp-criteria-badge {
    padding-inline: 0;
    width: calc(var(--bs-btn-padding-y) * 2 + var(--bs-btn-font-size) * var(--bs-btn-line-height) + var(--bs-btn-border-width, 1px) * 2);
}
button.ppp-criteria-badge:hover {
    background-color: var(--bs-light, #797f85);
    border-color: var(--bs-secondary, #6c757d);
    color: var(--ppp-criteria-color);
}

/* ------------------------------------------------------------------ */
/* Wagtail sidebar: Bootstrap/Bootswatch coloring                      */
/* #wagtail-sidebar ID prefix beats Wagtail's Tailwind hover classes.  */
/* --bs-* variables are set by the Bootswatch theme CSS.               */
/* ------------------------------------------------------------------ */

/* Hover state for all menu buttons and links */
#wagtail-sidebar .sidebar-menu-item__link:hover {
    background-color: var(--bs-primary);
    color: white;
    opacity: 1;
}

/* Active item (current page) */
#wagtail-sidebar .sidebar-menu-item--active > .sidebar-menu-item__link {
    background-color: var(--bs-secondary);
    color: white;
    opacity: 1;
}

/* Account/footer button hover */
#wagtail-sidebar .sidebar-footer__account:hover {
    background-color: var(--bs-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Wagtail sidebar: home icon scales with slim/collapsed state         */
/* ------------------------------------------------------------------ */

.sidebar-custom-branding i {
    display: block;
    font-size: 2rem;
    color: #ffffff;
    transition: font-size 0.2s ease;
}

/* When sidebar is collapsed to slim mode, shrink the house icon */
.sidebar--slim .sidebar-custom-branding i {
    font-size: 1.1rem;
}

/* ------------------------------------------------------------------ */
/* Likert block: pair scale fields on two rows                         */
/* ------------------------------------------------------------------ */
.rc-likert-block [data-contentpath="start"],
.rc-likert-block [data-contentpath="length"],
.rc-likert-block [data-contentpath="hintb"],
.rc-likert-block [data-contentpath="hintt"] {
    display: inline-block;
    width: 48%;
    vertical-align: top;
}