/* Shared search and choice controls for plan, summary, organization, roster and performance pages. */
:root{
  --cc-height:42px;
  --cc-radius:12px;
  --cc-accent:var(--seed-primary,#6b5ce7);
  --cc-focus:color-mix(in srgb,var(--cc-accent) 18%,transparent);
}

:is(#page-monthly-plan,#page-monthly-summary,#page-departments,#page-employees,#page-performance-review,#page-performance,#page-salary-plans)
  :is(.mp-list-filters,.ms-list-filters,.r2-toolbar,.performance-filter-fields,.performance-toolbar,.sp-toolbar)
  :is(input[type="search"],input[type="text"]),
:is(#page-monthly-plan,#page-monthly-summary,#page-departments,#page-employees,#page-performance-review,#page-performance)
  :is(.mp-list-month,.ms-list-head,.performance-month-field)
  input[type="month"]{
  min-width:0;
  height:var(--cc-height);
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:var(--cc-radius);
  outline:0;
  background:var(--bg-surface);
  color:var(--txt-1);
  font-size:13px;
  line-height:40px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--txt-1) 5%,transparent);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease);
}
:is(#page-monthly-plan,#page-monthly-summary,#page-departments,#page-employees,#page-performance-review,#page-performance,#page-salary-plans)
  :is(.mp-list-filters,.ms-list-filters,.r2-toolbar,.performance-filter-fields,.performance-toolbar,.sp-toolbar)
  :is(input[type="search"],input[type="text"]):hover,
:is(#page-monthly-plan,#page-monthly-summary,#page-departments,#page-employees,#page-performance-review,#page-performance)
  :is(.mp-list-month,.ms-list-head,.performance-month-field)
  input[type="month"]:hover{border-color:color-mix(in srgb,var(--cc-accent) 36%,var(--line))}
:is(#page-monthly-plan,#page-monthly-summary,#page-departments,#page-employees,#page-performance-review,#page-performance,#page-salary-plans)
  :is(.mp-list-filters,.ms-list-filters,.r2-toolbar,.performance-filter-fields,.performance-toolbar,.sp-toolbar)
  :is(input[type="search"],input[type="text"]):focus,
:is(#page-monthly-plan,#page-monthly-summary,#page-departments,#page-employees,#page-performance-review,#page-performance)
  :is(.mp-list-month,.ms-list-head,.performance-month-field)
  input[type="month"]:focus{
  border-color:var(--cc-accent);
  box-shadow:0 0 0 3px var(--cc-focus);
}

.cc-native[hidden]{display:none!important}
.cc-select{position:relative;display:block;flex:1 1 auto;width:100%;min-width:0}
.cc-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0;
  height:var(--cc-height);
  padding:0 12px 0 14px;
  border:1px solid var(--line);
  border-radius:var(--cc-radius);
  background:var(--bg-surface);
  color:var(--txt-1);
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 1px 2px color-mix(in srgb,var(--txt-1) 5%,transparent);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease);
}
.cc-trigger:hover:not(:disabled){border-color:color-mix(in srgb,var(--cc-accent) 36%,var(--line));background:color-mix(in srgb,var(--cc-accent) 2%,var(--bg-surface))}
.cc-trigger:focus-visible,.cc-trigger[aria-expanded="true"]{outline:0;border-color:var(--cc-accent);box-shadow:0 0 0 3px var(--cc-focus)}
.cc-trigger:disabled{cursor:not-allowed;opacity:.55}
.cc-trigger-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-trigger-arrow{flex:none;color:var(--cc-accent);font-size:16px;line-height:1;transform:translateY(-1px);transition:transform .16s var(--ease)}
.cc-trigger[aria-expanded="true"] .cc-trigger-arrow{transform:rotate(180deg) translateY(1px)}
.cc-select[data-tone="success"] .cc-trigger{border-color:color-mix(in srgb,var(--green) 28%,var(--line));background:color-mix(in srgb,var(--green) 7%,var(--bg-surface));color:var(--green)}
.cc-select[data-tone="warning"] .cc-trigger{border-color:color-mix(in srgb,var(--orange) 28%,var(--line));background:color-mix(in srgb,var(--orange) 7%,var(--bg-surface));color:var(--orange)}
.cc-select[data-tone="muted"] .cc-trigger{background:var(--bg-soft);color:var(--txt-2)}
.cc-select[data-tone="primary"] .cc-trigger{border-color:color-mix(in srgb,var(--cc-accent) 28%,var(--line));background:var(--bg-violet-soft);color:var(--cc-accent)}

.cc-popup{
  position:fixed;
  z-index:14000;
  display:grid;
  gap:8px;
  max-height:min(420px,calc(100dvh - 24px));
  padding:10px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--cc-accent) 16%,var(--line));
  border-radius:14px;
  background:var(--bg-surface);
  color:var(--txt-1);
  box-shadow:0 18px 46px color-mix(in srgb,var(--txt-1) 18%,transparent),0 2px 10px color-mix(in srgb,var(--txt-1) 8%,transparent);
}
.cc-popup[hidden]{display:none}
.cc-search{
  width:100%;
  height:40px;
  padding:0 12px;
  border:1px solid var(--cc-accent);
  border-radius:10px;
  outline:0;
  background:var(--bg-surface);
  color:var(--txt-1);
  font:inherit;
  font-size:13px;
  box-shadow:0 0 0 3px var(--cc-focus);
}
.cc-options{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 2px}
.cc-option{
  display:grid;
  width:100%;
  gap:3px;
  padding:10px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--txt-1);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.cc-option:hover,.cc-option.cc-highlight{background:var(--bg-soft)}
