/* Vakna skin and fixes for LimeSurvey's admin. admin.js keeps the admin on the light tokens. */
:root {
  --bs-primary: var(--primary);
  --bs-primary-rgb: 10, 95, 166;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-color-rgb: 10, 95, 166;
  --bs-link-hover-color-rgb: 7, 74, 130;
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius);
  color-scheme: light;
}
body, .btn, .form-control, .form-select, select, input, textarea, button { font-family: var(--font-body) !important; }
html, body { overflow-x: clip; }
body { background: var(--paper) !important; color: var(--text); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); }

:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--focus-halo) !important; }
html body :focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--focus-halo) !important; }
html body #admin-menu-bar :focus-visible, html body nav.navbar :focus-visible, html body .vakna-legal :focus-visible { outline-color: var(--footer-text) !important; box-shadow: 0 0 0 2px var(--footer-bg) !important; }

/* Square corners and no soft shadows, like the rest of Vakna. */
.btn, .card, .form-control, .form-select, .box-widget-card, .dropdown-menu, .modal-content, .alert, .badge, .list-group-item, .input-group-text { border-radius: var(--radius) !important; }
.card, .box-widget-card, .box-widget-card:hover { box-shadow: none !important; border: 1px solid var(--line) !important; }

/* Top bar */
#admin-menu-bar, .navbar.navbar-default, nav.navbar, .sticky-top.navbar, .top-menu, .admin-navbar { background: var(--footer-bg) !important; }
.navbar-brand img.vakna-admin-logo { height: 30px; width: auto; display: block; }
.btn-primary, .btn.btn-primary, button.btn-primary, .btn-info, .btn-create, .btn-info.btn-create {
  background: var(--primary) !important; border-color: var(--primary) !important; color: var(--on-primary) !important;
}
.btn-primary:hover, .btn.btn-primary:hover, .btn-info:hover, .btn-create:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.btn-outline-primary, .btn-outline-info { color: var(--primary) !important; border-color: var(--primary) !important; background: var(--surface) !important; }
.btn-outline-primary:hover, .btn-outline-info:hover { color: var(--on-primary) !important; background: var(--primary) !important; }
.btn-outline-info i { color: inherit !important; }
.btn-secondary, #preview_survey_button { background: var(--muted) !important; border-color: var(--muted) !important; color: var(--on-primary) !important; }
.text-primary { color: var(--primary) !important; }
.view-switch.ri-grid-fill, .survey-actionbar-item.active, i.ri-bar-chart-2-line, .box-widget-card .ri-bar-chart-fill, .box-widget-card .card-footer i, .box-widget-card .box-widget-card-footer i, .box-widget-card i[class*="ri-check"], .box-widget-card i[class*="ri-bar"] { color: var(--primary) !important; }

/* LimeSurvey branding and links that leave the site. */
.vakna-hidden { display: none !important; }
#help-button-dropup { display: none !important; }

/* Login: Vakna instead of LimeSurvey's logo and green shapes. */
.login .box-left, .login .sidebar-l { background: var(--footer-bg) !important; }
.login .logo-alt-1 { background: url("/vakna/logo-dark.svg") left center / contain no-repeat !important; width: 212px; height: 64px; display: block; }
.login .decor-1, .login .decor-2, .login .box-pattern { display: none !important; }
.login h1, .login h2 { font-family: var(--font-display) !important; font-weight: 800; color: var(--ink); }

/* LimeSurvey's greys that fall below 4.5:1 on their backgrounds. */
.summary, .summary-container .summary, .grid-view-ls-footer .summary { color: var(--muted) !important; font-size: 0.875rem !important; }
.card-label, .survey-summary .list-group-item, .survey-summary .list-group-item *, [id^="sharePanelButton"], [id^="null-choice"], .ls-footer-label > div { color: var(--muted) !important; }
.btn-check:not(:checked) + label { color: var(--ink) !important; }
.ls-link, .ls-footer-label a { text-decoration: underline; color: var(--primary) !important; opacity: 1 !important; }
.recent-activity, #last_survey, #last_question { opacity: 1 !important; }
.btn-outline-lime-toggle, .btn-outline-lime-toggle *, .sidebar-row-title-container, .disabled.sidebar-row, .disabled.sidebar-row * { color: var(--muted) !important; }
.btn-check:checked + .btn-outline-lime-toggle, .btn-check:checked + .btn-outline-lime-toggle * { color: var(--ink) !important; }
label[id^="displaymode_"] { color: var(--ink) !important; }
.m-0.text-white { color: var(--on-primary) !important; }

