/*
 * Surplus GY — global accessibility layer (16A, WCAG 2.1 AA).
 *
 * ⚠️ LOAD THIS LAST, IN EVERY LAYOUT. It exists to undo `outline: none`, which appears five times in
 * public/assets/css/style.css, five more in public/dist/css/style.css and once in custom.css. Between
 * them those rules remove the focus ring from most of the platform, which is a keyboard user unable to
 * see where they are: 2.4.7 Focus Visible, and the single largest AA failure here. A stylesheet loaded
 * before them would simply be overridden.
 *
 * ⚠️ :focus-visible, NOT :focus. A ring on :focus puts an outline round every button a mouse user
 * clicks, which is what led somebody to write `outline: none` in the first place. :focus-visible fires
 * for keyboard and assistive-technology focus and stays quiet for a pointer, so there is no longer a
 * reason to reach for the reset.
 *
 * ⚠️ AND THE :focus RULE BELOW IS THE FALLBACK, deliberately kept. Browsers that do not support
 * :focus-visible get a ring on :focus, which is worse for mice and correct for keyboards; the
 * @supports block then removes it again wherever :focus-visible is understood. Better a visible ring
 * everywhere than none for the people who need it.
 */

/* ---------------------------------------------------------------- focus ring */

:root {
    --sgy-focus-ring: #D9531A;   /* the CTA orange, which passes AA on both white and navy */
    --sgy-focus-halo: rgba(217, 83, 26, .28);
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="tab"]:focus,
[role="link"]:focus,
[contenteditable="true"]:focus {
    outline: 3px solid var(--sgy-focus-ring);
    outline-offset: 2px;
}

@supports selector(:focus-visible) {
    /* Quiet again for pointer users, wherever the browser can tell the difference. */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    summary:focus,
    [tabindex]:focus,
    [role="button"]:focus,
    [role="tab"]:focus,
    [role="link"]:focus,
    [contenteditable="true"]:focus {
        outline: none;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible,
    [role="button"]:focus-visible,
    [role="tab"]:focus-visible,
    [role="link"]:focus-visible,
    [contenteditable="true"]:focus-visible {
        outline: 3px solid var(--sgy-focus-ring);
        outline-offset: 2px;
    }
}

/*
 * ⚠️ NO `border-radius` IN THE RULE ABOVE, however much it looks like it belongs there. border-radius
 * on a :focus-visible rule sets the ELEMENT'S OWN corner radius, not the outline's, so it reshapes the
 * control for as long as it holds keyboard focus. A flat 4px used to sit there and it squared off the
 * 9px action buttons in the admin tables and the fully round bootstrap-toggle status pill the instant
 * they were tabbed to. The outline already follows whatever radius the control has.
 */

/*
 * On a dark surface the orange ring alone can sit too close to the background, so a soft halo is
 * added there rather than changing the ring colour, which would give the platform two focus styles to
 * learn.
 */
.sidebar-nav a:focus-visible,
.navbar-dark a:focus-visible,
[data-sidebar="dark"] a:focus-visible,
.sgy-navbar a:focus-visible {
    box-shadow: 0 0 0 5px var(--sgy-focus-halo);
}

/* ---------------------------------------------------------------- skip link */

/*
 * ⚠️ VISIBLE ONLY WHEN FOCUSED, never display:none. A skip link that is hidden from the accessibility
 * tree is not a skip link: it has to be the first thing a keyboard reaches. 2.4.1 Bypass Blocks.
 */
.skip-to-content-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #0B1733;
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
    text-decoration: none;
}

.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
    left: 0;
    outline: 3px solid var(--sgy-focus-ring);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- screen-reader text */

/*
 * Bootstrap 4 ships .sr-only and Bootstrap 5 renamed it .visually-hidden. The admin panel is
 * Bootstrap 4 and the front end is mixed, so both names are defined here and neither breaks when a
 * view uses the one its own framework does not have.
 */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible,
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ---------------------------------------------------------------- reduced motion */

/*
 * 2.3.3 Animation from Interactions. Carousels, the sidebar slide and the various fade-ins are
 * animation somebody did not ask for; a person who has asked their operating system to stop it should
 * not have to ask again here.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------- tap targets */

