/* Shared control UX and accessibility: physical left X, centered Y.
   Loaded after component styles; affects visual layout only. */

/* Maintain WCAG-friendly text, icon and focus contrast in either resolved theme. */
:root {
  --control-ink: #101828;
  --control-secondary: #475467;
  --control-surface: #ffffff;
  --control-outline: #98a2b3;
  --control-focus: #1d4ed8;
  --control-focus-halo: rgba(29, 78, 216, .20);
  --control-icon: #475467;
}
html[data-theme="dark"] {
  --control-ink: #f1f5f9;
  --control-secondary: #cbd5e1;
  --control-surface: #0f172a;
  --control-outline: #64748b;
  --control-focus: #93c5fd;
  --control-focus-halo: rgba(147, 197, 253, .26);
  --control-icon: #cbd5e1;
}

/* Form labels and informative copy should remain readable without relying
   on placeholder text, on both narrow and wide screens. */
:where(.form, .filters, .inline, .login-shell, .contacts-v2-form-card) label {
  color: var(--control-ink) !important;
  font-size: max(14px, .925rem);
  line-height: 1.45 !important;
}
.login-shell .muted,
.login-shell .login-help,
:where(.form, .contacts-v2-form-card) .field-help {
  color: var(--control-secondary) !important;
  line-height: 1.65 !important;
}
.login-shell a:not(.google-login-button) { color: #1d4ed8 !important; }
html[data-theme="dark"] .login-shell a:not(.google-login-button) { color: #93c5fd !important; }

/* Avoid changing checkbox, radio, switch, hidden and other special controls. */
:where(.form, .filters, .inline, .login-shell, .contacts-v2-form-card)
  :is(input[type="text"], input[type="email"], input[type="password"],
      input[type="search"], input[type="tel"], input[type="url"],
      input[type="number"], input[type="date"], input[type="datetime-local"],
      input:not([type]), select, textarea) {
  min-height: 44px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  background: var(--control-surface) !important;
  color: var(--control-ink) !important;
  border-color: var(--control-outline) !important;
}
:where(.form, .login-shell, .actions, .number-actions, .contact-actions, .contacts-v2-actions)
  :is(button:not([class*="icon-only"]), .button, input[type="submit"]) {
  min-height: 44px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Distinct, keyboard-visible focus regardless of the older shadow-only rule. */
:where(main, .container, .login-shell)
  :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--control-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--control-focus-halo) !important;
}
.topbar :is(a, button, select):focus-visible {
  outline: 3px solid #93c5fd !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(147, 197, 253, .22) !important;
}
:where(.form, .filters, .inline, .login-shell, .contacts-v2-form-card)
  :is(input, select, textarea):focus-visible {
  border-color: var(--control-focus) !important;
}

/* Eye toggle: always on the PHYSICAL LEFT, centered against the input's height.
   The login page keeps its previously tuned 0.5px vertical optical offset. */
.password-field-modern {
  position: relative !important;
  display: block;
  width: 100%;
}
/* Match the wrapper bounds to the actual input border, not an input margin. */
.password-field-modern > input {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 54px !important;
  padding-right: 12px !important;
  min-height: 48px !important;
}
/* Physical left in RTL and LTR. Do not set inset-inline-* to auto here:
   logical insets alias left/right and previously canceled left: 5px in RTL. */
.password-field-modern > .password-eye-button {
  position: absolute !important;
  left: 5px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: var(--control-icon) !important;
  border-radius: 12px !important;
  background: transparent !important;
  z-index: 1;
}
.login-auth-form .password-eye-button {
  top: calc(50% - .5px) !important;
}
.password-field-modern .password-eye-button:hover {
  background: rgba(100, 116, 139, .16) !important;
}
.password-field-modern .password-eye-button svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
  flex: 0 0 22px;
}
.password-field-modern.is-visible .password-eye-button {
  color: #1d4ed8 !important;
}
html[data-theme="dark"] .password-field-modern.is-visible .password-eye-button {
  color: #93c5fd !important;
}

/* Google sign-in: the icon has a fixed left coordinate, the label is centered
   independently (no RTL/LTR flex-order surprises). */
.google-login-button.google-redirect-button {
  position: relative !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 48px !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
  color: #1f2937 !important;
  background: #fff !important;
  border-color: #9ca3af !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.google-login-button.google-redirect-button .google-icon-box {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.google-login-button.google-redirect-button .google-button-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* Search fields with embedded decoration: left in both Hebrew and English. */
.search-line > span {
  left: 12px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--control-icon) !important;
}
.search-line input { padding-left: 40px !important; }

/* Mixed icon+label actions: only direct icon children; do not move icon-only
   controls, nav buttons, copied-status indicators or decorative elements. */
:where(.form, .actions, .number-actions, .contact-actions, .contacts-v2-actions)
  :is(button, .button):has(> :is(svg, .lucide, .action-icon, .button-icon)):not(.password-eye-button) {
  position: relative !important;
  padding-left: 46px !important;
  padding-right: 46px !important;
  justify-content: center !important;
  text-align: center !important;
}
:where(.form, .actions, .number-actions, .contact-actions, .contacts-v2-actions)
  :is(button, .button):has(> :is(svg, .lucide, .action-icon, .button-icon)):not(.password-eye-button)
  > :is(svg, .lucide, .action-icon, .button-icon) {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Focus and text must remain legible in accessibility high-contrast mode. */
@media (forced-colors: active) {
  .password-field-modern .password-eye-button,
  .google-login-button.google-redirect-button {
    forced-color-adjust: auto;
    border: 1px solid ButtonText !important;
  }
}