/* ========================================
   CUSTOM STYLES FOR PaymentsDataPublishing.App
   Extends GOV.UK Frontend Design System
   ======================================== */

/* Global font-family (ensures consistency across all browsers) */
body {
  font-family: "GDS Transport", arial, sans-serif;
}

/* ========================================
   MAIN WRAPPER — reduce default GOV.UK top padding
   GOV.UK Frontend sets padding-top: 40px on .govuk-main-wrapper.
   Reduced to 15px so the Back button sits closer to the phase banner.
   ======================================== */
.govuk-main-wrapper {
  padding-top: 15px;
}

/* ========================================
   NOTIFICATION BANNER (CDPDEL-1600)
   ======================================== */

/* Custom 18px font size for banner text */
.app-banner-text {
  font-size: 17px;
  line-height: 1.5;
}

/* Allow banner content to use full width - override GOV.UK default max-width */
.govuk-notification-banner__content {
  max-width: none !important;
}

.govuk-notification-banner__content .govuk-notification-banner__heading {
  max-width: none !important;
}

.govuk-notification-banner__content .govuk-body {
  max-width: none !important;
}

.govuk-notification-banner__content .govuk-list {
  max-width: none !important;
}

/* Ensure list items don't wrap unnecessarily */
.govuk-notification-banner__content .govuk-list > li {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ========================================
   BACK LINK + LANGUAGE SWITCHER ROW
   ======================================== */

/* Flex container so Back link stays left and language switcher goes right */
.app-back-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Language switcher: "English | Cymraeg" */
.app-language-switcher {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.25;
  gap: 2px;
}

.app-language-switcher__active {
  color: #0b0c0c;
}

.app-language-switcher__separator {
  color: #505a5f;
  padding: 0 2px;
}

.app-language-switcher__link {
  font-size: 16px;
}

/* Stack vertically on very small screens */
@media screen and (max-width: 320px) {
  .app-back-navigation {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ========================================
   SEARCH RESULTS & SORTING
   ======================================== */

/* Search results header with sort controls */
.app-results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

/* Search results heading - custom sizing per Figma */
.app-results-heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.11111111;
  margin: 0 0 10px 0;
}

/* Sort control - right aligned per Figma */
.app-sort-control {
  min-width: 280px;
  text-align: right;
}

.app-sort-control .govuk-label {
  text-align: right;
  display: block;
}

.app-sort-control .govuk-select {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .app-results-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .app-results-heading {
    font-size: 28px;
  }
  
  .app-sort-control {
    width: 100%;
    min-width: 100%;
    text-align: left;
  }
  
  .app-sort-control .govuk-label {
    text-align: left;
  }
}

/* ========================================
   FILTER SECTIONS (Left Column)
   ======================================== */

.app-filter-section {
  margin-bottom: 7px;
}

.app-filter-heading {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.app-filter-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  gap: 10px;
  width: 100%;
  height: 51px;
  background: #F3F2F1;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #0b0c0c;
}

.app-filter-toggle:hover {
  background: #e8e7e5;
}

.app-filter-toggle:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  background-color: #ffdd00;
}

/* Keep the same gray background when expanded - matching the border color */
.app-filter-toggle[aria-expanded="true"] {
  background: #F3F2F1;
}

.app-filter-toggle-icon {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* CSS-drawn chevron icon */
.app-filter-toggle-icon::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #0b0c0c;
  border-bottom: 2px solid #0b0c0c;
  transform: translate(-50%, -60%) rotate(45deg);
  transform-origin: center center;
}

.app-filter-toggle[aria-expanded="true"] .app-filter-toggle-icon {
  transform: rotate(180deg);
}

.app-filter-content {
  padding: 15px 10px;
  background: #ffffff;
  border-left: 1px solid #b1b4b6;
  border-right: 1px solid #b1b4b6;
  border-bottom: 1px solid #b1b4b6;
}

/* Bordered filter components (Payment value, Date range) - matching Payments.App style */
.app-filter-bordered {
  padding: 0 !important;
  background: #ffffff !important;
  position: relative !important;
  box-sizing: border-box !important;
  border-left: 10px solid #f3f2f1 !important;
  border-right: 10px solid #f3f2f1 !important;
  border-bottom: 10px solid #f3f2f1 !important;
}

/* Description text in gray header area */
.app-filter-description {
  background: #F3F2F1 !important;
  padding: 0px 12px 12px 6px !important;  /* Reduced left padding to match legend style */
  margin: 0 !important;
  border-bottom: 0.5px solid #d6d9db !important;
}

/* Remove border for description with no-border modifier (to prevent gray line) */
.app-filter-description--no-border {
  border-bottom: none !important;
}

/* Make details summary text blue (GOV.UK link color) for all date range filter sections */
.app-filter-description .govuk-details__summary-text,
.app-filter-field-section .govuk-details__summary-text {
  color: #1D70B8 !important; /* GOV.UK link blue */
}

/* Add 5px left space to Date range definitions arrow */
.app-filter-description .govuk-details {
  padding-left: 5px !important;
}

/* Remove bottom margin from details components inside filter sections */
.app-filter-description .govuk-details,
.app-filter-field-section .govuk-details {
  margin-bottom: 0 !important;
}

/* Remove the gray vertical bar from the details text content in date range filters */
.app-filter-field-section .govuk-details__text {
  padding-left: 0 !important;
  border-left: none !important;
  margin-bottom: 0 !important; /* Remove bottom margin to reduce white space */
}

/* re-add the gray vertical bar for nested details in contracting authority type definitions*/
.app-filter-field-section .govuk-details__text.nested-details {
  border-left: 5px solid #b1b4b6 !important;
  padding-left: 20px !important;
}

/* Ensure all filter text is 16px (labels, inputs, hints, error messages) */
.app-filter-field-section .govuk-label,
.app-filter-field-section .govuk-date-input__label,
.app-filter-field-section .govuk-input,
.app-filter-field-section .govuk-date-input__input,
.app-filter-field-section .govuk-hint,
.app-filter-field-section .govuk-error-message,
.app-filter-bordered .govuk-error-message {
  font-size: 16px !important;
}

.app-filter-bordered .govuk-fieldset {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
}

.app-filter-bordered .govuk-fieldset__legend--s {
  background: #F3F2F1 !important;
  border-bottom: 0.5px solid #d6d9db !important;
  padding: 12px !important;
  padding-left: 6px !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  position: relative !important;
}

.app-filter-field-section {
  padding: 15px 12px !important;
  margin: 0 !important;
  background: #ffffff !important;
  position: relative !important;
}

/* Add thick gray separator for sections that need visual separation (e.g. between Payment date and Published payment date) */
.app-filter-field-section--separator {
  border-top: 10px solid #f3f2f1 !important;
}

/* Reserve space for potential error bar on all date field groups to prevent layout shift */
.app-filter-field-section .govuk-details__text > div {
  border-left: 5px solid transparent !important; /* Reserve 5px space with transparent border */  
  margin-top: 0 !important; /* Remove margins to connect red bars */
}

/* Add spacing between From and To sections without breaking bar connection */
.app-filter-field-section .govuk-details__text > div:not(:first-child) {
  padding-top: 20px !important; /* Add space between sections (padding doesn't affect border) */
}

/* Red vertical bar on the left when there's an error - GOV.UK pattern */
.app-filter-field-section .govuk-details__text > div.govuk-form-group--error {
  border-left: 5px solid #d4351c !important; /* Replace transparent with red */
  padding-left: 15px !important; /* Same gap - no layout shift */
  margin-top: 0 !important; /* Ensure bars connect */
}

.app-filter-field-section .govuk-label {
  margin-bottom: 5px !important;
}

.app-filter-field-section .govuk-hint {
  margin-bottom: 10px !important;
  font-size: 16px !important;
}

.app-filter-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.app-filter-actions .govuk-button {
  margin-bottom: 0;
}

/* ========================================
   PAYMENT CARDS (Right Column)
   ======================================== */

.app-payment-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-payment-card__title {
  margin: 0 0 11px 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.app-payment-card__link {
  color: #1D70B8;
  text-decoration: underline;
}

.app-payment-card__link:hover {
  color: #003078;
  text-decoration-thickness: 3px;
}

.app-payment-card__link:focus {
  outline: 3px solid transparent;
  color: #0b0c0c;
  background-color: #ffdd00;
  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
  text-decoration: none;
}

.app-payment-card__organization {
  margin: 0 0 5px 0;
  font-size: 19px;
  line-height: 25px;
  font-weight: 400;
  color: #505A5F;
}

.app-payment-card__field {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  color: #0b0c0c;
}

.app-payment-card__field strong {
  font-weight: 700;
}

/* Section break between cards */
.app-payment-card-separator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 9px;
}

.app-payment-card-separator hr {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid #B1B4B6;
  margin: 0;
}

/* Pagination spacing */
.govuk-pagination {
  margin-top: 40px;
}

/* ========================================
   PAYMENT DETAILS PAGE
   ======================================== */

/* Summary list with 50/50 split between labels and values (as per Figma) */
.app-summary-list--50-50 .govuk-summary-list__key {
  width: 50%;
}

.app-summary-list--50-50 .govuk-summary-list__value {
  width: 50%;
}

.app-identifier-list {
  margin: 0;
}

.app-identifier-list__item {
  margin-bottom: 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-identifier-list__item:last-child {
  margin-bottom: 0;
}

.app-identifier-list--scrollable {
  max-height: 28rem;
  overflow-y: auto;
  padding-right: 10px;
}

@media screen and (max-width: 640px) {
  .app-identifier-list--scrollable {
    max-height: 20rem;
  }
}

/* ========================================
   CHANGES BANNER
   ======================================== */

/* Important banner header with blue background */
.govuk-notification-banner__header--important {
  background-color: #1d70b8;
  border-bottom: 1px solid #1d70b8;
}

.govuk-notification-banner__header--important .govuk-notification-banner__title {
  color: #ffffff;
}

/* Banner link styling to match notification banner design */
.govuk-notification-banner__link {
  color: #1d70b8;
  text-decoration: underline;
  font-weight: 400;
}

.govuk-notification-banner__link:hover {
  color: #003078;
  text-decoration-thickness: 3px;
}

.govuk-notification-banner__link:focus {
  outline: 3px solid transparent;
  color: #0b0c0c;
  background-color: #ffdd00;
  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
  text-decoration: none;
}

/* Spacing for banner within the page flow */
.govuk-notification-banner {
  margin-bottom: 30px;
}

/* Banner content list styling */
.govuk-notification-banner__content .govuk-list {
  margin-top: 15px;
  margin-bottom: 0;
}

.govuk-notification-banner__content .govuk-list > li {
  margin-bottom: 10px;
}

.govuk-notification-banner__content .govuk-list > li:last-child {
  margin-bottom: 0;
}

/* ========================================
   MODAL DIALOGS
   ======================================== */

/* Modal overlay */
.govuk-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: none;
  overflow-y: auto;
}

/* Modal dialog container */
.govuk-modal__dialog {
  position: relative;
  max-width: 800px;
  margin: 2rem auto;
  background-color: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}

/* Modal header */
.govuk-modal__header {
    padding: 18px 30px;
    border-bottom: 1px solid #b1b4b6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e8e7e5;
}

.govuk-modal__header .govuk-heading-m {
  color: #0b0c0c;
  margin-bottom: 0;
}

/* Modal close button */
.govuk-modal__close {
  background: none;
  border: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.govuk-modal__close:hover {
  background-color: #ffdd00;
  color: #0b0c0c;
}

.govuk-modal__close:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Modal body */
.govuk-modal__body {
  padding: 30px 30px 0px 30px;
  overflow-y: auto;
  flex: 1;
}

/* Modal footer */
.govuk-modal__footer {
  padding: 30px;
  /* border-top: 1px solid #b1b4b6; */
  background-color: #ffffff;
}

/* Search results list */
.buyer-search-results {
  border-top: 1px solid #b1b4b6;
  border-bottom: 1px solid #b1b4b6;
  margin-top: 20px;
}

.buyer-search-result-item {
  border-bottom: 1px solid #b1b4b6;
}

.buyer-search-result-item:last-child {
  border-bottom: none;
}

.buyer-search-result-item .govuk-checkboxes__item {
  width: 100%;
  margin: 0;
  padding: 5px 0;
  position: relative;
  display: block;
}

/* Hide native checkbox but keep it accessible */
.buyer-search-result-item .govuk-checkboxes__item .govuk-checkboxes__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
}

/* Label styling */
.buyer-search-result-item .govuk-checkboxes__item .govuk-checkboxes__label {
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  padding: 8px 15px 5px;
  display: inline-block;
  margin-bottom: 0;
  padding-left: 38px;
  position: relative;
}

/* Checkbox box - match supplier modal (24px x 24px) */
.buyer-search-result-item .govuk-checkboxes__item .govuk-checkboxes__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 2px solid #0b0c0c;
  background: #ffffff;
}

