/* THRS — Global Premium Controls Foundation P1
 * Shared visual language for lists, forms, filters and native date/time fields.
 * CSS only. Scoped to operational pages, supported modal portals and shared filters.
 * No data, routing, RBAC, JS behavior or control types changed.
 * Native OS/browser select calendars may retain their own popup styling.
 */
:where(html[data-theme="dark"],html.dark,body.dark-mode) :is(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) {
  --tp-field:#10314f;
  --tp-field-hover:#173c5e;
  --tp-surface:#102c4c;
  --tp-surface-raised:#163657;
  --tp-head:#193c63;
  --tp-row-a:#112f50;
  --tp-row-b:#173858;
  --tp-fg:#f2f8ff;
  --tp-muted:#c8d8eb;
  --tp-placeholder:#acbfda;
  --tp-border:rgba(153,196,238,.40);
  --tp-border-strong:rgba(235,192,111,.63);
  --tp-gold:#f3d390;
  --tp-focus:0 0 0 3px rgba(239,189,93,.20),0 8px 22px rgba(0,10,28,.17);
  --tp-shadow:0 12px 30px rgba(0,9,29,.25),inset 0 1px 0 rgba(237,247,255,.05);
  color-scheme:dark;
}
:where(html[data-theme="light"],html:not([data-theme]),body.light-mode) :is(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) {
  --tp-field:#fff;
  --tp-field-hover:#f8faff;
  --tp-surface:#fff;
  --tp-surface-raised:#f6f9fe;
  --tp-head:#edf3fb;
  --tp-row-a:#fff;
  --tp-row-b:#f6f9fd;
  --tp-fg:#112b4d;
  --tp-muted:#536b88;
  --tp-placeholder:#637997;
  --tp-border:rgba(43,84,137,.25);
  --tp-border-strong:rgba(158,112,32,.65);
  --tp-gold:#9d6c24;
  --tp-focus:0 0 0 3px rgba(193,146,61,.18),0 7px 18px rgba(32,61,98,.08);
  --tp-shadow:0 11px 30px rgba(17,43,78,.07),inset 0 1px 0 rgba(255,255,255,.85);
  color-scheme:light;
}

