/* StaffSync accessibility hardening layer.
   Keeps WCAG 2.2 perceivable/operable requirements intact across server-rendered
   pages and dynamic fragments. */

:root {
    --staffsync-focus-ring: #111827;
    --staffsync-focus-ring-outer: #ffffff;
    --staffsync-link: #1d4ed8;
    --staffsync-text: #111827;
    --staffsync-muted-on-light: #374151;
    --staffsync-danger: #991b1b;
    --staffsync-success: #064e3b;
    --staffsync-warning: #92400e;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    color: var(--staffsync-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Make the reusable skip link visible and high-contrast when focused. */
.skip-link,
.skip-links a {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 10000;
    transform: translateY(-220%);
    border-radius: 0.75rem;
    background: #111827;
    color: #ffffff !important;
    padding: 0.75rem 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.25);
}

.skip-link:focus,
.skip-links a:focus,
.skip-link:focus-visible,
.skip-links a:focus-visible {
    transform: translateY(0);
}

/* Restore a strong, visible focus indicator even where utility classes remove outlines. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="menuitem"], [role="tab"]):focus-visible {
    outline: 3px solid var(--staffsync-focus-ring) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px var(--staffsync-focus-ring-outer), 0 0 0 9px var(--staffsync-focus-ring) !important;
}

:where(input, select, textarea):focus-visible {
    border-color: #1d4ed8 !important;
}

[aria-invalid="true"],
.is-invalid {
    border-color: var(--staffsync-danger) !important;
    box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.18) !important;
}

/* Minimum target sizing for controls. Inline text links are intentionally excluded. */
:where(button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"], select, textarea, [role="button"], [role="tab"], .btn, .btn-primary, .btn-secondary, .sidebar-link, .mobile-nav-link, .quick-card) {
    min-height: 44px;
}

:where(a.inline-flex, a.flex, button.inline-flex, button.flex, [role="button"].inline-flex, [role="button"].flex) {
    min-height: 44px;
    min-width: 44px;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
}

/* Keep low-contrast utility text readable on light cards and tables. */
:where(.bg-white, .bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100, .bg-blue-50, .bg-indigo-50, .bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-emerald-50, .bg-green-50, .bg-cyan-50) :where(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500),
:where(.bg-white, .bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100, .bg-blue-50, .bg-indigo-50, .bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-emerald-50, .bg-green-50, .bg-cyan-50):where(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500) {
    color: var(--staffsync-muted-on-light) !important;
}

:where(.text-yellow-600, .text-amber-600, .text-orange-600) {
    color: var(--staffsync-warning) !important;
}

:where(.text-red-500, .text-red-600, .text-rose-600) {
    color: var(--staffsync-danger) !important;
}

:where(.text-green-600, .text-emerald-600, .text-teal-600) {
    color: var(--staffsync-success) !important;
}

:where(.text-blue-600, .text-indigo-600, .text-sky-600) {
    color: var(--staffsync-link) !important;
}

