/* ============================================================
   CorfuDiscovery  -  the drop-down lists (cdf-select.js)
   A <select> keeps the look its own page gives it when closed; this file adds the little arrow, a default look for a select nobody styled,
   and the list that opens instead of the browser's grey one.
   ============================================================ */

/* ---------- the closed select ---------- */
select.cdf-sel {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7782' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 13px center !important; background-repeat: no-repeat !important; background-size: 13px 13px !important;
  padding-right: 38px !important;
}
select.cdf-sel:hover, select.cdf-sel:focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5503a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
select.cdf-sel[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5503a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") !important;
  border-color: var(--coral, #e5503a); box-shadow: 0 0 0 4px var(--coral-soft, #fcebe5);
}
select.cdf-sel:disabled { cursor: not-allowed; opacity: .7; }

/* a select nobody styled gets the site's field look (zero weight: any page's own rule for its selects wins) */
:where(select.cdf-sel) {
  background-color: var(--paper, #fff); border: 1.5px solid var(--line-strong, #dbcfbc); border-radius: 12px; color: var(--ink, #1a242e);
  font: inherit; padding: 10px 14px; transition: border-color .15s, box-shadow .15s;
}
:where(select.cdf-sel):hover { border-color: var(--tc-select-c9b99f,#c9b99f); }
:where(select.cdf-sel):focus-visible { border-color: var(--coral, #e5503a); box-shadow: 0 0 0 4px var(--coral-soft, #fcebe5); outline: 0; }

/* ---------- the list ---------- */
.cdf-sel__pop {
  background: var(--paper, #fff); border: 1px solid var(--line, #e8dfd2); border-radius: 16px; box-shadow: 0 24px 60px var(--tc-select-0f2a3b38,rgba(15, 42, 59, .22)), 0 4px 14px var(--tc-select-0f2a3b14,rgba(15, 42, 59, .08));
  color: var(--body, #4a5560); display: flex; flex-direction: column; font-family: var(--sans, inherit); overflow: hidden; position: fixed; z-index: 100001;
}
.cdf-sel__pop[hidden], .cdf-sel__backdrop[hidden], .cdf-sel__search[hidden], .cdf-sel__none[hidden], .cdf-sel__opt[hidden], .cdf-sel__group[hidden] { display: none; }
.cdf-sel__pop.is-in { animation: cdfSelIn .12s ease-out; }
.cdf-sel__pop.is-in.is-up { animation-name: cdfSelInUp; }
@keyframes cdfSelIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cdfSelInUp { from { opacity: 0; transform: translateY(4px); } }

.cdf-sel__search {
  align-items: center; border-bottom: 1px solid var(--line, #e8dfd2); color: var(--muted, #768591); display: flex; flex: none; gap: 8px; padding: 10px 12px;
}
.cdf-sel__search input {
  background: var(--sand, #faf6f0); border: 1.5px solid var(--line-strong, #dbcfbc); border-radius: 10px; color: var(--ink, #1a242e); flex: 1; font: inherit; font-size: 14.5px; min-width: 0; padding: 8px 11px;
}
.cdf-sel__search input:focus { background: var(--tc-select-ffffff,#fff); border-color: var(--coral, #e5503a); box-shadow: 0 0 0 3px var(--coral-soft, #fcebe5); outline: 0; }

.cdf-sel__list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }

.cdf-sel__opt {
  align-items: center; border-radius: 10px; color: var(--body, #4a5560); cursor: pointer; display: flex; font-size: 14.5px; font-weight: 500; gap: 10px; justify-content: space-between;
  line-height: 1.35; padding: 10px 12px;
}
.cdf-sel__opt svg { color: var(--coral, #e5503a); display: none; flex: none; }
.cdf-sel__t { min-width: 0; overflow-wrap: anywhere; }
.cdf-sel__opt.is-hi { background: var(--sand-2, #f3ece2); color: var(--ink, #1a242e); }
.cdf-sel__opt.is-on { background: var(--coral-soft, #fcebe5); color: var(--coral-deep, #c53f2b); font-weight: 700; }
.cdf-sel__opt.is-on svg { display: block; }
.cdf-sel__opt.is-on.is-hi { background: var(--tc-select-fadcd3,#fadcd3); }
.cdf-sel__opt.is-empty:not(.is-on) { color: var(--muted, #768591); }
.cdf-sel__opt.is-disabled { color: var(--tc-select-b8b0a3,#b8b0a3); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--tc-select-b8b0a399,rgba(184, 176, 163, .6)); }

.cdf-sel__group {
  color: var(--muted, #768591); font-size: 11px; font-weight: 800; letter-spacing: .09em; padding: 12px 12px 4px; text-transform: uppercase;
}
.cdf-sel__group:first-child { padding-top: 6px; }
.cdf-sel__none { color: var(--muted, #768591); font-size: 14px; padding: 14px 12px; text-align: center; }

/* ---------- on a phone: the list rises from the bottom of the screen ---------- */
.cdf-sel__backdrop { background: var(--tc-select-0f2a3b66,rgba(15, 42, 59, .4)); inset: 0; position: fixed; z-index: 100000; }
html.cdf-sel-open { overflow: hidden; }
.cdf-sel__pop.is-sheet {
  border-radius: 22px 22px 0 0; border-width: 1px 0 0; bottom: 0; left: 0; max-height: 78vh; max-width: none; min-width: 0; right: 0; top: auto; width: 100%;
  animation: cdfSelSheet .2s ease-out;
}
.cdf-sel__pop.is-sheet::before { background: var(--line-strong, #dbcfbc); border-radius: 3px; content: ''; flex: none; height: 4px; margin: 8px auto 2px; width: 40px; }
.cdf-sel__pop.is-sheet .cdf-sel__opt { font-size: 16px; padding: 13px 14px; }
@keyframes cdfSelSheet { from { transform: translateY(40px); opacity: .4; } }

/* ---------- <select multiple>: a list of tick boxes ---------- */
select.cdf-multi__native {
  border: 0 !important; clip: rect(0 0 0 0); height: 1px !important; margin: 0 !important; overflow: hidden; padding: 0 !important; position: absolute !important; white-space: nowrap; width: 1px !important;
}
.cdf-multi {
  background: var(--paper, #fff); border: 1.5px solid var(--line-strong, #dbcfbc); border-radius: 12px; display: block; max-height: calc(var(--rows, 5) * 42px + 12px); overflow-y: auto; padding: 6px; width: 100%;
}
.cdf-multi:focus-within { border-color: var(--coral, #e5503a); box-shadow: 0 0 0 4px var(--coral-soft, #fcebe5); }
.cdf-multi__row { align-items: center; border-radius: 9px; color: var(--body, #4a5560); cursor: pointer; display: flex; font-size: 14.5px; font-weight: 500; gap: 11px; margin: 0; min-height: 40px; padding: 8px 10px; position: relative; }
.cdf-multi__row:hover { background: var(--sand-2, #f3ece2); color: var(--ink, #1a242e); }
.cdf-multi__row input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.cdf-multi__tick {
  align-items: center; background: var(--tc-select-ffffff,#fff); border: 1.5px solid var(--line-strong, #dbcfbc); border-radius: 7px; color: var(--tc-select-ffffff,#fff); display: inline-flex; flex: none; height: 22px; justify-content: center; transition: background-color .12s, border-color .12s; width: 22px;
}
.cdf-multi__tick svg { height: 14px; opacity: 0; width: 14px; }
.cdf-multi__row input:checked + .cdf-multi__tick { background: var(--coral, #e5503a); border-color: var(--coral, #e5503a); }
.cdf-multi__row input:checked + .cdf-multi__tick svg { opacity: 1; }
.cdf-multi__row input:checked ~ .cdf-multi__text { color: var(--ink, #1a242e); font-weight: 700; }
.cdf-multi__row input:focus-visible + .cdf-multi__tick { box-shadow: 0 0 0 3px var(--coral-soft, #fcebe5); }
.cdf-multi__row.is-disabled { cursor: not-allowed; opacity: .55; }
.cdf-multi__text { min-width: 0; overflow-wrap: anywhere; }

/* ---------- the rest of the browser's grey controls: the file button, the tick boxes and the round buttons ---------- */
input[type="file"]::file-selector-button {
  background: var(--sand-2, #f3ece2); border: 1.5px solid var(--line-strong, #dbcfbc); border-radius: 999px; color: var(--ink, #1a242e); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  margin-right: 12px; padding: 7px 16px; transition: border-color .15s, color .15s, background-color .15s;
}
input[type="file"]::file-selector-button:hover { background: var(--coral-soft, #fcebe5); border-color: var(--coral, #e5503a); color: var(--coral-deep, #c53f2b); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--coral, #e5503a); }

/* a select inside a container that shows the focus ring itself (the search bar): no second ring while its list is open */
.field select.cdf-sel[aria-expanded="true"], .searchbar select.cdf-sel[aria-expanded="true"] { border-color: transparent; box-shadow: none; }

.cdf-sel__search{margin:12px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-xs,10px);background:var(--sand)}
.cdf-sel__search:focus-within{border-color:var(--coral-deep);box-shadow:0 0 0 3px var(--coral-soft)}
.cdf-sel__search input,.cdf-sel__search input:focus,.cdf-sel__search input:focus-visible{min-width:0;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;font:inherit;font-size:16px}