/* Pulse survey theme: respondent-facing overrides on top of the parent theme (fruity_twentythree).
   Load order (config.xml): css/pdi-theme.css (the PDI tokens, shared with the other PDI apps), the parent's
   theme_apple.css + base.css, css/pdi-overrides.css (generated from them: every colour swapped for a token),
   then this file. views/subviews/header/custom_header.twig hands the body, text and question-box colours to the
   same tokens, so the theme's colour options are not used. Light and dark follow <html data-theme>
   (scripts/pdi-theme.js). */

body, .btn, .form-control, .form-select, input, select, textarea, button, .navbar { font-family: var(--font-ui); }
body { -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, .group-title, .ls-label-question { letter-spacing: -0.01em; }

.brand-logo .navbar-brand .logo,
.brand-logo .logo { max-height: 44px; width: auto; }

/* Public survey-list page: the inline logo include (views/ls_logo_svg.twig). */
.pulse-logo, svg.ls-logo { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 1rem; }

.navbar { background-color: var(--surface) !important; box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--rule); }
.navbar .nav-link, .navbar .navbar-text { color: var(--text-soft); }
.navbar .nav-link:hover { color: var(--ink); }
.question-container { background-color: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-sm); }
.group-container .group-title, .question-container .ls-label-question, h1, .h1 { color: var(--ink); }
.ls-answers label, .answer-item label, .control-label { color: var(--text); }
.question-container .help-block, .ls-questionhelp { color: var(--text-soft); }

.btn-primary { color: var(--on-accent); background-color: var(--gate); border-color: var(--gate); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: var(--on-accent); background-color: var(--gate-deep); border-color: var(--gate-deep); box-shadow: 0 0 0 3px var(--gate-line); }
.btn-outline-primary { color: var(--gate); border-color: var(--gate); }
.btn-outline-primary:hover, .btn-outline-primary:focus { color: var(--on-accent); background-color: var(--gate); border-color: var(--gate); box-shadow: none; }
.btn-outline-secondary, .btn-outline-cancel { color: var(--text-soft); border-color: var(--rule-strong); }
.btn-outline-secondary:hover, .btn-outline-cancel:hover { color: var(--ink); background-color: var(--panel-2); border-color: var(--rule-strong); box-shadow: none; }
.ls-answers label.btn.active, .answer-item label.btn.active, .btn-check:checked + .btn { color: var(--on-accent); background-color: var(--gate); border-color: var(--gate); }

.form-control, .form-select { color: var(--text); background-color: var(--surface); border-color: var(--rule-strong); }
.form-control:focus, .form-select:focus { border-color: var(--gate); box-shadow: 0 0 0 3px var(--gate-line); color: var(--text); background-color: var(--surface); }
.form-control::placeholder { color: var(--text-faint); }
.form-check-input:checked { background-color: var(--gate); border-color: var(--gate); }
.form-check-input:focus { border-color: var(--gate); box-shadow: 0 0 0 3px var(--gate-line); }

.progress { background-color: var(--panel-3); }
.progress-bar { background-color: var(--gate); color: var(--on-accent); }
.alert-success { color: var(--current-ink); background-color: var(--current-bg); border-color: var(--current-line); }
.alert-danger { color: var(--critical-ink); background-color: var(--critical-bg); border-color: var(--critical); }
.alert-warning { color: var(--watch-ink); background-color: var(--watch-bg); border-color: var(--watch-line); }
.alert-info { color: var(--gate-deep); background-color: var(--gate-bg); border-color: var(--gate-line); }
.list-group-item-success { color: var(--current-ink); background-color: var(--current-bg); }
.list-group-item-info { color: var(--gate-deep); background-color: var(--gate-bg); }
.list-group-item-warning { color: var(--watch-ink); background-color: var(--watch-bg); }
.list-group-item-danger { color: var(--critical-ink); background-color: var(--critical-bg); }
.ls-even { background-color: var(--panel-2); }
.dropdown-menu { background-color: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 8px; }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--ink); background-color: var(--panel-2); }

.theme-toggle-float { right: 20px; bottom: 20px; z-index: 1035; }

/* Wordmark: the inline logo (views/ls_logo_svg.twig) takes its colours from the tokens, so it reads in both modes. */
svg.ls-logo, .pulse-logo { color: var(--ink); }
svg.ls-logo text, .pulse-logo text { fill: currentColor; }
svg.ls-logo path, .pulse-logo path { stroke: var(--emv); }