/**
 * Branding overrides for compiled styles.css
 *
 * The prototype-exported styles.css hardcodes hex values (#dce0e8 for borders,
 * #1b212a for text, #fff for backgrounds, #10c348 for success green, etc.)
 * instead of using CSS custom properties. This file overrides those selectors
 * so tenant branding colors propagate correctly.
 *
 * Loading order: styles.css -> branding-overrides.css -> branding-css.php
 * Specificity: selectors match the compiled CSS exactly (same or higher specificity).
 */

/* ==========================================================================
   FORM CONTROLS — borders, text, backgrounds
   ========================================================================== */

.form-control {
    border-color: var(--ss-border);
    color: var(--ss-text);
    background-color: var(--ss-surface);
}

.form-control:focus {
    color: var(--ss-text);
    background-color: var(--ss-surface);
    border-color: var(--bs-secondary-color);
}

.form-control::file-selector-button {
    color: var(--ss-text);
}

.form-select {
    border-color: var(--ss-border);
    color: var(--ss-text);
    background-color: var(--ss-surface);
}

.form-select:focus {
    border-color: var(--bs-secondary-color);
}

.form-check-input {
    border-color: var(--ss-border);
}

.form-check-input:focus {
    border-color: var(--bs-secondary);
}

.form-check-input:checked {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.form-switch .form-switch-input {
    border-color: var(--ss-border);
}

.input-group-text {
    border-color: var(--ss-border);
    color: var(--ss-text);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* Floating label background behind text */
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
    background-color: var(--ss-surface);
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
    background-color: var(--ss-surface);
}

/* Validation states — override hardcoded green/red borders */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--ss-border);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-danger);
    outline-color: var(--bs-tertiary-bg);
}

/* Terms/values boxes */
.box-terms-wrapper .box-terms button {
    border-color: var(--ss-border);
}

.box-values input:focus {
    border-color: var(--ss-border);
}

/* ==========================================================================
   CUSTOM SELECT — panel, options, opener
   ========================================================================== */

.form .custom-select-opener {
    border-color: var(--ss-border);
    background-color: var(--ss-surface);
}

.custom-select-container .custom-select-panel {
    background-color: var(--ss-surface);
}

.custom-select-container .custom-select-panel .custom-select-option {
    background: var(--ss-surface);
}