/* Links remain identifiable without color alone. Button/nav links keep their existing visual treatment. */
main a[href]:not(.inline-flex):not(.flex):not(.rounded):not(.rounded-lg):not(.rounded-xl):not(.rounded-2xl):not(.sidebar-link):not(.mobile-nav-link) {
    color: var(--staffsync-link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
}

main a[href]:hover {
    text-decoration-thickness: 0.12em;
}

/* Tables keep semantic headings visible to assistive tech and reflow safely. */
table {
    border-collapse: collapse;
}

caption.sr-only,
.sr-only caption {
    position: absolute;
}

th {
    color: #1f2937;
}

.overflow-x-auto:focus-within {
    outline: 2px solid rgba(29, 78, 216, 0.45);
    outline-offset: 2px;
}

/* Non-modal popovers/menus should remain above surrounding content and readable. */
[role="menu"],
[role="dialog"],
.modal {
    color: #111827;
}

/* Icons are decorative unless a parent supplies an accessible name. */
[data-feather][aria-hidden="true"],
svg[aria-hidden="true"] {
    pointer-events: none;
}

/* Respect reduced-motion preferences and avoid animation-triggered discomfort. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .sidebar-transition,
    .overlay,
    .nav-drawer-backdrop,
    .quick-card,
    .transition,
    [class*="hover:-translate"],
    [class*="hover:scale"] {
        transform: none !important;
    }
}

@media (forced-colors: active) {
    :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="menuitem"], [role="tab"]):focus-visible {
        outline: 3px solid CanvasText !important;
        box-shadow: none !important;
    }
}

/* AAA visual presentation and screen-reader hardening additions. */
:root {
    --staffsync-link: #1e3a8a;
    --staffsync-muted-on-light: #374151;
    --staffsync-danger: #7f1d1d;
    --staffsync-success: #064e3b;
    --staffsync-warning: #78350f;
}

html {
    font-size: 100%;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

:where(p, li, dd, dt, figcaption, blockquote, label, legend, input, select, textarea, button, summary, a, td, th, .text-xs, .text-sm, .text-base, .field-help, .field-summary, .page-subtitle, .section-subtitle, .helper-note, .settings-overview__helper, .tenant-setting-card__subtitle, .user-email, .user-meta-pill) {
    line-height: 1.6 !important;
}

:where(.leading-none, .leading-tight, .leading-snug, .leading-5, .leading-6, .leading-7) {
    line-height: 1.5 !important;
}

:where(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500, .text-zinc-400, .text-zinc-500, .text-neutral-400, .text-neutral-500) {
    color: var(--staffsync-muted-on-light) !important;
}

:where(.text-gray-600, .text-slate-600, .text-zinc-600, .text-neutral-600) {
    color: #374151 !important;
}

:where(.text-blue-500, .text-blue-600, .text-blue-700, .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-sky-500, .text-sky-600, .text-sky-700, .text-cyan-600, .text-cyan-700) {
    color: var(--staffsync-link) !important;
}

:where(.text-red-500, .text-red-600, .text-red-700, .text-rose-500, .text-rose-600, .text-rose-700) {
    color: var(--staffsync-danger) !important;
}

:where(.text-green-500, .text-green-600, .text-green-700, .text-emerald-500, .text-emerald-600, .text-emerald-700, .text-teal-500, .text-teal-600, .text-teal-700) {
    color: var(--staffsync-success) !important;
}

:where(.text-yellow-600, .text-yellow-700, .text-amber-600, .text-amber-700, .text-orange-600, .text-orange-700) {
    color: var(--staffsync-warning) !important;
}

/* Preserve contrast on dark panels after the global muted-text correction. */
:where(.bg-gray-900, .bg-slate-900, .bg-sky-950, .bg-emerald-950, .bg-indigo-950, .bg-violet-950, .bg-amber-950, .bg-black, .mobile-sidebar, .nav-drawer-backdrop) :where(.text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400, .text-blue-100, .text-indigo-100, .text-sky-100) {
    color: #ffffff !important;
}

:where(.bg-white, .bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100, .bg-blue-50, .bg-indigo-50, .bg-amber-50, .bg-yellow-50, .bg-red-50, .bg-emerald-50, .bg-green-50, .bg-cyan-50) {
    color: #111827;
}

/* Keep paragraph measure readable while letting controls and data layouts fill available space. */
main :where(p, li, dd) {
    max-width: 80ch;
}

main :where(td p, th p, .modal p, .toast p, .calendar-day p, .quick-card p, .sidebar-link p) {
    max-width: none;
}

/* Darken common action backgrounds so white text also meets enhanced contrast. */
:where(.bg-blue-500, .bg-blue-600, .bg-blue-700, .hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover) {
    background-color: #1e3a8a !important;
}

:where(.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .hover\:bg-indigo-700:hover, .hover\:bg-indigo-800:hover) {
    background-color: #312e81 !important;
}

:where(.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .hover\:bg-emerald-700:hover, .hover\:bg-green-700:hover) {
    background-color: #064e3b !important;
}

:where(.bg-red-500, .bg-red-600, .bg-rose-500, .bg-rose-600, .hover\:bg-red-700:hover, .hover\:bg-rose-700:hover) {
    background-color: #7f1d1d !important;
}

:where(.bg-yellow-500, .bg-yellow-600, .bg-amber-500, .bg-amber-600, .bg-orange-500, .bg-orange-600, .hover\:bg-amber-700:hover, .hover\:bg-orange-700:hover) {
    background-color: #78350f !important;
}


/* Global action-control contrast. Keep this outside Tailwind so page-specific button rules cannot leave dark action buttons with dark text. */
html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .text-white, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-indigo-600, .bg-indigo-700,
    .bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900, .bg-green-600, .bg-emerald-600,
    .bg-red-600, .bg-rose-600, .bg-violet-600, .bg-purple-600, .primary-action, .primary-btn,
    .btn-primary, .save-btn, .db-tool-button, .analytics-button--primary, .notification-save-button, .home-ai-action
),
html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .text-white, .bg-blue-600, .bg-blue-700, .bg-blue-800, .bg-blue-900, .bg-indigo-600, .bg-indigo-700,
    .bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900, .bg-green-600, .bg-emerald-600,
    .bg-red-600, .bg-rose-600, .bg-violet-600, .bg-purple-600, .primary-action, .primary-btn,
    .btn-primary, .save-btn, .db-tool-button, .analytics-button--primary, .notification-save-button, .home-ai-action
) :is(span, strong, em, small, i, svg, path) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Siteimprove final pass: dark/black action buttons.
   Keep this duplicated in accessibility.css so pages that load only the base
   accessibility bundle still receive the same contrast-safe fallback. */