/* Checkmark - match supplier modal */
.buyer-search-result-item .govuk-checkboxes__item .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 5px;
  width: 14px;
  height: 7px;
  margin-top: -5px;
  transform: rotate(-45deg);
  border: solid;
  border-width: 0 0 3px 3px;
  border-top-color: transparent;
  opacity: 1;
  background: transparent;
}

/* Focus state */
.buyer-search-result-item .govuk-checkboxes__item .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
  border-width: 4px;
  outline: 3px solid transparent;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #ffdd00;
}

.buyer-search-result-item .govuk-checkboxes__item .buyer-search-result-name {
  /* font-weight: 700; */
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 5px;
  display: block;  
}

.buyer-search-result-item .govuk-checkboxes__item .buyer-search-result-ppon {
  font-size: 16px;
  color: #505a5f;
  line-height: 1.25;
  display: block;
}

/* Selected buyers tags */
.buyer-selected-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.buyer-selected-tag {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #0b0c0c;
  padding: 5px 10px;
  border: 2px solid #b1b4b6;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.buyer-selected-tag__name {
  margin-right: 10px;
}

.buyer-selected-tag__remove {
  background: none;
  border: 0;
  color: #0b0c0c;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.buyer-selected-tag__remove:hover {
  background-color: #ffdd00;
  color: #0b0c0c;
}