/* Focus/selected states */
.custom-select-container .custom-select-panel .custom-select-option.has-focus,
.custom-select-container .custom-select-panel .custom-select-option.is-selected {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

/* ==========================================================================
   FORM RADIO BUTTONS
   ========================================================================== */

.form-radio-buttons {
    background: var(--bs-body-bg);
}

.form-radio-buttons .btn-check + .btn:hover {
    background: var(--ss-surface);
}

.form-radio-buttons .btn-check:checked + .btn {
    background: var(--ss-surface);
}

/* Type1 variant (interest filter chips) — container is transparent,
   individual pills have their own background */
.form-radio-buttons--type1 {
    background: none;
}

.form-radio-buttons--type1 .btn-check + .btn {
    background: var(--bs-body-bg);
    color: var(--ss-text);
}

.form-radio-buttons--type1 .btn-check + .btn:hover {
    color: var(--ss-surface);
    background: var(--ss-text);
}

.form-radio-buttons--type1 .btn-check:checked + .btn {
    color: var(--ss-surface);
    background: var(--ss-text);
}

/* ==========================================================================
   TAGS INPUT
   ========================================================================== */

.tags-input {
    background: var(--ss-surface);
}

/* ==========================================================================
   TYPOGRAPHY — headings, blockquote, emphasis
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--ss-text);
}

.blockquote-footer {
    color: var(--ss-text);
}

.first-letter::first-letter {
    color: var(--ss-text);
}

/* ==========================================================================
   BUTTONS — circle, square, more, wishlist
   ========================================================================== */

.btn-circle {
    background-color: var(--bs-tertiary-bg);
}

.btn-square {
    background-color: var(--ss-surface);
}

.btn-more {
    color: var(--ss-text);
}

.btn-wishlist.active .bookmark-filled path {
    fill: var(--ss-text);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.tabs .nav-tabs .nav-link.active {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.tabs .nav-tabs--type1 .nav-link.active {
    border-color: var(--ss-text);
    color: var(--ss-text);
}

.tabs--accordion .accordion-item .accordion-button[aria-expanded="true"] {
    border-color: var(--bs-primary);
}

.section-content-page .tabs .nav-tabs {
    border-color: var(--ss-text);
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */

.accordion .accordion-button:not(.collapsed) {
    background-color: var(--bs-tertiary-bg);
}

.accordion .accordion-body {
    background-color: var(--bs-tertiary-bg);
}

/* ==========================================================================
   HEADER SEARCH
   ========================================================================== */

.header-search .fields {
    background: var(--bs-tertiary-bg);
}

.header-search [type="submit"]:hover {
    background-color: var(--ss-text);
    color: var(--ss-surface);
}

.header-search [type="submit"]:hover svg path {
    fill: var(--ss-surface);
}

/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */

.dropdown-notifications .btn-circle .notification-active {
    background-color: var(--ss-accent);
    border-color: var(--ss-surface);
}

.dropdown-notifications .notifications-header ul button.active {
    color: var(--ss-text);
}

.dropdown-notifications .notifications-list {
    background-color: var(--bs-tertiary-bg);
}

.dropdown-notifications .notifications-list .notifications-item figure .item-status {
    border-color: var(--bs-tertiary-bg);
    background-color: var(--bs-secondary);
}

/* ==========================================================================
   USER CARDS — display-teaser, display-card, display-member
   ========================================================================== */

.user.display-teaser figure .icon {
    background-color: var(--bs-tertiary-bg);
}

.user.display-card .card figure .icon {
    background-color: var(--bs-tertiary-bg);
}

.user.display-card .card .position {
    background: var(--bs-body-bg);
}

.user.display-card .card.role-organisator .card-img-top {
    border-color: var(--ss-accent);
}

.user.display-card .card.role-admin .card-img-top::after,
.user.display-card .card.role-organisator .card-img-top::after {
    border-color: var(--ss-surface);
}

.user.display-member .position {
    background: var(--bs-body-bg);
}

/* ==========================================================================
   CARDS — date badge, image badges, small cards
   ========================================================================== */

.card .card-img-top .card-date {
    background-color: var(--ss-text);
    color: var(--ss-surface);
}

.card .card-img-top .card-date .reload svg path[stroke],
.card .card-img-top .card-date .reload svg circle[stroke] {
    stroke: var(--ss-surface);
}

.card-small a {
    color: var(--ss-text);
}

.card-small a p {
    color: var(--ss-text);
}

/* ==========================================================================
   IMAGE SLIDER
   ========================================================================== */

.image-slider .slider-date {
    background-color: var(--ss-text);
    color: var(--ss-surface);
}

/* ==========================================================================
   FILTER
   ========================================================================== */

.filter {
    background-color: var(--bs-tertiary-bg);
}

/* ==========================================================================
   CALENDAR LEGEND
   ========================================================================== */

.calendar-legend ul li:nth-child(1)::before {
    background-color: var(--ss-accent);
}

.calendar-legend ul li:nth-child(2)::before {
    background-color: var(--ss-border);
}

/* ==========================================================================
   WIZARD PROGRESS INDICATOR (step-count)
   Compiled CSS uses #10c348 (green) and #d8dee3 (grey).
   Figma design uses Color 4 (quaternary, #F0872E) for active steps.
   ========================================================================== */

.section-form .step-count span {
    background-color: var(--ss-border);
}

.section-form .step-count[data-step="1"] span:nth-child(1) {
    background-color: var(--ss-quaternary);
}

.section-form .step-count[data-step="2"] span:nth-child(1),
.section-form .step-count[data-step="2"] span:nth-child(2) {
    background-color: var(--ss-quaternary);
}

.section-form .step-count[data-step="3"] span:nth-child(1),
.section-form .step-count[data-step="3"] span:nth-child(2),
.section-form .step-count[data-step="3"] span:nth-child(3) {
    background-color: var(--ss-quaternary);
    box-shadow: 0 1px 7px 0 rgba(var(--ss-quaternary-rgb), 0.3);
}

.section-form .step-count[data-step="4"] span:nth-child(1),
.section-form .step-count[data-step="4"] span:nth-child(2),
.section-form .step-count[data-step="4"] span:nth-child(3),
.section-form .step-count[data-step="4"] span:nth-child(4) {
    background-color: var(--ss-quaternary);
    box-shadow: 0 1px 7px 0 rgba(var(--ss-quaternary-rgb), 0.3);
}

.section-form .step-count[data-step="5"] span {
    background-color: var(--ss-quaternary);
    box-shadow: 0 1px 7px 0 rgba(var(--ss-quaternary-rgb), 0.3);
}

.section-form .step-count[data-step="5"] span:last-child {
    background-color: var(--ss-border);
    box-shadow: none;
}

.section-form .step-count[data-step="6"] span {
    background-color: var(--ss-quaternary);
    box-shadow: 0 1px 7px 0 rgba(var(--ss-quaternary-rgb), 0.3);
}

/* ==========================================================================
   SECTION FORM — background
   ========================================================================== */

.section-form .form {
    background-color: var(--ss-surface);
}

/* ==========================================================================
   TERMS TABLE
   ========================================================================== */

.terms-table .members-list li {
    background-color: var(--bs-tertiary-bg);
}

.terms-table .members-list li span {
    color: var(--ss-text);
}

/* ==========================================================================
   BLOCKQUOTE WRAPPER
   ========================================================================== */

.blockquote-wrapper {
    background-color: var(--bs-tertiary-bg);
}

/* ==========================================================================
   MODALS / MAP / MISC
   ========================================================================== */

.modal .btn-close {
    background-color: var(--ss-surface);
}

.modal .actions button {
    background-color: var(--ss-surface);
}

.map-wrapper .btn-map-close {
    background-color: var(--ss-surface);
}

/* ==========================================================================
   CARD BACKGROUNDS (light theme)
   ========================================================================== */

[data-bs-theme="light"] .card {
    background-color: var(--ss-surface) !important;
}

/* ==========================================================================
   FASTSELECT plugin overrides (fastselect.min.css uses blue colors)
   !important needed: fastselect.min.css loads after this file
   ========================================================================== */

.fstResultItem.fstFocused {
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
    color: var(--ss-text) !important;
}

.fstResultItem.fstSelected {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--ss-surface) !important;
}

.fstChoiceItem {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--ss-surface) !important;
}

.fstControls {
    border-color: var(--ss-border) !important;
}

.fstResultItem {
    border-color: var(--ss-border) !important;
}