:root {
    --highdmin-logo-lg-height: 40px;
    --certisfy-logo-max-height: 64px;
}

/* Certisfy branding logo sizing */
.logo-lg img,
.logo-sm img,
.auth-brand img,
.layout-logo,
.auth-logo {
    display: block;
    height: auto;
    max-height: var(--certisfy-logo-max-height);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    :root {
        --certisfy-logo-max-height: 52px;
    }
}

@media (max-width: 576px) {
    :root {
        --certisfy-logo-max-height: 44px;
    }
}

body {
    background-color: var(--highdmin-body-bg, #f5f6f8);
    background-image: url("../images/agrinbk_bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.auth-bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

@media (max-width: 992px) {
    .auth-bg {
        background-attachment: scroll;
        background-position: top center;
        background-image: url("../images/agrinbk_.jpg");
    }

    body {
        background-color: var(--highdmin-body-bg, #f5f6f8);
        background-attachment: scroll;
        background-position: top center;
        background-image: url("../images/agrinbk_.jpg");
    }
}

@media (max-width: 576px) {
    .auth-bg {
        background-position: top right;
    }

    body {
        background-position: top right;
    }
}

/* =============================================================
   Global dark-mode overrides
   These fill the gaps where the template's app.min.css does not
   remap its --highdmin-light-rgb / --highdmin-white-rgb variables
   inside [data-bs-theme=dark], causing bg-light / bg-white / text-dark
   to render as hardcoded light values on every page.
   ============================================================= */

/* bg-light → tertiary dark surface */
[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .bg-light-subtle {
    background-color: var(--highdmin-tertiary-bg, #404954) !important;
}

/* bg-white → card-level dark surface */
[data-bs-theme=dark] .bg-white {
    background-color: var(--highdmin-secondary-bg, #1e1f27) !important;
}

/* text-dark → light body colour for dark backgrounds */
[data-bs-theme=dark] .text-dark {
    color: var(--highdmin-body-color, #aab8c5) !important;
}

/* Badges that combine bg-light + text-dark */
[data-bs-theme=dark] .badge.bg-light {
    background-color: var(--highdmin-tertiary-bg, #404954) !important;
    color: var(--highdmin-body-color, #aab8c5) !important;
}

/* Card headers — give a subtle raised tint above the card surface */
[data-bs-theme=dark] .card-header {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-bottom-color: var(--highdmin-border-color, #37394d) !important;
}

/* Loading / translucent overlays */
[data-bs-theme=dark] .bg-white.bg-opacity-75 {
    background-color: rgba(23, 24, 30, 0.85) !important;
}

/* Hover states that use hardcoded light greys */
[data-bs-theme=dark] .payment-option-card:hover,
[data-bs-theme=dark] #upload-drop-zone:hover,
[data-bs-theme=dark] .status-card-clickable:hover {
    background-color: var(--highdmin-tertiary-bg, #404954) !important;
}

/* Market Intelligence — ineligible grid row tint and skeleton shimmer */
[data-bs-theme=dark] .mi-grid-row-ineligible td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme=dark] .mi-skeleton-row {
    background: linear-gradient(
        90deg,
        var(--highdmin-tertiary-bg, #404954) 25%,
        rgba(255, 255, 255, 0.06) 37%,
        var(--highdmin-tertiary-bg, #404954) 63%
    ) !important;
    background-size: 400% 100% !important;
}

/* Generic <pre> code blocks */
[data-bs-theme=dark] pre.bg-light {
    background-color: var(--highdmin-tertiary-bg, #404954) !important;
    color: var(--highdmin-body-color, #aab8c5) !important;
}

/* Sidenav: flex layout so flag docks at bottom of sidebar */
/* Topbar depth shadow — casts downward onto the content area */
.app-topbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Sidenav depth shadow — casts rightward onto the content area */
.sidenav-menu {
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.06), 2px 0 4px rgba(0, 0, 0, 0.04) !important;
}

.sidenav-menu [data-simplebar] {
    flex: 1 1 0;
    min-height: 0;
}

/* Sidenav system country flag & hover toggle: docked at bottom of left menu */
.sidenav-menu .sidenav-flag-wrapper {
    flex-shrink: 0;
    margin: 0 15px 15px 15px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidenav-flag-wrapper .sidenav-flag-img {
    display: block;
    max-width: 100%;
    width: auto;
    height: 28px;
    object-fit: contain;
}

@media (max-width: 992px) {
    .sidenav-flag-wrapper .sidenav-flag-img {
        height: 24px;
    }
}

@media (max-width: 576px) {
    .sidenav-flag-wrapper .sidenav-flag-img {
        height: 20px;
    }
}

/* Sidebar hover toggle button aligned with flag at bottom-right */
.sidenav-flag-wrapper .button-sm-hover {
    position: static;
    margin-left: auto;
    line-height: 1;
    padding: 6px;
    border-radius: 999px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.sidenav-flag-wrapper .button-sm-hover i {
    font-size: 1.2rem;
}