html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
    .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
    .bg-stone-800, .bg-stone-900, .bg-stone-950,
    .bg-black
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #111827 !important;
    border-color: #111827 !important;
}

html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
    .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
    .bg-stone-800, .bg-stone-900, .bg-stone-950,
    .bg-black
) :is(span, strong, em, small, i, svg, path) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body :is(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is(
    .bg-slate-800, .bg-slate-900, .bg-slate-950,
    .bg-gray-800, .bg-gray-900, .bg-gray-950,
    .bg-zinc-800, .bg-zinc-900, .bg-zinc-950,
    .bg-neutral-800, .bg-neutral-900, .bg-neutral-950,
    .bg-stone-800, .bg-stone-900, .bg-stone-950,
    .bg-black
):is(:hover, :focus, :focus-visible) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #0f172a !important;
    border-color: #0f172a !important;
}

/* Siteimprove black-button contrast fix.
   Kept here too for pages that only load the accessibility bundle. */
button.bg-gray-900,
button.bg-gray-800,
button.bg-slate-900,
button.bg-slate-800,
button.bg-black,
a.bg-gray-900,
a.bg-gray-800,
a.bg-slate-900,
a.bg-slate-800,
a.bg-black,
input.bg-gray-900,
input.bg-gray-800,
input.bg-slate-900,
input.bg-slate-800,
input.bg-black,
.action-dark {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #111827 !important;
    background-color: #111827 !important;
    background-image: none !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

button.bg-gray-900 *,
button.bg-gray-800 *,
button.bg-slate-900 *,
button.bg-slate-800 *,
button.bg-black *,
a.bg-gray-900 *,
a.bg-gray-800 *,
a.bg-slate-900 *,
a.bg-slate-800 *,
a.bg-black *,
.action-dark * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

button.bg-gray-900:hover,
button.bg-gray-800:hover,
button.bg-slate-900:hover,
button.bg-slate-800:hover,
button.bg-black:hover,
button.bg-gray-900:focus-visible,
button.bg-gray-800:focus-visible,
button.bg-slate-900:focus-visible,
button.bg-slate-800:focus-visible,
button.bg-black:focus-visible,
a.bg-gray-900:hover,
a.bg-gray-800:hover,
a.bg-slate-900:hover,
a.bg-slate-800:hover,
a.bg-black:hover,
a.bg-gray-900:focus-visible,
a.bg-gray-800:focus-visible,
a.bg-slate-900:focus-visible,
a.bg-slate-800:focus-visible,
a.bg-black:focus-visible,
.action-dark:hover,
.action-dark:focus-visible {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
    border-color: #0f172a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}