/*
 * 2.5.5 Target Size.
 *
 * ⚠️ THERE IS NO CSS SELECTOR FOR "A BUTTON WITH AN ICON AND NO TEXT". Do not try to write one again.
 * This block used to end `.btn.btn-sm > i:only-child`, meaning to catch the icon-only row actions in
 * the dashboard tables. `:only-child` counts ELEMENT children and cannot see text nodes, so
 * `<button class="btn btn-sm"><i class="fa fa-filter"></i> Filter</button>` matched it just as
 * readily. Measured on the vendor Manage Products list: Filter went 63x28 -> 94x56, Reset 67x28 ->
 * 99x56, Add New 86x28 -> 120x56, every row action 30x28 -> 62x56, and the table overflowed by 160px;
 * the admin returns list grew from a 96px row to a 145px row. `:has()` is no help either, because
 * text nodes are invisible to it as well.
 *
 * ⚠️ AND SIZING THE <i> IS WRONG WHATEVER THE SELECTOR: the tap target is the control, never the
 * glyph inside it. That rule only appeared to do anything because Font Awesome and Line Awesome set
 * their glyphs `display:inline-block`. Remix Icon does not, so `[class^=ri-]` stayed inline,
 * min-width/min-height did not apply to it, and the Export button on that same toolbar was the one
 * button that stayed the right size. A rule whose effect depends on which icon font a view happens to
 * use is not a rule.
 *
 * So target size is asked for by POINTER TYPE instead. The admin and vendor panels are desktop tools,
 * where 2.5.5 is satisfied by the pointer's own precision (and by the 2.5.5 exception for an
 * equivalent alternative), and 44px buys nothing while destroying the density of a 30-row table. On a
 * touch screen the same tables get the full target, which is where the criterion was aimed all along.
 */
/*
 * ⚠️ EVERY SELECTOR BELOW MATCHES REAL MARKUP, and the next person to add one should check that it
 * still does. The block used to carry `.sgy-icon-btn`, which appears nowhere in this codebase and
 * never did, so it read as though icon-only controls were covered when nothing was covering them.
 */
.btn-icon,          /* Velzon's round topbar/back-to-top buttons: genuinely icon-only, 3 usages */
button.close,       /* Bootstrap 4 modal + alert closer, which the admin panel ships. Border-box with
                       12px/20px padding, so it is already 53x44 and this is a no-op that documents
                       the intent and guards a future restyle. */
.icon-btn {         /* NOT an icon-only control: it is the marketing panel's wide text CTA, 12 usages.
                       Kept anyway because 44px is the right minimum for a storefront touch CTA, so
                       dropping it would shrink a target rather than fix one. */
    min-width: 44px;
    min-height: 44px;
}

/*
 * ⚠️ DO NOT ADD `.btn-close` HERE, tempting as it looks next to `button.close`. It is the Bootstrap 5
 * spelling of the same control and the vendor panel uses it 41 times, but Velzon gives it 16px of
 * padding and leaves it `box-sizing: content-box`, so a 44px minimum makes it 76x76 and a dismissible
 * alert ends up with a close button larger than the alert. It measures 46x46 already, so it clears
 * 2.5.5 on its own and needs nothing from this file. Measured, not assumed.
 */

