/*
    Form field styling shared by BOTH web surfaces.

    Its own file because the public site (_PublicLayout.cshtml) and the operations portal
    (_Layout.cshtml) do not share a stylesheet — the public site carries its own inline <style>
    block and never loads site.css. A rule put in site.css alone would therefore miss every
    customer-facing form, and the same rule pasted into both layouts is two things to keep in step.
    One file, linked from both, is one thing.
*/

:root {
    /*
        Placeholder text. The single knob for how faded a hint looks, everywhere on the web.

        Bootstrap's default is --bs-secondary-color (~#6c757d), which reads almost as dark as a real
        value and makes an empty field look filled in. This is deliberately lighter so a hint reads
        as a hint.

        It sits below the WCAG 4.5:1 contrast threshold, which is acceptable HERE and only here
        because every field carries a visible <label> — the placeholder is a supplementary example,
        never the only cue. Do not reuse this colour for text that has to be read.

        The mobile apps mirror this value as PlaceholderText in each app's Colors.xaml; they cannot
        share a CSS file, so keep the three in step by eye if the shade changes.
    */
    --hcs-placeholder: #a7b0ba;
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
    color: var(--hcs-placeholder) !important;

    /*
        Firefox applies its own opacity to placeholders, so without this the same colour renders
        lighter there than in Chrome and Safari. Pinning it means the shade above is the shade that
        actually appears.
    */
    opacity: 1;
}

/*
    A <select> showing its own empty option renders that option as ordinary text, not as a
    placeholder, so ::placeholder never reaches it and it needs the colour applied directly.
*/
.form-select:has(option[value=""]:checked) {
    color: var(--hcs-placeholder);
}

/*
    The teal button variants, defined through Bootstrap's own custom properties.

    THE BUG THIS FIXES. These were declared as plain `background-color` / `color` rules, which looks
    equivalent and is not. Bootstrap 5.3 builds every button state from variables:

        .btn:focus-visible { color: var(--bs-btn-hover-color);
                             background-color: var(--bs-btn-hover-bg); ... }

    A custom .btn-teal never set those, so on the class they resolved to nothing. An empty var() with
    no fallback makes the whole declaration invalid at computed-value time — background-color falls
    back to transparent and color to whatever it inherits. The result: tabbing to a teal button made
    it disappear. Reported on the public site's Send Enquiry button, where a keyboard user simply
    lost the control they were about to press.

    Mouse users never saw it: :focus-visible only matches keyboard focus, and the explicit :hover
    rule covered the pointer path. That is why it survived every click-through of the site.

    Setting the variables rather than adding another :focus override means Bootstrap's own machinery
    produces hover, focus, active and disabled correctly, with no specificity race against rules
    loaded from a CDN.

    Defined HERE, in the file both layouts load, because there were three copies — site.css,
    _PublicLayout's inline <style> and Login.cshtml's — and only the first had focus states at all.
    The other two are exactly where the bug lived.
*/
.btn-teal {
    --bs-btn-color: #fff;
    --bs-btn-bg: #008080;
    --bs-btn-border-color: #008080;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #006666;
    --bs-btn-hover-border-color: #006666;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005555;
    --bs-btn-active-border-color: #005555;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #66b2b2;
    --bs-btn-disabled-border-color: #66b2b2;

    /* The focus ring. Without it Bootstrap computes rgba(,.5), which is invalid, so a keyboard user
       gets no visible indication of where they are at all. */
    --bs-btn-focus-shadow-rgb: 0, 128, 128;
}

.btn-outline-teal {
    --bs-btn-color: #008080;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #008080;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #008080;
    --bs-btn-hover-border-color: #008080;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #006666;
    --bs-btn-active-border-color: #006666;

    --bs-btn-disabled-color: #66b2b2;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #66b2b2;

    --bs-btn-focus-shadow-rgb: 0, 128, 128;
}

/*
    A choice drawn as a card: the sign-in page's "New to HomeCareSaathi?" pair, a muted question over
    a teal action. The text inside carries its own colours, so hover only tints the background and
    turns the border teal. An outline button turns grey on hover, and that text vanished into it.
    The tint is light enough to keep the teal text above 4.5:1.
*/
.btn-choice {
    --bs-btn-color: #212529;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #dee2e6;

    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #f6fafa;
    --bs-btn-hover-border-color: #008080;

    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #f6fafa;
    --bs-btn-active-border-color: #006666;

    --bs-btn-focus-shadow-rgb: 0, 128, 128;
}

/*
    "Referred by Asha" above the referral code on sign-up and "Join as a care partner" (PENDING.md
    §19.2). Here rather than in site.css because the public layout doesn't load site.css.
*/
.hcs-referral-note {
    background-color: #e0f2f1;
    color: #006666;
}