/* Native, styled and inline-styled fields share consistent readable surfaces.
   Excludes hidden/checkbox/radio/file/color/range, which have their own semantics. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea,.form-input,.form-select,.form-textarea) {
  border:1px solid var(--tp-border)!important;
  border-radius:13px!important;
  background-color:var(--tp-field)!important;
  color:var(--tp-fg)!important;
  -webkit-text-fill-color:var(--tp-fg);
  caret-color:var(--tp-gold);
  box-shadow:inset 0 1px 0 rgba(243,251,255,.055),0 5px 16px rgba(0,18,40,.07)!important;
  font-size:max(13px, 0.8125rem)!important;
  line-height:1.45!important;
  color-scheme:inherit;
  transition:border-color .17s ease,background-color .17s ease,box-shadow .17s ease!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea,.form-input,.form-select,.form-textarea):not(:disabled):hover {
  border-color:var(--tp-border-strong)!important;
  background-color:var(--tp-field-hover)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea,.form-input,.form-select,.form-textarea):focus-visible {
  outline:2px solid var(--tp-gold)!important;
  outline-offset:2px;
  border-color:var(--tp-border-strong)!important;
  box-shadow:var(--tp-focus)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input,textarea)::placeholder {
  color:var(--tp-placeholder)!important;
  -webkit-text-fill-color:var(--tp-placeholder);
  opacity:1!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input,select,textarea):disabled {
  opacity:.62!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input,select,textarea)[aria-invalid="true"],
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input,select,textarea):user-invalid {
  border-color:#e68190!important;
  box-shadow:0 0 0 3px rgba(229,101,122,.14)!important;
}

/* Date/Time/Month/Week/DateTime widgets: polished actual input control and
   legible built-in icon; no custom popover that breaks native keyboard or min/max. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"],input[type="week"]) {
  color-scheme:inherit;
  font-variant-numeric:tabular-nums;
  font-weight:650!important;
  letter-spacing:.008em;
  accent-color:var(--tp-gold);
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"],input[type="week"])::-webkit-calendar-picker-indicator {
  opacity:.91;
  cursor:pointer;
  border-radius:7px;
  padding:5px;
  background-color:rgba(144,177,211,.11);
  transition:background-color .16s ease,opacity .16s ease;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"],input[type="week"])::-webkit-calendar-picker-indicator:hover {
  opacity:1;
  background-color:rgba(235,191,106,.22);
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"],input[type="week"])::-webkit-datetime-edit {
  color:var(--tp-fg);
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"],input[type="week"])::-webkit-datetime-edit-fields-wrapper {
  color:var(--tp-fg);
}

/* Native dropdown: preserve OS accessible picker and keyboard functionality. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) select {
  cursor:pointer;
  color-scheme:inherit;
  font-weight:620;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) select option,
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) select optgroup {
  color:var(--tp-fg)!important;
  background:var(--tp-field)!important;
  font-weight:600;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) select:disabled {
  cursor:not-allowed;
}

/* Radio/checkbox use native accessible focus, premium accent, readable labels. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter) input:is([type="checkbox"],[type="radio"]) {
  accent-color:#d7aa58;
  cursor:pointer;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
input:is([type="checkbox"],[type="radio"]):focus-visible {
  outline:2px solid var(--tp-gold)!important;
  outline-offset:3px;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.form-label,.thrs-filter-field label,.form-group > label,.ws-field-label,legend) {
  color:var(--tp-fg)!important;
  font-weight:730!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.form-hint,.field-hint,.field-description,.form-help,.thrs-input-hint) {
  color:var(--tp-muted)!important;
  font-size:11.5px!important;
  line-height:1.5;
}

/* Shared advanced filters and regular filter panels: no more white strip on dark. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-filter-panel,.thrs-filter-command-bar,.thrs-filter-grid,.filter-bar,.filter-panel,.thrs-advanced-filter) {
  color:var(--tp-fg)!important;
  background:linear-gradient(125deg,var(--tp-surface-raised),var(--tp-surface))!important;
  border:1px solid var(--tp-border)!important;
  border-radius:17px!important;
  box-shadow:var(--tp-shadow)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-filter-title,.filter-title,.thrs-active-filter-chip) {
  color:var(--tp-gold)!important;
  font-weight:760!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-filter-panel,.thrs-filter-grid,.thrs-advanced-filter)
button:not(:disabled):hover {
  border-color:var(--tp-border-strong)!important;
}

/* Common action & toggle buttons in forms/filters. Avoid icon-only controls,
   chat composer, calendar arrows, and existing premium page primary actions. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-btn-outline,.thrs-btn-ghost,.thrs-filter-toggle,.thrs-clear-filter-btn) {
  border:1px solid var(--tp-border)!important;
  background:var(--tp-surface-raised)!important;
  color:var(--tp-fg)!important;
  border-radius:11px!important;
  font-weight:720!important;
  box-shadow:inset 0 1px 0 rgba(221,240,255,.06)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-btn-outline,.thrs-btn-ghost,.thrs-filter-toggle,.thrs-clear-filter-btn):not(:disabled):hover {
  color:var(--tp-gold)!important;
  border-color:var(--tp-border-strong)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(button,a,[role="menuitem"],[role="option"]):focus-visible {
  outline:2px solid var(--tp-gold)!important;
  outline-offset:2px;
}

/* Tables and data-list wrappers share premium contrast. No fake columns,
   row-order changes, or sticky layout modifications. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.modern-table-wrap,.table-responsive) {
  border:1px solid var(--tp-border)!important;
  border-radius:16px!important;
  background:var(--tp-surface)!important;
  box-shadow:var(--tp-shadow)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.modern-table,.table-responsive table) thead th {
  background:var(--tp-head)!important;
  color:var(--tp-fg)!important;
  border-bottom:1px solid var(--tp-border)!important;
  font-size:11.5px!important;
  font-weight:760!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.modern-table,.table-responsive table) tbody td {
  color:var(--tp-fg)!important;
  background:var(--tp-row-a)!important;
  border-bottom:1px solid var(--tp-border)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.modern-table,.table-responsive table) tbody tr:nth-child(even) td {
  background:var(--tp-row-b)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.modern-table,.table-responsive table) tbody tr:hover td {
  background:var(--tp-surface-raised)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.pagination-bar,.pagination-size) {
  color:var(--tp-muted)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
.pagination-bar {
  border-top:1px solid var(--tp-border)!important;
  background:var(--tp-surface)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
.pagination-btn:not(.active) {
  background:var(--tp-surface-raised)!important;
  border-color:var(--tp-border)!important;
  color:var(--tp-fg)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
.pagination-btn.active {
  background:linear-gradient(140deg,#e9bd71,#e8d29d)!important;
  border-color:#e4b763!important;
  color:#2b2112!important;
  box-shadow:0 5px 15px rgba(197,143,52,.17)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
.pagination-btn:disabled {
  opacity:.47!important;
  cursor:not-allowed;
}

/* Modals are often rendered in a portal outside the main shell: shared
   premium chrome and field styles must remain visible there too. */
