/*
 * WorkMesh cross-browser controls.
 * The visible UI is rendered by workmesh_controls.js. Canonical native fields
 * remain visually hidden only to preserve form/API compatibility.
 */
:root {
  --wm-control-bg: #fff;
  --wm-control-text: #212529;
  --wm-control-muted: #6c757d;
  --wm-control-border: #ced4da;
  --wm-control-border-hover: #9aa7b4;
  --wm-control-focus: rgba(92, 120, 166, .22);
  --wm-control-primary: #5c78a6;
  --wm-control-primary-text: #fff;
  --wm-control-selected: #edf2f8;
  --wm-control-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  --wm-control-radius: .5rem;
}

.wm-control-shell {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.input-group > .wm-control-shell { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .wm-control-shell:not(:first-child) .wm-control-trigger { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .wm-control-shell:not(:last-child) .wm-control-trigger { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .wm-control-shell:focus-within { z-index: 5; }
.input-group-sm > .wm-control-shell .wm-control-trigger { min-height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; }
.input-group-lg > .wm-control-shell .wm-control-trigger { min-height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; }
.wm-control-shell > .wm-control-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.wm-control-shell > .wm-validation-error { order: 20; width: 100%; }
.wm-control-shell.is-invalid + .invalid-feedback { display: block; }

.wm-control-trigger {
  order: 10;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--wm-control-text);
  background-color: var(--wm-control-bg);
}
.wm-control-trigger-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wm-control-trigger.wm-control-placeholder { color: var(--wm-control-muted); }
.wm-control-trigger:disabled, .wm-control-trigger.disabled { cursor: not-allowed; opacity: .65; }
.wm-control-trigger:focus-visible,
.wm-color-swatch-button:focus-visible,
.wm-time-step:focus-visible,
.wm-calendar-day:focus-visible,
.wm-select-option:focus-visible,
.wm-color-choice:focus-visible {
  outline: 0;
  border-color: var(--wm-control-primary) !important;
  box-shadow: 0 0 0 .2rem var(--wm-control-focus) !important;
}
.wm-control-trigger.is-invalid,
.wm-control-source.is-invalid + .wm-control-trigger { border-color: #dc3545 !important; }
.wm-control-chevron {
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .65;
}
.wm-control-trigger[aria-expanded="true"] .wm-control-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.wm-control-calendar-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid currentColor;
  border-radius: .15rem;
  opacity: .65;
  background: linear-gradient(currentColor, currentColor) 0 25% / 100% 1.5px no-repeat;
}

.wm-control-popover {
  position: absolute;
  z-index: 4000;
  max-height: min(70vh, 560px);
  overflow: hidden;
  color: var(--wm-control-text);
  background: var(--wm-control-bg);
  border: 1px solid var(--wm-control-border);
  border-radius: .75rem;
  box-shadow: var(--wm-control-shadow);
}
.wm-control-popover[data-placement="top"] { transform-origin: bottom center; }
.wm-control-popover[data-placement="bottom"] { transform-origin: top center; }
.wm-select-popover { display: flex; flex-direction: column; min-height: 0; }
.wm-control-search-wrap { flex: 0 0 auto; padding: .65rem; border-bottom: 1px solid var(--wm-control-border); }
.wm-control-search { width: 100%; }
.wm-select-options { flex: 1 1 auto; min-height: 0; max-height: min(48vh, 360px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding: .35rem; }
.wm-select-group { padding: .6rem .65rem .25rem; color: var(--wm-control-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wm-select-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .55rem .65rem;
  border: 0;
  border-radius: .45rem;
  color: inherit;
  background: transparent;
  text-align: left;
}
.wm-select-option:hover:not(:disabled), .wm-select-option:focus-visible { background: var(--wm-control-selected); }
.wm-select-option.is-selected { color: var(--wm-control-primary); background: var(--wm-control-selected); font-weight: 650; }
.wm-select-option:disabled { opacity: .45; cursor: not-allowed; }
.wm-select-check {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--wm-control-border-hover);
  border-radius: .25rem;
  background: var(--wm-control-bg);
}
.wm-select-option.is-selected .wm-select-check {
  border-color: var(--wm-control-primary);
  background: var(--wm-control-primary);
  box-shadow: inset 0 0 0 3px var(--wm-control-primary), inset 0 0 0 5px var(--wm-control-bg);
}
.wm-control-empty { padding: 1rem; color: var(--wm-control-muted); text-align: center; }
.wm-control-popover-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .65rem; border-top: 1px solid var(--wm-control-border); }
.wm-control-popover-footer .btn-link { margin-right: auto; }

.wm-calendar-header { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; gap: .4rem; padding: .65rem; text-align: center; border-bottom: 1px solid var(--wm-control-border); }
.wm-calendar-nav { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; }
.wm-calendar-nav:hover { background: var(--wm-control-selected); }
.wm-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(2rem, 1fr)); gap: .2rem; padding: .65rem; }
.wm-calendar-weekday { padding: .2rem; color: var(--wm-control-muted); font-size: .72rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.wm-calendar-blank { min-height: 2.25rem; }
.wm-calendar-day { min-width: 2.25rem; min-height: 2.25rem; padding: .2rem; border: 1px solid transparent; border-radius: 50%; background: transparent; color: inherit; }
.wm-calendar-day:hover:not(:disabled) { background: var(--wm-control-selected); }
.wm-calendar-day.is-today { border-color: var(--wm-control-primary); }
.wm-calendar-day.is-selected { color: var(--wm-control-primary-text); background: var(--wm-control-primary); border-color: var(--wm-control-primary); }
.wm-calendar-day:disabled { opacity: .3; cursor: not-allowed; }

.wm-time-editor { display: flex; align-items: flex-end; justify-content: center; gap: .55rem; padding: .85rem; }
.wm-time-unit { display: grid; gap: .25rem; }
.wm-time-label { color: var(--wm-control-muted); font-size: .75rem; font-weight: 650; text-align: center; }
.wm-time-stepper { display: grid; grid-template-columns: 2rem 3.25rem 2rem; align-items: stretch; border: 1px solid var(--wm-control-border); border-radius: .5rem; overflow: hidden; }
.wm-time-step { border: 0; background: var(--wm-control-selected); color: inherit; font-weight: 700; }
.wm-time-value { width: 3.25rem; padding: .45rem .25rem; border: 0; border-right: 1px solid var(--wm-control-border); border-left: 1px solid var(--wm-control-border); background: var(--wm-control-bg); color: inherit; text-align: center; }
.wm-time-value:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--wm-control-primary); }
.wm-time-separator { padding-bottom: .55rem; font-size: 1.2rem; font-weight: 700; }

