/* WhiteCoat Hub — Shared combobox + date input styles
 * shadcn/Radix-inspired aesthetic, vanilla implementation.
 * Used by payment-request.html, index.html, and any form needing a dropdown.
 * Respects host page CSS variables: --cyan, --indigo, --text-dark, --text-mid, --border.
 */

/* ---------- Combobox ---------- */

.combobox-wrap { position: relative; }

.combobox-wrap input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 36px 9px 12px;
  border: 1px solid var(--border, #EAECF0);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-dark, #1F2937);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combobox-wrap input[type="text"]:hover {
  border-color: #D0D5DD;
}
.combobox-wrap input[type="text"]:focus {
  border-color: var(--cyan, #00ADEE);
  box-shadow: 0 0 0 3px rgba(0, 173, 238, 0.18);
}
.combobox-wrap input[type="text"]::placeholder {
  color: var(--text-mid, #6B7280);
  font-size: 13px;
}
.combobox-wrap input[type="text"].err,
.combobox-wrap input[type="text"].error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.combo-toggle {
  position: absolute;
  right: 2px; top: 2px; bottom: 2px;
  width: 32px;
  border: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-mid, #6B7280);
  border-radius: 8px;
  transition: color 0.15s, background 0.15s, transform 0.18s cubic-bezier(.2,.8,.2,1);
}
.combo-toggle:hover {
  color: var(--text-dark, #1F2937);
  background: rgba(16, 24, 40, 0.04);
}
.combo-toggle svg {
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1);
}
/* Rotate chevron when list is open (modern browsers via :has) */
.combobox-wrap:has(.combo-list.open) .combo-toggle svg {
  transform: rotate(180deg);
}

.combo-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border, #EAECF0);
  border-radius: 10px;
  box-shadow:
    0 10px 15px -3px rgba(16, 24, 40, 0.08),
    0 4px 6px -4px rgba(16, 24, 40, 0.05);
  max-height: 240px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  list-style: none;
  padding: 4px;
  margin: 0;
  transform-origin: top center;
}
.combo-list.open {
  display: block;
  animation: combo-enter 0.14s cubic-bezier(.2,.8,.2,1);
}

@keyframes combo-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.combo-option {
  position: relative;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dark, #1F2937);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}
.combo-option:hover {
  background: #F3F4F6;
  color: var(--text-dark, #1F2937);
}
.combo-option[aria-selected="true"] {
  background: rgba(0, 173, 238, 0.10);
  color: var(--indigo, #13147C);
  font-weight: 500;
}
.combo-option[aria-selected="true"]:hover {
  background: rgba(0, 173, 238, 0.14);
}
.combo-option.no-match {
  color: var(--text-mid, #6B7280);
  font-style: italic;
  cursor: default;
}
.combo-option.no-match:hover {
  background: none;
  color: var(--text-mid, #6B7280);
}

/* Scrollbar polish inside dropdown */
.combo-list::-webkit-scrollbar { width: 8px; }
.combo-list::-webkit-scrollbar-track { background: transparent; }
.combo-list::-webkit-scrollbar-thumb {
  background: #E4E7EC;
  border-radius: 8px;
  border: 2px solid #fff;
}
.combo-list::-webkit-scrollbar-thumb:hover { background: #D0D5DD; }

/* ---------- Date input (native, re-skinned to match) ---------- */

input[type="date"].wc-date,
.wc-date-wrap input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border, #EAECF0);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-dark, #1F2937);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
input[type="date"].wc-date:hover,
.wc-date-wrap input[type="date"]:hover {
  border-color: #D0D5DD;
}
input[type="date"].wc-date:focus,
.wc-date-wrap input[type="date"]:focus {
  border-color: var(--cyan, #00ADEE);
  box-shadow: 0 0 0 3px rgba(0, 173, 238, 0.18);
}
input[type="date"].wc-date::-webkit-calendar-picker-indicator,
.wc-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s;
}
input[type="date"].wc-date::-webkit-calendar-picker-indicator:hover,
.wc-date-wrap input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(16, 24, 40, 0.06);
}