.buyer-selected-tag__remove:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Clear all selections button */
.buyer-clear-all {
  margin-top: 20px;
}

/* Selected buyers in filter panel */
.selected-buyers-list {
  padding-top: 15px;
}

.selected-buyers-list-separator {
  border-top: 1px solid #b1b4b6;
}

.selected-buyer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f3f2f1;
}

.selected-buyer-item:last-child {
  border-bottom: none;
}

.selected-buyer-name {
  font-size: 16px;
  line-height: 1.25;
  flex: 1;
  min-width: 0;              /* Allow flex item to shrink below its content size */
  overflow-wrap: break-word; /* Break long unspaced strings */
  word-break: break-word;    /* Fallback for older browsers */
}

.selected-buyer-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  margin-left: 16px; /* Ensure clear visual gap between buyer name and Remove button */
  cursor: pointer;
  text-decoration: underline;
  color: #1d70b8;
  font-size: 16px;
  flex-shrink: 0;
  white-space: nowrap; /* Keep "Remove" on one line */
}

.selected-buyer-remove:hover {
  color: #003078;
  text-decoration-thickness: 3px;
}

.selected-buyer-remove:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  background-color: #ffdd00;
  color: #0b0c0c;
}

/* ============================================
   SUPPLIER FILTER PANEL STYLES
   ============================================ */

