/* Global interaction and accessibility foundation. Loaded last by design. */
:root {
    --focus-ring: #2563eb;
    --focus-halo: rgba(37, 99, 235, .24);
}

html[data-theme="dark"] {
    --focus-ring: #93c5fd;
    --focus-halo: rgba(147, 197, 253, .28);
}

html {
    scroll-padding-top: calc(var(--header-height, 66px) + 12px);
}

body {
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: rgba(0, 61, 165, .14);
}

button,
a,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

:where(button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
    outline: 3px solid var(--focus-ring) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--focus-halo);
}

:where(.form-group, .form-field, .input-group):focus-within > label {
    color: var(--brand-mid, #003da5);
}

.skip-link {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    z-index: 100000;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #0f172a);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(-100% - 16px));
    transition: transform .16s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.main-content,
.view,
.modal-body,
.table-responsive,
.kanban-board {
    min-width: 0;
}

.modal-overlay {
    overscroll-behavior: contain;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
}

:where(h1, h2, h3, h4, .view-title, .modal-title) {
    text-wrap: balance;
}

:where(p, td, th, label, .task-title, .task-description, .form-hint) {
    overflow-wrap: anywhere;
}

:where(.summary-value, .kpi-value, .metric-value, td[data-value], input[type="number"]) {
    font-variant-numeric: tabular-nums;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100dvh;
    }

    .main-content {
        width: 100%;
        flex-basis: 100%;
    }

    :where(button, .btn-primary, .btn-outline, .modal-close, .nav-item) {
        min-height: 44px;
    }

    .modal-overlay {
        align-items: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}