/*
 * Daily Bread — brand theme override.
 * Loaded after app.min.css / vendors.min.css so these variables win the cascade.
 * Primary   #818E56 (olive) — buttons, links, active nav, charts, accents
 * Secondary #F8F6F1 (cream) — sidebar/topbar/body surface tone
 *
 * The template ships a skin + light/dark menu-color switcher that can flip
 * these surfaces back to its own defaults from a stored browser preference
 * (sessionStorage), so the sidebar/topbar colors below are forced with
 * !important rather than only through the CSS variables — that keeps the
 * brand look fixed regardless of switcher state.
 */

:root,
html[data-skin] {
    --theme-primary: #818E56;
    --theme-primary-rgb: 129, 142, 86;
    --theme-primary-bg-subtle: rgba(129, 142, 86, 0.15);
    --theme-primary-border-subtle: rgba(129, 142, 86, 0.3);
    --theme-primary-text-emphasis: #545c38;

    --theme-chart-primary: #818E56;
    --theme-chart-primary-rgb: 129, 142, 86;

    --theme-body-bg: #F8F6F1;
}

html[data-bs-theme=dark] {
    --theme-primary: #97a36c;
    --theme-primary-rgb: 151, 163, 108;

    --theme-body-bg: #17181e;
}

/* ---- Dark mode: sidebar/topbar surfaces (light-mode block above is
 * unaffected — everything here is scoped under [data-bs-theme=dark]) ---- */

html[data-bs-theme=dark] .sidenav-menu,
html[data-bs-theme=dark] .sidenav-menu .logo,
html[data-bs-theme=dark] .app-topbar {
    background-color: #1e1f27 !important;
    background-image: none !important;
    border-color: #2c2d38 !important;
}

html[data-bs-theme=dark] .side-nav-link {
    color: #8495ab !important;
}

html[data-bs-theme=dark] .side-nav-link:hover,
html[data-bs-theme=dark] .side-nav-item.active>.side-nav-link,
html[data-bs-theme=dark] .side-nav-link.active,
html[data-bs-theme=dark] .side-nav>.side-nav-item.active>.side-nav-link {
    color: #ced6df !important;
    background-color: rgba(151, 163, 108, 0.15) !important;
}

html[data-bs-theme=dark] .side-nav-title {
    color: #5b6472 !important;
}

html[data-bs-theme=dark] .sidenav-user {
    background-color: rgba(151, 163, 108, 0.08) !important;
    background-image: none !important;
}

html[data-bs-theme=dark] .sidenav-user-name {
    color: #e8ecef !important;
}

html[data-bs-theme=dark] .topbar-link {
    color: #adb5bf !important;
}

html[data-bs-theme=dark] .brand-wordmark {
    color: #e8ecef !important;
}

html[data-bs-theme=dark] .auth-box {
    background-color: #1e1f27 !important;
}

/* ---- Sidebar + topbar surfaces, forced regardless of switcher state ---- */

.sidenav-menu,
.sidenav-menu .logo,
.app-topbar {
    background-color: #F8F6F1 !important;
    background-image: none !important;
    border-color: rgba(129, 142, 86, 0.15) !important;
}

.side-nav-link {
    color: #565f45 !important;
}

/* The 4th selector below is NOT redundant with the 2nd — it exists to beat
 * app.min.css's `.side-nav > .side-nav-item.active > a` rule, which is also
 * !important and has higher specificity (0,0,3,1) vs the 2nd selector alone
 * (0,0,3,0). Without it, the active link falls back to a pale dark-skin
 * text color that's nearly invisible against this file's light sidebar
 * background — do not remove it as "duplicate."
 */
.side-nav-link:hover,
.side-nav-item.active>.side-nav-link,
.side-nav-link.active,
.side-nav>.side-nav-item.active>.side-nav-link {
    color: #545c38 !important;
    background-color: rgba(129, 142, 86, 0.12) !important;
}

.side-nav-title {
    color: #9aa389 !important;
}

.sidenav-user {
    background-color: rgba(129, 142, 86, 0.08) !important;
    background-image: none !important;
}

.sidenav-user-name {
    color: #3d4230 !important;
}

.topbar-link {
    color: #565f45 !important;
}

/* ---- Brand wordmark (used next to the icon in the topbar/sidebar) ---- */

.brand-wordmark {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: #3d4230;
    white-space: nowrap;
}

.logo-topbar .logo-lg img,
.sidenav-menu .logo .logo-lg img {
    height: 180px;
    width: 100%;
}

.logo-topbar .logo-sm img,
.sidenav-menu .logo .logo-sm img {
    height: 32px;
    width: auto;
}

/* Mobile topbar brand: the vendor's own responsive rule
 * (`.logo-topbar span.logo-lg{display:none}` below 767.98px) loses to the
 * `d-flex` utility class on that same span in header.blade.php, since
 * Bootstrap utilities carry !important and the vendor rule doesn't. Without
 * this, the full 180px logo+wordmark stays visible on phones and overlaps
 * the page title/greeting card below it. Match specificity with !important
 * so the compact mark reliably wins on small screens. */
@media (max-width: 767.98px) {
    .logo-topbar .logo-lg {
        display: none !important;
    }

    .logo-topbar .logo-sm {
        display: flex !important;
        align-items: center;
    }
}

/* Collapsed / icon-rail sidebar (both the "condensed" toggle and the
 * "on-hover" toggle when not being hovered): the vendor's own on-hover
 * rule sets .logo's text-align to "start" (left) — correct for its
 * hover-expanded state, but it also applies while collapsed and not
 * hovering, which is why the compact mark wasn't centered. Force
 * centering and make the logo-lg/logo-sm swap unconditional with
 * !important, so it can't lose to any vendor specificity/hover-state
 * edge case. */
html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .logo {
    text-align: center;
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .logo .logo-lg,
html[data-sidenav-size=condensed] .sidenav-menu .logo .logo-lg {
    display: none !important;
}

html[data-sidenav-size=on-hover] .sidenav-menu:not(:hover) .logo .logo-sm,
html[data-sidenav-size=condensed] .sidenav-menu .logo .logo-sm {
    display: block !important;
}

/* ---- Dashboard mini calendar widget ---- */

.dashboard-calendar td {
    padding: 4px 2px;
}

.dashboard-calendar .calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.dashboard-calendar .calendar-day.is-today {
    background-color: #818E56;
    color: #fff;
    font-weight: 700;
}

/* ---- Auth pages (login / forgot / reset password) ---- */

.auth-box {
    background-color: #F8F6F1 !important;
}

.auth-brand img {
    height: 96px;
    width: auto;
}