:where(html[data-theme="dark"],html.dark,body.dark-mode) .thrs-modal-card {
  border:1px solid rgba(190,210,238,.38)!important;
  background:linear-gradient(145deg,#0c2847,#102e4f)!important;
  color:#edf7ff!important;
  box-shadow:0 26px 68px rgba(0,4,18,.50),inset 0 1px 0 rgba(246,251,255,.10)!important;
}
:where(html[data-theme="light"],html:not([data-theme]),body.light-mode) .thrs-modal-card {
  border:1px solid rgba(49,92,138,.20)!important;
  background:linear-gradient(150deg,#fff,#f7faff)!important;
  color:#112d4c!important;
  box-shadow:0 24px 58px rgba(26,58,103,.15),inset 0 1px 0 #fff!important;
}
.thrs-modal-card > :first-child {
  border-bottom:1px solid var(--tp-border)!important;
}
:where(html[data-theme="dark"],html.dark,body.dark-mode) .thrs-modal-card > :first-child {
  background:linear-gradient(115deg,#143657,#102b4b)!important;
}
:where(html[data-theme="light"],html:not([data-theme]),body.light-mode) .thrs-modal-card > :first-child {
  background:linear-gradient(115deg,#f0f5fb,#fff)!important;
}
.thrs-modal-card > :first-child h2 {
  color:var(--tp-fg)!important;
}
.thrs-modal-card > :first-child button[aria-label] {
  border:1px solid var(--tp-border)!important;
  color:var(--tp-fg)!important;
  background:var(--tp-surface-raised)!important;
  border-radius:10px!important;
}
.thrs-modal-card > :first-child button[aria-label]:hover {
  border-color:var(--tp-border-strong)!important;
}

/* Date-related shared toolbar buttons; date input itself retains native picker. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-calendar-nav-btn,.thrs-calendar-today-btn,.thrs-datepicker-button,.thrs-date-filter button) {
  border:1px solid var(--tp-border)!important;
  border-radius:11px!important;
  background:var(--tp-surface-raised)!important;
  color:var(--tp-fg)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-calendar-today-btn,.thrs-date-filter button.active) {
  color:#2a2115!important;
  border-color:#f2cf8c!important;
  background:linear-gradient(145deg,#ffe5a9,#e9bc68)!important;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(.thrs-calendar-nav-btn,.thrs-calendar-today-btn,.thrs-datepicker-button,.thrs-date-filter button):not(:disabled):hover {
  border-color:var(--tp-border-strong)!important;
}

/* RTL without fragile physical padding swaps; avoid form icon collisions. */
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input,select,textarea):dir(rtl) {
  text-align:start;
}
:where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
:is(input[type="date"],input[type="datetime-local"],input[type="time"],input[type="month"]):dir(rtl) {
  direction:rtl;
}

/* Common vertical fields need no horizontal overflow on mobile. */
@media(max-width:760px) {
 :where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
 :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.form-input,.form-select,.form-textarea) {
   max-width:100%;
 }
 :where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
 :is(.thrs-filter-panel,.thrs-filter-command-bar,.thrs-filter-grid,.filter-bar,.filter-panel) {
   border-radius:14px!important;
 }
}
@media(prefers-reduced-motion:reduce) {
 :where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
 :is(input,textarea,select,.form-input,.form-select,.form-textarea,.thrs-btn-outline,.thrs-btn-ghost,.pagination-btn) {
   animation:none!important;
   transition:none!important;
 }
}
@media(forced-colors:active) {
 :where(.thrs-main-shell .thrs-page,.thrs-modal-card,.thrs-advanced-filter)
 :is(input,select,textarea,button,a):focus-visible {outline:2px solid Highlight!important;}
}

/* Specificity bridge for legacy form classes and inline styled date filters.
   Uses the established theme and page root to beat old !important form layers.
   Dedicated calendar widgets and the browser's native picker still own behavior. */
html[data-theme="dark"] .thrs-main-shell .thrs-page :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,textarea,.form-input,.form-select,.form-textarea
),
html[data-theme="dark"] .thrs-modal-card :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,textarea,.form-input,.form-select,.form-textarea
) {
  background-color:var(--tp-field)!important;
  color:var(--tp-fg)!important;
  border-color:var(--tp-border)!important;
}
html[data-theme="light"] .thrs-main-shell .thrs-page :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,textarea,.form-input,.form-select,.form-textarea
),
html[data-theme="light"] .thrs-modal-card :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,textarea,.form-input,.form-select,.form-textarea
) {
  background-color:var(--tp-field)!important;
  color:var(--tp-fg)!important;
  border-color:var(--tp-border)!important;
}