@media (pointer: coarse) {
    /*
     * ⚠️ `pointer: coarse`, NOT `any-pointer: coarse`. `any-pointer` matches a desktop that merely has
     * a touchscreen attached, which would put every dashboard table straight back to the inflated
     * sizes described above. `pointer` reports the PRIMARY input, so this fires for a phone or tablet
     * and stays quiet for a mouse.
     *
     * If a particular desktop control ever does need a bigger target, size that control in its own
     * panel's sheet. Do not widen this block: it is loaded by every layout on the platform, so
     * anything added here lands on the storefront, all four dashboards and every modal at once.
     */
    .btn.btn-sm,
    .action-btn-group .btn,
    .action-btn-tab .btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---------------------------------------------------------------- contrast floor */

/*
 * 1.4.3 Contrast (Minimum), AA: 4.5:1 for normal text, 3:1 for large text (>=24px, or >=18.66px at
 * weight 700). Every ratio in this block was MEASURED in the browser with getComputedStyle across the
 * admin, seller, agent, company and customer panels, then recomputed for the replacement. None of it
 * was judged by eye, because judging by eye is how the previous two attempts at this went wrong.
 *
 * ⚠️ THE FILL COLOURS BELOW CARRY WHITE TEXT AT 10-13px, WHICH IS NORMAL TEXT. A status badge looks
 * like a decoration and reads like a word: "Verified", "Approved", "ON", "Paid". The 3:1 large-text
 * allowance never applies to it, so a mid-tone green that looks perfectly solid can still be a
 * failure. `.badge-success` measured 2.29:1 on 16 admin screens and 2 company screens, which is not
 * a near miss, it is barely legible.
 *
 * ⚠️ AND THIS BLOCK NEEDS !important, WHICH IS NOT LAZINESS. The theme's own colours arrive from
 * public/dist/css/style.min.css and the bootstrap-toggle CDN sheet, several of them already carrying
 * !important themselves, and a plain declaration here loses to them however late the file loads. A
 * rule that loses is a fix that appears to have been made and has not been.
 *
 * ⚠️ WHAT IS DELIBERATELY NOT TOUCHED: the CTA orange #D9531A behind white text, which measures
 * 4.04:1 and is the brand's primary button on 78 screens. Changing it is a brand decision, not an
 * accessibility repair, so it is reported rather than altered. Where the SAME orange is used as INK
 * on a light background it is a different question and is darkened below: the brand defines #D9531A
 * as a fill that sits behind white text, and ink on white has to earn its own ratio.
 */

/* Muted body text. The panels put it on white AND on the grey card and page surfaces, so it is
   measured against the darkest of those (#f2f4f5), not against white. The previous value #6b7686
   cleared 4.60:1 on white and only 4.17:1 on the grey, which is why it kept coming back. */
.text-muted,
.breadcrumb-item.active {
    color: #5F6B7F !important;   /* 5.39:1 on white, 4.89:1 on #f2f4f5, 4.76:1 on #eef1f6 */
}

/* Solid status fills that carry white text. */
.badge-success,
.btn-success,
.toggle-on.btn-success {
    background-color: #157347 !important;   /* 5.87:1, was #5ac146 at 2.29 and #16a463 at 3.22 */
    border-color: #157347 !important;
    color: #fff !important;
}

.badge-danger,
.btn-danger,
.toggle-off.btn-danger {
    background-color: #B02A37 !important;   /* 6.50:1, was #fa5838 at 3.22 and #e0483d at 4.07 */
    border-color: #B02A37 !important;
    color: #fff !important;
}

.badge-info {
    background-color: #0E6E7D !important;   /* 5.92:1, was #137eff at 3.85 */
    color: #fff !important;
}

/*
 * The same four statuses again in Bootstrap 5 spelling, because the seller panel is Velzon and writes
 * `.badge.bg-success` where the admin panel writes `.badge-success`.
 *
 * ⚠️ THE SELLER PANEL DOES NOT LOAD bs5-compat.css, so correcting the values there reaches the admin
 * and nothing else. Velzon's own palette is lighter than the admin theme's and fails harder: white on
 * its #6ADA7D measured 1.76:1, and the order-count pill in the sidebar, white on #FA896B, measured
 * 2.37:1 on all 39 seller screens. This is the rule that reaches them.
 *
 * ⚠️ `.badge.bg-success` DOES NOT MATCH `.badge.bg-success-subtle`: they are different class names,
 * so the subtle tints keep their light backgrounds and are fixed by the ink rules below instead.
 */
.badge.bg-success { background-color: #157347 !important; color: #fff !important; }
.badge.bg-danger  { background-color: #B02A37 !important; color: #fff !important; }
.badge.bg-warning { background-color: #8A6100 !important; color: #fff !important; }
.badge.bg-info    { background-color: #0E6E7D !important; color: #fff !important; }

/* ⚠️ .btn-info IS NOT IN THAT LIST. surplus-brand.css deliberately repaints it navy #0B1733 (17.73:1)
   because it is the admin panel's "Add New" button, and a rule here would quietly undo that. */

/* Bootstrap 4 already gives .badge-warning dark ink on amber, which passes; it is restated so that a
   future theme swap cannot turn it white without somebody noticing this line. */
.badge-warning {
    background-color: #FFC107 !important;
    color: #0B1733 !important;               /* 10.88:1 */
}

/* The same hues used as ink on a light surface. */
.text-success { color: #157347 !important; }   /* 5.87:1 on white, was #5ac146 at 2.29 */
.text-danger  { color: #B02A37 !important; }   /* 6.50:1 on white, was #fa5838 at 3.22 */
.text-warning { color: #8A6100 !important; }   /* 5.54:1 on white, was #ffbc34 at 1.68 */
.text-info    { color: #0E6E7D !important; }   /* 5.92:1 on white */

.btn-outline-danger    { color: #B02A37 !important; border-color: #B02A37 !important; }
.btn-outline-warning   { color: #8A6100 !important; border-color: #8A6100 !important; }
.btn-outline-success   { color: #157347 !important; border-color: #157347 !important; }
/* Velzon's outline-secondary is a pale periwinkle, #7084C7, which measured 3.61:1 on white in the
   seller and restaurant panels. Same hue, darkened until it reads: 6.29:1. */
.btn-outline-secondary { color: #4A5BA6 !important; border-color: #4A5BA6 !important; }

/* Bootstrap's inline <code> pink sits on the panels' grey code wells at 3.56:1. */
code {
    color: #9A1852;   /* 7.45:1 on #f5f7fa */
}

/*
 * The current page number in a paginator. Velzon fills it #5EA3CB and puts white on it, which
 * measured 2.77:1, and the number telling you where you are in a 34-page list is not decoration.
 * Same blue, darkened to 5.48:1.
 *
 * ⚠️ THE DISABLED ARROWS ARE LEFT ALONE ON PURPOSE. `.page-item.disabled .page-link` measures 3.43:1
 * and 1.4.3 exempts an inactive control; darkening it would make a dead arrow look live, which is
 * worse than the grey.
 */
.page-item.active .page-link {
    background-color: #2F6F96 !important;
    border-color: #2F6F96 !important;
    color: #fff !important;
}

/*
 * ⚠️ THE DARK CHROME IS EXEMPT, AND LEAVING IT OUT WOULD HAVE BROKEN THE MENUS.
 *
 * The ink rules above assume a light surface, because that is where every measured failure was. The
 * navigation is the exception: the seller sidebar `.app-menu` and the admin and company `.left-sidebar`
 * are navy #0B1733, and they carry these very classes. The seller sidebar puts `.badge.bg-soft-warning
 * .text-warning` NEW flags on five menu items, sitting on a background whose relative luminance
 * measures 0.009. Darkening `.text-warning` to #8A6100 there would have taken a badge that is currently
 * easy to read and made it dark amber on near-black, which is turning a fix into a regression on the
 * most-used control in the panel.
 *
 * So the light tones are restored inside the dark containers. These are not arbitrary: on that navy
 * #F7B84B measures 10.06:1, #6ADA7D 10.08:1 and #FA896B 7.48:1, all comfortably AA. The colours that
 * fail on white are the same colours that pass on navy, which is the whole point of scoping this by
 * surface rather than by class.
 */
.app-menu .text-warning,
.left-sidebar .text-warning,
#sidebarnav .text-warning,
.sidebar-nav .text-warning { color: #F7B84B !important; }

.app-menu .text-success,
.left-sidebar .text-success,
#sidebarnav .text-success,
.sidebar-nav .text-success { color: #6ADA7D !important; }

.app-menu .text-danger,
.left-sidebar .text-danger,
#sidebarnav .text-danger,
.sidebar-nav .text-danger { color: #FA896B !important; }

.app-menu .text-muted,
.left-sidebar .text-muted,
#sidebarnav .text-muted,
.sidebar-nav .text-muted { color: #C4CBD8 !important; }   /* 9.9:1 on #0B1733 */

/* ---------------------------------------------------------------- forced colours */

/*
 * Windows High Contrast removes background images and box-shadows, which is where several controls
 * here draw their entire visible boundary. The ring is redrawn in a system colour so focus survives.
 */
@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}