/*
 * dropdowns.css — HD Design System look for all ZK form fields
 * --------------------------------------------------------------------------
 * The legacy app used the raw browser/ZK default for every <selectbox>,
 * <combobox>, <bandbox> and <datebox> -- boxy grey controls that clash with
 * the HD blue theme. This restyles the *closed control* (white surface, 1px
 * HD border, 6px radius, custom chevron, blue focus ring) and the ZK-rendered
 * popups (combobox/bandbox) to match the HD Dropdown component:
 *   invoker-core .../inputs/dropdown/generateCustomStyles.ts
 *
 * Native <select> (z-selectbox) option lists are OS-rendered and can't be
 * styled -- only their closed control is themed here. Colours come from
 * tokens.css (--hd-*). Loaded globally via <theme-uri> in WEB-INF/zk.xml.
 */

/* shared HD field surface for every text-like control + native select */
.z-selectbox,
.z-combobox-input,
.z-bandbox-input,
.z-datebox-input{
  background-color:var(--hd-surface) !important;
  border:1px solid var(--hd-field-border) !important;
  border-radius:var(--hd-field-radius) !important;
  color:var(--hd-text) !important;
  font-family:var(--hd-font) !important;
  font-size:13px !important;
  padding:4px 10px !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  transition:border-color .12s ease, box-shadow .12s ease;
}

.z-selectbox:hover,
.z-combobox-input:hover,
.z-bandbox-input:hover,
.z-datebox-input:hover{
  border-color:var(--hd-field-hover) !important;
}

.z-selectbox:focus,
.z-combobox-input:focus,
.z-bandbox-input:focus,
.z-datebox-input:focus{
  border-color:var(--hd-field-focus) !important;
  outline:3px solid var(--hd-field-ring) !important;
  outline-offset:0 !important;
}

/* disabled fields read as muted, not broken */
.z-selectbox[disabled],
.z-combobox-input[disabled],
.z-bandbox-input[disabled],
.z-datebox-input[disabled]{
  background-color:var(--hd-surface-2) !important;
  color:var(--hd-text-muted) !important;
  cursor:not-allowed;
}

/* ---- native <select>: drop the browser chrome, draw an HD chevron ---- */
.z-selectbox{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  padding-right:30px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23282E38' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  cursor:pointer;
}

/* ---- combobox / bandbox / datebox: HD chevron on the trigger button ---- */
.z-combobox,
.z-bandbox,
.z-datebox{ background:transparent !important; border:none !important; }

.z-combobox-button,
.z-bandbox-button,
.z-datebox-button{
  background:transparent !important;
  border:none !important;
  border-left:1px solid var(--hd-field-border) !important;
  width:28px !important;
  color:var(--hd-text) !important;
}

/* ---- combobox / bandbox popups -> HD menu ---- */
.z-combobox-popup,
.z-bandbox-popup{
  background:var(--hd-surface) !important;
  border:1px solid var(--hd-border) !important;
  border-radius:var(--hd-field-radius) !important;
  box-shadow:var(--hd-shadow-menu) !important;
  padding:4px !important;
  /* taller menu so more rows show; width stays = control width (overriding it
     breaks ZK's popup anchoring). Long item text wraps instead (see below). */
  max-height:440px !important;
  overflow-y:auto !important;
  /* an open dropdown must sit above modal overlays (e.g. the Allergy Diet edit dialog) */
  z-index:99000 !important;
}

.z-comboitem{
  border-radius:6px !important;
  padding:8px 14px !important;
  color:var(--hd-text) !important;
  border-left:3px solid transparent !important;
  white-space:normal;          /* long item text wraps within the wider popup */
  word-break:break-word;
}
.z-comboitem:hover,
.z-comboitem-over{
  background:var(--hd-option-hover) !important;
  color:var(--hd-text) !important;
  cursor:pointer;
}
.z-comboitem-selected,
.z-comboitem-seld{
  background:var(--hd-primary-soft) !important;
  border-left-color:var(--hd-info) !important;
  font-weight:700 !important;
}