/* ==========================================================================
   Dark theme: primary used as a text colour

   The brand primary is a dark colour. The bundles use it as a text colour in
   many places (links, tabs, active menu items, outline buttons, pagination),
   and on the dark surfaces it can't be read. In dark mode those spots switch to
   a lightened primary; primary backgrounds such as filled buttons and the
   active tab keep the brand colour, since their text is already white.

   Loaded by the admin panel, the admin auth pages and the website, so every
   dark screen gets the same treatment. Light mode is untouched.
   ========================================================================== */

[data-bs-theme=dark] {
    --mh-primary-on-dark: color-mix(in srgb, var(--bs-primary) 45%, #ffffff);
}

/* --------------------------------------------------------------------------
   Links and text
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .text-primary,
[data-bs-theme=dark] .link-primary {
    color: var(--mh-primary-on-dark) !important;
}

[data-bs-theme=dark] .btn-link {
    --bs-btn-color: var(--mh-primary-on-dark);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    color: var(--mh-primary-on-dark);
}

[data-bs-theme=dark] .btn-link:hover,
[data-bs-theme=dark] .btn-link:focus {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Outline buttons: primary text and border on a transparent background
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: var(--mh-primary-on-dark);
    --bs-btn-border-color: var(--mh-primary-on-dark);
    --bs-btn-disabled-color: var(--mh-primary-on-dark);
    --bs-btn-disabled-border-color: var(--mh-primary-on-dark);
}

/* --------------------------------------------------------------------------
   Navs, tabs and pills: body text until active
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .nav {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--mh-primary-on-dark);
}

[data-bs-theme=dark] .nav-pills .nav-link:not(.active),
[data-bs-theme=dark] .setting-pills .nav-pills .nav-link:not(.active),
[data-bs-theme=dark] .nav-tabs .nav-item .nav-link:not(.active) {
    color: var(--bs-body-color);
}

[data-bs-theme=dark] .nav-pills .nav-link:not(.active):hover,
[data-bs-theme=dark] .nav-tabs .nav-item .nav-link:not(.active):hover {
    color: var(--mh-primary-on-dark);
}

[data-bs-theme=dark] .tab-nav-pane li .active,
[data-bs-theme=dark] .topnav-toolbar li.active a {
    color: var(--mh-primary-on-dark);
}

/* --------------------------------------------------------------------------
   Admin sidebar: active, open and hovered items
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active > a,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active .submenu li.active > a,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li.active-menu > a,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li a:hover,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li ul a:hover,
[data-bs-theme=dark] body:not(.sidebar-main) .sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded=true] {
    color: var(--mh-primary-on-dark);
}

[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active > a svg,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active .submenu li.active > a svg,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li a:hover svg {
    stroke: var(--mh-primary-on-dark);
}

/* The current page and its open parent: white, bold, on a light highlight */
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active > a,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li.active-menu > a,
[data-bs-theme=dark] body:not(.sidebar-main) .sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded=true] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 600;
}

