/**
 * Accessibility Enhancements CSS
 *
 * Improves accessibility and UX across the application
 */

/* Screen Reader Only (sr-only) Utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only:focus,
.sr-only:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Focus Visible Improvements — WCAG 2.4.7 Focus Visible (Level AA) */
*:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: 0.25rem;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-color: hsl(var(--ring));
}

/* The ring is there the moment the keyboard arrives. The library's buttons, sort
   headers and menu triggers animate every property (transition-all), which faded
   the outline and ring in from transparent, so a quick Tab landed on a control
   that showed nothing. Focused controls keep their colour and size transitions
   but never animate the outline or the ring. */
:focus-visible {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
        opacity, transform, translate, scale, rotate, width, height, padding;
}

/* And it leaves the moment the keyboard does. The library's outline-none is a
   transparent solid outline, which those same transitions faded out over the
   control Tab had left, so two controls looked focused at once. With no outline
   at all when not focused, the ring is removed at once. */
.outline-none:not(:focus-visible) {
    outline-style: none;
}

/* Ensure mouse clicks don't show focus ring */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Skip Link Styling */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    z-index: 100;
    font-weight: 500;
}

.skip-link:focus {
    top: 0;
}

/* Loading State Animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.dark .skeleton {
    background: linear-gradient(90deg, #2d3748 25%, #1a202c 50%, #2d3748 75%);
    background-size: 200% 100%;
}

/* Form Validation States */
.form-control-error {
    border-color: #ef4444 !important; /* red-500 */
    background-color: #fef2f2; /* red-50 */
}

.form-control-error:focus {
    ring-color: #ef4444;
    border-color: #ef4444;
}

.form-control-success {
    border-color: #10b981 !important; /* green-500 */
    background-color: #f0fdf4; /* green-50 */
}

.form-error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items-center;
    gap: 0.25rem;
}

.form-success-message {
    color: #10b981;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items-center;
    gap: 0.25rem;
}

/* Improved Button States */
button:disabled,
button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hover is a colour change only (design register: no drop shadows, no lift);
   each button's own hover classes carry it. */

button:not(:disabled):active {
    transform: translateY(0);
}

/* Better Color Contrast for Status Badges */
.status-badge-pending {
    background-color: #fef3c7; /* yellow-100 */
    color: #78350f; /* yellow-900 */
    border: 1px solid #fde68a; /* yellow-200 */
}

.status-badge-approved {
    background-color: #dbeafe; /* blue-100 */
    color: #1e3a8a; /* blue-900 */
    border: 1px solid #bfdbfe; /* blue-200 */
}

.status-badge-completed {
    background-color: #dcfce7; /* green-100 */
    color: #14532d; /* green-900 */
    border: 1px solid #bbf7d0; /* green-200 */
}

.status-badge-rejected {
    background-color: #fee2e2; /* red-100 */
    color: #7f1d1d; /* red-900 */
    border: 1px solid #fecaca; /* red-200 */
}

.status-badge-active {
    background-color: #d1fae5; /* green-100 */
    color: #065f46; /* green-800 */
    border: 1px solid #a7f3d0; /* green-200 */
}

.status-badge-inactive {
    background-color: #f3f4f6; /* gray-100 */
    color: #1f2937; /* gray-800 */
    border: 1px solid #e5e7eb; /* gray-200 */
}

/* Dark Mode Support for Status Badges */
.dark .status-badge-pending {
    background-color: #78350f;
    color: #fef3c7;
}

.dark .status-badge-approved {
    background-color: #1e3a8a;
    color: #dbeafe;
}

.dark .status-badge-completed {
    background-color: #14532d;
    color: #dcfce7;
}

.dark .status-badge-rejected {
    background-color: #7f1d1d;
    color: #fee2e2;
}

/* Smooth Transitions */
* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Modal/Dialog backdrop (design/patterns.json: dialog). Slate-900 at 50%, no blur. */
.modal-backdrop {
    background-color: rgb(15 23 42 / 0.5);
}

/* Better Tooltip Styling */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background-color: #1f2937;
    color: white;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    z-index: 50;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Responsive Table Improvements */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    .print-page-break {
        page-break-after: always;
    }
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High-Contrast (Forced Colors) Mode — Modal Accessibility */
@media (forced-colors: active) {
    /* Modal panel: use system window/text colours; ensure visible border */
    [role="dialog"],
    [role="alertdialog"] {
        background-color: Window !important;
        color: WindowText !important;
        border: 2px solid ButtonText !important;
        forced-color-adjust: none;
    }

    /* Backdrop: ensure it does not disappear or occlude controls */
    .fixed.inset-0.bg-black\/50,
    .fixed.inset-0[class*="bg-gray-6"],
    .fixed.inset-0[class*="bg-black"] {
        background-color: Canvas !important;
        opacity: 0.7 !important;
        forced-color-adjust: auto;
    }

    /* Close buttons: ensure icon-only buttons have a visible boundary */
    [role="dialog"] button[aria-label^="Close"],
    [role="alertdialog"] button[aria-label^="Close"] {
        border: 1px solid ButtonText !important;
        color: ButtonText !important;
        background-color: ButtonFace !important;
        forced-color-adjust: none;
    }

    /* Focus indicators inside modals must remain visible */
    [role="dialog"] :focus-visible,
    [role="alertdialog"] :focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }

    /* Loading spinners: replace animated border trick with system colour */
    [role="status"] .animate-spin,
    [role="dialog"] .animate-spin,
    [role="alertdialog"] .animate-spin {
        border-color: ButtonText !important;
        border-right-color: transparent !important;
        border-bottom-color: transparent !important;
    }
}