/* ==========================================================================
   PESO — Global field + search-input normaliser
   Fixes the "input box nested inside another input box" problem: one visual
   field per control, icon aligned inside, consistent height and padding,
   readable text and placeholder in light and dark. Loaded last by
   config/session.php, after the button system.
   ========================================================================== */

:root {
    --pf-field-h: 42px;
    --pf-field-radius: 12px;
    --pf-field-pad-x: 14px;
    --pf-field-bg: #ffffff;
    --pf-field-border: rgba(16, 48, 38, .2);
    --pf-field-border-focus: #12a15a;
    --pf-field-ring: 0 0 0 3px rgba(10, 143, 77, .18);
    --pf-field-ink: #16261d;
    --pf-field-muted: #5b6b63;
    --pf-field-icon: #64766c;
}
html[data-theme="dark"] body,
html[data-jsa-theme="dark"] body,
body.dark-mode,
body.jsa-dark,
body:not(.light).ef-site,
body:not(.light)[data-peso-page^="admin-"] {
    --pf-field-bg: rgba(255, 255, 255, .05);
    --pf-field-border: rgba(255, 255, 255, .18);
    --pf-field-border-focus: #34dc82;
    --pf-field-ring: 0 0 0 3px rgba(40, 220, 130, .22);
    --pf-field-ink: #eaf3ee;
    --pf-field-muted: #9db3a8;
    --pf-field-icon: #9db3a8;
}

/* --------------------------------------------------------------------------
   1. Search wrappers become the field; the inner input is stripped
   -------------------------------------------------------------------------- */
html body :is(
    .search-wrapper,
    .search-input-wrapper,
    .search-input-wrap,
    .walkin-input-icon,
    .job-input-with-icon,
    .input-with-icon,
    .filter-search-group > .search-wrapper,
    .applicant-search-control .search-wrapper
) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100%;
    min-height: var(--pf-field-h) !important;
    padding: 0 var(--pf-field-pad-x) !important;
    border: 1px solid var(--pf-field-border) !important;
    border-radius: var(--pf-field-radius) !important;
    background: var(--pf-field-bg) !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}
html body :is(.search-wrapper, .search-input-wrapper, .search-input-wrap, .walkin-input-icon, .job-input-with-icon, .input-with-icon):focus-within {
    border-color: var(--pf-field-border-focus) !important;
    box-shadow: var(--pf-field-ring) !important;
}

/* the icon: a static flex item, never absolute/overflowing.
   :not(#\9) is a specificity bump (adds one id-weight without a real id) so
   these settle the many workspace `input{…!important}` rules. */
html body :is(.search-wrapper, .search-input-wrapper, .search-input-wrap, .walkin-input-icon, .job-input-with-icon, .input-with-icon):not(#\9) > :is(i, svg, .fa, [class*="fa-"]) {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--pf-field-icon) !important;
    pointer-events: none !important;
}

/* the inner control: no border/background/radius of its own */
html body :is(.search-wrapper, .search-input-wrapper, .search-input-wrap, .walkin-input-icon, .job-input-with-icon, .input-with-icon):not(#\9) > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .search-input) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--pf-field-ink) !important;
    font: inherit;
    font-size: 14px !important;
}
html body :is(.search-wrapper, .search-input-wrapper, .search-input-wrap, .walkin-input-icon, .job-input-with-icon, .input-with-icon):not(#\9) > :is(input, .search-input)::placeholder {
    color: var(--pf-field-muted) !important;
    opacity: 1 !important;
}
/* remove the browser search "x"/decoration so height stays consistent */
html body input[type="search"]::-webkit-search-decoration,
html body input[type="search"]::-webkit-search-cancel-button,
html body input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }

/* --------------------------------------------------------------------------
   2. Password reveal toggle — one aligned control everywhere
   -------------------------------------------------------------------------- */
