.search-product-web {
  display: flex;
  align-items: center;
  gap: 4px; /* --spacing/spacing-02 */
  padding-right: 4px; /* --spacing/spacing-02 */
  width: 100%;
  background-color: white; /* --ui/background/low-secondary */
  border: 1px solid #d8e3e9; /* --ui/line/border-02 */
  border-radius: 12px; /* --radius/radius-04 */
  box-sizing: border-box;
  margin-bottom:20px;
}

.search-input-field {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 0; /* --spacing/spacing-0 */
  padding: 4px 0 4px 6px; /* top/bottom 14px, left --spacing/spacing-05 */
  min-width: 0;
}

  /* Target the actual input inside the container */
  .search-input-field input {
    border: none !important;
    outline: none !important;
    flex: 1;
    background: transparent;
  }

    /* Explicitly remove border/outline on focus */
    .search-input-field input:focus {
      border: none !important;
      outline: none !important;
      box-shadow: none;
    }


  .search-input::placeholder {
    color: #778287;
  }

  .search-input:not(:placeholder-shown) {
    color: #1a2b34; /* readable text once user types */
  }

  /* Remove default clear button in IE/Edge */
  .search-input::-ms-clear,
  .search-input::-webkit-search-cancel-button {
    display: none;
  }


.search-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;  
  color: #2563eb;
  transition: background-color 0.15s ease;
}


.store-list {
  display: flex;
  flex-direction: column;
  max-height: 300px; /* fill parent */
  overflow-y: auto; /* scroll content */
  padding-right: 8px; /* optional */
}


.store-section {
  flex: 0 0 auto;
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}


.store-section--expanded {
  flex: 0 0 auto;
}



.store-header {
  display: flex;
  align-items: center;
  gap: 8px; /* --spacing/spacing-03 */
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

  .store-header:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
  }


.store-info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.store-name {
  display: block;
  height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  /* Heading/07 */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #2a2e30;
  margin-bottom:5px;
}

.store-subtitle {
  display: block;
  width: 100%;
  /* Body/02 - Compact */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: 0.16px;
  color: #434b4f; /* --text/secondary */
}

.store-subtitle--danger {
  color: #db232d; /* --text/savings+danger  (0/N case) */
}


.chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.dept-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  margin-top:5px;
 
}

.dept-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dept-name {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Detail/Detail */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.32px;
  color: #434b4f;
}


.dept-tag {
  display: inline-flex;
  gap: 4px; /* --spacing/spacing-02 */
  padding: 0 4px; /* --spacing/spacing-02 */
  flex-shrink: 0;
  border-radius: 4px; /* --radius/radius-02 */
  /* Heading/09 */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
}

.dept-tag--completed {
  background-color: #2e8318; /* --tag/green */
  color: #ffffff; /* --tag/white */
}

.dept-tag--not-started {
  background-color: #db232d; /* --tag/red */
  color: #ffffff; /* --tag/white */
}

.dept-tag--in-progress {
  background-color: #8de3fd; /* --tag/cyan */
}

/* Width of the scrollbar */
::-webkit-scrollbar {
  width: 10px !important;
  border-radius:99px !important;
}

/* Track (background) */
::-webkit-scrollbar-track {
  background: #D8E3E9 !important;
  border-radius: 10px !important;
}

/* Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
  background: #97A3AA !important;
  border-radius: 99px !important;
  height:100px !important;
}

  /* Thumb on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #97A3AA !important;
  }


/* ── Outer card ────────────────────────────────────────────────── */
.recount-section {
  display: flex;
  flex-direction: column;
  gap: 24px; /* --spacing/spacing-07 */
  align-items: center;
  padding: 24px; /* --spacing/spacing-07 */
  width: 100%;
  background-color: #f5f9fb; /* --ui/background/low-secondary */
  border: 1px solid #d8e3e9; /* --ui/line/border-02 */
  border-radius: 8px; /* --radius/radius-03 */
  box-sizing: border-box;
}