/* Supplier type details - no left border/padding on outer details */
.supplier-type-details > .govuk-details__text {
  padding-left: 0 !important;
  border-left: none !important;
  margin-bottom: 0 !important;
}

/* Supplier type content wrapper - no padding or border */
.supplier-type-content {
  padding-left: 0 !important;
  border-left: none !important;
}

/* Supplier type definitions - ADD gray vertical bar */
.supplier-type-content > .govuk-details .govuk-details__text {
  padding-left: 20px !important;
  border-left: 5px solid #b1b4b6 !important;
  margin-bottom: 15px !important;
}

/* Align checkboxes to be inline with "Supplier type definitions" arrow */
.supplier-type-content > .govuk-checkboxes {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Ensure all text in supplier filter is 16px */
.app-filter-section:has(#open-supplier-modal) .govuk-details__summary-text,
.app-filter-section:has(#open-supplier-modal) .govuk-body,
.app-filter-section:has(#open-supplier-modal) .govuk-heading-s,
.app-filter-section:has(#open-supplier-modal) .govuk-checkboxes__label {
  font-size: 16px !important;
}

/* ============================================
   SUPPLIER SELECTOR STYLES
   ============================================ */

/* Supplier search label - bold with extra bottom margin */
.supplier-search-label {
  font-weight: 700 !important;
  margin-bottom: 15px !important;
}

/* Supplier search results */
.supplier-search-results {
  border-top: 1px solid #b1b4b6;
  border-bottom: 1px solid #b1b4b6;
  margin-top: 20px;
}

.supplier-search-result-item {
  border-bottom: 1px solid #b1b4b6;
}

.supplier-search-result-item:last-child {
  border-bottom: none;
}

.supplier-search-result-item .govuk-checkboxes__item {
  width: 100%;
  margin: 0;
  padding: 5px 0;
  position: relative;
  display: block;
}

/* Hide native checkbox but keep it accessible */
.supplier-search-result-item .govuk-checkboxes__item .govuk-checkboxes__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
}

/* Label styling */
.supplier-search-result-item .govuk-checkboxes__item .govuk-checkboxes__label {
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  padding: 8px 15px 5px;
  display: inline-block;
  margin-bottom: 0;
  padding-left: 38px;
  position: relative;
}

/* Checkbox box - Figma specs: 24x24px with 2px border */
.supplier-search-result-item .govuk-checkboxes__item .govuk-checkboxes__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 2px solid #0b0c0c;
  background: #ffffff;
}

/* Checkmark */
.supplier-search-result-item .govuk-checkboxes__item .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 5px;
  width: 14px;
  height: 7px;
  margin-top: -5px;
  transform: rotate(-45deg);
  border: solid;
  border-width: 0 0 3px 3px;
  border-top-color: transparent;
  opacity: 1;
  background: transparent;
}

/* Focus state */
.supplier-search-result-item .govuk-checkboxes__item .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
  border-width: 4px;
  outline: 3px solid transparent;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #ffdd00;
}

