/*
 * Shared form-control styling for EVERY page and BOTH themes (dropdowns, file button, checkboxes, colour picker).
 * Loaded last (from WEB-INF/views/theme.jspf), after the theme file, so the theme can not flatten these rules.
 * Colours come from the theme variables (--ink, --white, --line, --green ...), so light and dark both look right.
 */

/* ---------------------------------- dropdowns ---------------------------------- */
select,
.fld select,
.form select{
  -webkit-appearance:none;appearance:none;
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007FFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;
  padding:10px 40px 10px 14px;
  font:600 .92rem var(--font-ui,'Saira',sans-serif);letter-spacing:.01em;line-height:1.3;
  cursor:pointer;
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
select:hover{border-color:var(--green)}
select:focus,select:focus-visible{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,127,255,.20)}
select:disabled{opacity:.6;cursor:not-allowed}
select option{background:var(--white);color:var(--ink);padding:10px 14px;font-weight:500}
select option:checked{font-weight:700}

/* status dropdowns in the admin tables: coloured pills */
select[data-status]{
  --st:#007FFF;
  min-width:140px;border-radius:999px;padding:7px 36px 7px 14px;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--st);border-color:var(--st);
  background-color:rgba(0,127,255,.08);
  background-color:color-mix(in srgb,var(--st) 10%,transparent);
}
select[data-status]:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--st) 18%,transparent)}
select[data-status="PLACED"],select[data-status="NEW"]{--st:#007FFF}
select[data-status="CONFIRMED"]{--st:#0E9F8E}
select[data-status="SHIPPED"]{--st:#D98200}
select[data-status="DELIVERED"],select[data-status="DONE"]{--st:#12A06A}
select[data-status="CANCELLED"]{--st:#D33A3A}

/* Chrome / Edge 135+: the open list is styled too (older browsers keep the normal list) */
@supports (appearance:base-select){
  select,.fld select,.form select,::picker(select){appearance:base-select}
  select,.fld select,.form select{background-image:none}
  select::picker-icon{
    content:'';width:15px;height:15px;margin-left:auto;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007FFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:rotate .2s;
  }
  select:open::picker-icon{rotate:180deg}
  select{display:flex;align-items:center;gap:8px}
  select[data-status]::picker-icon{width:13px;height:13px}
  ::picker(select){
    border:1px solid var(--line);border-radius:14px;background:var(--white);
    box-shadow:0 22px 48px rgba(15,27,45,.22);padding:6px;margin-top:6px;
    max-height:min(320px,60vh);
  }
  select option{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:9px;font:500 .92rem var(--font-ui,'Saira',sans-serif);
    text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;
  }
  select option:hover,select option:focus-visible{background:rgba(0,127,255,.12);color:var(--ink)}
  select option:checked{background:rgba(0,127,255,.16);color:var(--green);font-weight:700}
  select option::checkmark{content:'\2713';color:var(--green);font-weight:800;order:2;margin-left:auto}
  select option:not(:checked)::checkmark{content:''}
}

/* ---------------------------------- other native controls ---------------------------------- */
input[type=checkbox],input[type=radio]{accent-color:#007FFF;width:16px;height:16px;cursor:pointer}
input[type=file]{cursor:pointer}
input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 16px;border:0;border-radius:999px;
  background:#007FFF;color:#fff;font:700 .78rem var(--font-ui,'Saira',sans-serif);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background .18s;
}
input[type=file]::file-selector-button:hover{background:#0066D1}
input[type=color]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;padding:4px;cursor:pointer;
  background:var(--white);border:1.5px solid var(--line);border-radius:12px;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:8px}
input[type=color]::-moz-color-swatch{border:0;border-radius:8px}
input[type=number]{accent-color:#007FFF}