/*
 * App styles, loaded after the Enabel theme (assets/app.js). Theme colours come
 * from @enabel/enabel-bootstrap-theme/dist/css/variables.min.css (--enabel-*).
 */

:root {
  /* --enabel-secondary-purple as an RGB triplet, for the opacity utilities. */
  --app-purple-rgb: 116, 43, 115;
}

/* Purple utilities: the theme ships no `purple` theme colour. Unlike
   Bootstrap's own, they do not reset the opacity variable: this file loads
   after the theme, so the reset would override `text-opacity-*`/`bg-opacity-*`. */
.text-purple {
  color: rgba(var(--app-purple-rgb), var(--bs-text-opacity, 1)) !important;
}

.bg-purple {
  background-color: rgba(var(--app-purple-rgb), var(--bs-bg-opacity, 1)) !important;
  color: #fff;
}

.link-purple {
  color: rgb(var(--app-purple-rgb)) !important;
  text-decoration-color: rgba(var(--app-purple-rgb), 0.5) !important;
}

.link-purple:hover,
.link-purple:focus {
  color: color-mix(in srgb, rgb(var(--app-purple-rgb)), black 20%) !important;
}

/* Accordion: neutral grey for the open item instead of the primary tint. */
.accordion {
  --bs-accordion-active-color: #212529;
  --bs-accordion-active-bg: #f2f2f2;
  --bs-accordion-btn-focus-box-shadow: none;
}

/* Marque de la navbar : le composant Enabel:Ux:Navbar ne rend qu'un logo suivi
   d'un nom, alors que le parc superpose le nom de l'organisation et celui de
   l'application. Le bloc `brand` est donc surchargé dans
   templates/default/_header.html.twig, et ces styles l'accompagnent. */
.navbar {
  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    &:hover {
      color: #fff;
      opacity: 0.9;
    }
  }

  .brand-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    object-fit: contain;
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .brand-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
  }

  .brand-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.05em;
  }

  @media (max-width: 768px) {
    .brand-icon {
      width: 2.5rem;
      height: 2.5rem;
    }

    .brand-title {
      font-size: 1.125rem;
    }
  }
}

.rating {
  .checked {
    color: orange;
  }

  .unchecked {
    color: var(--enabel-cool-gray2);
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: var(--bs-dark);

  &.active {
    background: var(--bs-light);
    color: var(--bs-primary);
  }
}

.sidebar .nav-link:hover {
  background: var(--bs-light);
  color: var(--bs-primary);
}

.subquestion-margin-left {
  margin-left: 2rem;
}

.subquestion-padding-left {
  padding-left: 2rem !important;
}

legend.col-form-label.required::after {
  color: var(--enabel-primary-red);
  content: " * ";
}

.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

ul.contacts {
  list-style-type: none;
}

.pager .list-group-item {
  display: inline;
  border: 0;
}

.iti {
  position: relative;
  display: block;
}

.preamble-radio-buttons div {
  display: inline-block;
  width: 100px;
}