/*
 * Interaction standards shared by the public site, sign-in and administration (blueprint
 * §9.4 Interaction standards). Colours come from the site's own brand token (--brand-red),
 * so the same sheet serves every site of the family.
 */

/* No underline on hover or focus: hover shows as a colour change or a shade. */
a:hover, a:focus, a:focus-visible, a:hover *, a:focus *, button:hover, [role="button"]:hover { text-decoration: none; }

/* Every problem at once: the message under each invalid field, and the summary dialog. */
.field-error-note { display: block; margin-top: .3rem; color: #b42318; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.field-error-note--group { flex-basis: 100%; }
[data-bs-theme="dark"] .field-error-note, [data-site-theme="dark"] .field-error-note { color: #ff8a80; }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #b42318 !important; box-shadow: 0 0 0 .2rem rgb(180 35 24 / 15%); }
.form-problems-dialog { font-size: 16px; line-height: 1.5; width: min(30em, calc(100vw - 2em)); max-height: 88dvh; overflow: auto; overscroll-behavior: contain; padding: 1.4em 1.5em; border: 0; border-top: 4px solid var(--brand-red, #547122); border-radius: .9em; background: #fff; color: #1f2937; box-shadow: 0 1.5em 3.5em rgb(0 0 0 / 30%); }
.form-problems-dialog::backdrop { background: rgb(10 12 15 / 58%); backdrop-filter: blur(4px); }
.form-problems-dialog h2 { margin: 0 0 .4em; font-size: 1.15em; font-weight: 700; }
.form-problems-dialog p { margin: 0 0 .6em; color: #5f6570; }
.form-problems-dialog ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.form-problems-dialog li { margin-bottom: .3em; overflow-wrap: anywhere; }
.form-problems-dialog__ok { min-width: 6.5em; min-height: 44px; padding: .55em 1.2em; border: 0; border-radius: .55em; background: var(--brand-red, #547122); color: #fff; font-weight: 650; }
[data-bs-theme="dark"] .form-problems-dialog, [data-site-theme="dark"] .form-problems-dialog { background: #1b1f25; color: #e3e6ea; }
[data-bs-theme="dark"] .form-problems-dialog p, [data-site-theme="dark"] .form-problems-dialog p { color: #bec4cc; }

/* The wait card for downloads: appears after 0.6 s, stays until the download starts or "Hide". */
.download-wait[hidden] { display: none; }
.download-wait { font-size: 16px; line-height: 1.5; position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 1em; background: rgb(10 12 15 / 58%); backdrop-filter: blur(4px); }
.download-wait__card { display: flex; flex-wrap: wrap; align-items: center; gap: .9em 1em; width: min(29em, 92vw); padding: 1.2em 1.3em; border: 1px solid #454c55; border-left: 4px solid var(--brand-red, #547122); border-radius: 1em; background: #181b21; color: #f3f4f6; box-shadow: 0 1em 3em rgb(0 0 0 / 32%); }
.download-wait__spinner { flex: 0 0 auto; width: 1.6em; height: 1.6em; border: 3px solid rgb(255 255 255 / 25%); border-top-color: #fff; border-radius: 50%; animation: download-wait-spin .8s linear infinite; }
.download-wait__text { flex: 1 1 14em; min-width: 0; }
.download-wait__text strong, .download-wait__text small { display: block; }
.download-wait__text small { margin-top: .25em; color: #c9cdd3; font-size: .82em; }
.download-wait__hide { margin-left: auto; min-width: 44px; min-height: 44px; padding: .4em .9em; border: 1px solid #6b7280; border-radius: .5em; background: transparent; color: #f3f4f6; font-size: .85em; }
.download-wait__hide:hover, .download-wait__hide:focus-visible { border-color: #fff; background: rgb(255 255 255 / 10%); }
@keyframes download-wait-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .download-wait__spinner { animation: none; border-top-color: rgb(255 255 255 / 25%); } }

/* Clickable rows: a light brand shade and a 3 px brand bar at the far left; nothing underlined. */
.is-clickable-row { cursor: pointer; }
.is-clickable-row > td:first-child, li.is-clickable-row, .is-clickable-row:not(tr) { position: relative; }
.is-clickable-row:hover > td, .is-clickable-row:focus-visible > td, .is-clickable-row:focus-within > td,
li.is-clickable-row:hover, li.is-clickable-row:focus-visible, .is-clickable-row:not(tr):hover, .is-clickable-row:not(tr):focus-visible { background-color: color-mix(in srgb, var(--brand-red, #547122) 7%, transparent) !important; --bs-table-bg-state: transparent; }
[data-bs-theme="dark"] .is-clickable-row:hover > td, [data-bs-theme="dark"] .is-clickable-row:focus-visible > td, [data-bs-theme="dark"] .is-clickable-row:focus-within > td,
[data-bs-theme="dark"] li.is-clickable-row:hover, [data-bs-theme="dark"] .is-clickable-row:not(tr):hover { background-color: color-mix(in srgb, var(--brand-red, #547122) 16%, transparent) !important; }
.is-clickable-row:hover > td:first-child::before, .is-clickable-row:focus-visible > td:first-child::before, .is-clickable-row:focus-within > td:first-child::before,
li.is-clickable-row:hover::before, li.is-clickable-row:focus-visible::before, .is-clickable-row:not(tr):hover::before, .is-clickable-row:not(tr):focus-visible::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-red, #547122); }
.is-clickable-row:focus-visible { outline: none; }

/* Sortable table headings. */
.table-sort-button { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; text-align: inherit; }
.table-sort-button i { font-size: .75em; opacity: .45; }
th[aria-sort] .table-sort-button i { opacity: 1; color: var(--brand-red, #547122); }
.table-sort-button:hover span, .table-sort-button:focus-visible span { color: var(--brand-red, #547122); }

/* Two-step verification: the enrolment QR code is always dark on white; recovery codes in a grid. */
.two-step-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.two-step-method { height: 100%; padding: 1rem; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: var(--radius,16px); }
.two-step-method.is-active { border-color: var(--brand-red, #547122); box-shadow: inset 3px 0 0 var(--brand-red, #547122); }
.two-step-qr { width: min(15rem, 100%); margin: .5rem 0 .9rem; padding: .5rem; border-radius: var(--radius,16px); background: #fff; }
.two-step-qr svg { display: block; width: 100%; height: auto; }
.two-step-key code, .recovery-code-list code { font-size: .95rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.recovery-codes-once { margin: 1rem 0; padding: 1rem; border: 1px dashed var(--brand-red, #547122); border-radius: .8rem; background: color-mix(in srgb, var(--brand-red, #547122) 5%, transparent); }
.recovery-code-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .35rem 1.2rem; margin: 0 0 .9rem; padding-left: 1.6rem; }

/* Phone rules: fields are 16 px below 992 px (iOS would zoom), dialogs fit the screen and scroll inside. */
@media (max-width: 991.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea, .form-control, .form-select { font-size: 16px !important; }
}
/* Bootstrap modals scroll as a whole, so their buttons stay reachable; a swipe inside never moves the page behind. */
.modal { overscroll-behavior: contain; }
html:has(dialog[open]:modal) { overflow: hidden; }

/* Stand-alone links and sort headings are never smaller than 24 px (WCAG 2.5.8); touch screens get comfortable 44 px. */
a[href^="mailto:"]:not(.btn):not([class*="whatsapp"]), a[href^="tel:"]:not(.btn):not([class*="whatsapp"]), a[href^="https://wa.me/"]:not(.btn):not([class*="whatsapp"]):not([class*="floating"]) { display: inline-block; padding-block: .35rem; }
.table-sort-button { min-height: 28px; }
.login-card a:not(.btn), .login-card-preferences a:not(.btn) { display: inline-block; padding-block: .4rem; }
@media (pointer: coarse) {
    .table-sort-button { min-height: 40px; }
    a[href^="mailto:"]:not(.btn):not([class*="whatsapp"]), a[href^="tel:"]:not(.btn):not([class*="whatsapp"]), a[href^="https://wa.me/"]:not(.btn):not([class*="whatsapp"]):not([class*="floating"]) { padding-block: .6rem; }
}
/* Dialog close buttons are 44 x 44 px on touch screens (the icon keeps its size). */
@media (pointer: coarse) {
    .modal .btn-close, .offcanvas .btn-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0; background-size: 1em; background-position: center; background-repeat: no-repeat; }
}

/* More touch targets: the language switch, disclosure headings and (on touch screens) checkboxes. */
summary { min-height: 24px; padding-block: .2rem; }
a[aria-label^="Switch to "], a[aria-label^="Ganti ke "] { display: inline-block; padding: .45rem .55rem; min-width: 24px; text-align: center; }
@media (pointer: coarse) {
    input[type="checkbox"]:not(.form-switch .form-check-input), input[type="radio"] { width: 1.35rem; height: 1.35rem; }
}

/* Tap-to-use cover over an embedded map on touch screens: swipes over it scroll the page. */
.map-touch-guard { position: absolute; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 .75rem; border: 0; background: transparent; cursor: pointer; }
.map-touch-guard span { pointer-events: none; padding: .4rem .9rem; border-radius: 999px; background: rgb(0 0 0 / 74%); color: #fff; font-size: .85rem; font-weight: 600; line-height: 1.3; }
.map-touch-guard[hidden] { display: none; }