@import url("/assets/portal-contrast-fixes.css?v=1");
@import url("/assets/return-bulk-scanner.css?v=1");

/* Shared admin and merchant portal header theme. */
.topbar {
    background: linear-gradient(45deg, #ce0515, #3a0303) !important;
    border-bottom-color: #3a0303 !important;
}

@media (max-width: 980px) {
    /* Compact mobile header: menu, page context and profile only. */
    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 78px !important;
        padding: 10px 14px !important;
    }

    .topbar-title {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100%;
        min-width: 0;
        padding: 0 !important;
    }

    .menu-button {
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        align-items: center;
        justify-content: center;
        border-color: rgba(255, 255, 255, .38) !important;
        border-radius: 9px !important;
        color: #fff !important;
        background: rgba(255, 255, 255, .08) !important;
        font-size: 21px !important;
        line-height: 1;
    }

    .topbar-title > div {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .topbar h1 {
        order: 0;
        margin: 0;
        overflow: hidden;
        color: #fff !important;
        font-size: 20px !important;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-title .muted {
        order: 1;
        max-width: calc(100vw - 132px);
        margin: 3px 0 0;
        overflow: hidden;
        color: rgba(255, 255, 255, .82) !important;
        font-size: 11px;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar-actions {
        position: relative;
        display: flex !important;
        width: auto !important;
        flex: 0 0 auto;
        align-items: center;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .topbar-actions::before {
        display: none !important;
        content: none !important;
    }

    .topbar-profile-menu,
    .topbar-profile-menu summary {
        width: auto !important;
    }

    .topbar-profile-menu summary {
        min-height: 44px !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .topbar-profile-copy {
        display: none !important;
    }

    .topbar-profile-avatar {
        display: grid;
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        place-items: center;
        border: 2px solid rgba(255, 255, 255, .72) !important;
        border-radius: 50%;
        color: #ce0515 !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    }

    .topbar-profile-avatar .nav-icon {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
        color: #ce0515 !important;
        background: transparent !important;
    }

    .topbar-profile-dropdown {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: 190px !important;
    }

    /* Admin role badge uses the same compact profile treatment. */
    .topbar-actions > .badge {
        position: relative;
        display: grid !important;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px;
        place-items: center;
        padding: 0 !important;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, .72);
        border-radius: 50% !important;
        color: transparent !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
        font-size: 0 !important;
    }

    .topbar-actions > .badge::before {
        width: 21px;
        height: 21px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce0515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        content: "";
    }
}

@media (max-width: 560px) {
    .topbar {
        min-height: 72px !important;
        gap: 9px !important;
        padding: 8px 10px !important;
    }

    .topbar-title {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .menu-button {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        font-size: 19px !important;
    }

    .topbar-title .muted {
        max-width: calc(100vw - 112px);
        font-size: 10px;
    }

    .topbar h1 {
        font-size: 17px !important;
    }

    .topbar-profile-avatar,
    .topbar-actions > .badge {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex-basis: 40px !important;
    }
}