/* Dofla Land: load after Aquiry bootstrap.min.css and app.min.css. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-primary: #1768b2;
    --bs-primary-rgb: 23, 104, 178;
    --bs-focus-ring-color: rgba(23, 104, 178, .25);
}

:root,
[data-bs-theme=light] {
    --bs-primary-text-emphasis: #0e3e6b;
    --bs-primary-bg-subtle: #d1e1f0;
    --bs-primary-border-subtle: #a2c3e0;
    --bs-link-color: #1768b2;
    --bs-link-color-rgb: 23, 104, 178;
    --bs-link-hover-color: #125590;
    --bs-link-hover-color-rgb: 18, 85, 144;
}

[data-bs-theme=dark] {
    --bs-primary-text-emphasis: #74a4d1;
    --bs-primary-bg-subtle: #051524;
    --bs-primary-border-subtle: #0e3e6b;
    --bs-link-color: #74a4d1;
    --bs-link-color-rgb: 116, 164, 209;
    --bs-link-hover-color: #90b6da;
    --bs-link-hover-color-rgb: 144, 182, 218;
}

.btn-primary {
    --bs-btn-hover-bg: #125590;
    --bs-btn-hover-border-color: #125590;
    --bs-btn-active-bg: #104a7d;
    --bs-btn-active-border-color: #104a7d;
}

.btn-primary,
.btn-outline-primary {
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* These template rules use literal colors rather than primary variables. */
::selection,
.form-check.sidebar-setting.card-radio input[value=default] + label,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--bs-primary);
}

[data-topbar-color=dark] #page-topbar .app-search .form-control:focus,
.table.table-primary {
    border-color: var(--bs-primary);
}

.table-primary {
    --bs-table-bg: #d1e1f0;
    --bs-table-border-color: #bccbd8;
    --bs-table-striped-bg: #cbdae9;
    --bs-table-active-bg: #bccbd8;
    --bs-table-hover-bg: #c1d0de;
}

.icon-demo-content .col-lg-4:hover i {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.waves-effect.waves-primary .waves-ripple {
    background-color: rgba(var(--bs-primary-rgb), .4);
}

.context-menu-item.context-menu-hover,
.context-menu-item.context-menu-hover::before {
    color: var(--bs-primary) !important;
}

.toast-primary {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), .8) !important;
}

.daterangepicker td.in-range {
    background-color: rgba(var(--bs-primary-rgb), .1);
}

.daterangepicker td.in-range:hover {
    background-color: rgba(var(--bs-primary-rgb), .15);
}

.accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e3e6b'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%230e3e6b' stroke-width='1.5'/%3E%3C/svg%3E");
}

[data-bs-theme=dark] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%2374a4d1' stroke-width='1.5'/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

/* Collapsed sidebar (small/medium) pushes #sidebar-btn to right: -50px, which
   overlaps the clock/date block in .menu-sm. Push only that block over so the
   right-aligned icons/avatar group (sharing the same flex row) stays put. */
[data-sidebar=small] .menu-sm .navbar-datetime,
[data-sidebar=medium] .menu-sm .navbar-datetime {
    margin-left: 4.5rem;
}

/* Vendor CSS subtracts an extra 3.5rem from .menu-sm's width in collapsed
   sidebar modes (on top of the sidebar's own width) with no matching element
   to fill that space, so it just leaves .menu-sm 56px short of the true right
   edge. That drags the right-aligned icon/avatar group left with it. The
   normal (expanded) sidebar has no such extra subtraction, so match that. */
[data-sidebar=small] .menu-sm {
    width: calc(100% - var(--bs-sidebar-collapsed-width)) !important;
}
[data-sidebar=medium] .menu-sm {
    width: calc(100% - var(--bs-sidebar-medium-width)) !important;
}

/* Mobile: .navbar-logo-box is narrowed to the medium-sidebar width, but
   #sidebar-btn keeps its desktop `right` offset (15px, or -50px once a
   collapsed state is toggled). Both leave a dead gap between the small logo
   icon and the toggle button. Pin it right after the logo instead. */
@media (max-width: 767.98px) {
    #page-topbar .navbar-header .navbar-logo-box #sidebar-btn {
        left: 3.25rem !important;
        right: auto !important;
    }
}