.supplier-search-result-item .govuk-checkboxes__item .supplier-search-result-name {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 5px;
  display: block;  
}

.supplier-search-result-item .govuk-checkboxes__item .supplier-search-result-identifiers {
  font-size: 16px;
  color: #505a5f;
  line-height: 1.25;
  display: block;
  margin-bottom: 3px;
}

.supplier-search-result-item .govuk-checkboxes__item .supplier-search-result-address {
  font-size: 16px;
  color: #626a6e;
  line-height: 1.25;
  display: block;
}

/* Selected suppliers tags */
.supplier-selected-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.supplier-selected-tag {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #0b0c0c;
  padding: 5px 10px;
  border: 2px solid #b1b4b6;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.supplier-selected-tag__name {
  margin-right: 10px;
}

.supplier-selected-tag__remove {
  background: none;
  border: 0;
  color: #0b0c0c;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.supplier-selected-tag__remove:hover {
  background-color: #ffdd00;
  color: #0b0c0c;
}

.supplier-selected-tag__remove:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Clear all selections button */
.supplier-clear-all {
  margin-top: 20px;
}

/* Selected suppliers in filter panel */
.selected-suppliers-list {
  margin-top: 15px;
  padding-top: 0;
}

.selected-suppliers-list .govuk-heading-s {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #b1b4b6;
}

.selected-supplier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f3f2f1;
}

.selected-supplier-item:last-child {
  border-bottom: none;
}

.selected-supplier-name {
  font-size: 16px;
  line-height: 1.25;
  flex: 1;
  min-width: 0;              /* Allow flex item to shrink below its content size */
  overflow-wrap: break-word; /* Break long unspaced strings (e.g. company registration numbers) */
  word-break: break-word;    /* Fallback for older browsers */
}

.selected-supplier-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  margin-left: 16px; /* Ensure clear visual gap between supplier name and Remove button */
  cursor: pointer;
  text-decoration: underline;
  color: #1d70b8;
  font-size: 16px;
  flex-shrink: 0;
  white-space: nowrap; /* Keep "Remove" on one line */
}

.selected-supplier-remove:hover {
  color: #003078;
  text-decoration-thickness: 3px;
}

.selected-supplier-remove:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  background-color: #ffdd00;
  color: #0b0c0c;
}

/* Responsive styles for mobile */
@media (max-width: 40.0625em) {
  .govuk-modal__dialog {
    margin: 1rem;
    max-width: none;
    max-height: calc(100vh - 2rem);
  }

  .govuk-modal__header,
  .govuk-modal__body,
  .govuk-modal__footer {
    padding: 20px;
  }
}

