/* Färgvariabler */
:root {
    --focus-color: #c056d7;
}

/* Göm fokus för alla element utom formulärfält */
body:not(.user-is-tabbing) a:focus,
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) [role="button"]:focus,
body:not(.user-is-tabbing) [tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select):focus,
body:not(.user-is-tabbing) [tabindex="-1"]:focus,
body:not(.user-is-tabbing) .divMessageViewer:focus,
body:not(.user-is-tabbing) .errorMessage:focus,
body:not(.user-is-tabbing) .infoMessage:focus,
body:not(.user-is-tabbing) .alertMessage:focus,
body:not(.user-is-tabbing) .successMessage:focus,
body:not(.user-is-tabbing) .infoBanner:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Fokus för hopplänkar */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
}

.skip-link {
    position: absolute;
    top: -55px;
    left: 0;
    background: var(--focus-color);
    color: #000;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: top 0.25s ease;
}

.user-is-tabbing .skip-link:focus {
    top: 10px;
    left: 10px;
}

.skip-link:hover {
    padding: 14px 22px;
}

/* Innehåll endast för skärmläsare */
.sr-only {
    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;
}

/* Fokus för interaktiva element */
.user-is-tabbing a:focus,
.user-is-tabbing button:focus,
.user-is-tabbing [role="button"]:focus,
.user-is-tabbing [href]:focus,
.user-is-tabbing
[tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select):focus,
.user-is-tabbing .sort-link:focus,
.user-is-tabbing .modal-content:focus,
.user-is-tabbing h1:focus,
.user-is-tabbing h2:focus,
.user-is-tabbing h3:focus,
.user-is-tabbing h4:focus,
.user-is-tabbing h5:focus,
.user-is-tabbing h6:focus,
.user-is-tabbing [role="region"]:focus {
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 4px !important;
    z-index: 9999;
}

/* Högkontrastläge */
@media (prefers-contrast: high) {
    .user-is-tabbing a:focus,
    .user-is-tabbing button:focus,
    .user-is-tabbing [role="button"]:focus,
    .user-is-tabbing [href]:focus,
    .user-is-tabbing
    [tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select):focus,
    .user-is-tabbing .sort-link:focus,
    .user-is-tabbing .modal-content:focus,
    .user-is-tabbing h1:focus,
    .user-is-tabbing h2:focus,
    .user-is-tabbing h3:focus,
    .user-is-tabbing h4:focus,
    .user-is-tabbing h5:focus,
    .user-is-tabbing h6:focus,
    .user-is-tabbing [role="region"]:focus {
        outline: 3px solid #000 !important;
        background-color: #ffff00 !important;
        color: #000 !important;
    }
}

/* Fokus för interaktiva element */
.user-is-tabbing input:focus,
.user-is-tabbing textarea:focus,
.user-is-tabbing select:focus {
    border-color: var(--focus-color) !important;
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 4px !important;
}

.user-is-tabbing button:focus {
    border-color: var(--focus-color) !important;
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 4px !important;
}

/* Fokus för scrolla till toppen knapp */
.user-is-tabbing .scroll-to-top:focus {
    border-color: rgb(255, 255, 255) !important;
    outline: 3px solid var(--focus-color) !important;
    outline-offset: 4px !important;
}

/* Fokus för felaktiga fält */
.error-field {
    border-color: var(--error-color, #d32f2f) !important;
    background-color: rgba(211, 47, 47, 0.05) !important;
}

.user-is-tabbing .error-field:focus {
    border-color: var(--error-color, #d32f2f) !important;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2) !important;
}

/* Tabelltillgänglighet */
table caption {
    font-weight: 600;
    text-align: left;
    margin-bottom: 8px;
    color: var(--text-color, #333);
}

.user-is-tabbing .sort-link:focus {
    outline: 3px solid var(--focus-color);
    outline-offset: 4px;
}

/* Fokus för modaler */
.user-is-tabbing .modal-content:focus {
    outline: 3px solid var(--focus-color);
    outline-offset: -3px;
}

/* Fokus för rubriker */
.user-is-tabbing h1:focus,
.user-is-tabbing h2:focus,
.user-is-tabbing h3:focus,
.user-is-tabbing h4:focus,
.user-is-tabbing h5:focus,
.user-is-tabbing h6:focus,
.user-is-tabbing [role="region"]:focus {
    outline: 3px solid var(--focus-color);
    outline-offset: 4px;
    background-color: rgba(0, 95, 204, 0.05);
    border-radius: 3px;
    padding: 3px;
    margin: -3px;
}