.wm-file-control { align-items: center; gap: .65rem; padding: .45rem; border: 1px dashed var(--wm-control-border); border-radius: var(--wm-control-radius); background: var(--wm-control-bg); }
.wm-file-control.is-dragover { border-color: var(--wm-control-primary); background: var(--wm-control-selected); }
.wm-file-name { flex: 1 1 10rem; min-width: 0; overflow: hidden; color: var(--wm-control-muted); text-overflow: ellipsis; white-space: nowrap; }
.wm-file-button.is-invalid { border-color: #dc3545; }

.wm-control-color { display: grid; grid-template-columns: 2.75rem minmax(7rem, 1fr); gap: .45rem; }
.wm-color-swatch-button { width: 2.75rem; min-height: 2.35rem; border: 1px solid var(--wm-control-border); border-radius: var(--wm-control-radius); background: var(--wm-selected-colour, #000); }
.wm-color-text { min-width: 0; }
.wm-color-palette { display: grid; grid-template-columns: repeat(5, 2.25rem); gap: .45rem; padding: .75rem; }
.wm-color-choice { width: 2.25rem; height: 2.25rem; border: 2px solid var(--wm-control-bg); border-radius: 50%; background: var(--wm-choice-colour); box-shadow: 0 0 0 1px var(--wm-control-border); }
.wm-color-choice.is-selected { box-shadow: 0 0 0 3px var(--wm-control-primary); }

/* Normalise the remaining basic HTML fields so the browser does not add its own chrome. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; }
input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; appearance: none; }
input[type="checkbox"]:not(.form-check-input), input[type="radio"]:not(.form-check-input) {
  display: inline-grid;
  place-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--wm-control-border-hover);
  background: var(--wm-control-bg);
  vertical-align: -.125rem;
}
input[type="checkbox"]:not(.form-check-input) { border-radius: .25rem; }
input[type="radio"]:not(.form-check-input) { border-radius: 50%; }
input[type="checkbox"]:not(.form-check-input)::before,
input[type="radio"]:not(.form-check-input)::before { content: ""; width: .55rem; height: .55rem; transform: scale(0); background: var(--wm-control-primary); transition: transform .1s ease; }
input[type="checkbox"]:not(.form-check-input)::before { clip-path: polygon(14% 44%, 0 65%, 42% 100%, 100% 18%, 80% 0, 39% 62%); }
input[type="radio"]:not(.form-check-input)::before { border-radius: 50%; }
input[type="checkbox"]:not(.form-check-input):checked::before,
input[type="radio"]:not(.form-check-input):checked::before { transform: scale(1); }

.workmesh-dark-mode,
[data-bs-theme="dark"] {
  --wm-control-bg: #15191d;
  --wm-control-text: #e9ecef;
  --wm-control-muted: #adb5bd;
  --wm-control-border: #495057;
  --wm-control-border-hover: #6c757d;
  --wm-control-selected: #252d36;
  --wm-control-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}

.workmesh-high-contrast .wm-control-trigger,
.workmesh-high-contrast .wm-control-popover,
.workmesh-high-contrast .wm-file-control,
.workmesh-high-contrast .wm-color-swatch-button { border-width: 2px !important; border-color: #000 !important; }

@keyframes wm-control-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.wm-control-shake { animation: wm-control-shake .2s ease-in-out; }

@media (max-width: 575.98px) {
  .wm-control-popover { position: fixed !important; left: max(.75rem, env(safe-area-inset-left)) !important; right: max(.75rem, env(safe-area-inset-right)) !important; top: auto !important; bottom: max(.75rem, env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; max-height: min(78vh, 620px); }
  .wm-calendar-grid { gap: .1rem; }
  .wm-time-editor { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-select-check, .wm-control-shake { transition: none; animation: none; }
}

/* Standalone foundation for public pages that do not load Bootstrap form styles. */
.wm-control-trigger {
  min-height: 2.4rem;
  padding: .45rem .75rem;
  border: 1px solid var(--wm-control-border);
  border-radius: var(--wm-control-radius);
  font: inherit;
}
.wm-control-search,
.wm-color-text {
  min-height: 2.2rem;
  padding: .4rem .65rem;
  border: 1px solid var(--wm-control-border);
  border-radius: .4rem;
  color: var(--wm-control-text);
  background: var(--wm-control-bg);
  font: inherit;
}
.wm-control-popover .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .35rem .7rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  font: inherit;
  font-size: .875rem;
  text-decoration: none;
}
.wm-control-popover .btn-primary { color: var(--wm-control-primary-text); background: var(--wm-control-primary); border-color: var(--wm-control-primary); }
.wm-control-popover .btn-outline-secondary { color: var(--wm-control-text); background: transparent; border-color: var(--wm-control-border); }
.wm-control-popover .btn-link { color: var(--wm-control-primary); background: transparent; }

.wm-disclosure-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .55rem 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}
.wm-disclosure-trigger::after {
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  margin-right: .2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .65;
}
.wm-disclosure.is-open > .wm-disclosure-trigger::after { transform: rotate(225deg) translate(-2px, -2px); }
.wm-disclosure-trigger.card-header { padding: var(--bs-card-cap-padding-y, .5rem) var(--bs-card-cap-padding-x, 1rem); }
.wm-disclosure-trigger:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--wm-control-primary); }