/* ================================================================
   Procurement Filter and Modal Styles
   ================================================================ */

/* Selected procurements in filter panel */
.selected-procurements-list {
  padding-top: 15px;
}

.selected-procurements-list-separator {
  border-top: 1px solid #b1b4b6;
}

.selected-procurement-group {
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.selected-procurement-group:last-child {
  border-bottom: none;
}

.selected-procurement-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
  color: #0b0c0c;
}

.selected-procurement {
  padding: 10px 0;
  border-top: 1px solid #b1b4b6;
  border-bottom: 1px solid #b1b4b6;
}

.selected-procurement .selected-procurement-name2{
  margin-bottom: 0px; 
}

.selected-procurement .selected-procurement-details2 {
  margin-bottom: 0px; 
  color: #656579;
}



.selected-contract-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f3f2f1;
}

.selected-contract-item:last-child {
  border-bottom: none;
}

.selected-contract-number {
  font-size: 16px;
  line-height: 1.25;
  flex: 1;
  min-width: 0;              /* Allow flex item to shrink below its content size */
  overflow-wrap: break-word; /* Break long unspaced strings */
  word-break: break-word;    /* Fallback for older browsers */
}

.selected-contract-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  color: #1d70b8;
  font-size: 16px;
  flex-shrink: 0;
}

.selected-contract-remove:hover {
  color: #003078;
  text-decoration-thickness: 3px;
}

.selected-contract-remove:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  background-color: #ffdd00;
  box-shadow: 0 -2px #ffdd00, 0 4px #0b0c0c;
  text-decoration: none;
}

/* Procurement modal: procurement search results */

.procurement-search-results {
  border-top: 1px solid #b1b4b6;
  border-bottom: 1px solid #b1b4b6;
  margin-top: 20px;
}

.procurement-search-result-item {
  border-bottom: 1px solid #b1b4b6;
}

.procurement-search-result-item:last-child {
  border-bottom: none;
}

.procurement-search-result-item .govuk-radios__item {
  width: 100%;
  margin: 0;
  padding: 5px 0;
  position: relative;
  display: block;
}

/* Hide native radio button but keep it accessible */
.procurement-search-result-item .govuk-radios__item .govuk-radios__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
}

/* Label styling */
.procurement-search-result-item .govuk-radios__item .govuk-radios__label {
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  padding: 8px 15px 5px;
  display: inline-block;
  margin-bottom: 0;
  padding-left: 38px;
  position: relative;
}

/* Radio button circle - 24x24px with 2px border */
.procurement-search-result-item .govuk-radios__item .govuk-radios__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 2px solid #0b0c0c;
  border-radius: 50%;
  background: #ffffff;
}

/* Selected state - filled circle */
.procurement-search-result-item .govuk-radios__item .govuk-radios__input:checked + .govuk-radios__label::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 7px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #0b0c0c;
  opacity: 1;
}

/* Focus state */
.procurement-search-result-item .govuk-radios__item .govuk-radios__input:focus + .govuk-radios__label::before {
  border-width: 4px;
  outline: 3px solid transparent;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #ffdd00;
}

.procurement-search-result-item .govuk-radios__item .procurement-result-name {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 5px;
  display: block;
}

.procurement-search-result-item .govuk-radios__item .procurement-result-details {
  font-size: 16px;
  color: #505a5f;
  line-height: 1.25;
  display: block;
  margin-bottom: 3px;
}

/* Procurement modal: selected contract tags */
.procurement-selected-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.procurement-selected-tag {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #0b0c0c;
  padding: 5px 10px;
  border: 2px solid #b1b4b6;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

.procurement-selected-tag__name {
  margin-right: 10px;
}

.procurement-selected-tag__remove {
  background: none;
  border: 0;
  color: #0b0c0c;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.procurement-selected-tag__remove:hover {
  background-color: #ffdd00;
  color: #0b0c0c;
}

.procurement-selected-tag__remove:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Clear all selections link */
.procurement-clear-all {
  margin-top: 15px;
  display: none; /* Hidden by JS when no selections */
}

.procurement-clear-all a {
  font-size: 16px;
}

/* Procurement modal: indent contract checkboxes under "Select all" */
#procurement-contracts-list {
  margin-left: 15px;
}