/* ────────────────────────────────────────────────────────────────────
   GLOBAL FORM-CONTROL FOCUS DISCIPLINE — single source of truth
   ────────────────────────────────────────────────────────────────────
   Linked by BOTH layouts (main.ejs → patient pages, admin.ejs → clinic
   admin pages) so this is the ONLY file you ever edit to change focus
   styling site-wide. Loaded before pages.css / clinic.css; the
   `!important` override in the block below wins anyway, so per-context
   stylesheets and per-page <style> blocks can't accidentally reinstate
   their own focus chrome.

   Today's design call (Steve Jobs / Clanics brief): the blinking text
   caret IS the focus affordance. No border-colour shift, no halo
   box-shadow, no outline ring. The static border the element already
   had stays put.

   To flip that decision back on later — site-wide — change the three
   variables below. You do NOT need to hunt down every
   `.foo:focus { border-color: var(--primary) }` rule scattered across
   pages.css and clinic.css: the override forces every focused text
   control to inherit these values.

     --focus-border-color   what colour to paint the border on focus.
                            `inherit` (default) keeps the unfocused
                            border colour intact via the cascade.
                            Examples to re-enable:
                              var(--primary)              → patient green
                              var(--color-brand-purple)   → admin purple
                              currentColor                → match text
                              transparent                 → erase border
     --focus-outline        the `outline` shorthand applied on focus.
                            `none` disables the ring. To restore a
                            keyboard ring, use e.g.
                              2px solid var(--primary)
     --focus-shadow         the `box-shadow` applied on focus. Used
                            for soft halos. `none` disables them all.
                            Example halo: 0 0 0 3px rgba(45,139,122,.15)

   To OPT OUT on a specific element, use a still-higher-specificity
   selector with its own `!important`.
*/
:root {

  --focus-border-color: inherit;
  --focus-outline: none;
  --focus-shadow: none;

}


/* The override. Text-style inputs + textareas + selects + the focus-
   within "wrap" components used by the chat shell, search bar, profile
   editor, etc. Not checkbox / radio / range / file / color — those
   keep their native chrome. Buttons and links are also untouched so
   `:focus-visible` keyboard accessibility rings on non-input controls
   keep working (those are set via component CSS, not against `input`). */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):focus, input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']):focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible, [contenteditable]:focus, [contenteditable]:focus-visible, .cs-input__wrap:focus-within, .chat-input-wrapper:focus-within, .dash-search.is-open:focus-within, .pf-chips:focus-within {

  border-color: var(--focus-border-color) !important;
  outline: var(--focus-outline) !important;
  box-shadow: var(--focus-shadow) !important;
  -webkit-box-shadow: var(--focus-shadow) !important;

}


/* Safari quirk: native focus glow on <textarea> / <input type=text>
   bypasses `outline: none` unless `-webkit-appearance: none` is also
   set. Strip it once, globally. Excludes the form-control types whose
   native chrome we want to keep (checkbox dotted box, range thumb,
   etc.). */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='color']), textarea {

  -webkit-appearance: none;
  appearance: none;

}


/* Prevent iOS auto-zoom on focus by ensuring input/textarea/select font-size is at least 16px on mobile viewports */
@media (max-width: 768px) {

  input:not([type='checkbox']):not([type='radio']), textarea, select {

    font-size: 16px !important;
  
}


}


/* Prevent ugly default browser focus outlines on click or programmatic JS focus returns
   for non-input interactive controls, while keeping them for keyboard tab users. */
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) {

  outline: none !important;
  box-shadow: none !important;

}