/* The WorkMesh select trigger owns its single chevron. It must not inherit the
   browser or Bootstrap select background image. */
.wm-control-select-trigger{
  -webkit-appearance:none!important;appearance:none!important;
  background-image:none!important;background-repeat:no-repeat!important;
  padding-right:.75rem!important;
}
.wm-control-select-trigger::-ms-expand{display:none}

/* Click-to-open field guidance. Source help text remains in the DOM for compatibility
   but is represented by the adjacent question-mark control. */
.wm-field-help-source { display: none !important; }
.wm-field-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0 .22rem .35rem;
  padding: 0;
  border: 1px solid var(--wm-control-border-hover);
  border-radius: 50%;
  color: var(--wm-control-muted);
  background: var(--wm-control-bg);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.wm-field-help-button:hover,
.wm-field-help-button:focus-visible,
.wm-field-help-button[aria-expanded="true"] {
  color: var(--wm-control-primary);
  border-color: var(--wm-control-primary);
  outline: 0;
  box-shadow: 0 0 0 .18rem var(--wm-control-focus);
}
.wm-field-help-popover { width: min(22rem, calc(100vw - 1rem)); max-height: min(55vh, 26rem); overflow: auto; }
.wm-field-help-content { padding: .75rem .85rem; font-size: .875rem; line-height: 1.45; }
.form-label + .wm-field-help-button,
.form-check-label + .wm-field-help-button { position: relative; top: .05rem; }