/*
 * Shoprite branding (SS-303).
 * The active menu item is Shoprite red on every page. Pages with
 * <body class="sr-brand"> (the candidate, user and my profile pages, profile
 * settings and the vacancy page) get the activity log's look: red as the main
 * colour, and a slate header with red glows and a red edge.
 * Built on the theme's own variables, so it follows light and dark mode.
 */

/* ------------------------------------------------------------------ */
/* Menu: the active and hovered item in Shoprite red                  */
/* ------------------------------------------------------------------ */

[data-sidebar="light"] {
    --vz-vertical-menu-item-bg: rgba(213, 0, 25, 0.08);
    --vz-vertical-menu-item-hover-color: #d50019;
    --vz-vertical-menu-item-active-color: #d50019;
    --vz-vertical-menu-item-active-bg: rgba(213, 0, 25, 0.08);
    --vz-vertical-menu-sub-item-hover-color: #d50019;
    --vz-vertical-menu-sub-item-active-color: #d50019;
}

/* In dark mode the menu turns dark too, in the template's own dark menu
   colours, with the white logo */
[data-bs-theme="dark"][data-sidebar="light"] {
    --vz-vertical-menu-bg: #24292d;
    --vz-vertical-menu-border: #212529;
    --vz-vertical-menu-item-color: #8f93a3;
    --vz-vertical-menu-item-bg: rgba(255, 77, 99, 0.14);
    --vz-vertical-menu-item-hover-color: #ff6b7e;
    --vz-vertical-menu-item-active-color: #ff6b7e;
    --vz-vertical-menu-item-active-bg: rgba(255, 77, 99, 0.14);
    --vz-vertical-menu-sub-item-color: #8f93a3;
    --vz-vertical-menu-sub-item-hover-color: #ff6b7e;
    --vz-vertical-menu-sub-item-active-color: #ff6b7e;
    --vz-vertical-menu-title-color: #6c707e;
    --vz-twocolumn-menu-iconview-bg: #272b30;
}

[data-bs-theme="dark"][data-sidebar="light"] .navbar-brand-box .logo-dark {
    display: none;
}

[data-bs-theme="dark"][data-sidebar="light"] .navbar-brand-box .logo-light {
    display: block;
}

/* ------------------------------------------------------------------ */
/* Branded pages: Shoprite red as the main colour                      */
/* ------------------------------------------------------------------ */

.sr-brand {
    --vz-primary: #d50019;
    --vz-primary-rgb: 213, 0, 25;
    --vz-primary-bg-subtle: #fbe5e8;
    --vz-primary-border-subtle: #f3b3bb;
    --vz-primary-text-emphasis: #a30013;
    --vz-link-color: #d50019;
    --vz-link-color-rgb: 213, 0, 25;
    --vz-link-hover-color: #a30013;
    --vz-link-hover-color-rgb: 163, 0, 19;
    /* The template's indigo second colour becomes Shoprite slate */
    --vz-secondary: #333b46;
    --vz-secondary-rgb: 51, 59, 70;
    --vz-secondary-bg-subtle: #e8eaed;
    --vz-secondary-border-subtle: #c3c7cd;
    --vz-secondary-text-emphasis: #262c34;
}

[data-bs-theme="dark"] .sr-brand {
    --vz-secondary: #5f6977;
    --vz-secondary-rgb: 95, 105, 119;
    --vz-secondary-bg-subtle: rgba(95, 105, 119, 0.2);
    --vz-secondary-border-subtle: rgba(95, 105, 119, 0.45);
    --vz-secondary-text-emphasis: #aab2bd;
    --vz-primary: #ff4d63;
    --vz-primary-rgb: 255, 77, 99;
    --vz-primary-bg-subtle: rgba(255, 77, 99, 0.16);
    --vz-primary-border-subtle: rgba(255, 77, 99, 0.4);
    --vz-primary-text-emphasis: #ff8796;
    --vz-link-color: #ff6b7e;
    --vz-link-color-rgb: 255, 107, 126;
    --vz-link-hover-color: #ff97a4;
    --vz-link-hover-color-rgb: 255, 151, 164;
}

