/*
 * Brand layer: Talmatch. Everything that differs per brand in the look of the app:
 * colors, logo sizes, backgrounds. Loaded after style.bundle.css and cvliiber.css.
 * External pages use the shared .page-bg background.
 */

/* Brand colors — single source of truth */
:root,
html[data-theme=light],
html[data-theme=dark] {
    --bs-primary: #3E97FF;
    --bs-primary-rgb: 62, 151, 255;
    --kt-primary: #3E97FF;
    --kt-primary-rgb: 62, 151, 255;
    --bs-link-color: #3E97FF;
    --bs-link-hover-color: #2884EF;
}

/* link-primary is hardcoded !important in the bundle — must override here */
.link-primary { color: #3E97FF !important; }
.link-primary:hover { color: #2884EF !important; }

/* IntroJS onboarding tour */
.introjs-tooltip {
    background-color: var(--kt-primary) !important;
    color: #ffffff !important;
    min-width: 350px;
    max-width: 350px;
}

.introjs-tooltip .introjs-tooltip-title {
    color: #ffffff !important;
}

.introjs-tooltiptext {
    font-size: 1.2em;
}

.introjs-skipbutton {
    color: #ffffff !important;
}

.introjs-arrow {
    border-bottom-color: var(--kt-primary) !important;
}

/* Logo sizes (classes used by the shared templates) */
.brand-logo-sidebar { height: 35px; width: auto; }
.brand-logo-header { height: 20px; width: auto; }
@media (min-width: 992px) { .brand-logo-header { height: 35px; } }
.brand-logo-auth { height: 70px; width: auto; }
.brand-logo-page { height: 70px; width: auto; }
.brand-logo-register { height: 70px; width: auto; }
.brand-logo-modal { height: 60px; width: auto; }
.brand-logo-header-wrap { margin-right: 1rem; }
@media (min-width: 992px) { .brand-logo-header-wrap { margin-right: 2rem; } }