/* File: /hr/assets/css/safari-fixes.css
   =================================================================
   Safari / WebKit lockdown.

   WHY: Safari paints a lot of the page itself and only asks the
   stylesheet afterwards. Left alone it will:
     - render every native widget (select, date picker, scrollbar,
       checkbox, the canvas behind the page) in the OS colour scheme,
       so a light Robee on a dark Mac gets dark dropdowns and a dark
       page background;
     - repaint autofilled inputs with its own background and text
       colour, ignoring whatever the field was styled as;
     - inject its own buttons INSIDE inputs (contacts card, key,
       caps-lock warning, search cancel), overlapping the content;
     - auto-link phone numbers, dates and addresses on iOS and style
       them as blue links;
     - inflate text in some blocks on iOS.

   None of that is stylable after the fact, so it has to be refused
   up front. Loaded from includes/tailwind_css.php, which every page
   with a real <head> calls, so this lands app-wide.

   Order note: loaded right after tailwind.css and before the theme
   config. Nothing here competes with app styling - it is almost all
   -webkit-* pseudo-elements plus color-scheme, which no other sheet
   sets. html.dark in dark-mode-config.php is more specific than the
   :root default below, so the dark toggle still wins.
   ================================================================= */

/* -----------------------------------------------------------------
   1. Colour scheme. THE fix for "Safari restyled my form controls".
   Declaring it means Safari renders native widgets to OUR theme
   instead of the operating system's. Light is the default; the dark
   class (set before first paint by dark-mode-config.php) flips it.
   ----------------------------------------------------------------- */
:root      { color-scheme: light; }
html.dark  { color-scheme: dark; }

/* -----------------------------------------------------------------
   2. Autofill. Safari (and Chrome) hard-paint a background on
   autofilled fields that no background-color can override. The only
   reliable defeat is to make the transition to that colour take
   effectively forever, so the field keeps the background we gave it.
   Text colour is forced through -webkit-text-fill-color, which wins
   over the UA's `color`.
   ----------------------------------------------------------------- */
/* Fallbacks matter: the --rb-* scales are only defined on pages that include
   dark-mode-config.php. Without them the declaration is invalid on the landing
   and print pages and Safari silently keeps its own autofill colour. */
:root     { --rb-autofill-fg: rgb(var(--rb-gray-900, 17 24 39)); }
html.dark { --rb-autofill-fg: rgb(var(--rb-gray-100, 245 245 245)); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--rb-autofill-fg);
    caret-color: var(--rb-autofill-fg);
    transition: background-color 100000s ease-in-out 0s,
                color            100000s ease-in-out 0s;
}

/* -----------------------------------------------------------------
   3. Widgets Safari injects into our inputs. These are real UA
   pseudo-elements sitting inside the field, pushing our own icons
   and padding around. Keep them reachable (visibility, not display)
   so password managers still work, but take them out of layout.
   ----------------------------------------------------------------- */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button,
input::-webkit-caps-lock-indicator {
    visibility: hidden;
    position: absolute;
    right: 0;
    pointer-events: none;
    margin: 0;
    width: 0;
}
input::-webkit-textfield-decoration-container { margin-right: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* -----------------------------------------------------------------
   4. Date and time inputs. iOS gives them its own height, centres
   the value and refuses to shrink below its idea of a minimum, which
   is what makes date fields sit taller than the text inputs beside
   them. appearance:none makes them lay out like a normal field; the
   wheel picker still opens on tap.
   ----------------------------------------------------------------- */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: 1.5em;
}
input::-webkit-date-and-time-value {
    text-align: left;
    min-height: 1.2em;
    margin: 0;
}
input::-webkit-calendar-picker-indicator { margin-inline-start: 0; }

/* -----------------------------------------------------------------
   5. iOS text inflation. Safari on iOS resizes text on its own when it
   thinks a column is too narrow. Tailwind's preflight already refuses
   this on <html> and the property inherits, so <body> here is only a
   backstop for the pages that render without Tailwind (print views,
   the crash page).
   ----------------------------------------------------------------- */
html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* -----------------------------------------------------------------
   6. Data detectors. iOS turns bare phone numbers, dates and
   addresses into links and paints them Safari blue. The meta tag in
   includes/tailwind_css.php stops most of it; this catches whatever
   still slips through so an auto-link at least inherits our colour.
   ----------------------------------------------------------------- */
a[href^="tel:"]:not([class]),
a[href^="sms:"]:not([class]),
a[href^="mailto:"]:not([class]),
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* -----------------------------------------------------------------
   7. Safari-only leftovers. @supports (-webkit-hyphens:none) is true
   in Safari and nowhere else, so nothing below can reach Chrome or
   Firefox.
   ----------------------------------------------------------------- */
@supports (-webkit-hyphens: none) {
    /* iOS rounds and gradients bare buttons. Only bites where we did
       not set a radius ourselves, so app styling is untouched. */
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="file"]::-webkit-file-upload-button {
        border-radius: 0;
        background-image: none;
    }
    /* Grey-out on disabled controls, Safari's own, not ours. */
    button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
    /* Long-press callout on things that are buttons, not content. Real links
       are left alone so long-press "open in new tab" keeps working. */
    button, [role="button"] { -webkit-touch-callout: none; }
}