/* Legacy selectors use !important background shorthand. Normalize generic
   operational fields with matching shorthand, without clobbering Employee
   Center's already-approved premium search and filter treatments. */
html[data-theme="dark"] .thrs-main-shell .thrs-page:not(.thrs-page-employees) :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea
),
html[data-theme="dark"] .thrs-modal-card :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea
),
html[data-theme="light"] .thrs-main-shell .thrs-page:not(.thrs-page-employees) :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea
),
html[data-theme="light"] .thrs-modal-card :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),select,textarea
) {
  background:var(--tp-field)!important;
  color:var(--tp-fg)!important;
}

/* Legacy white filter panels use highly specific !important shorthand.
   Give older operational pages a definitive theme-aware filter surface.
   Employee Center keeps its already-approved independent premium treatment. */
html[data-theme="dark"] .thrs-main-shell .thrs-page:not(.thrs-page-employees) :is(
  .thrs-filter-panel,.thrs-filter-command-bar,.thrs-filter-grid,.filter-panel,.filter-bar
),
html[data-theme="dark"] .thrs-modal-card :is(
  .thrs-filter-panel,.thrs-filter-command-bar,.thrs-filter-grid,.filter-panel,.filter-bar
) {
  background:linear-gradient(125deg,#163657,#102c4c)!important;
  color:#f2f8ff!important;
  border:1px solid rgba(153,196,238,.40)!important;
  box-shadow:0 12px 30px rgba(0,9,29,.25),inset 0 1px 0 rgba(237,247,255,.05)!important;
}
html[data-theme="light"] .thrs-main-shell .thrs-page:not(.thrs-page-employees) :is(
  .thrs-filter-panel,.thrs-filter-command-bar,.thrs-filter-grid,.filter-panel,.filter-bar
),
html[data-theme="light"] .thrs-modal-card :is(
  .thrs-filter-panel,.thrs-filter-command-bar,.thrs-filter-grid,.filter-panel,.filter-bar
) {
  background:linear-gradient(125deg,#f6f9fe,#ffffff)!important;
  color:#112b4d!important;
  border:1px solid rgba(43,84,137,.25)!important;
  box-shadow:0 11px 30px rgba(17,43,78,.07),inset 0 1px 0 rgba(255,255,255,.85)!important;
}