/* The theme sets these in blue directly rather than through its variables */
.sr-brand .text-primary,
.sr-brand .link-primary {
    color: var(--vz-primary) !important;
}

.sr-brand .bg-primary {
    background-color: var(--vz-primary) !important;
}

.sr-brand .bg-secondary {
    background-color: var(--vz-secondary) !important;
}

.sr-brand .border-primary {
    border-color: var(--vz-primary) !important;
}

.sr-brand .form-check-input:checked {
    background-color: var(--vz-primary);
    border-color: var(--vz-primary);
}

.sr-brand .form-control:focus,
.sr-brand .form-select:focus {
    border-color: rgba(var(--vz-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.15rem rgba(var(--vz-primary-rgb), 0.15);
}

.sr-brand .animation-nav li a::before {
    background-color: var(--vz-primary);
}

.sr-brand .nav-tabs .nav-link.active,
.sr-brand .nav-tabs-custom .nav-link.active,
.sr-brand .nav-tabs-custom .nav-item .nav-link.active {
    color: var(--vz-primary);
}

.sr-brand .nav-tabs-custom .nav-item .nav-link::after,
.sr-brand .nav-tabs-custom .nav-link.active::after {
    background: var(--vz-primary);
}

/* The percentage over a progress bar, in slate beside its own colour */
.sr-brand .progress-label .progress-bar .label {
    background-color: var(--vz-secondary);
}

.sr-brand .progress-label .progress-bar .label::after {
    border-top-color: var(--vz-secondary);
}

/* Date pickers open at the end of the page, still inside the body */
.sr-brand .flatpickr-day.selected,
.sr-brand .flatpickr-day.startRange,
.sr-brand .flatpickr-day.endRange,
.sr-brand .flatpickr-day.selected:hover,
.sr-brand .flatpickr-day.startRange:hover,
.sr-brand .flatpickr-day.endRange:hover {
    background: var(--vz-primary);
    border-color: var(--vz-primary);
}

/* ------------------------------------------------------------------ */
/* Headers: slate with Shoprite red glows and a red edge               */
/* ------------------------------------------------------------------ */

.sr-brand .profile-wid-bg,
.sr-hero {
    border-bottom: 4px solid #d50019;
}

.sr-brand .profile-wid-bg::before,
.sr-hero {
    background:
        radial-gradient(760px 300px at 92% -25%, rgba(213, 0, 25, 0.42), transparent 62%),
        radial-gradient(520px 240px at -8% 125%, rgba(213, 0, 25, 0.22), transparent 60%),
        linear-gradient(135deg, #262c34 0%, #333b46 55%, #3f4855 100%);
}

/* The profile picture still shows through the overlay, in grey so it takes
   on the slate and red instead of tinting them blue. The filter gives the
   picture a layer of its own, so the overlay is lifted back above it. */
.sr-brand .profile-wid-bg {
    isolation: isolate;
}

.sr-brand .profile-wid-bg::before {
    z-index: 1;
}

.sr-brand .profile-wid-bg .profile-wid-img {
    filter: grayscale(1);
}

.sr-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent);
}

/* Profile tabs on the header: a light tint on hover, and the open tab in a
   soft red with a red underline */
.sr-brand .profile-nav.nav-pills .nav-link::before {
    background-color: rgba(255, 255, 255, 0.1);
}

.sr-brand .profile-nav.nav-pills .nav-link.active::before {
    background-color: rgba(213, 0, 25, 0.3);
}

.sr-brand .profile-nav.nav-pills .nav-link.active {
    box-shadow: inset 0 -2px 0 #d50019;
}

/* The vacancy page header */
.sr-hero {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
}

.sr-hero > .card-body {
    position: relative;
    z-index: 1;
}

.sr-hero h4,
.sr-hero .fw-semibold {
    color: #fff;
}

.sr-hero .vr {
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
}

.sr-hero .btn-ghost-primary {
    --vz-btn-color: #fff;
    --vz-btn-hover-color: #fff;
    --vz-btn-hover-bg: rgba(255, 255, 255, 0.14);
    --vz-btn-active-color: #fff;
    --vz-btn-active-bg: rgba(255, 255, 255, 0.2);
}