.cc-option[aria-selected="true"]{background:var(--cc-accent);color:#fff}
.cc-option-main{font-size:13px;line-height:1.35}
.cc-option-meta{color:var(--txt-3);font-size:10.5px;line-height:1.35}
.cc-option[aria-selected="true"] .cc-option-meta{color:rgba(255,255,255,.72)}
.cc-option[data-tone="success"]:not([aria-selected="true"]){color:var(--green)}
.cc-option[data-tone="warning"]:not([aria-selected="true"]){color:var(--orange)}
.cc-option[data-tone="primary"]:not([aria-selected="true"]){color:var(--cc-accent)}
.cc-option[data-tone="muted"]:not([aria-selected="true"]){color:var(--txt-2)}
.cc-empty{margin:0;padding:18px 12px;color:var(--txt-3);font-size:12px;text-align:center}
.cc-footer{padding:8px 4px 1px;border-top:1px solid var(--line);color:var(--txt-3);font-size:10.5px;line-height:1.4}

/* Existing searchable post-type control uses the same surface and rhythm. */
.pt-select{width:100%;min-width:0}
.pt-trigger{height:var(--cc-height)!important;border-radius:var(--cc-radius)!important;padding:0 12px 0 14px!important;box-shadow:0 1px 2px color-mix(in srgb,var(--txt-1) 5%,transparent)!important}
.pt-trigger:focus-visible,.pt-trigger[aria-expanded="true"]{outline:0!important;border-color:var(--cc-accent)!important;box-shadow:0 0 0 3px var(--cc-focus)!important}
.pt-popup{z-index:14010!important;display:grid!important;gap:8px!important;max-height:min(420px,calc(100dvh - 24px))!important;padding:10px!important;border-color:color-mix(in srgb,var(--cc-accent) 16%,var(--line))!important;border-radius:14px!important;box-shadow:0 18px 46px color-mix(in srgb,var(--txt-1) 18%,transparent),0 2px 10px color-mix(in srgb,var(--txt-1) 8%,transparent)!important}
.pt-popup[hidden]{display:none!important}
.pt-popup>input{height:40px!important;padding:0 12px!important;border:1px solid var(--cc-accent)!important;border-radius:10px!important;box-shadow:0 0 0 3px var(--cc-focus)!important;font-size:13px!important}
.pt-popup [role="listbox"]{padding:0 2px!important}
.pt-popup [role="option"]{min-height:40px!important;padding:9px 12px!important;border-radius:9px!important;font-size:13px!important}
.pt-popup [role="option"][aria-selected="true"]{background:var(--cc-accent)!important;color:#fff!important}
.pt-popup [role="option"][aria-selected="true"] .r2-type{background:rgba(255,255,255,.18)!important;color:#fff!important}
.pt-popup .cc-footer{margin-top:0}

/* Employee drawer already has richer option metadata; align it with the same component language. */
.efc-popup{z-index:14020!important;gap:8px!important;padding:10px!important;border-color:color-mix(in srgb,var(--cc-accent) 16%,var(--line))!important;border-radius:14px!important;box-shadow:0 18px 46px color-mix(in srgb,var(--txt-1) 18%,transparent),0 2px 10px color-mix(in srgb,var(--txt-1) 8%,transparent)!important}
.efc-popup .efc-search{height:40px!important;min-height:40px!important;padding:0 12px!important;border:1px solid var(--cc-accent)!important;border-radius:10px!important;outline:0!important;box-shadow:0 0 0 3px var(--cc-focus)!important;font-size:13px!important}
.efc-popup .efc-option{min-height:40px!important;padding:9px 12px!important;border-radius:9px!important}
.efc-popup .efc-option[aria-selected="true"]{background:var(--cc-accent)!important;color:#fff!important}
.efc-popup .efc-count{padding:8px 4px 1px!important;border-top:1px solid var(--line)!important;font-size:10.5px!important}
#employeeLayer .efc-trigger{min-height:var(--cc-height)!important;border-radius:var(--cc-radius)!important;box-shadow:0 1px 2px color-mix(in srgb,var(--txt-1) 5%,transparent)!important}
#employeeLayer .efc-trigger:focus-visible,#employeeLayer .efc-trigger[aria-expanded="true"]{outline:0!important;border-color:var(--cc-accent)!important;box-shadow:0 0 0 3px var(--cc-focus)!important}

/* Employee post-type multi-select keeps multi-choice semantics and matches the shared popup. */
#page-employees #employeePostOptions{display:grid;gap:8px;width:320px;max-height:min(420px,calc(100dvh - 24px));padding:10px;border-color:color-mix(in srgb,var(--cc-accent) 16%,var(--line));border-radius:14px;background:var(--bg-surface);box-shadow:0 18px 46px color-mix(in srgb,var(--txt-1) 18%,transparent),0 2px 10px color-mix(in srgb,var(--txt-1) 8%,transparent)}
#page-employees #employeePostOptions .cc-multi-search{width:100%;height:40px;padding:0 12px;border:1px solid var(--cc-accent);border-radius:10px;outline:0;background:var(--bg-surface);color:var(--txt-1);font:inherit;font-size:13px;box-shadow:0 0 0 3px var(--cc-focus)}
#page-employees #employeePostOptions .cc-multi-heading{padding:9px 12px;border-radius:9px;background:var(--cc-accent);color:#fff;font-size:13px}
#page-employees #employeePostOptions label{min-height:38px;padding:8px 10px;border-radius:9px;color:var(--txt-1);font-size:12px}
#page-employees #employeePostOptions label:has(input:checked){background:var(--bg-violet-soft);color:var(--cc-accent)}
#page-employees #employeePostOptions #employeePostClear{justify-self:start;margin-top:0}

/* Keep all six list toolbars aligned to the same control height without changing page semantics. */
#page-monthly-plan .mp-list-filters .cc-select,#page-monthly-summary .ms-list-filters .cc-select{height:var(--cc-height)}
#page-monthly-plan .mp-list-filters .input,#page-monthly-summary .ms-toolbar .ms-list-filters .input{height:var(--cc-height)}
#page-monthly-plan .mp-list-toolbar,#page-monthly-summary .ms-toolbar{align-items:center}
#page-departments .r2-toolbar .cc-select,#page-employees .r2-toolbar .cc-select{min-width:0}
#page-employees .r2-toolbar .cc-select{flex:1 1 120px}
#page-performance-review .performance-filter-fields .cc-select,#page-performance .performance-toolbar .cc-select{width:100%}
#page-salary-plans .sp-toolbar .cc-select{width:100%;height:var(--cc-height)}
#page-salary-plans .sp-toolbar .input{height:var(--cc-height);min-height:var(--cc-height);padding:0 14px}

@media(max-width:760px){
  .cc-popup{max-width:calc(100vw - 24px)}
  #page-monthly-plan .mp-list-filters,#page-monthly-summary .ms-list-filters{min-width:0}
}
@media(prefers-reduced-motion:reduce){.cc-trigger,.cc-trigger-arrow{transition:none}}