/*
 * Globalne udogodnienia dostepu KRC App.
 * Ten arkusz poprawia obsluge, ale sam w sobie nie stanowi deklaracji zgodnosci WCAG.
 */

:root {
    --krc-a11y-focus: #ffbf47;
    --krc-a11y-focus-edge: #111827;
    --krc-a11y-panel: #ffffff;
    --krc-a11y-panel-soft: #f2f7fd;
    --krc-a11y-panel-ink: #111827;
    --krc-a11y-panel-muted: #526174;
    --krc-a11y-panel-line: #cbd5e1;
    --krc-a11y-panel-accent: #0b4d9e;
    --krc-a11y-panel-accent-light: #258ee9;
}

/* Widoczny fokus nie moze zalezec od stylow pojedynczego ekranu. */
:where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="link"],
    [role="menuitem"],
    [role="option"],
    [role="tab"],
    [tabindex]:not([tabindex="-1"])
):focus-visible {
    outline: 3px solid var(--krc-a11y-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px var(--krc-a11y-focus-edge) !important;
}

/* Wygodne cele dotykowe dla elementow sterujacych. Linki w tekscie sa wyjatkiem WCAG. */
:where(
    button,
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    summary,
    [role="button"],
    [role="menuitem"],
    [role="option"],
    [role="tab"],
    .nav-link,
    .icon-button
) {
    min-block-size: 44px;
}

:where(button, summary, [role="button"], [role="menuitem"], [role="tab"], .icon-button) {
    min-inline-size: 44px;
}

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

:where(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
    min-height: 44px;
}

/* Preferencje strony ustawiane przez widget. */
html[data-krc-a11y-links="true"] a[href] {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em !important;
}

html[data-krc-a11y-contrast="true"] {
    --canvas: #ffffff;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --ink: #000000;
    --ink-soft: #202020;
    --line: #000000;
    --line-strong: #000000;
    --accent: #0047a8;
    --accent-deep: #002f73;
    --accent-light: #006ed6;
    --accent-pale: #e5f1ff;
    --positive: #005c3b;
    --warning: #7a4100;
    color-scheme: light;
}

html[data-krc-a11y-contrast="true"] body,
html[data-krc-a11y-contrast="true"] .workspace,
html[data-krc-a11y-contrast="true"] .content-canvas,
html[data-krc-a11y-contrast="true"] .modal-card,
html[data-krc-a11y-contrast="true"] .drawer-panel {
    color: #000000;
    background-color: #ffffff;
}

html[data-krc-a11y-contrast="true"] :where(input, select, textarea) {
    color: #000000 !important;
    border-color: #000000 !important;
    background: #ffffff !important;
}

html[data-krc-a11y-contrast="true"] :where(input, textarea)::placeholder {
    color: #3d3d3d !important;
    opacity: 1;
}

html[data-krc-a11y-contrast="true"] :where(.sidebar, .topbar--dark) {
    color: #ffffff;
    background: #000000;
}

html[data-krc-a11y-contrast="true"] :where(.sidebar, .topbar--dark) a,
html[data-krc-a11y-contrast="true"] :where(.sidebar, .topbar--dark) button,
html[data-krc-a11y-contrast="true"] :where(.sidebar, .topbar--dark) small,
html[data-krc-a11y-contrast="true"] :where(.sidebar, .topbar--dark) .nav-label,
html[data-krc-a11y-contrast="true"] :where(.sidebar, .topbar--dark) .nav-index {
    color: #ffffff !important;
}

html[data-krc-a11y-contrast="true"] :where(button, .button, .primary-action) {
    border-color: currentColor;
}

html[data-krc-a11y-motion="reduce"],
html[data-krc-a11y-motion="reduce"] * {
    scroll-behavior: auto !important;
}

html[data-krc-a11y-motion="reduce"] *,
html[data-krc-a11y-motion="reduce"] *::before,
html[data-krc-a11y-motion="reduce"] *::after {
    animation-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: .01ms !important;
}

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

    *,
    *::before,
    *::after {
        animation-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0s !important;
        transition-duration: .01ms !important;
    }
}

/* Widget */
.krc-a11y-trigger {
    position: fixed;
    z-index: 2147483000;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 18px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #082b66 0%, #155dba 58%, #258ee9 100%);
    box-shadow: 0 10px 30px rgba(8, 43, 102, .32);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    transition: bottom 180ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body.has-pwa-notice .krc-a11y-trigger {
    top: auto;
    bottom: var(--krc-pwa-notice-offset, max(218px, calc(env(safe-area-inset-bottom) + 206px)));
}

.krc-a11y-trigger:hover {
    box-shadow: 0 14px 36px rgba(8, 43, 102, .42);
    transform: translateY(-2px);
}

.krc-a11y-trigger__mark {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.07em;
}

body.krc-a11y-dialog-open {
    overflow: hidden;
}

body.krc-a11y-dialog-open .krc-a11y-trigger {
    opacity: 0;
    pointer-events: none;
}

.krc-a11y-dialog {
    position: fixed;
    z-index: 2147483001;
    inset: auto max(18px, env(safe-area-inset-right)) max(86px, calc(env(safe-area-inset-bottom) + 68px)) auto;
    width: min(420px, calc(100vw - 36px));
    max-width: none;
    max-height: min(720px, calc(100dvh - 110px));
    margin: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--krc-a11y-panel-line);
    border-radius: 20px;
    color: var(--krc-a11y-panel-ink);
    background: var(--krc-a11y-panel);
    box-shadow: 0 28px 80px rgba(8, 25, 48, .3);
}

.krc-a11y-dialog::backdrop {
    background: rgba(8, 18, 32, .52);
    backdrop-filter: blur(2px);
}

