/**
 * 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));
}

/* 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;
    }
}