[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu .submenu li.active {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: var(--bs-border-radius);
}

[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active .submenu li.active > a,
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu .submenu li.active > a {
    color: #ffffff;
    font-weight: 600;
}

/* Icons are drawn either with strokes or with fills, so each gets its own */
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active > a svg [stroke]:not([stroke=none]),
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li.active-menu > a svg [stroke]:not([stroke=none]),
[data-bs-theme=dark] body:not(.sidebar-main) .sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded=true] svg [stroke]:not([stroke=none]),
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu .submenu li.active svg [stroke]:not([stroke=none]) {
    stroke: #ffffff;
}

[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active > a svg [fill]:not([fill=none]),
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li.active-menu > a svg [fill]:not([fill=none]),
[data-bs-theme=dark] body:not(.sidebar-main) .sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded=true] svg [fill]:not([fill=none]),
[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu .submenu li.active svg [fill]:not([fill=none]) {
    fill: #ffffff;
}

[data-bs-theme=dark] .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu > li.active > a i,
[data-bs-theme=dark] body:not(.sidebar-main) .sidebar-default .iq-sidebar-menu .side-menu > li > a[aria-expanded=true] i {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Pagination, dropdowns, accordions, list groups
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .pagination {
    --bs-pagination-color: var(--mh-primary-on-dark);
    --bs-pagination-hover-color: #ffffff;
    --bs-pagination-focus-color: #ffffff;
}

[data-bs-theme=dark] .dropdown-menu {
    --bs-dropdown-link-hover-color: var(--mh-primary-on-dark);
    --bs-dropdown-link-active-color: #ffffff;
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item:hover {
    color: var(--mh-primary-on-dark);
}

[data-bs-theme=dark] .accordion {
    --bs-accordion-active-color: var(--mh-primary-on-dark);
}

/* --------------------------------------------------------------------------
   Smaller admin widgets
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] .profile-box .pro-content .p-icon,
[data-bs-theme=dark] .fc-unthemed .fc-toolbar .fc-button {
    color: var(--mh-primary-on-dark);
}

/* --------------------------------------------------------------------------
   Website: booking wizard steps, tabs, sub-menus and pagination
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] #top-tab-list li:not(.active) a,
[data-bs-theme=dark] .tab-bottom-bordered .nav-tabs .nav-link.active,
[data-bs-theme=dark] header .navbar .iq-nav-menu.navbar-nav li ul.sub-nav li a.nav-link.active,
[data-bs-theme=dark] header .navbar .iq-nav-menu.navbar-nav li ul.sub-nav li:hover > a.nav-link,
[data-bs-theme=dark] .iq-nav-menu .nav-item > .nav-link:hover,
[data-bs-theme=dark] .page-numbers li .page-numbers,
[data-bs-theme=dark] .btn.btn-border:hover {
    color: var(--mh-primary-on-dark);
}

/* --------------------------------------------------------------------------
   Every other rule in the bundles that paints text in the primary colour.
   :where() keeps each selector at the specificity of the rule it replaces,
   so a more specific rule (a filled button, a white footer link) still wins.
   -------------------------------------------------------------------------- */
[data-bs-theme=dark] {
    --bs-link-color: var(--mh-primary-on-dark);
    --bs-link-hover-color: #ffffff;
}

/* Website */
:where([data-bs-theme=dark]) a,
:where([data-bs-theme=dark]) .service-accordian .accrodion-title .icon-accrodion.icon-inactive,
:where([data-bs-theme=dark]) #top-tab-list li.active a .iq-icon,
:where([data-bs-theme=dark]) .tab-bottom-bordered.tab-border-botton-style-2 .nav-tabs .nav-link.active,
:where([data-bs-theme=dark]) .iq-nav-menu li.active > a,
:where([data-bs-theme=dark]) .iq-nav-menu li .nav-link.active,
:where([data-bs-theme=dark]) .iq-nav-menu li.active,
:where([data-bs-theme=dark]) .iq-nav-menu li a:not(.collapsed)[aria-expanded=true],
:where([data-bs-theme=dark]) header .navbar .right-panel .navbar-nav .nav-item .nav-link:hover,
:where([data-bs-theme=dark]) .iq-font-style button .iq-heading-text,
:where([data-bs-theme=dark]) .popular-service-list .popular-service-text:hover,
:where([data-bs-theme=dark]) .swiper-button-next,
:where([data-bs-theme=dark]) .swiper-button-prev,
:where([data-bs-theme=dark]) .ratingSlider .swiper-button-next,
:where([data-bs-theme=dark]) .ratingSlider .swiper-button-prev,
:where([data-bs-theme=dark]) .btn-check:checked + .btn.btn-border.bg-transparent,
:where([data-bs-theme=dark]) .btn.btn-border.active.bg-transparent,
:where([data-bs-theme=dark]) .btn.btn-border:active.bg-transparent,
:where([data-bs-theme=dark]) .bd-aside .active,
:where([data-bs-theme=dark]) .bd-aside .btn:focus,
:where([data-bs-theme=dark]) .bd-aside .btn:hover,
:where([data-bs-theme=dark]) .ratting .fa-stack,
:where([data-bs-theme=dark]) .iq-blog .iq-post-details .blog-title:hover h5,
:where([data-bs-theme=dark]) .iq-blog .iq-post-details .author-block span:hover,
:where([data-bs-theme=dark]) .iq-blog .iq-btn-container .btn-link:hover,
:where([data-bs-theme=dark]) .iq-blogcat.active a,
:where([data-bs-theme=dark]) .iq-blogcat:hover a,
:where([data-bs-theme=dark]) .social-share a:hover,
:where([data-bs-theme=dark]) .iq-footer-catogery-list li a:hover,
:where([data-bs-theme=dark]) .iq-social-list-text li a:hover,
:where([data-bs-theme=dark]) .categories-list li:hover a,
:where([data-bs-theme=dark]) .category-box-list ul li svg,
:where([data-bs-theme=dark]) .category-tab-list .nav-tabs .nav-link.active,
:where([data-bs-theme=dark]) .category-tab-list .nav-tabs .nav-link:hover,
:where([data-bs-theme=dark]) .iq-team .provider-info a:hover .provider-heading,
:where([data-bs-theme=dark]) .service-box-card a.service-heading:hover .service-title,
:where([data-bs-theme=dark]) .iq-title-box .highlighted-text .highlighted-image svg,
:where([data-bs-theme=dark]) .iq-breadcrumb .breadcrumb-item.active,
:where([data-bs-theme=dark]) .status-timeline .status-timeline-wrapper .timline-border .icon-fill,
:where([data-bs-theme=dark]) .status-timeline li.active .status-timeline-wrapper .timline-border .icon-outline,
:where([data-bs-theme=dark]) .bh-card-header i,
:where([data-bs-theme=dark]) #radius-label {
    color: var(--mh-primary-on-dark);
}

/* Admin panel */
:where([data-bs-theme=dark]) .text-primary-emphasis,
:where([data-bs-theme=dark]) .bg-primary-subtle,
:where([data-bs-theme=dark]) .calender-small .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
:where([data-bs-theme=dark]) .calender-small .flatpickr-day.inRange,
:where([data-bs-theme=dark]) .calender-small .flatpickr-day.today.inRange,
:where([data-bs-theme=dark]) .calender-small .flatpickr-day:focus,
:where([data-bs-theme=dark]) .calender-small .flatpickr-day:hover,
:where([data-bs-theme=dark]) .dropdown-menu-1 .dropdown-item-1:hover h6,
:where([data-bs-theme=dark]) .dropdown-menu-1 .dropdown-item-1:hover .h6,
:where([data-bs-theme=dark]) .iq-footer ul li a:hover,
:where([data-bs-theme=dark]) .menu-horizontal .iq-sidebar-menu .side-menu li a:hover,
:where([data-bs-theme=dark]) .menu-horizontal .iq-sidebar-menu .side-menu > li:hover > a,
:where([data-bs-theme=dark]) .tab-nav-pane li a:hover,
:where([data-bs-theme=dark]) .nav-pills .nav-link.active,
:where([data-bs-theme=dark]) .nav-pills .show > .nav-link,
:where([data-bs-theme=dark]) .iq-sidebar .iq-sidebar-logo a span,
:where([data-bs-theme=dark]) .iq-sidebar.sidebar-default .iq-sidebar-menu .side-menu li a[aria-expanded=true],
:where([data-bs-theme=dark]) .countdown li span,
:where([data-bs-theme=dark]) .iq-saidbar-primary .wrapper-menu,
:where([data-bs-theme=dark]) .common-list li,
:where([data-bs-theme=dark]) .header-style-1.iq-top-navbar .iq-sidebar-logo .wrapper-menu,
:where([data-bs-theme=dark]) .hospi-wrapper .navbar-list li > a i,
:where([data-bs-theme=dark]) .th-line,
:where([data-bs-theme=dark]) .provider-details-overview__statistics .statistics-card__order-overview h2,
:where([data-bs-theme=dark]) .provider-details-overview__statistics .statistics-card__order-overview .h2,
:where([data-bs-theme=dark]) .helpdesk-details-overview__statistics .statistics-card__order-overview h2,
:where([data-bs-theme=dark]) .helpdesk-details-overview__statistics .statistics-card__order-overview .h2,
:where([data-bs-theme=dark]) .business-summary h2,
:where([data-bs-theme=dark]) .business-summary .h2,
:where([data-bs-theme=dark]) .statistics-card h2,
:where([data-bs-theme=dark]) .statistics-card .h2,
:where([data-bs-theme=dark]) .service-man-list__item_header .service-man-name,
:where([data-bs-theme=dark]) .rating-review__out-of {
    color: var(--mh-primary-on-dark);
}

/* --------------------------------------------------------------------------
   Logo: the uploaded logo in light mode, the dark-background copy in dark
   mode (see partials/_themed_logo.blade.php). The website footer is navy in
   both themes, so it always takes the dark copy.
   -------------------------------------------------------------------------- */
.logo-for-dark {
    display: none !important;
}

[data-bs-theme=dark] .logo-for-light,
.landing-refresh-footer .logo-for-light {
    display: none !important;
}

[data-bs-theme=dark] .logo-for-dark,
.landing-refresh-footer .logo-for-dark {
    display: inline-block !important;
}