.krc-a11y-dialog[open] {
    animation: krc-a11y-enter 180ms ease-out both;
}

@keyframes krc-a11y-enter {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.krc-a11y-dialog__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 14px;
    align-items: start;
    padding: 25px 24px 20px;
    border-bottom: 1px solid var(--krc-a11y-panel-line);
    background: linear-gradient(135deg, #edf5ff 0%, #ffffff 68%);
}

.krc-a11y-dialog__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--krc-a11y-panel-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.krc-a11y-dialog__title {
    margin: 0;
    color: var(--krc-a11y-panel-ink);
    font-size: 25px;
    line-height: 1.15;
}

.krc-a11y-dialog__description {
    margin: 9px 0 0;
    color: var(--krc-a11y-panel-muted);
    font-size: 14px;
    line-height: 1.55;
}

.krc-a11y-dialog__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--krc-a11y-panel-line);
    border-radius: 50%;
    color: var(--krc-a11y-panel-ink);
    background: #ffffff;
    cursor: pointer;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.krc-a11y-dialog__body {
    display: grid;
    gap: 0;
    padding: 0 24px;
}

.krc-a11y-fieldset {
    min-width: 0;
    margin: 0;
    padding: 22px 0;
    border: 0;
    border-bottom: 1px solid var(--krc-a11y-panel-line);
}

.krc-a11y-fieldset legend {
    width: 100%;
    margin: 0 0 13px;
    padding: 0;
    color: var(--krc-a11y-panel-ink);
    font-size: 14px;
    font-weight: 800;
}

.krc-a11y-size-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.krc-a11y-size-button {
    display: grid;
    place-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 64px;
    padding: 8px 5px;
    border: 1px solid var(--krc-a11y-panel-line);
    border-radius: 11px;
    color: var(--krc-a11y-panel-ink);
    background: #ffffff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.krc-a11y-size-button small {
    color: var(--krc-a11y-panel-muted);
    font-size: 11px;
    font-weight: 700;
}

.krc-a11y-size-button[aria-pressed="true"] {
    border-color: var(--krc-a11y-panel-accent);
    color: #ffffff;
    background: linear-gradient(135deg, #082b66, #155dba);
    box-shadow: inset 0 0 0 1px #ffffff;
}

.krc-a11y-size-button[aria-pressed="true"] small {
    color: #ffffff;
}

.krc-a11y-toggle-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.krc-a11y-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 16px;
    align-items: center;
    min-height: 68px;
    padding: 11px 0;
    border-bottom: 1px solid var(--krc-a11y-panel-line);
    cursor: pointer;
}

.krc-a11y-toggle:last-child {
    border-bottom: 0;
}

.krc-a11y-toggle__copy {
    display: grid;
    gap: 4px;
}

.krc-a11y-toggle__copy strong {
    color: var(--krc-a11y-panel-ink);
    font-size: 14px;
    line-height: 1.35;
}

.krc-a11y-toggle__copy small {
    color: var(--krc-a11y-panel-muted);
    font-size: 12px;
    line-height: 1.4;
}

.krc-a11y-toggle input {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin: 0;
    accent-color: var(--krc-a11y-panel-accent);
    cursor: pointer;
}

.krc-a11y-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 22px;
    border-top: 1px solid var(--krc-a11y-panel-line);
    background: var(--krc-a11y-panel-soft);
}

.krc-a11y-reset {
    min-height: 44px;
    padding: 0;
    border: 0;
    color: var(--krc-a11y-panel-accent);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.krc-a11y-dialog__footer-note {
    max-width: 190px;
    margin: 0;
    color: var(--krc-a11y-panel-muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
}

.krc-a11y-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

html[data-krc-a11y-contrast="true"] .krc-a11y-dialog {
    --krc-a11y-panel: #ffffff;
    --krc-a11y-panel-soft: #ffffff;
    --krc-a11y-panel-ink: #000000;
    --krc-a11y-panel-muted: #202020;
    --krc-a11y-panel-line: #000000;
    --krc-a11y-panel-accent: #003e99;
    border-width: 2px;
}

html[data-krc-a11y-contrast="true"] .krc-a11y-dialog__header,
html[data-krc-a11y-contrast="true"] .krc-a11y-dialog__footer {
    background: #ffffff;
}

@media (max-width: 560px) {
    .krc-a11y-trigger {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: 56px;
        padding: 0;
    }

    .krc-a11y-trigger__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .krc-a11y-dialog {
        inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        width: auto;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
        border-radius: 18px;
    }

    .krc-a11y-dialog__header {
        padding: 21px 18px 17px;
    }

    .krc-a11y-dialog__title {
        font-size: 22px;
    }

    .krc-a11y-dialog__body {
        padding: 0 18px;
    }

    .krc-a11y-size-options {
        gap: 6px;
    }

    .krc-a11y-size-button {
        min-height: 61px;
        font-size: 13px;
    }

    .krc-a11y-size-button small,
    .krc-a11y-dialog__eyebrow,
    .krc-a11y-dialog__footer-note {
        font-size: 12px;
    }

    .krc-a11y-dialog__footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 15px 18px calc(17px + env(safe-area-inset-bottom));
    }

    .krc-a11y-dialog__footer-note {
        max-width: none;
        text-align: left;
    }
}

@media (forced-colors: active) {
    .krc-a11y-trigger,
    .krc-a11y-size-button[aria-pressed="true"] {
        border: 2px solid ButtonText;
        color: ButtonText;
        background: ButtonFace;
        forced-color-adjust: auto;
    }

    .krc-a11y-dialog,
    .krc-a11y-dialog__close,
    .krc-a11y-size-button {
        border-color: CanvasText;
    }
}