/* Shared HARPLINK form controls.
   Loaded after page styles so native selects remain visually consistent
   across public, cloud, partner, and administration workspaces. */
:root{
  --harplink-control-bg:#fff;
  --harplink-control-ink:#14283f;
  --harplink-control-muted:#738398;
  --harplink-control-line:#cbd9e7;
  --harplink-control-focus:#1769f5;
  --harplink-control-focus-ring:rgba(23,105,245,.12);
  --harplink-control-disabled:#f1f5f9;
}

body.harplink-app :where(select:not([multiple]):not([size])){
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  border:1px solid var(--harplink-control-line);
  border-radius:11px;
  background-color:var(--harplink-control-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.25 6 3.75 3.75L11.75 6' stroke='%23546A82' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:16px 16px;
  color:var(--harplink-control-ink);
  padding-block:9px;
  padding-inline:14px 42px;
  font-family:"Tajawal",sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  outline:none;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}

html[dir="rtl"] body.harplink-app :where(select:not([multiple]):not([size])){
  background-position:left 13px center;
  text-align:right;
}

html[dir="ltr"] body.harplink-app :where(select:not([multiple]):not([size])){
  background-position:right 13px center;
  text-align:left;
}

body.harplink-app :where(select:not([multiple]):not([size])):hover:not(:disabled){
  border-color:#aebfd1;
  background-color:#fbfdff;
}

body.harplink-app :where(select:not([multiple]):not([size])):focus,
body.harplink-app :where(select:not([multiple]):not([size])):focus-visible{
  border-color:var(--harplink-control-focus);
  background-color:#fff;
  box-shadow:0 0 0 4px var(--harplink-control-focus-ring);
}

body.harplink-app :where(select:not([multiple]):not([size])):disabled{
  border-color:#dbe4ed;
  background-color:var(--harplink-control-disabled);
  color:var(--harplink-control-muted);
  cursor:not-allowed;
  opacity:.78;
}

body.harplink-app :where(select:not([multiple]):not([size])):invalid:not(:focus){
  color:var(--harplink-control-muted);
}

@media (max-width:640px){
  body.harplink-app :where(select:not([multiple]):not([size])){
    min-height:46px;
    font-size:16px;
  }
}