/* ── Top section ───────────────────────────────────────────────── */
.recount-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ── Heading block ─────────────────────────────────────────────── */
.recount-heading-block {
  display: flex;
  align-items: flex-start;
  padding-bottom: 8px; /* --spacing/spacing-03 */
  width: 100%;
}

.recount-config-heading {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.recount-title {
  margin: 0;
  /* Heading/06 */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0;
  color: #111928; /* --gray/900 */
}

.recount-subtitle {
  margin: 0;
  /* Body/01 - Compact */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.16px;
  color: #434b4f; /* --text/secondary */
}

/* ── Filter / action row ───────────────────────────────────────── */
.recount-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 32px; /* --spacing/spacing-08 */
  width: 100%;
  flex-wrap: wrap;
}

/* ── Individual field (label + control) ────────────────────────── */
.recount-field {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px; /* --spacing/spacing-03 */
  min-width: 160px;
}

.recount-label {
  /* Body/02 - Compact */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17.5px;
  letter-spacing: 0.16px;
  color: #2a2e30;
}

.recount-required-black {
  color:black;
}

.recount-required {
  color: #db232d;
  margin-left: 5px;
  display:inline-block;

}

/* ── Radzen dropdown overrides ─────────────────────────────────── */
.recount-dropdown {
  border: 1px solid #97a3aa !important; /* --ui/line/border-01 */
  border-radius: 12px !important; /* --radius/radius-04  */
  background: #ffffff;
  padding: 12px 16px; /* --spacing/spacing-04 / -05 */
  height: 48px;
}

  .recount-dropdown .rz-dropdown .rz-placeholder,
  .recount-dropdown .rz-dropdown .rz-dropdown-label {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.16px;
    color: #778287;
  }

    .recount-dropdown .rz-dropdown .rz-dropdown-label:not(:empty) {
      color: #2a2e30;
    }

/* ── Product search box ────────────────────────────────────────── */
.recount-search-box {
  display: flex;
  align-items: center;
  gap: 4px; /* --spacing/spacing-02 */
  padding-right: 4px;
  height: 48px;
  background: #ffffff;
  border: 1px solid #97a3aa; /* --ui/line/border-01 */
  border-radius: 12px; /* --radius/radius-04 */
  box-sizing: border-box;
  overflow: hidden;
  min-width:400px;
}

.recount-search-input {
  flex: 1 0 0;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  background: transparent;
  padding: 14px 0 14px 16px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.16px;
  color: #778287;
}

  .recount-search-input::placeholder {
    color: #778287;
  }

  .recount-search-input:not(:placeholder-shown) {
    color: #2a2e30;
  }

.recount-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent; 
}


/* ── Action buttons ────────────────────────────────────────────── */
.recount-actions {
  display: flex;
  align-items: center;
  gap: 24px; /* --spacing/spacing-07 */
  flex-shrink: 0;
}

.recount-btn-add {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

.recount-btn-clear {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Bottom section ────────────────────────────────────────────── */
.recount-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px; /* --spacing/spacing-05 */
  align-items: flex-start;
  padding-top: 24px; /* --spacing/spacing-07 */
  border-top: 1px solid #97a3aa; /* --ui/line/border-01 */
  width: 100%;
  box-sizing: border-box;
}

.recount-selected-heading {
  margin: 0;
  /* Heading/07 */
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0;
  color: #2a2e30;
}

/* ── Data grid ─────────────────────────────────────────────────── */
.recount-grid {
  width: 100%;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

  .recount-grid th {
    background-color: #D7EAFF !important;
  }
/* ── Submit row ────────────────────────────────────────────────── */
.recount-submit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.recount-btn-submit {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
}


.validation-error {
  color: #DB232D;
}
.recount-search-input-error{
      border: 1px solid #DB232D !important;
}
.recount-trash-icon {
  width: 16px;
  height: 18px;
}