/* WCAG 2.5.8: targets at least 24 px. */
.survey-state, .box-widget-card-status a { display: inline-flex !important; align-items: center; min-height: 24px; }
.resize-btn { min-width: 24px !important; }

/* LimeSurvey's top bar is a few pixels wider than the page. */
.topbar > .container-fluid, .container-40 { max-width: 100%; }
.topbar .row { --bs-gutter-x: 0; margin-inline: 0; }

/* Vakna admin pages */
.vakna-admin, .vakna-admin h1, .vakna-admin h2, .vakna-admin h3 { color: var(--ink); }
.vakna-admin { max-width: 1160px; min-width: 0; margin: 0 auto; padding: 8px 8px 40px; font-size: 1rem; line-height: 1.55; color: var(--text); }
.vakna-admin h1 { font-family: var(--font-display); font-weight: 800; font-size: 2rem; margin: 12px 0 16px; line-height: 1.15; }
.vakna-admin h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 32px 0 10px; }
.vakna-admin h3 { font-size: 1.0625rem; font-weight: 700; margin: 22px 0 6px; line-height: 1.35; }
.vakna-admin-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.vakna-admin-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; color: var(--primary); font-weight: 700; text-decoration: none; }
.vakna-admin-nav a:hover { text-decoration: underline; }
.vakna-admin-nav a[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.vakna-table-wrap { position: relative; overflow-x: auto; margin-block: 8px 16px; }
.vakna-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.vakna-table th, .vakna-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.vakna-table thead th { background: var(--surface-2); font-weight: 700; border-bottom: 2px solid var(--line-strong); }
.vakna-table tbody th { font-weight: 600; }
.vakna-table .vakna-num { text-align: right; font-variant-numeric: tabular-nums; }
.vakna-table--dist { max-width: 780px; }
.vakna-table a { color: var(--primary); text-decoration: underline; font-weight: 700; }
.vakna-muted { color: var(--muted); font-size: 0.9375rem; }
.vakna-nowrap { white-space: nowrap; }
.vakna-code { display: inline-block; font-family: ui-monospace, Consolas, monospace !important; font-size: 0.8125rem; background: var(--surface-2); color: var(--ink); padding: 1px 6px; margin-right: 4px; }
.vakna-tag { display: inline-block; padding: 2px 10px; font-size: 0.875rem; font-weight: 700; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); white-space: nowrap; }
.vakna-tag--ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.vakna-tag--warn { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.vakna-note { background: var(--sky); color: var(--ink); padding: 14px 16px; border-left: 4px solid var(--primary); max-width: 78ch; }
.vakna-summary { font-size: 1.125rem; }
.vakna-suppressed { background: var(--surface-2); padding: 10px 14px; color: var(--text); }
.vakna-bar { display: block; height: 12px; min-width: 100px; background: var(--surface-2); border: 1px solid var(--line-strong); overflow: hidden; }
.vakna-bar > span { display: block; height: 100%; background: var(--primary); }
.vakna-links { padding-left: 1.2em; }
.vakna-links a { display: inline-block; padding-block: 4px; text-decoration: underline; color: var(--primary); }
.vakna-form { display: grid; gap: 14px; max-width: 640px; }
.vakna-form label { font-weight: 700; display: block; }
.vakna-hint { margin: 0 0 4px; color: var(--muted); font-size: 0.9375rem; }
.vakna-form--row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) auto; align-items: end; max-width: 900px; }
.vakna-error { background: var(--danger-soft); color: var(--danger); padding: 10px 14px; font-weight: 600; }
.vakna-error-text { color: var(--danger); }
.vakna-ok { background: var(--success-soft); color: var(--success); padding: 10px 14px; font-weight: 600; }
.vakna-details { margin-top: 32px; background: var(--surface); border: 1px solid var(--line); padding: 12px 18px; }
.vakna-details summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.vakna-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: 4px 20px 16px; margin-block: 8px 24px; }
.vakna-card h2 { margin-top: 14px; }
.vakna-steps { max-width: 78ch; padding-left: 1.4em; }
.vakna-steps li { margin-bottom: 6px; }
.vakna-tree { background: var(--surface); border: 1px solid var(--line); padding: 12px 16px; max-width: 900px; }
.vakna-tree ul { list-style: none; margin: 0; padding-left: 0; }
.vakna-tree ul ul { padding-left: 22px; margin-left: 6px; border-left: 2px solid var(--line-strong); }
.vakna-tree li { padding-block: 3px; }
.vakna-unit { font-weight: 700; color: var(--ink); }
.vakna-unit__edit { margin-left: 8px; color: var(--primary); text-decoration: underline; display: inline-block; padding-block: 2px; }
.vakna-link { font-family: ui-monospace, Consolas, monospace !important; font-size: 0.8125rem; color: var(--ink); background: var(--surface-2); padding: 2px 6px; overflow-wrap: anywhere; user-select: all; }
.vakna-pick { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.vakna-pick > div:not(.vakna-pick__go) { flex: 1 1 260px; max-width: 520px; }
.vakna-pick label { font-weight: 700; display: block; }
.vakna-pick > fieldset { flex: 0 1 auto; }
.vakna-radios { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.vakna-radios legend { font-weight: 700; font-size: 1rem; margin-bottom: 2px; float: none; width: auto; }
.vakna-radios label { font-weight: 400; display: flex; gap: 8px; align-items: center; min-height: 32px; }
.vakna-radios input { width: 20px; height: 20px; accent-color: var(--primary); }

/* "Så fungerar enkäten" and the hints in LimeSurvey's editor. */
.vakna-pages { list-style: none; padding: 0; margin: 24px 0 0; max-width: 900px; }
.vakna-page { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: 4px 20px 12px; margin-bottom: 20px; }
.vakna-page__title { margin-top: 14px !important; }
.vakna-questions { padding-left: 0; list-style: none; margin: 0; }
.vakna-question { border-top: 1px solid var(--line); padding-block: 10px 2px; }
.vakna-question p { margin: 0 0 6px; }
.vakna-question__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vakna-question__text { font-weight: 700; color: var(--ink); }
.vakna-condition { background: var(--warning-soft); color: var(--ink); padding: 6px 10px; border-left: 4px solid var(--warning); }
.vakna-followup { background: var(--sky); border-left: 4px solid var(--primary); padding: 4px 16px 10px; margin-block: 12px; }
.vakna-followup h3 { margin-top: 10px; }
.vakna-followup summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.vakna-glossary dt { margin-top: 8px; }
.vakna-glossary dd { margin-left: 0; }
.vakna-hintbar { margin: 8px 0 12px; padding: 8px 14px; background: var(--sky); border-left: 4px solid var(--primary); color: var(--ink); }
.vakna-hintbar a { font-weight: 700; text-decoration: underline; }
.vakna-qhint { margin: 0 0 16px; padding: 4px 16px 6px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); max-width: 900px; color: var(--text); }
.vakna-qhint h2 { font-size: 1.125rem; margin: 10px 0 6px; font-family: var(--font-display); color: var(--ink); }
.vakna-qhint p { margin: 0 0 8px; }
.vakna-qhint a { text-decoration: underline; }
.vakna-badge { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 0.75rem; font-weight: 700; line-height: 1.5; background: var(--sky); color: var(--ink); border: 1px solid var(--primary); white-space: nowrap; vertical-align: middle; }

/* Narrow screens: the fixed side bar must not push the page sideways. */
@media (max-width: 760px) {
  #sidebar, .side-bar, .sidemenu, #vue-sidebar-container, .user-sidebar, .sidebar-wrapper { display: none !important; }
  #in_survey_common, .container-fluid, .col-12 { max-width: 100%; }
  .vakna-admin { padding-inline: 0; }
}