html body :is(.pw-field, .auth-input-wrap, .auth-password-wrap, .password-field, .pf-pw-host) {
    position: relative !important;
}
html body :is(.pw-field, .auth-input-wrap, .auth-password-wrap, .password-field):not(#\9) > input:not([type="checkbox"]):not([type="radio"]),
html body .pf-pw-host:not(#\9) > input:not([type="checkbox"]):not([type="radio"]) {
    padding-right: 46px !important;
}
html body :is(.pw-toggle, .auth-password-toggle, [data-password-toggle], [data-pw-toggle]) {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pf-field-icon) !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
html body :is(.pw-toggle, .auth-password-toggle, [data-password-toggle], [data-pw-toggle]) > :is(i, svg) {
    font-size: 15px !important;
    line-height: 1 !important;
}
html body :is(.pw-toggle, .auth-password-toggle, [data-password-toggle], [data-pw-toggle]):hover {
    color: var(--pf-field-border-focus) !important;
    background: color-mix(in srgb, var(--pf-field-border-focus) 12%, transparent) !important;
}
html body :is(.pw-toggle, .auth-password-toggle, [data-password-toggle], [data-pw-toggle]):focus-visible {
    outline: none;
    box-shadow: var(--pf-field-ring) !important;
}
/* Some Chromium browsers (notably Edge) draw their own built-in reveal/clear
   icon inside a password field, which then sits next to our custom button —
   looking like two eye icons on the same field. Hide the native one so ours
   is the only control. */
html body input[type="password"]::-ms-reveal,
html body input[type="password"]::-ms-clear {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. Contrast — readable placeholders + helper text in both themes
   -------------------------------------------------------------------------- */
html body :is(input, select, textarea)::placeholder { color: var(--pf-field-muted); opacity: 1; }
html body :is(.field-hint, .form-hint, .help-text, .peso-form-field small, .support-field small) {
    color: var(--pf-field-muted);
}

/* Dark-mode form-text safety net. Several legacy sheets bake the *light*
   ink token into `!important` label rules, leaving dark-on-dark labels in
   dark mode (auth pages, registration). :not(#\9) adds id-weight so this
   wins without a real id. Only forces colour when a dark signal is set. */
:is(html[data-theme="dark"], html[data-jsa-theme="dark"]) body:not(#\9) :is(
    label, .form-label, .auth-field label, .auth-label-row label,
    .peso-form-field label, .field > label, .form-group > label,
    .section-title, .auth-form-heading h1, .auth-form-heading h2
),
body:is(.dark-mode, .jsa-dark):not(#\9) :is(
    label, .form-label, .auth-field label, .auth-label-row label,
    .peso-form-field label, .field > label, .form-group > label,
    .section-title, .auth-form-heading h1, .auth-form-heading h2
) {
    color: #e7f2ec !important;
    -webkit-text-fill-color: #e7f2ec !important;
}
:is(html[data-theme="dark"], html[data-jsa-theme="dark"]) body:not(#\9) :is(
    .field-hint, .form-hint, .help-text, .peso-form-field small,
    .support-field small, .auth-form-heading p, .auth-secondary-action,
    .form-group small, .registration-submit-note
),
body:is(.dark-mode, .jsa-dark):not(#\9) :is(
    .field-hint, .form-hint, .help-text, .peso-form-field small,
    .support-field small, .auth-form-heading p, .auth-secondary-action,
    .form-group small, .registration-submit-note
) {
    color: #a9c3b7 !important;
    -webkit-text-fill-color: #a9c3b7 !important;
}

/* --------------------------------------------------------------------------
   4. Icon visibility — an <svg> icon with no fill attribute defaults to
   black and disappears on dark / branded surfaces. Inside text contexts,
   make it follow the current text colour instead.
   -------------------------------------------------------------------------- */
html body :is(button, a, summary, h1, h2, h3, h4, label, .btn, .pf-btn, [class*="badge"], [class*="chip"], [class*="pill"], [class*="eyebrow"], [class*="kicker"], [class*="stat"], [class*="hero"], [class*="banner"], [class*="tile"]) svg:not([fill]):not([data-keep-fill]) {
    fill: currentColor;
}
html body :is(button, a, .btn, .pf-btn) svg:not([fill]):not([data-keep-fill]) :is(path, circle, rect, polygon, ellipse):not([fill]) {
    fill: currentColor;
}